prime-ui-kit 0.2.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.
Files changed (20) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +164 -0
  3. package/dist/components/index.css +8194 -0
  4. package/dist/components/index.css.map +1 -0
  5. package/dist/components/index.d.ts +2679 -0
  6. package/dist/components/index.js +8186 -0
  7. package/dist/components/index.js.map +1 -0
  8. package/dist/index.css +9510 -0
  9. package/dist/index.css.map +1 -0
  10. package/dist/index.d.ts +8 -0
  11. package/dist/index.js +8242 -0
  12. package/dist/index.js.map +1 -0
  13. package/package.json +94 -0
  14. package/src/styles/globals.css +91 -0
  15. package/src/styles/reset.css +35 -0
  16. package/src/styles/theme-dark.css +422 -0
  17. package/src/styles/theme-light.css +423 -0
  18. package/src/styles/tokens.css +248 -0
  19. package/src/styles/tokens.test.ts +27 -0
  20. package/src/styles/units.css +106 -0
package/src/styles/theme-light.css ADDED
@@ -0,0 +1,423 @@
1
+ /* AUTO-GENERATED by scripts/build-tokens.ts */
2
+ :root,
3
+ :root[data-theme="light"],
4
+ [data-theme="light"] {
5
+ --prime-sys-border-width-control: 1px;
6
+ --prime-sys-border-width-focusRing: 2px;
7
+ --prime-sys-color-action-errorBackground: var(--prime-ref-color-red-600);
8
+ --prime-sys-color-action-errorBackgroundHover: var(--prime-ref-color-red-700);
9
+ --prime-sys-color-action-errorForeground: var(--prime-ref-color-white);
10
+ --prime-sys-color-action-neutralBackground: var(--prime-ref-color-gray-50);
11
+ --prime-sys-color-action-neutralBackgroundHover: var(--prime-ref-color-gray-100);
12
+ --prime-sys-color-action-neutralForeground: var(--prime-ref-color-gray-600);
13
+ --prime-sys-color-action-primaryBackground: var(--prime-ref-color-gray-950);
14
+ --prime-sys-color-action-primaryBackgroundHover: var(--prime-ref-color-gray-800);
15
+ --prime-sys-color-action-primaryForeground: var(--prime-ref-color-white);
16
+ --prime-sys-color-action-primarySoftBackground: var(--prime-ref-color-gray-100);
17
+ --prime-sys-color-action-primarySoftForeground: var(--prime-ref-color-gray-950);
18
+ --prime-sys-color-badge-grayFilled-background: var(--prime-ref-color-gray-600);
19
+ --prime-sys-color-badge-pink-backgroundEmphasis: var(--prime-ref-color-pink-500);
20
+ --prime-sys-color-badge-pink-backgroundSoft: var(--prime-ref-color-pink-50);
21
+ --prime-sys-color-badge-pink-border: var(--prime-ref-color-pink-300);
22
+ --prime-sys-color-badge-pink-foregroundOnSoft: var(--prime-ref-color-pink-700);
23
+ --prime-sys-color-badge-teal-backgroundEmphasis: var(--prime-ref-color-teal-500);
24
+ --prime-sys-color-badge-teal-backgroundSoft: var(--prime-ref-color-teal-50);
25
+ --prime-sys-color-badge-teal-border: var(--prime-ref-color-teal-300);
26
+ --prime-sys-color-badge-teal-foregroundOnSoft: var(--prime-ref-color-teal-700);
27
+ --prime-sys-color-border-accent: var(--prime-ref-color-gray-400);
28
+ --prime-sys-color-border-danger: var(--prime-ref-color-red-400);
29
+ --prime-sys-color-border-disabled: var(--prime-ref-color-gray-100);
30
+ --prime-sys-color-border-emphasis: var(--prime-ref-color-gray-950);
31
+ --prime-sys-color-border-inverse: var(--prime-ref-color-white);
32
+ --prime-sys-color-border-muted: var(--prime-ref-color-gray-200);
33
+ --prime-sys-color-border-separator: var(--prime-ref-color-gray-300);
34
+ --prime-sys-color-border-strong: var(--prime-ref-color-gray-300);
35
+ --prime-sys-color-border-subtle: var(--prime-ref-color-gray-200);
36
+ --prime-sys-color-content-accent: var(--prime-ref-color-gray-800);
37
+ --prime-sys-color-content-danger: var(--prime-ref-color-red-800);
38
+ --prime-sys-color-content-disabled: var(--prime-ref-color-gray-400);
39
+ --prime-sys-color-content-inverse: var(--prime-ref-color-white);
40
+ --prime-sys-color-content-muted: var(--prime-ref-color-gray-500);
41
+ --prime-sys-color-content-primary: var(--prime-ref-color-gray-950);
42
+ --prime-sys-color-content-secondary: var(--prime-ref-color-gray-600);
43
+ --prime-sys-color-dataTable-dividerHorizontal: color-mix(in srgb, var(--prime-sys-color-border-subtle) 82%, transparent);
44
+ --prime-sys-color-dataTable-dividerVertical: color-mix(in srgb, var(--prime-sys-color-border-subtle) 72%, transparent);
45
+ --prime-sys-color-dataTable-headBackground: var(--prime-sys-color-surface-default);
46
+ --prime-sys-color-dataTable-rowBackground: var(--prime-sys-color-surface-elevated);
47
+ --prime-sys-color-field-bg: var(--prime-ref-color-gray-50);
48
+ --prime-sys-color-field-border: var(--prime-ref-color-gray-200);
49
+ --prime-sys-color-field-borderError: var(--prime-ref-color-red-500);
50
+ --prime-sys-color-field-borderFocus: var(--prime-ref-color-gray-800);
51
+ --prime-sys-color-field-borderHover: var(--prime-ref-color-gray-300);
52
+ --prime-sys-color-field-placeholder: var(--prime-ref-color-gray-400);
53
+ --prime-sys-color-field-text: var(--prime-ref-color-gray-950);
54
+ --prime-sys-color-focus-ring: var(--prime-ref-color-gray-950);
55
+ --prime-sys-color-status-away-background: var(--prime-ref-color-yellow-50);
56
+ --prime-sys-color-status-away-backgroundEmphasis: var(--prime-ref-color-yellow-600);
57
+ --prime-sys-color-status-away-border: var(--prime-ref-color-yellow-200);
58
+ --prime-sys-color-status-away-foreground: var(--prime-ref-color-yellow-900);
59
+ --prime-sys-color-status-error-background: var(--prime-ref-color-red-50);
60
+ --prime-sys-color-status-error-backgroundEmphasis: var(--prime-ref-color-red-600);
61
+ --prime-sys-color-status-error-border: var(--prime-ref-color-red-200);
62
+ --prime-sys-color-status-error-foreground: var(--prime-ref-color-red-900);
63
+ --prime-sys-color-status-feature-background: var(--prime-ref-color-purple-50);
64
+ --prime-sys-color-status-feature-backgroundEmphasis: var(--prime-ref-color-purple-600);
65
+ --prime-sys-color-status-feature-border: var(--prime-ref-color-purple-200);
66
+ --prime-sys-color-status-feature-foreground: var(--prime-ref-color-purple-900);
67
+ --prime-sys-color-status-information-background: var(--prime-ref-color-blue-50);
68
+ --prime-sys-color-status-information-backgroundEmphasis: var(--prime-ref-color-blue-600);
69
+ --prime-sys-color-status-information-border: var(--prime-ref-color-blue-200);
70
+ --prime-sys-color-status-information-foreground: var(--prime-ref-color-blue-900);
71
+ --prime-sys-color-status-success-background: var(--prime-ref-color-green-50);
72
+ --prime-sys-color-status-success-backgroundEmphasis: var(--prime-ref-color-green-600);
73
+ --prime-sys-color-status-success-border: var(--prime-ref-color-green-200);
74
+ --prime-sys-color-status-success-foreground: var(--prime-ref-color-green-900);
75
+ --prime-sys-color-status-verified-background: var(--prime-ref-color-sky-50);
76
+ --prime-sys-color-status-verified-backgroundEmphasis: var(--prime-ref-color-sky-600);
77
+ --prime-sys-color-status-verified-border: var(--prime-ref-color-sky-200);
78
+ --prime-sys-color-status-verified-foreground: var(--prime-ref-color-sky-900);
79
+ --prime-sys-color-status-warning-background: var(--prime-ref-color-orange-50);
80
+ --prime-sys-color-status-warning-backgroundEmphasis: var(--prime-ref-color-orange-600);
81
+ --prime-sys-color-status-warning-border: var(--prime-ref-color-orange-200);
82
+ --prime-sys-color-status-warning-foreground: var(--prime-ref-color-orange-900);
83
+ --prime-sys-color-surface-accentSoft: var(--prime-ref-color-gray-100);
84
+ --prime-sys-color-surface-dangerSoft: var(--prime-ref-color-red-50);
85
+ --prime-sys-color-surface-default: var(--prime-ref-color-gray-50);
86
+ --prime-sys-color-surface-elevated: var(--prime-ref-color-gray-0);
87
+ --prime-sys-color-surface-overlay: var(--prime-ref-color-overlay-scrimLight);
88
+ --prime-sys-color-surface-raised: var(--prime-ref-color-gray-0);
89
+ --prime-sys-color-tooltip-background: var(--prime-ref-color-gray-900);
90
+ --prime-sys-color-tooltip-border: var(--prime-ref-color-gray-700);
91
+ --prime-sys-color-tooltip-foreground: var(--prime-ref-color-white);
92
+ --prime-sys-elevation-shadow-buttonFocus: 0 0 0 2px rgba(15, 17, 21, 0.14);
93
+ --prime-sys-elevation-shadow-errorFocus: 0 0 0 2px rgba(220, 38, 38, 0.2);
94
+ --prime-sys-elevation-shadow-fancyButtonError: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-errorBackground);
95
+ --prime-sys-elevation-shadow-fancyButtonNeutral: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-content-primary);
96
+ --prime-sys-elevation-shadow-fancyButtonPrimary: 0 1px 2px rgba(14, 18, 27, 0.24), 0 0 0 1px var(--prime-sys-color-action-primaryBackground);
97
+ --prime-sys-elevation-shadow-modal: var(--prime-ref-shadow-3xl);
98
+ --prime-sys-elevation-shadow-primaryFocus: 0 0 0 2px rgba(15, 17, 21, 0.2);
99
+ --prime-sys-elevation-shadow-surface: var(--prime-ref-shadow-s);
100
+ --prime-sys-elevation-shadow-tooltip: 0 12px 28px rgba(15, 17, 21, 0.22), 0 4px 10px rgba(15, 17, 21, 0.16);
101
+ --prime-sys-elevation-zIndex-base: var(--prime-ref-zIndex-base);
102
+ --prime-sys-elevation-zIndex-dropdown: var(--prime-ref-zIndex-dropdown);
103
+ --prime-sys-elevation-zIndex-modal: var(--prime-ref-zIndex-modal);
104
+ --prime-sys-elevation-zIndex-popover: var(--prime-ref-zIndex-popover);
105
+ --prime-sys-elevation-zIndex-sticky: var(--prime-ref-zIndex-sticky);
106
+ --prime-sys-elevation-zIndex-toast: var(--prime-ref-zIndex-toast);
107
+ --prime-sys-elevation-zIndex-tooltip: var(--prime-ref-zIndex-tooltip);
108
+ --prime-sys-motion-duration-fast: var(--prime-ref-motion-duration-fast);
109
+ --prime-sys-motion-duration-medium: var(--prime-ref-motion-duration-medium);
110
+ --prime-sys-motion-duration-slow: var(--prime-ref-motion-duration-slow);
111
+ --prime-sys-motion-easing-standard: var(--prime-ref-motion-easing-standard);
112
+ --prime-sys-motion-fast: var(--prime-ref-motion-duration-fast);
113
+ --prime-sys-motion-medium: var(--prime-ref-motion-duration-medium);
114
+ --prime-sys-motion-slow: var(--prime-ref-motion-duration-slow);
115
+ --prime-sys-motion-standard: var(--prime-ref-motion-easing-standard);
116
+ --prime-sys-shape-radius-4xl: var(--prime-ref-radius-4xl);
117
+ --prime-sys-shape-radius-l: var(--prime-ref-radius-l);
118
+ --prime-sys-shape-radius-m: var(--prime-ref-radius-m);
119
+ --prime-sys-shape-radius-round: var(--prime-ref-radius-round);
120
+ --prime-sys-shape-radius-s: var(--prime-ref-radius-s);
121
+ --prime-sys-shape-radius-xs: var(--prime-ref-radius-xs);
122
+ --prime-sys-size-avatar-2xl-radius: var(--prime-sys-shape-radius-round);
123
+ --prime-sys-size-avatar-2xl-size: var(--prime-ref-size-2xl);
124
+ --prime-sys-size-avatar-2xl-text: var(--prime-sys-typography-sizeScale-2xl);
125
+ --prime-sys-size-avatar-3xl-radius: var(--prime-sys-shape-radius-round);
126
+ --prime-sys-size-avatar-3xl-size: var(--prime-ref-size-3xl);
127
+ --prime-sys-size-avatar-3xl-text: var(--prime-sys-typography-sizeScale-3xl);
128
+ --prime-sys-size-avatar-4xl-radius: var(--prime-sys-shape-radius-round);
129
+ --prime-sys-size-avatar-4xl-size: var(--prime-ref-size-4xl);
130
+ --prime-sys-size-avatar-4xl-text: var(--prime-sys-typography-sizeScale-4xl);
131
+ --prime-sys-size-avatar-5xl-radius: var(--prime-sys-shape-radius-round);
132
+ --prime-sys-size-avatar-5xl-size: var(--prime-ref-size-5xl);
133
+ --prime-sys-size-avatar-5xl-text: var(--prime-sys-typography-sizeScale-5xl);
134
+ --prime-sys-size-avatar-6xl-radius: var(--prime-sys-shape-radius-round);
135
+ --prime-sys-size-avatar-6xl-size: var(--prime-ref-size-6xl);
136
+ --prime-sys-size-avatar-6xl-text: var(--prime-sys-typography-sizeScale-6xl);
137
+ --prime-sys-size-avatar-l-radius: var(--prime-sys-shape-radius-round);
138
+ --prime-sys-size-avatar-l-size: var(--prime-ref-size-l);
139
+ --prime-sys-size-avatar-l-text: var(--prime-sys-typography-control-s);
140
+ --prime-sys-size-avatar-m-radius: var(--prime-sys-shape-radius-round);
141
+ --prime-sys-size-avatar-m-size: var(--prime-ref-size-m);
142
+ --prime-sys-size-avatar-m-text: var(--prime-sys-typography-support-2xs);
143
+ --prime-sys-size-avatar-s-radius: var(--prime-sys-shape-radius-round);
144
+ --prime-sys-size-avatar-s-size: var(--prime-ref-size-s);
145
+ --prime-sys-size-avatar-s-text: var(--prime-sys-typography-support-2xs);
146
+ --prime-sys-size-avatar-xl-radius: var(--prime-sys-shape-radius-round);
147
+ --prime-sys-size-avatar-xl-size: var(--prime-ref-size-xl);
148
+ --prime-sys-size-avatar-xl-text: var(--prime-sys-typography-control-l);
149
+ --prime-sys-size-badge-l-dotSize: var(--prime-ref-spaces-layout-m);
150
+ --prime-sys-size-badge-l-gap: var(--prime-sys-size-control-m-gap);
151
+ --prime-sys-size-badge-l-iconSize: var(--prime-sys-size-control-m-icon);
152
+ --prime-sys-size-badge-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
153
+ --prime-sys-size-badge-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
154
+ --prime-sys-size-badge-l-radius: var(--prime-sys-size-control-m-radius);
155
+ --prime-sys-size-badge-l-text: var(--prime-sys-size-control-m-text);
156
+ --prime-sys-size-badge-m-dotSize: var(--prime-ref-spaces-layout-s);
157
+ --prime-sys-size-badge-m-gap: var(--prime-sys-size-control-s-gap);
158
+ --prime-sys-size-badge-m-iconSize: var(--prime-sys-size-control-s-icon);
159
+ --prime-sys-size-badge-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
160
+ --prime-sys-size-badge-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
161
+ --prime-sys-size-badge-m-radius: var(--prime-sys-size-control-s-radius);
162
+ --prime-sys-size-badge-m-text: var(--prime-sys-size-control-s-text);
163
+ --prime-sys-size-badge-s-dotSize: var(--prime-ref-spaces-layout-xs);
164
+ --prime-sys-size-badge-s-gap: var(--prime-sys-size-control-xs-gap);
165
+ --prime-sys-size-badge-s-iconSize: var(--prime-sys-size-control-xs-icon);
166
+ --prime-sys-size-badge-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
167
+ --prime-sys-size-badge-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
168
+ --prime-sys-size-badge-s-radius: var(--prime-sys-size-control-xs-radius);
169
+ --prime-sys-size-badge-s-text: var(--prime-sys-size-control-xs-text);
170
+ --prime-sys-size-badge-xl-dotSize: var(--prime-ref-spaces-layout-l);
171
+ --prime-sys-size-badge-xl-gap: var(--prime-sys-size-control-l-gap);
172
+ --prime-sys-size-badge-xl-iconSize: var(--prime-sys-size-control-l-icon);
173
+ --prime-sys-size-badge-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
174
+ --prime-sys-size-badge-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
175
+ --prime-sys-size-badge-xl-radius: var(--prime-sys-size-control-l-radius);
176
+ --prime-sys-size-badge-xl-text: var(--prime-sys-size-control-l-text);
177
+ --prime-sys-size-choice-l-control: var(--prime-ref-icon-l);
178
+ --prime-sys-size-choice-l-dot: var(--prime-ref-spaces-layout-s);
179
+ --prime-sys-size-choice-l-gap: var(--prime-sys-spacing-m);
180
+ --prime-sys-size-choice-l-text: var(--prime-sys-typography-control-m);
181
+ --prime-sys-size-choice-m-control: var(--prime-ref-icon-m);
182
+ --prime-sys-size-choice-m-dot: var(--prime-ref-spaces-layout-s);
183
+ --prime-sys-size-choice-m-gap: var(--prime-sys-spacing-s);
184
+ --prime-sys-size-choice-m-text: var(--prime-sys-typography-control-s);
185
+ --prime-sys-size-choice-s-control: var(--prime-ref-icon-s);
186
+ --prime-sys-size-choice-s-dot: var(--prime-ref-spaces-layout-xs);
187
+ --prime-sys-size-choice-s-gap: var(--prime-sys-spacing-s);
188
+ --prime-sys-size-choice-s-text: var(--prime-sys-typography-support-2xs);
189
+ --prime-sys-size-choice-xl-control: var(--prime-ref-icon-xl);
190
+ --prime-sys-size-choice-xl-dot: var(--prime-ref-spaces-layout-m);
191
+ --prime-sys-size-choice-xl-gap: var(--prime-sys-spacing-l);
192
+ --prime-sys-size-choice-xl-text: var(--prime-sys-typography-control-l);
193
+ --prime-sys-size-control-l-buttonPaddingX: var(--prime-ref-spaces-control-button-l);
194
+ --prime-sys-size-control-l-buttonPaddingY: var(--prime-ref-spaces-control-button-l);
195
+ --prime-sys-size-control-l-gap: var(--prime-ref-spaces-control-spacing-l);
196
+ --prime-sys-size-control-l-height: var(--prime-ref-size-l);
197
+ --prime-sys-size-control-l-icon: var(--prime-ref-icon-l);
198
+ --prime-sys-size-control-l-inputPaddingX: var(--prime-ref-spaces-control-spacing-l);
199
+ --prime-sys-size-control-l-inputPaddingY: var(--prime-sys-spacing-s);
200
+ --prime-sys-size-control-l-radius: var(--prime-ref-radius-l);
201
+ --prime-sys-size-control-l-supportText: var(--prime-sys-typography-support-xs);
202
+ --prime-sys-size-control-l-text: var(--prime-sys-typography-control-m);
203
+ --prime-sys-size-control-m-buttonPaddingX: var(--prime-ref-spaces-control-button-m);
204
+ --prime-sys-size-control-m-buttonPaddingY: var(--prime-ref-spaces-control-button-m);
205
+ --prime-sys-size-control-m-gap: var(--prime-ref-spaces-control-spacing-m);
206
+ --prime-sys-size-control-m-height: var(--prime-ref-size-m);
207
+ --prime-sys-size-control-m-icon: var(--prime-ref-icon-m);
208
+ --prime-sys-size-control-m-inputPaddingX: var(--prime-ref-spaces-control-spacing-m);
209
+ --prime-sys-size-control-m-inputPaddingY: var(--prime-sys-spacing-s);
210
+ --prime-sys-size-control-m-radius: var(--prime-ref-radius-m);
211
+ --prime-sys-size-control-m-supportText: var(--prime-sys-typography-support-2xs);
212
+ --prime-sys-size-control-m-text: var(--prime-sys-typography-control-s);
213
+ --prime-sys-size-control-s-buttonPaddingX: var(--prime-ref-spaces-control-button-s);
214
+ --prime-sys-size-control-s-buttonPaddingY: var(--prime-ref-spaces-control-button-s);
215
+ --prime-sys-size-control-s-gap: var(--prime-ref-spaces-control-spacing-s);
216
+ --prime-sys-size-control-s-height: var(--prime-ref-size-s);
217
+ --prime-sys-size-control-s-icon: var(--prime-ref-icon-s);
218
+ --prime-sys-size-control-s-inputPaddingX: var(--prime-ref-spaces-control-spacing-s);
219
+ --prime-sys-size-control-s-inputPaddingY: var(--prime-sys-spacing-xs);
220
+ --prime-sys-size-control-s-radius: var(--prime-ref-radius-s);
221
+ --prime-sys-size-control-s-supportText: var(--prime-sys-typography-support-2xs);
222
+ --prime-sys-size-control-s-text: var(--prime-sys-typography-support-2xs);
223
+ --prime-sys-size-control-xl-buttonPaddingX: var(--prime-ref-spaces-control-button-xl);
224
+ --prime-sys-size-control-xl-buttonPaddingY: var(--prime-ref-spaces-control-button-xl);
225
+ --prime-sys-size-control-xl-gap: var(--prime-ref-spaces-control-spacing-xl);
226
+ --prime-sys-size-control-xl-height: var(--prime-ref-size-xl);
227
+ --prime-sys-size-control-xl-icon: var(--prime-ref-icon-xl);
228
+ --prime-sys-size-control-xl-inputPaddingX: var(--prime-ref-spaces-control-spacing-xl);
229
+ --prime-sys-size-control-xl-inputPaddingY: var(--prime-sys-spacing-m);
230
+ --prime-sys-size-control-xl-radius: var(--prime-ref-radius-xl);
231
+ --prime-sys-size-control-xl-supportText: var(--prime-sys-typography-support-xs);
232
+ --prime-sys-size-control-xl-text: var(--prime-sys-typography-control-l);
233
+ --prime-sys-size-control-xs-buttonPaddingX: var(--prime-sys-spacing-s);
234
+ --prime-sys-size-control-xs-buttonPaddingY: var(--prime-sys-spacing-s);
235
+ --prime-sys-size-control-xs-gap: var(--prime-sys-spacing-xs);
236
+ --prime-sys-size-control-xs-height: var(--prime-ref-size-xs);
237
+ --prime-sys-size-control-xs-icon: var(--prime-ref-icon-xs);
238
+ --prime-sys-size-control-xs-inputPaddingX: var(--prime-sys-spacing-xs);
239
+ --prime-sys-size-control-xs-inputPaddingY: var(--prime-sys-spacing-xs);
240
+ --prime-sys-size-control-xs-radius: var(--prime-ref-radius-xs);
241
+ --prime-sys-size-control-xs-supportText: var(--prime-sys-typography-support-3xs);
242
+ --prime-sys-size-control-xs-text: var(--prime-sys-typography-support-3xs);
243
+ --prime-sys-size-drawer-l-footerGap: var(--prime-sys-spacing-x3);
244
+ --prime-sys-size-drawer-l-headerGap: var(--prime-sys-spacing-x3);
245
+ --prime-sys-size-drawer-l-paddingX: var(--prime-sys-spacing-x6);
246
+ --prime-sys-size-drawer-l-paddingY: var(--prime-sys-spacing-x6);
247
+ --prime-sys-size-drawer-l-titleGap: var(--prime-sys-size-control-l-gap);
248
+ --prime-sys-size-drawer-l-titleText: var(--prime-sys-size-control-l-text);
249
+ --prime-sys-size-drawer-m-footerGap: var(--prime-sys-spacing-x3);
250
+ --prime-sys-size-drawer-m-headerGap: var(--prime-sys-spacing-x3);
251
+ --prime-sys-size-drawer-m-paddingX: var(--prime-sys-spacing-x5);
252
+ --prime-sys-size-drawer-m-paddingY: var(--prime-sys-spacing-x5);
253
+ --prime-sys-size-drawer-m-titleGap: var(--prime-sys-size-control-m-gap);
254
+ --prime-sys-size-drawer-m-titleText: var(--prime-sys-size-control-m-text);
255
+ --prime-sys-size-drawer-s-footerGap: var(--prime-sys-spacing-x2);
256
+ --prime-sys-size-drawer-s-headerGap: var(--prime-sys-spacing-x2);
257
+ --prime-sys-size-drawer-s-paddingX: var(--prime-sys-spacing-x3);
258
+ --prime-sys-size-drawer-s-paddingY: var(--prime-sys-spacing-x3);
259
+ --prime-sys-size-drawer-s-titleGap: var(--prime-sys-size-control-s-gap);
260
+ --prime-sys-size-drawer-s-titleText: var(--prime-sys-size-control-s-text);
261
+ --prime-sys-size-drawer-xl-footerGap: var(--prime-sys-spacing-x4);
262
+ --prime-sys-size-drawer-xl-headerGap: var(--prime-sys-spacing-x4);
263
+ --prime-sys-size-drawer-xl-paddingX: var(--prime-sys-spacing-x8);
264
+ --prime-sys-size-drawer-xl-paddingY: var(--prime-sys-spacing-x8);
265
+ --prime-sys-size-drawer-xl-titleGap: var(--prime-sys-size-control-xl-gap);
266
+ --prime-sys-size-drawer-xl-titleText: var(--prime-sys-size-control-xl-text);
267
+ --prime-sys-size-kbd-height: var(--prime-sys-size-control-xs-height);
268
+ --prime-sys-size-kbd-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
269
+ --prime-sys-size-kbd-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
270
+ --prime-sys-size-kbd-radius: var(--prime-sys-size-control-xs-radius);
271
+ --prime-sys-size-kbd-text: var(--prime-sys-size-control-xs-text);
272
+ --prime-sys-size-modal-bodyGap: var(--prime-sys-spacing-l);
273
+ --prime-sys-size-modal-contentGap: var(--prime-sys-spacing-l);
274
+ --prime-sys-size-modal-footerGap: var(--prime-sys-spacing-m);
275
+ --prime-sys-size-modal-footerPaddingTop: var(--prime-sys-spacing-l);
276
+ --prime-sys-size-modal-headerGap: var(--prime-sys-spacing-m);
277
+ --prime-sys-size-modal-headerIconSize: var(--prime-ref-size-m);
278
+ --prime-sys-size-modal-headerPaddingBottom: var(--prime-sys-spacing-l);
279
+ --prime-sys-size-modal-headTextPaddingRight: var(--prime-sys-spacing-3xl);
280
+ --prime-sys-size-modal-maxWidth: 30rem;
281
+ --prime-sys-size-modal-overlayPaddingX: var(--prime-sys-spacing-l);
282
+ --prime-sys-size-modal-overlayPaddingY: var(--prime-sys-spacing-l);
283
+ --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
284
+ --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
285
+ --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
286
+ --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
287
+ --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
288
+ --prime-sys-size-switch-l-trackHeight: 1.25rem;
289
+ --prime-sys-size-switch-l-trackWidth: 2.25rem;
290
+ --prime-sys-size-switch-m-thumb: var(--prime-ref-icon-s);
291
+ --prime-sys-size-switch-m-trackHeight: 1.25rem;
292
+ --prime-sys-size-switch-m-trackWidth: 2rem;
293
+ --prime-sys-size-switch-s-thumb: var(--prime-ref-icon-xs);
294
+ --prime-sys-size-switch-s-trackHeight: 1rem;
295
+ --prime-sys-size-switch-s-trackWidth: 1.75rem;
296
+ --prime-sys-size-switch-xl-thumb: var(--prime-ref-icon-l);
297
+ --prime-sys-size-switch-xl-trackHeight: 1.5rem;
298
+ --prime-sys-size-switch-xl-trackWidth: 2.5rem;
299
+ --prime-sys-size-tag-l-gap: var(--prime-sys-size-control-m-gap);
300
+ --prime-sys-size-tag-l-iconSize: var(--prime-sys-size-control-m-icon);
301
+ --prime-sys-size-tag-l-paddingX: var(--prime-sys-size-control-m-buttonPaddingX);
302
+ --prime-sys-size-tag-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
303
+ --prime-sys-size-tag-l-radius: var(--prime-sys-size-control-m-radius);
304
+ --prime-sys-size-tag-l-text: var(--prime-sys-size-control-m-text);
305
+ --prime-sys-size-tag-m-gap: var(--prime-sys-size-control-s-gap);
306
+ --prime-sys-size-tag-m-iconSize: var(--prime-sys-size-control-s-icon);
307
+ --prime-sys-size-tag-m-paddingX: var(--prime-sys-size-control-s-buttonPaddingX);
308
+ --prime-sys-size-tag-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
309
+ --prime-sys-size-tag-m-radius: var(--prime-sys-size-control-s-radius);
310
+ --prime-sys-size-tag-m-text: var(--prime-sys-size-control-s-text);
311
+ --prime-sys-size-tag-s-gap: var(--prime-sys-size-control-xs-gap);
312
+ --prime-sys-size-tag-s-iconSize: var(--prime-sys-size-control-xs-icon);
313
+ --prime-sys-size-tag-s-paddingX: var(--prime-sys-size-control-xs-buttonPaddingX);
314
+ --prime-sys-size-tag-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
315
+ --prime-sys-size-tag-s-radius: var(--prime-sys-size-control-xs-radius);
316
+ --prime-sys-size-tag-s-text: var(--prime-sys-size-control-xs-text);
317
+ --prime-sys-size-tag-xl-gap: var(--prime-sys-size-control-l-gap);
318
+ --prime-sys-size-tag-xl-iconSize: var(--prime-sys-size-control-l-icon);
319
+ --prime-sys-size-tag-xl-paddingX: var(--prime-sys-size-control-l-buttonPaddingX);
320
+ --prime-sys-size-tag-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
321
+ --prime-sys-size-tag-xl-radius: var(--prime-sys-size-control-l-radius);
322
+ --prime-sys-size-tag-xl-text: var(--prime-sys-size-control-l-text);
323
+ --prime-sys-size-textarea-l-minHeight: 6rem;
324
+ --prime-sys-size-textarea-l-paddingX: var(--prime-sys-spacing-l);
325
+ --prime-sys-size-textarea-l-radius: var(--prime-ref-radius-l);
326
+ --prime-sys-size-textarea-m-minHeight: 5rem;
327
+ --prime-sys-size-textarea-m-paddingX: var(--prime-sys-spacing-m);
328
+ --prime-sys-size-textarea-m-radius: var(--prime-ref-radius-m);
329
+ --prime-sys-size-textarea-s-minHeight: 4rem;
330
+ --prime-sys-size-textarea-s-paddingX: var(--prime-sys-spacing-s);
331
+ --prime-sys-size-textarea-s-radius: var(--prime-ref-radius-s);
332
+ --prime-sys-size-textarea-xl-minHeight: 8rem;
333
+ --prime-sys-size-textarea-xl-paddingX: var(--prime-sys-spacing-xl);
334
+ --prime-sys-size-textarea-xl-radius: var(--prime-ref-radius-xl);
335
+ --prime-sys-size-tooltip-l-paddingX: var(--prime-sys-size-control-m-inputPaddingX);
336
+ --prime-sys-size-tooltip-l-paddingY: var(--prime-sys-size-control-m-inputPaddingY);
337
+ --prime-sys-size-tooltip-l-radius: var(--prime-sys-size-control-m-radius);
338
+ --prime-sys-size-tooltip-l-text: var(--prime-sys-size-control-m-supportText);
339
+ --prime-sys-size-tooltip-m-paddingX: var(--prime-sys-size-control-s-inputPaddingX);
340
+ --prime-sys-size-tooltip-m-paddingY: var(--prime-sys-size-control-s-inputPaddingY);
341
+ --prime-sys-size-tooltip-m-radius: var(--prime-sys-size-control-s-radius);
342
+ --prime-sys-size-tooltip-m-text: var(--prime-sys-size-control-s-supportText);
343
+ --prime-sys-size-tooltip-s-paddingX: var(--prime-sys-size-control-xs-inputPaddingX);
344
+ --prime-sys-size-tooltip-s-paddingY: var(--prime-sys-size-control-xs-inputPaddingY);
345
+ --prime-sys-size-tooltip-s-radius: var(--prime-sys-size-control-xs-radius);
346
+ --prime-sys-size-tooltip-s-text: var(--prime-sys-size-control-xs-supportText);
347
+ --prime-sys-size-tooltip-xl-paddingX: var(--prime-sys-size-control-l-inputPaddingX);
348
+ --prime-sys-size-tooltip-xl-paddingY: var(--prime-sys-size-control-l-inputPaddingY);
349
+ --prime-sys-size-tooltip-xl-radius: var(--prime-sys-size-control-l-radius);
350
+ --prime-sys-size-tooltip-xl-text: var(--prime-sys-size-control-l-supportText);
351
+ --prime-sys-spacing-2xl: var(--prime-ref-spaces-layout-2xl);
352
+ --prime-sys-spacing-3xl: var(--prime-ref-spaces-layout-3xl);
353
+ --prime-sys-spacing-4xl: var(--prime-ref-spaces-layout-4xl);
354
+ --prime-sys-spacing-5xl: var(--prime-ref-spaces-layout-5xl);
355
+ --prime-sys-spacing-6xl: var(--prime-ref-spaces-layout-6xl);
356
+ --prime-sys-spacing-l: var(--prime-ref-spaces-layout-l);
357
+ --prime-sys-spacing-m: var(--prime-ref-spaces-layout-m);
358
+ --prime-sys-spacing-s: var(--prime-ref-spaces-layout-s);
359
+ --prime-sys-spacing-x0: var(--prime-ref-spaces-layout-0);
360
+ --prime-sys-spacing-x1: var(--prime-ref-spaces-layout-xs);
361
+ --prime-sys-spacing-x10: var(--prime-ref-spaces-layout-4xl);
362
+ --prime-sys-spacing-x12: var(--prime-ref-spaces-layout-5xl);
363
+ --prime-sys-spacing-x14: var(--prime-ref-spaces-layout-6xl);
364
+ --prime-sys-spacing-x2: var(--prime-ref-spaces-layout-s);
365
+ --prime-sys-spacing-x3: var(--prime-ref-spaces-layout-m);
366
+ --prime-sys-spacing-x4: var(--prime-ref-spaces-layout-l);
367
+ --prime-sys-spacing-x5: var(--prime-ref-spaces-layout-xl);
368
+ --prime-sys-spacing-x6: var(--prime-ref-spaces-layout-2xl);
369
+ --prime-sys-spacing-x8: var(--prime-ref-spaces-layout-3xl);
370
+ --prime-sys-spacing-xl: var(--prime-ref-spaces-layout-xl);
371
+ --prime-sys-spacing-xs: var(--prime-ref-spaces-layout-xs);
372
+ --prime-sys-typography-body-letterSpacing: var(--prime-ref-font-letterSpacing-normal);
373
+ --prime-sys-typography-body-lineHeight: var(--prime-sys-typography-lineHeight-normal);
374
+ --prime-sys-typography-body-size: var(--prime-ref-font-size-s);
375
+ --prime-sys-typography-control-l: var(--prime-ref-font-size-m);
376
+ --prime-sys-typography-control-m: var(--prime-ref-font-size-s);
377
+ --prime-sys-typography-control-s: var(--prime-ref-font-size-xs);
378
+ --prime-sys-typography-family-base: var(--prime-ref-font-family-base);
379
+ --prime-sys-typography-lineHeight-normal: 1.5;
380
+ --prime-sys-typography-lineHeight-relaxed: 1.65;
381
+ --prime-sys-typography-lineHeight-tight: 1.25;
382
+ --prime-sys-typography-lineHeightScale-2xl: var(--prime-ref-font-lineHeight-2xl);
383
+ --prime-sys-typography-lineHeightScale-2xs: var(--prime-ref-font-lineHeight-2xs);
384
+ --prime-sys-typography-lineHeightScale-3xl: var(--prime-ref-font-lineHeight-3xl);
385
+ --prime-sys-typography-lineHeightScale-3xs: var(--prime-ref-font-lineHeight-3xs);
386
+ --prime-sys-typography-lineHeightScale-4xl: var(--prime-ref-font-lineHeight-4xl);
387
+ --prime-sys-typography-lineHeightScale-5xl: var(--prime-ref-font-lineHeight-5xl);
388
+ --prime-sys-typography-lineHeightScale-6xl: var(--prime-ref-font-lineHeight-6xl);
389
+ --prime-sys-typography-lineHeightScale-l: var(--prime-ref-font-lineHeight-l);
390
+ --prime-sys-typography-lineHeightScale-m: var(--prime-ref-font-lineHeight-m);
391
+ --prime-sys-typography-lineHeightScale-s: var(--prime-ref-font-lineHeight-s);
392
+ --prime-sys-typography-lineHeightScale-xl: var(--prime-ref-font-lineHeight-xl);
393
+ --prime-sys-typography-lineHeightScale-xs: var(--prime-ref-font-lineHeight-xs);
394
+ --prime-sys-typography-sizeScale-2xl: var(--prime-ref-font-size-2xl);
395
+ --prime-sys-typography-sizeScale-2xs: var(--prime-ref-font-size-2xs);
396
+ --prime-sys-typography-sizeScale-3xl: var(--prime-ref-font-size-3xl);
397
+ --prime-sys-typography-sizeScale-3xs: var(--prime-ref-font-size-3xs);
398
+ --prime-sys-typography-sizeScale-4xl: var(--prime-ref-font-size-4xl);
399
+ --prime-sys-typography-sizeScale-5xl: var(--prime-ref-font-size-5xl);
400
+ --prime-sys-typography-sizeScale-6xl: var(--prime-ref-font-size-6xl);
401
+ --prime-sys-typography-sizeScale-l: var(--prime-ref-font-size-l);
402
+ --prime-sys-typography-sizeScale-m: var(--prime-ref-font-size-m);
403
+ --prime-sys-typography-sizeScale-s: var(--prime-ref-font-size-s);
404
+ --prime-sys-typography-sizeScale-xl: var(--prime-ref-font-size-xl);
405
+ --prime-sys-typography-sizeScale-xs: var(--prime-ref-font-size-xs);
406
+ --prime-sys-typography-style-italic: italic;
407
+ --prime-sys-typography-style-normal: normal;
408
+ --prime-sys-typography-support-2xs: var(--prime-ref-font-size-2xs);
409
+ --prime-sys-typography-support-3xs: var(--prime-ref-font-size-3xs);
410
+ --prime-sys-typography-support-s: var(--prime-ref-font-size-s);
411
+ --prime-sys-typography-support-xs: var(--prime-ref-font-size-xs);
412
+ --prime-sys-typography-title-size: var(--prime-ref-font-size-l);
413
+ --prime-sys-typography-title-weight: var(--prime-ref-font-weight-semibold);
414
+ --prime-sys-typography-tracking-normal: var(--prime-ref-font-letterSpacing-normal);
415
+ --prime-sys-typography-tracking-tight: var(--prime-ref-font-letterSpacing-tight);
416
+ --prime-sys-typography-tracking-tighter: var(--prime-ref-font-letterSpacing-tighter);
417
+ --prime-sys-typography-tracking-wide: var(--prime-ref-font-letterSpacing-wide);
418
+ --prime-sys-typography-tracking-wider: var(--prime-ref-font-letterSpacing-wider);
419
+ --prime-sys-typography-weight-bold: var(--prime-ref-font-weight-bold);
420
+ --prime-sys-typography-weight-medium: var(--prime-ref-font-weight-medium);
421
+ --prime-sys-typography-weight-regular: var(--prime-ref-font-weight-regular);
422
+ --prime-sys-typography-weight-semibold: var(--prime-ref-font-weight-semibold);
423
+ }