@rarui/styles 1.32.0 → 1.32.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -4140,6 +4140,42 @@ declare const backgroundColorProperties: {
4140
4140
  "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4141
4141
  "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4142
4142
  };
4143
+ declare const boxFillProperties: {
4144
+ currentColor: string;
4145
+ transparent: string;
4146
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4147
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4148
+ "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4149
+ "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4150
+ "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4151
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4152
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4153
+ "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4154
+ "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4155
+ "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4156
+ hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4157
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4158
+ "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4159
+ "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4160
+ "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4161
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4162
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4163
+ "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4164
+ "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4165
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4166
+ overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4167
+ press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4168
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4169
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4170
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4171
+ "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4172
+ "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4173
+ "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4174
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4175
+ "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4176
+ "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4177
+ "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4178
+ };
4143
4179
  export interface BoxConditions<T> extends Conditions<T> {
4144
4180
  focus?: T;
4145
4181
  focusWithin?: T;
@@ -4166,6 +4202,10 @@ export interface BoxSprinkle extends BoxDynamicProperties {
4166
4202
  * The color property is used to set the color of the box.
4167
4203
  */
4168
4204
  color?: AddDollar<keyof typeof colorProperties> | BoxConditions<AddDollar<keyof typeof colorProperties>>;
4205
+ /**
4206
+ * The fill color property is used to set the color of the box.
4207
+ */
4208
+ fill?: AddDollar<keyof typeof boxFillProperties> | BoxConditions<AddDollar<keyof typeof boxFillProperties>>;
4169
4209
  /**
4170
4210
  * The borderRadius property rounds the corners of an box's outer border edge.
4171
4211
  */
@@ -4532,6 +4572,183 @@ export declare const box: {
4532
4572
  };
4533
4573
  name: "backgroundColor";
4534
4574
  };
4575
+ fill: {
4576
+ values: {
4577
+ background: {
4578
+ default: string;
4579
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4580
+ };
4581
+ brand: {
4582
+ default: string;
4583
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4584
+ };
4585
+ "brand-hover": {
4586
+ default: string;
4587
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4588
+ };
4589
+ "brand-press": {
4590
+ default: string;
4591
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4592
+ };
4593
+ "brand-subdued": {
4594
+ default: string;
4595
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4596
+ };
4597
+ disabled: {
4598
+ default: string;
4599
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4600
+ };
4601
+ error: {
4602
+ default: string;
4603
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4604
+ };
4605
+ "error-hover": {
4606
+ default: string;
4607
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4608
+ };
4609
+ "error-press": {
4610
+ default: string;
4611
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4612
+ };
4613
+ "error-subdued": {
4614
+ default: string;
4615
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4616
+ };
4617
+ hover: {
4618
+ default: string;
4619
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4620
+ };
4621
+ info: {
4622
+ default: string;
4623
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4624
+ };
4625
+ "info-hover": {
4626
+ default: string;
4627
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4628
+ };
4629
+ "info-press": {
4630
+ default: string;
4631
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4632
+ };
4633
+ "info-subdued": {
4634
+ default: string;
4635
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4636
+ };
4637
+ invert: {
4638
+ default: string;
4639
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4640
+ };
4641
+ "invert-disabled": {
4642
+ default: string;
4643
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4644
+ };
4645
+ "invert-hover": {
4646
+ default: string;
4647
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4648
+ };
4649
+ "invert-press": {
4650
+ default: string;
4651
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4652
+ };
4653
+ "invert-secondary": {
4654
+ default: string;
4655
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4656
+ };
4657
+ overlay: {
4658
+ default: string;
4659
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4660
+ };
4661
+ press: {
4662
+ default: string;
4663
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4664
+ };
4665
+ primary: {
4666
+ default: string;
4667
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4668
+ };
4669
+ secondary: {
4670
+ default: string;
4671
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4672
+ };
4673
+ success: {
4674
+ default: string;
4675
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4676
+ };
4677
+ "success-hover": {
4678
+ default: string;
4679
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4680
+ };
4681
+ "success-press": {
4682
+ default: string;
4683
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4684
+ };
4685
+ "success-subdued": {
4686
+ default: string;
4687
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4688
+ };
4689
+ warning: {
4690
+ default: string;
4691
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4692
+ };
4693
+ "warning-hover": {
4694
+ default: string;
4695
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4696
+ };
4697
+ "warning-press": {
4698
+ default: string;
4699
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4700
+ };
4701
+ "warning-subdued": {
4702
+ default: string;
4703
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4704
+ };
4705
+ transparent: {
4706
+ default: string;
4707
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4708
+ };
4709
+ currentColor: {
4710
+ default: string;
4711
+ conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
4712
+ };
4713
+ };
4714
+ staticScale: {
4715
+ currentColor: string;
4716
+ transparent: string;
4717
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4718
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4719
+ "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4720
+ "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4721
+ "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4722
+ disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4723
+ error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4724
+ "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4725
+ "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4726
+ "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4727
+ hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4728
+ info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4729
+ "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4730
+ "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4731
+ "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4732
+ invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4733
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4734
+ "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4735
+ "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4736
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4737
+ overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4738
+ press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4739
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4740
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4741
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4742
+ "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4743
+ "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4744
+ "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4745
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4746
+ "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4747
+ "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4748
+ "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4749
+ };
4750
+ name: "fill";
4751
+ };
4535
4752
  borderColor: {
4536
4753
  values: {
4537
4754
  brand: {
@@ -8970,6 +9187,9 @@ declare const selectStyles: {
8970
9187
  ":focus": {
8971
9188
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8972
9189
  };
9190
+ ":active": {
9191
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9192
+ };
8973
9193
  };
8974
9194
  error: {
8975
9195
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8979,6 +9199,9 @@ declare const selectStyles: {
8979
9199
  ":focus": {
8980
9200
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8981
9201
  };
9202
+ ":active": {
9203
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9204
+ };
8982
9205
  };
8983
9206
  };
8984
9207
  /**
@@ -9048,6 +9271,9 @@ export declare const select: {
9048
9271
  ":focus": {
9049
9272
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9050
9273
  };
9274
+ ":active": {
9275
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9276
+ };
9051
9277
  };
9052
9278
  error: {
9053
9279
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9057,6 +9283,9 @@ export declare const select: {
9057
9283
  ":focus": {
9058
9284
  borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9059
9285
  };
9286
+ ":active": {
9287
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9288
+ };
9060
9289
  };
9061
9290
  };
9062
9291
  size: {
@@ -9118,12 +9347,16 @@ declare const styles$5: {
9118
9347
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9119
9348
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9120
9349
  };
9121
- negative: {
9350
+ danger: {
9351
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9352
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9353
+ };
9354
+ inverted: {
9122
9355
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9123
9356
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9124
9357
  };
9125
9358
  neutral: {
9126
- backgroundColor: "transparent";
9359
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9127
9360
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9128
9361
  };
9129
9362
  };
@@ -9143,9 +9376,6 @@ declare const styles$5: {
9143
9376
  /**
9144
9377
  * Specifies whether the status is in subdued mode
9145
9378
  */
9146
- subdued: {
9147
- true: {};
9148
- };
9149
9379
  /**
9150
9380
  * Specifies the variant of the status
9151
9381
  */
@@ -9154,6 +9384,7 @@ declare const styles$5: {
9154
9384
  text: {
9155
9385
  backgroundColor: "transparent";
9156
9386
  };
9387
+ subdued: {};
9157
9388
  };
9158
9389
  }>;
9159
9390
  dot: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9187,12 +9418,16 @@ declare const status$1: {
9187
9418
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9188
9419
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9189
9420
  };
9190
- negative: {
9421
+ danger: {
9422
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9423
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9424
+ };
9425
+ inverted: {
9191
9426
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9192
9427
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9193
9428
  };
9194
9429
  neutral: {
9195
- backgroundColor: "transparent";
9430
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9196
9431
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9197
9432
  };
9198
9433
  };
@@ -9206,14 +9441,12 @@ declare const status$1: {
9206
9441
  fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9207
9442
  };
9208
9443
  };
9209
- subdued: {
9210
- true: {};
9211
- };
9212
9444
  variant: {
9213
9445
  solid: {};
9214
9446
  text: {
9215
9447
  backgroundColor: "transparent";
9216
9448
  };
9449
+ subdued: {};
9217
9450
  };
9218
9451
  }>;
9219
9452
  dot: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -10629,6 +10862,9 @@ declare const accordionStyles: {
10629
10862
  ":hover": {
10630
10863
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10631
10864
  };
10865
+ ":active": {
10866
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10867
+ };
10632
10868
  ":disabled": {
10633
10869
  borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10634
10870
  backgroundColor: "transparent";
@@ -10673,6 +10909,9 @@ export declare const accordion: {
10673
10909
  ":hover": {
10674
10910
  backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10675
10911
  };
10912
+ ":active": {
10913
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10914
+ };
10676
10915
  ":disabled": {
10677
10916
  borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10678
10917
  backgroundColor: "transparent";