@rarui/styles 3.3.1 → 3.4.0

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
@@ -53,7 +53,7 @@ export { LinkVariants } from './packages/navigation/link/rarui-link.types.js';
53
53
  export { ProgressSprinkle, ProgressVariants } from './packages/feedback/progress/rarui-progress.types.js';
54
54
  export { RadioButtonVariants } from './packages/input/radioButton/rarui-radioButton.types.js';
55
55
  export { SelectSprinkle, SelectVariants } from './packages/input/select/rarui-select.types.js';
56
- export { StatusVariants } from './packages/feedback/status/rarui-status.types.js';
56
+ export { StatusSprinkle, StatusVariants } from './packages/feedback/status/rarui-status.types.js';
57
57
  export { BannerVariants } from './packages/surface/banner/rarui-banner.types.js';
58
58
  export { TextareaVariants } from './packages/input/textarea/rarui-textarea.types.js';
59
59
  export { ToastSprinkle, ToastVariants } from './packages/feedback/toast/rarui-toast.types.js';
@@ -14,11 +14,7 @@ declare const divider: {
14
14
  config: {
15
15
  borderColor: {
16
16
  values: {
17
- "invert-disabled": {
18
- default: string;
19
- conditions: Record<"xs" | "xl" | "md" | "lg", string>;
20
- };
21
- "brand-alt": {
17
+ transparent: {
22
18
  default: string;
23
19
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
24
20
  };
@@ -42,6 +38,10 @@ declare const divider: {
42
38
  default: string;
43
39
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
44
40
  };
41
+ "invert-disabled": {
42
+ default: string;
43
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
44
+ };
45
45
  primary: {
46
46
  default: string;
47
47
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
@@ -58,15 +58,15 @@ declare const divider: {
58
58
  default: string;
59
59
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
60
60
  };
61
- divider: {
61
+ "brand-alt": {
62
62
  default: string;
63
63
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
64
64
  };
65
- subdued: {
65
+ divider: {
66
66
  default: string;
67
67
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
68
68
  };
69
- transparent: {
69
+ subdued: {
70
70
  default: string;
71
71
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
72
72
  };
@@ -14,75 +14,75 @@ declare const icon: {
14
14
  config: {
15
15
  color: {
16
16
  values: {
17
- "invert-disabled": {
17
+ brand: {
18
18
  default: string;
19
19
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
20
20
  };
21
- "invert-secondary": {
21
+ disabled: {
22
22
  default: string;
23
23
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
24
24
  };
25
- "brand-alt": {
25
+ error: {
26
26
  default: string;
27
27
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
28
28
  };
29
- "on-brand": {
29
+ info: {
30
30
  default: string;
31
31
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
32
32
  };
33
- "on-error": {
33
+ invert: {
34
34
  default: string;
35
35
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
36
36
  };
37
- "on-info": {
37
+ "invert-disabled": {
38
38
  default: string;
39
39
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
40
40
  };
41
- "on-success": {
41
+ "invert-secondary": {
42
42
  default: string;
43
43
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
44
44
  };
45
- "on-warning": {
45
+ primary: {
46
46
  default: string;
47
47
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
48
48
  };
49
- "warning-alt": {
49
+ secondary: {
50
50
  default: string;
51
51
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
52
52
  };
53
- brand: {
53
+ success: {
54
54
  default: string;
55
55
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
56
56
  };
57
- disabled: {
57
+ warning: {
58
58
  default: string;
59
59
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
60
60
  };
61
- error: {
61
+ "brand-alt": {
62
62
  default: string;
63
63
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
64
64
  };
65
- info: {
65
+ "on-brand": {
66
66
  default: string;
67
67
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
68
68
  };
69
- invert: {
69
+ "on-error": {
70
70
  default: string;
71
71
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
72
72
  };
73
- primary: {
73
+ "on-info": {
74
74
  default: string;
75
75
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
76
76
  };
77
- secondary: {
77
+ "on-success": {
78
78
  default: string;
79
79
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
80
80
  };
81
- success: {
81
+ "on-warning": {
82
82
  default: string;
83
83
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
84
84
  };
85
- warning: {
85
+ "warning-alt": {
86
86
  default: string;
87
87
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
88
88
  };
@@ -18,75 +18,75 @@ declare const text: {
18
18
  config: {
19
19
  color: {
20
20
  values: {
21
- "invert-disabled": {
21
+ brand: {
22
22
  default: string;
23
23
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
24
24
  };
25
- "invert-secondary": {
25
+ disabled: {
26
26
  default: string;
27
27
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
28
28
  };
29
- "brand-alt": {
29
+ error: {
30
30
  default: string;
31
31
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
32
32
  };
33
- "on-brand": {
33
+ info: {
34
34
  default: string;
35
35
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
36
36
  };
37
- "on-error": {
37
+ invert: {
38
38
  default: string;
39
39
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
40
40
  };
41
- "on-info": {
41
+ "invert-disabled": {
42
42
  default: string;
43
43
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
44
44
  };
45
- "on-success": {
45
+ "invert-secondary": {
46
46
  default: string;
47
47
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
48
48
  };
49
- "on-warning": {
49
+ primary: {
50
50
  default: string;
51
51
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
52
52
  };
53
- "warning-alt": {
53
+ secondary: {
54
54
  default: string;
55
55
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
56
56
  };
57
- brand: {
57
+ success: {
58
58
  default: string;
59
59
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
60
60
  };
61
- disabled: {
61
+ warning: {
62
62
  default: string;
63
63
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
64
64
  };
65
- error: {
65
+ "brand-alt": {
66
66
  default: string;
67
67
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
68
68
  };
69
- info: {
69
+ "on-brand": {
70
70
  default: string;
71
71
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
72
72
  };
73
- invert: {
73
+ "on-error": {
74
74
  default: string;
75
75
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
76
76
  };
77
- primary: {
77
+ "on-info": {
78
78
  default: string;
79
79
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
80
80
  };
81
- secondary: {
81
+ "on-success": {
82
82
  default: string;
83
83
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
84
84
  };
85
- success: {
85
+ "on-warning": {
86
86
  default: string;
87
87
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
88
88
  };
89
- warning: {
89
+ "warning-alt": {
90
90
  default: string;
91
91
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
92
92
  };
@@ -147,11 +147,11 @@ declare const text: {
147
147
  };
148
148
  lineHeight: {
149
149
  values: {
150
- xxs: {
150
+ xs: {
151
151
  default: string;
152
152
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
153
153
  };
154
- xs: {
154
+ xxs: {
155
155
  default: string;
156
156
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
157
157
  };
@@ -184,11 +184,11 @@ declare const text: {
184
184
  };
185
185
  fontSize: {
186
186
  values: {
187
- xxs: {
187
+ xs: {
188
188
  default: string;
189
189
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
190
190
  };
191
- xs: {
191
+ xxs: {
192
192
  default: string;
193
193
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
194
194
  };
@@ -42,75 +42,75 @@ declare const title: {
42
42
  config: {
43
43
  color: {
44
44
  values: {
45
- "invert-disabled": {
45
+ brand: {
46
46
  default: string;
47
47
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
48
48
  };
49
- "invert-secondary": {
49
+ disabled: {
50
50
  default: string;
51
51
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
52
52
  };
53
- "brand-alt": {
53
+ error: {
54
54
  default: string;
55
55
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
56
56
  };
57
- "on-brand": {
57
+ info: {
58
58
  default: string;
59
59
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
60
60
  };
61
- "on-error": {
61
+ invert: {
62
62
  default: string;
63
63
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
64
64
  };
65
- "on-info": {
65
+ "invert-disabled": {
66
66
  default: string;
67
67
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
68
68
  };
69
- "on-success": {
69
+ "invert-secondary": {
70
70
  default: string;
71
71
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
72
72
  };
73
- "on-warning": {
73
+ primary: {
74
74
  default: string;
75
75
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
76
76
  };
77
- "warning-alt": {
77
+ secondary: {
78
78
  default: string;
79
79
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
80
80
  };
81
- brand: {
81
+ success: {
82
82
  default: string;
83
83
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
84
84
  };
85
- disabled: {
85
+ warning: {
86
86
  default: string;
87
87
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
88
88
  };
89
- error: {
89
+ "brand-alt": {
90
90
  default: string;
91
91
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
92
92
  };
93
- info: {
93
+ "on-brand": {
94
94
  default: string;
95
95
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
96
96
  };
97
- invert: {
97
+ "on-error": {
98
98
  default: string;
99
99
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
100
100
  };
101
- primary: {
101
+ "on-info": {
102
102
  default: string;
103
103
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
104
104
  };
105
- secondary: {
105
+ "on-success": {
106
106
  default: string;
107
107
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
108
108
  };
109
- success: {
109
+ "on-warning": {
110
110
  default: string;
111
111
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
112
112
  };
113
- warning: {
113
+ "warning-alt": {
114
114
  default: string;
115
115
  conditions: Record<"xs" | "xl" | "md" | "lg", string>;
116
116
  };
@@ -1,3 +1,4 @@
1
+ import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
1
2
  import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
2
3
 
3
4
  declare const status: {
@@ -65,6 +66,22 @@ declare const status: {
65
66
  };
66
67
  }>;
67
68
  };
69
+ sprinkle: SprinklesFn<[{
70
+ config: {
71
+ minWidth: {
72
+ dynamic: {
73
+ default: string;
74
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
75
+ };
76
+ dynamicScale: true;
77
+ name: "minWidth";
78
+ vars: {
79
+ default: string;
80
+ conditions: Record<"xs" | "xl" | "md" | "lg", string>;
81
+ };
82
+ };
83
+ };
84
+ }]>;
68
85
  };
69
86
 
70
87
  export { status };
@@ -1 +1 @@
1
- import{statusStyles as s}from"./rarui-status.css.js";var r={classnames:s};export{r as status};
1
+ import{statusSprinkle as s,statusStyles as r}from"./rarui-status.css.js";var a={classnames:r,sprinkle:s};export{a as status};
@@ -105,4 +105,24 @@
105
105
  .rarui-status_dot_size_small__wfzj07r {
106
106
  min-height: .25rem;
107
107
  min-width: .25rem;
108
+ }
109
+ @media screen and (min-width: 0px) {
110
+ .rarui-status_minWidth-xs__wfzj07w {
111
+ min-width: var(--minWidth-xs__wfzj07s);
112
+ }
113
+ }
114
+ @media screen and (min-width: 768px) {
115
+ .rarui-status_minWidth-md__wfzj07x {
116
+ min-width: var(--minWidth-md__wfzj07t);
117
+ }
118
+ }
119
+ @media screen and (min-width: 1200px) {
120
+ .rarui-status_minWidth-lg__wfzj07y {
121
+ min-width: var(--minWidth-lg__wfzj07u);
122
+ }
123
+ }
124
+ @media screen and (min-width: 1400px) {
125
+ .rarui-status_minWidth-xl__wfzj07z {
126
+ min-width: var(--minWidth-xl__wfzj07v);
127
+ }
108
128
  }
@@ -1 +1 @@
1
- import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={status:a({defaultClassName:"rarui-status__wfzj070",variantClassNames:{full:{true:"rarui-status_full_true__wfzj071"},appearance:{success:"rarui-status_appearance_success__wfzj072",warning:"rarui-status_appearance_warning__wfzj073",danger:"rarui-status_appearance_danger__wfzj074",inverted:"rarui-status_appearance_inverted__wfzj075",neutral:"rarui-status_appearance_neutral__wfzj076",info:"rarui-status_appearance_info__wfzj077"},size:{normal:"rarui-status_size_normal__wfzj078",small:"rarui-status_size_small__wfzj079"},variant:{solid:"rarui-status_variant_solid__wfzj07a",text:"rarui-status_variant_text__wfzj07b",subdued:"rarui-status_variant_subdued__wfzj07c"}},defaultVariants:{appearance:"success",size:"normal",variant:"solid"},compoundVariants:[[{appearance:"success",variant:"text"},"rarui-status__compound_0__wfzj07d"],[{appearance:"warning",variant:"text"},"rarui-status__compound_1__wfzj07e"],[{appearance:"danger",variant:"text"},"rarui-status__compound_2__wfzj07f"],[{appearance:"inverted",variant:"text"},"rarui-status__compound_3__wfzj07g"],[{appearance:"info",variant:"text"},"rarui-status__compound_4__wfzj07h"],[{appearance:"neutral",variant:"text"},"rarui-status__compound_5__wfzj07i"],[{appearance:"success",variant:"subdued"},"rarui-status__compound_6__wfzj07j"],[{appearance:"warning",variant:"subdued"},"rarui-status__compound_7__wfzj07k"],[{appearance:"danger",variant:"subdued"},"rarui-status__compound_8__wfzj07l"],[{appearance:"inverted",variant:"subdued"},"rarui-status__compound_9__wfzj07m"],[{appearance:"neutral",variant:"subdued"},"rarui-status__compound_10__wfzj07n"],[{appearance:"info",variant:"subdued"},"rarui-status__compound_11__wfzj07o"]]}),dot:a({defaultClassName:"rarui-status_dot__wfzj07p",variantClassNames:{size:{normal:"rarui-status_dot_size_normal__wfzj07q",small:"rarui-status_dot_size_small__wfzj07r"}},defaultVariants:{},compoundVariants:[]})};export{r as statusStyles};
1
+ import{c as a}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as t}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r=a({config:{minWidth:{dynamic:{default:"rarui-status_minWidth-xs__wfzj07w",conditions:{xs:"rarui-status_minWidth-xs__wfzj07w",md:"rarui-status_minWidth-md__wfzj07x",lg:"rarui-status_minWidth-lg__wfzj07y",xl:"rarui-status_minWidth-xl__wfzj07z"}},name:"minWidth",vars:{conditions:{xs:"var(--minWidth-xs__wfzj07s)",md:"var(--minWidth-md__wfzj07t)",lg:"var(--minWidth-lg__wfzj07u)",xl:"var(--minWidth-xl__wfzj07v)"},default:"var(--minWidth-xs__wfzj07s)"},dynamicScale:!0}}}),s={status:t({defaultClassName:"rarui-status__wfzj070",variantClassNames:{full:{true:"rarui-status_full_true__wfzj071"},appearance:{success:"rarui-status_appearance_success__wfzj072",warning:"rarui-status_appearance_warning__wfzj073",danger:"rarui-status_appearance_danger__wfzj074",inverted:"rarui-status_appearance_inverted__wfzj075",neutral:"rarui-status_appearance_neutral__wfzj076",info:"rarui-status_appearance_info__wfzj077"},size:{normal:"rarui-status_size_normal__wfzj078",small:"rarui-status_size_small__wfzj079"},variant:{solid:"rarui-status_variant_solid__wfzj07a",text:"rarui-status_variant_text__wfzj07b",subdued:"rarui-status_variant_subdued__wfzj07c"}},defaultVariants:{appearance:"success",size:"normal",variant:"solid"},compoundVariants:[[{appearance:"success",variant:"text"},"rarui-status__compound_0__wfzj07d"],[{appearance:"warning",variant:"text"},"rarui-status__compound_1__wfzj07e"],[{appearance:"danger",variant:"text"},"rarui-status__compound_2__wfzj07f"],[{appearance:"inverted",variant:"text"},"rarui-status__compound_3__wfzj07g"],[{appearance:"info",variant:"text"},"rarui-status__compound_4__wfzj07h"],[{appearance:"neutral",variant:"text"},"rarui-status__compound_5__wfzj07i"],[{appearance:"success",variant:"subdued"},"rarui-status__compound_6__wfzj07j"],[{appearance:"warning",variant:"subdued"},"rarui-status__compound_7__wfzj07k"],[{appearance:"danger",variant:"subdued"},"rarui-status__compound_8__wfzj07l"],[{appearance:"inverted",variant:"subdued"},"rarui-status__compound_9__wfzj07m"],[{appearance:"neutral",variant:"subdued"},"rarui-status__compound_10__wfzj07n"],[{appearance:"info",variant:"subdued"},"rarui-status__compound_11__wfzj07o"]]}),dot:t({defaultClassName:"rarui-status_dot__wfzj07p",variantClassNames:{size:{normal:"rarui-status_dot_size_normal__wfzj07q",small:"rarui-status_dot_size_small__wfzj07r"}},defaultVariants:{},compoundVariants:[]})};export{r as statusSprinkle,s as statusStyles};
@@ -1,6 +1,9 @@
1
1
  import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
2
+ import { StandardLonghandProperties } from '../../../types/css.types.js';
2
3
  import { statusStyles } from './rarui-status.css.js';
3
4
 
4
5
  type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
6
+ type StatusDynamicProperties = Pick<StandardLonghandProperties, "minWidth">;
7
+ type StatusSprinkle = StatusDynamicProperties;
5
8
 
6
- export type { StatusVariants };
9
+ export type { StatusSprinkle, StatusVariants };
@@ -6,7 +6,9 @@ declare const radioButton: {
6
6
  size: {
7
7
  small: {
8
8
  width: "1.25rem";
9
+ minWidth: "1.25rem";
9
10
  height: "1.25rem";
11
+ minHeight: "1.25rem";
10
12
  ":before": {
11
13
  width: "2rem";
12
14
  height: "2rem";
@@ -18,7 +20,9 @@ declare const radioButton: {
18
20
  };
19
21
  large: {
20
22
  width: "1.5rem";
23
+ minWidth: "1.5rem";
21
24
  height: "1.5rem";
25
+ minHeight: "1.5rem";
22
26
  ":before": {
23
27
  width: "2.75rem";
24
28
  height: "2.75rem";
@@ -54,7 +54,9 @@
54
54
  }
55
55
  .rarui-radioButton_size_small__1d9isw71 {
56
56
  width: 1.25rem;
57
+ min-width: 1.25rem;
57
58
  height: 1.25rem;
59
+ min-height: 1.25rem;
58
60
  }
59
61
  .rarui-radioButton_size_small__1d9isw71:before {
60
62
  width: 2rem;
@@ -66,7 +68,9 @@
66
68
  }
67
69
  .rarui-radioButton_size_large__1d9isw72 {
68
70
  width: 1.5rem;
71
+ min-width: 1.5rem;
69
72
  height: 1.5rem;
73
+ min-height: 1.5rem;
70
74
  }
71
75
  .rarui-radioButton_size_large__1d9isw72:before {
72
76
  width: 2.75rem;
@@ -8,7 +8,9 @@ declare const styles: {
8
8
  size: {
9
9
  small: {
10
10
  width: "1.25rem";
11
+ minWidth: "1.25rem";
11
12
  height: "1.25rem";
13
+ minHeight: "1.25rem";
12
14
  ":before": {
13
15
  width: "2rem";
14
16
  height: "2rem";
@@ -20,7 +22,9 @@ declare const styles: {
20
22
  };
21
23
  large: {
22
24
  width: "1.5rem";
25
+ minWidth: "1.5rem";
23
26
  height: "1.5rem";
27
+ minHeight: "1.5rem";
24
28
  ":before": {
25
29
  width: "2.75rem";
26
30
  height: "2.75rem";