@pearpages/pulp-tokens 0.0.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 (45) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +60 -0
  3. package/dist/tokens.css +914 -0
  4. package/dist/tokens.json +10638 -0
  5. package/package.json +33 -0
  6. package/tokens/component/accordion.json +83 -0
  7. package/tokens/component/alert.json +93 -0
  8. package/tokens/component/badge.json +153 -0
  9. package/tokens/component/button.json +118 -0
  10. package/tokens/component/calendar.json +48 -0
  11. package/tokens/component/card.json +28 -0
  12. package/tokens/component/checkbox.json +77 -0
  13. package/tokens/component/combobox.json +113 -0
  14. package/tokens/component/date-picker.json +145 -0
  15. package/tokens/component/dialog.json +36 -0
  16. package/tokens/component/field.json +23 -0
  17. package/tokens/component/heading.json +44 -0
  18. package/tokens/component/icon-button.json +17 -0
  19. package/tokens/component/icon.json +18 -0
  20. package/tokens/component/inline.json +32 -0
  21. package/tokens/component/listbox.json +37 -0
  22. package/tokens/component/menu.json +101 -0
  23. package/tokens/component/pagination.json +22 -0
  24. package/tokens/component/picker.json +113 -0
  25. package/tokens/component/popover.json +59 -0
  26. package/tokens/component/progress.json +60 -0
  27. package/tokens/component/radio.json +73 -0
  28. package/tokens/component/select.json +106 -0
  29. package/tokens/component/skeleton.json +41 -0
  30. package/tokens/component/slider.json +39 -0
  31. package/tokens/component/spinner.json +33 -0
  32. package/tokens/component/stack.json +32 -0
  33. package/tokens/component/switch.json +77 -0
  34. package/tokens/component/table.json +57 -0
  35. package/tokens/component/tabs.json +31 -0
  36. package/tokens/component/text-field.json +90 -0
  37. package/tokens/component/text.json +31 -0
  38. package/tokens/component/textarea.json +90 -0
  39. package/tokens/component/toast.json +35 -0
  40. package/tokens/component/tooltip.json +49 -0
  41. package/tokens/component/visually-hidden.json +9 -0
  42. package/tokens/primitives/bitepals.json +285 -0
  43. package/tokens/primitives/pulp.json +216 -0
  44. package/tokens/semantic/bitepals.json +727 -0
  45. package/tokens/semantic/pulp.json +728 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,914 @@
1
+ /* Generated by @pearpages/pulp-tokens from tokens/**.json. Do not edit: run `pnpm build:tokens`. */
2
+
3
+ @layer tokens {
4
+ /* Scheme axis. Colours are light-dark() pairs; color-scheme picks the side. */
5
+ :root { color-scheme: light dark; }
6
+ [data-scheme="light"] { color-scheme: light; }
7
+ [data-scheme="dark"] { color-scheme: dark; }
8
+
9
+ /* Brand: pulp */
10
+ :root, [data-brand="pulp"] {
11
+ --color-ultramarine-100: #e8eafc;
12
+ --color-ultramarine-200: #a5aeff;
13
+ --color-ultramarine-300: #8b97ff;
14
+ --color-ultramarine-400: #6b7aff;
15
+ --color-ultramarine-500: #1e2ed6;
16
+ --color-ultramarine-700: #1522a8;
17
+ --color-ultramarine-800: #101a80;
18
+ --color-ultramarine-900: #10164a;
19
+ --color-neutral-0: #ffffff;
20
+ --color-neutral-50: #f3f4f7;
21
+ --color-neutral-100: #ededf2;
22
+ --color-neutral-200: #e9ebf1;
23
+ --color-neutral-300: #d5d7de;
24
+ --color-neutral-400: #adb0bb;
25
+ --color-neutral-450: #8f95a8;
26
+ --color-neutral-500: #767d92;
27
+ --color-neutral-600: #666c80;
28
+ --color-neutral-700: #5a6072;
29
+ --color-neutral-800: #4a4f5d;
30
+ --color-neutral-850: #262a35;
31
+ --color-neutral-900: #11141d;
32
+ --color-neutral-950: #0c0e14;
33
+ --color-neutral-975: #090b11;
34
+ --color-neutral-1000: #05070b;
35
+ --color-saffron-100: #fff3d6;
36
+ --color-saffron-500: #ffb020;
37
+ --color-saffron-700: #8a5a00;
38
+ --color-saffron-900: #3a2800;
39
+ --color-green-100: #e3f6ec;
40
+ --color-green-300: #3ecf8e;
41
+ --color-green-500: #1a8f5c;
42
+ --color-green-700: #146e47;
43
+ --color-green-900: #0e2e20;
44
+ --color-red-100: #fbe5e6;
45
+ --color-red-300: #ff6b70;
46
+ --color-red-500: #d0393e;
47
+ --color-red-700: #a52c30;
48
+ --color-red-900: #3d1113;
49
+ --color-surface-base: light-dark(var(--color-neutral-50), var(--color-neutral-975));
50
+ --color-surface-raised: light-dark(var(--color-neutral-0), var(--color-neutral-900));
51
+ --color-surface-sunken: light-dark(var(--color-neutral-200), var(--color-neutral-1000));
52
+ --color-surface-inverse: light-dark(var(--color-neutral-950), var(--color-neutral-100));
53
+ --color-text-default: light-dark(var(--color-neutral-950), var(--color-neutral-100));
54
+ --color-text-muted: light-dark(var(--color-neutral-700), var(--color-neutral-400));
55
+ --color-text-faint: light-dark(var(--color-neutral-600), var(--color-neutral-450));
56
+ --color-text-on-action: light-dark(var(--color-neutral-100), var(--color-neutral-950));
57
+ --color-text-on-inverse: light-dark(var(--color-neutral-50), var(--color-neutral-950));
58
+ --color-action-primary: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
59
+ --color-action-primary-hover: light-dark(var(--color-ultramarine-700), var(--color-ultramarine-200));
60
+ --color-action-primary-active: light-dark(var(--color-ultramarine-800), var(--color-ultramarine-400));
61
+ --color-action-primary-quiet: light-dark(var(--color-ultramarine-100), var(--color-ultramarine-900));
62
+ --color-action-secondary: light-dark(var(--color-neutral-100), var(--color-neutral-850));
63
+ --color-action-secondary-hover: light-dark(var(--color-neutral-200), var(--color-neutral-800));
64
+ --color-action-text: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
65
+ --color-border-default: light-dark(var(--color-neutral-300), var(--color-neutral-850));
66
+ --color-border-strong: light-dark(var(--color-neutral-400), var(--color-neutral-800));
67
+ --color-border-focus: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
68
+ --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
69
+ --color-status-warning: light-dark(var(--color-saffron-500), var(--color-saffron-500));
70
+ --color-status-error: light-dark(var(--color-red-500), var(--color-red-300));
71
+ --color-status-info: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
72
+ --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
73
+ --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));
74
+ --color-status-warning-text: light-dark(var(--color-saffron-700), var(--color-saffron-500));
75
+ --color-status-info-text: light-dark(var(--color-ultramarine-500), var(--color-ultramarine-300));
76
+ --color-status-success-subtle: light-dark(var(--color-green-100), var(--color-green-900));
77
+ --color-status-warning-subtle: light-dark(var(--color-saffron-100), var(--color-saffron-900));
78
+ --color-status-error-subtle: light-dark(var(--color-red-100), var(--color-red-900));
79
+ --color-status-info-subtle: light-dark(var(--color-ultramarine-100), var(--color-ultramarine-900));
80
+ --color-status-on-success: light-dark(var(--color-neutral-950), var(--color-neutral-950));
81
+ --color-status-on-warning: light-dark(var(--color-neutral-950), var(--color-neutral-950));
82
+ --color-status-on-error: light-dark(var(--color-neutral-0), var(--color-neutral-950));
83
+ --color-status-on-info: light-dark(var(--color-neutral-100), var(--color-neutral-950));
84
+ --color-status-neutral: light-dark(var(--color-neutral-700), var(--color-neutral-400));
85
+ --color-status-neutral-subtle: light-dark(var(--color-neutral-100), var(--color-neutral-850));
86
+ --color-status-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-400));
87
+ --color-status-on-neutral: light-dark(var(--color-neutral-0), var(--color-neutral-950));
88
+ --color-overlay-backdrop: light-dark(#0c0e1499, #000000b3);
89
+ --radius-sm: 3px;
90
+ --radius-lg: 10px;
91
+ --radius-pill: 9999px;
92
+ --radius-control: var(--radius-sm);
93
+ --radius-surface: var(--radius-lg);
94
+ --radius-full: var(--radius-pill);
95
+ --space-1: calc(var(--space-unit) * 1);
96
+ --space-2: calc(var(--space-unit) * 2);
97
+ --space-3: calc(var(--space-unit) * 3);
98
+ --space-4: calc(var(--space-unit) * 4);
99
+ --space-5: calc(var(--space-unit) * 6);
100
+ --space-6: calc(var(--space-unit) * 8);
101
+ --space-7: calc(var(--space-unit) * 12);
102
+ --space-8: calc(var(--space-unit) * 16);
103
+ --space-unit: 0.25rem;
104
+ --duration-fast: 140ms;
105
+ --duration-base: 260ms;
106
+ --easing-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
107
+ --typeface-display: 'Archivo Variable', Archivo, system-ui, sans-serif;
108
+ --typeface-body: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
109
+ --typeface-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
110
+ --font-family-display: var(--typeface-display);
111
+ --font-family-body: var(--typeface-body);
112
+ --font-family-mono: var(--typeface-mono);
113
+ --font-size-xs: 0.75rem;
114
+ --font-size-sm: 0.875rem;
115
+ --font-size-md: 1rem;
116
+ --font-size-lg: 1.125rem;
117
+ --font-size-xl: 1.375rem;
118
+ --font-size-2xl: 1.75rem;
119
+ --font-size-3xl: 2.25rem;
120
+ --font-weight-regular: 400;
121
+ --font-weight-medium: 500;
122
+ --font-weight-semibold: 600;
123
+ --font-line-height-tight: 1.2;
124
+ --font-line-height-normal: 1.5;
125
+ --motion-duration-fast: var(--duration-fast);
126
+ --motion-duration-base: var(--duration-base);
127
+ --motion-easing-standard: var(--easing-standard);
128
+ --shadow-raised-color: light-dark(#0c0e141a, #00000059);
129
+ --shadow-raised: 0px 2px 12px 0px var(--shadow-raised-color);
130
+ --shadow-overlay-color: light-dark(#0c0e1433, #00000080);
131
+ --shadow-overlay: 0px 16px 48px 0px var(--shadow-overlay-color);
132
+ --size-control-sm: 2rem;
133
+ --size-control-md: 2.5rem;
134
+ --size-control-lg: 3rem;
135
+ --size-hairline: 1px;
136
+ --size-toggle-sm: 1rem;
137
+ --size-toggle-md: 1.25rem;
138
+ --size-toggle-lg: 1.5rem;
139
+ --size-toast-width: 22rem;
140
+ --size-popover-width: 20rem;
141
+ --size-menu-width: 14rem;
142
+ --size-listbox-height: 18rem;
143
+ --focus-ring-width: 2px;
144
+ --focus-ring-offset: 2px;
145
+ --layer-toast: 1100;
146
+ --layer-popover: 1200;
147
+ --layer-tooltip: 1300;
148
+ --accordion-border: var(--color-border-default);
149
+ --accordion-radius: var(--radius-surface);
150
+ --accordion-trigger-padding-block: var(--space-3);
151
+ --accordion-trigger-padding-inline: var(--space-3);
152
+ --accordion-trigger-font-size: var(--font-size-md);
153
+ --accordion-trigger-font-weight: var(--font-weight-medium);
154
+ --accordion-trigger-fg: var(--color-text-default);
155
+ --accordion-trigger-bg-hover: var(--color-action-primary-quiet);
156
+ --accordion-trigger-chevron: var(--color-text-muted);
157
+ --accordion-trigger-gap: var(--space-3);
158
+ --accordion-panel-padding-block: var(--space-3);
159
+ --accordion-panel-padding-inline: var(--space-3);
160
+ --accordion-panel-fg: var(--color-text-default);
161
+ --accordion-panel-font-size: var(--font-size-sm);
162
+ --accordion-duration: var(--motion-duration-fast);
163
+ --accordion-focus-ring: var(--color-border-focus);
164
+ --accordion-focus-ring-width: var(--focus-ring-width);
165
+ --accordion-focus-ring-offset: var(--focus-ring-offset);
166
+ --alert-radius: var(--radius-surface);
167
+ --alert-padding: var(--space-4);
168
+ --alert-gap: var(--space-3);
169
+ --alert-border-width: var(--size-hairline);
170
+ --alert-accent-width: var(--space-1);
171
+ --alert-fg: var(--color-text-default);
172
+ --alert-font-size: var(--font-size-sm);
173
+ --alert-title-font-weight: var(--font-weight-semibold);
174
+ --alert-info-bg: var(--color-status-info-subtle);
175
+ --alert-info-accent: var(--color-status-info);
176
+ --alert-info-title: var(--color-status-info-text);
177
+ --alert-success-bg: var(--color-status-success-subtle);
178
+ --alert-success-accent: var(--color-status-success);
179
+ --alert-success-title: var(--color-status-success-text);
180
+ --alert-warning-bg: var(--color-status-warning-subtle);
181
+ --alert-warning-accent: var(--color-status-warning);
182
+ --alert-warning-title: var(--color-status-warning-text);
183
+ --alert-error-bg: var(--color-status-error-subtle);
184
+ --alert-error-accent: var(--color-status-error);
185
+ --alert-error-title: var(--color-status-error-text);
186
+ --badge-radius: var(--radius-full);
187
+ --badge-gap: var(--space-1);
188
+ --badge-padding-block: var(--space-1);
189
+ --badge-padding-inline-sm: var(--space-2);
190
+ --badge-padding-inline-md: var(--space-3);
191
+ --badge-font-size-sm: var(--font-size-xs);
192
+ --badge-font-size-md: var(--font-size-sm);
193
+ --badge-font-weight: var(--font-weight-medium);
194
+ --badge-line-height: var(--font-line-height-tight);
195
+ --badge-neutral-solid-bg: var(--color-status-neutral);
196
+ --badge-neutral-solid-fg: var(--color-status-on-neutral);
197
+ --badge-neutral-subtle-bg: var(--color-status-neutral-subtle);
198
+ --badge-neutral-subtle-fg: var(--color-status-neutral-text);
199
+ --badge-info-solid-bg: var(--color-status-info);
200
+ --badge-info-solid-fg: var(--color-status-on-info);
201
+ --badge-info-subtle-bg: var(--color-status-info-subtle);
202
+ --badge-info-subtle-fg: var(--color-status-info-text);
203
+ --badge-success-solid-bg: var(--color-status-success);
204
+ --badge-success-solid-fg: var(--color-status-on-success);
205
+ --badge-success-subtle-bg: var(--color-status-success-subtle);
206
+ --badge-success-subtle-fg: var(--color-status-success-text);
207
+ --badge-warning-solid-bg: var(--color-status-warning);
208
+ --badge-warning-solid-fg: var(--color-status-on-warning);
209
+ --badge-warning-subtle-bg: var(--color-status-warning-subtle);
210
+ --badge-warning-subtle-fg: var(--color-status-warning-text);
211
+ --badge-error-solid-bg: var(--color-status-error);
212
+ --badge-error-solid-fg: var(--color-status-on-error);
213
+ --badge-error-subtle-bg: var(--color-status-error-subtle);
214
+ --badge-error-subtle-fg: var(--color-status-error-text);
215
+ --button-radius: var(--radius-control);
216
+ --button-gap: var(--space-2);
217
+ --button-font-family: var(--font-family-body);
218
+ --button-font-weight: var(--font-weight-medium);
219
+ --button-font-size-sm: var(--font-size-sm);
220
+ --button-font-size-md: var(--font-size-md);
221
+ --button-font-size-lg: var(--font-size-lg);
222
+ --button-height-sm: var(--size-control-sm);
223
+ --button-height-md: var(--size-control-md);
224
+ --button-height-lg: var(--size-control-lg);
225
+ --button-padding-inline-sm: var(--space-3);
226
+ --button-padding-inline-md: var(--space-4);
227
+ --button-padding-inline-lg: var(--space-5);
228
+ --button-primary-bg: var(--color-action-primary);
229
+ --button-primary-bg-hover: var(--color-action-primary-hover);
230
+ --button-primary-bg-active: var(--color-action-primary-active);
231
+ --button-primary-fg: var(--color-text-on-action);
232
+ --button-secondary-bg: var(--color-action-secondary);
233
+ --button-secondary-bg-hover: var(--color-action-secondary-hover);
234
+ --button-secondary-fg: var(--color-text-default);
235
+ --button-secondary-border: var(--color-border-default);
236
+ --button-ghost-fg: var(--color-action-text);
237
+ --button-ghost-bg-hover: var(--color-action-primary-quiet);
238
+ --button-focus-ring: var(--color-border-focus);
239
+ --button-focus-ring-width: var(--focus-ring-width);
240
+ --button-focus-ring-offset: var(--focus-ring-offset);
241
+ --button-motion-duration: var(--motion-duration-fast);
242
+ --calendar-bg: var(--color-surface-raised);
243
+ --calendar-fg: var(--color-text-default);
244
+ --calendar-padding: var(--space-3);
245
+ --calendar-gap: var(--space-2);
246
+ --calendar-font-family: var(--font-family-body);
247
+ --calendar-font-size: var(--font-size-sm);
248
+ --calendar-heading-font-size: var(--font-size-md);
249
+ --calendar-heading-font-weight: var(--font-weight-medium);
250
+ --calendar-nav-size: var(--size-control-sm);
251
+ --calendar-nav-radius: var(--radius-control);
252
+ --calendar-nav-fg: var(--color-text-muted);
253
+ --calendar-nav-fg-hover: var(--color-text-default);
254
+ --calendar-nav-bg-hover: var(--color-action-secondary);
255
+ --calendar-weekday-fg: var(--color-text-muted);
256
+ --calendar-weekday-font-size: var(--font-size-xs);
257
+ --calendar-weekday-font-weight: var(--font-weight-medium);
258
+ --calendar-cell-size: var(--size-control-sm);
259
+ --calendar-cell-radius: var(--radius-control);
260
+ --calendar-cell-fg: var(--color-text-default);
261
+ --calendar-cell-fg-unavailable: var(--color-text-faint);
262
+ --calendar-cell-fg-today: var(--color-action-text);
263
+ --calendar-cell-bg-hover: var(--color-action-secondary);
264
+ --calendar-cell-bg-selected: var(--color-action-primary);
265
+ --calendar-cell-fg-selected: var(--color-text-on-action);
266
+ --calendar-cell-bg-selected-hover: var(--color-action-primary-hover);
267
+ --calendar-focus-ring: var(--color-border-focus);
268
+ --calendar-focus-ring-width: var(--focus-ring-width);
269
+ --calendar-focus-ring-offset: var(--focus-ring-offset);
270
+ --calendar-motion-duration: var(--motion-duration-fast);
271
+ --card-bg: var(--color-surface-raised);
272
+ --card-bg-sunken: var(--color-surface-sunken);
273
+ --card-fg: var(--color-text-default);
274
+ --card-border: var(--color-border-default);
275
+ --card-border-hover: var(--color-border-strong);
276
+ --card-radius: var(--radius-surface);
277
+ --card-shadow: var(--shadow-raised);
278
+ --card-gap: var(--space-3);
279
+ --card-padding-sm: var(--space-3);
280
+ --card-padding-md: var(--space-4);
281
+ --card-padding-lg: var(--space-5);
282
+ --card-divider: var(--color-border-default);
283
+ --card-focus-ring: var(--color-border-focus);
284
+ --card-focus-ring-width: var(--focus-ring-width);
285
+ --card-focus-ring-offset: var(--focus-ring-offset);
286
+ --card-motion-duration: var(--motion-duration-fast);
287
+ --checkbox-size-sm: var(--size-toggle-sm);
288
+ --checkbox-size-md: var(--size-toggle-md);
289
+ --checkbox-size-lg: var(--size-toggle-lg);
290
+ --checkbox-gap: var(--space-2);
291
+ --checkbox-radius: var(--radius-control);
292
+ --checkbox-bg: var(--color-surface-raised);
293
+ --checkbox-bg-checked: var(--color-action-primary);
294
+ --checkbox-bg-checked-hover: var(--color-action-primary-hover);
295
+ --checkbox-border: var(--color-border-strong);
296
+ --checkbox-border-hover: var(--color-action-primary);
297
+ --checkbox-border-invalid: var(--color-status-error);
298
+ --checkbox-check: var(--color-text-on-action);
299
+ --checkbox-check-width: var(--focus-ring-width);
300
+ --checkbox-focus-ring: var(--color-border-focus);
301
+ --checkbox-focus-ring-width: var(--focus-ring-width);
302
+ --checkbox-focus-ring-offset: var(--focus-ring-offset);
303
+ --checkbox-motion-duration: var(--motion-duration-fast);
304
+ --combobox-radius: var(--radius-control);
305
+ --combobox-padding-inline: var(--space-3);
306
+ --combobox-gap: var(--space-2);
307
+ --combobox-height-sm: var(--size-control-sm);
308
+ --combobox-height-md: var(--size-control-md);
309
+ --combobox-height-lg: var(--size-control-lg);
310
+ --combobox-font-family: var(--font-family-body);
311
+ --combobox-font-size-sm: var(--font-size-sm);
312
+ --combobox-font-size-md: var(--font-size-md);
313
+ --combobox-font-size-lg: var(--font-size-lg);
314
+ --combobox-bg: var(--color-surface-raised);
315
+ --combobox-fg: var(--color-text-default);
316
+ --combobox-placeholder: var(--color-text-faint);
317
+ --combobox-icon: var(--color-text-muted);
318
+ --combobox-icon-size: var(--space-6);
319
+ --combobox-border-default: var(--color-border-default);
320
+ --combobox-border-hover: var(--color-border-strong);
321
+ --combobox-border-focus: var(--color-border-focus);
322
+ --combobox-border-invalid: var(--color-status-error);
323
+ --combobox-popover-shadow: var(--shadow-overlay);
324
+ --combobox-popover-duration: var(--motion-duration-fast);
325
+ --combobox-focus-ring: var(--color-border-focus);
326
+ --combobox-focus-ring-width: var(--focus-ring-width);
327
+ --combobox-focus-ring-offset: var(--focus-ring-offset);
328
+ --combobox-motion-duration: var(--motion-duration-fast);
329
+ --date-picker-radius: var(--radius-control);
330
+ --date-picker-padding-inline: var(--space-3);
331
+ --date-picker-gap: var(--space-2);
332
+ --date-picker-height-sm: var(--size-control-sm);
333
+ --date-picker-height-md: var(--size-control-md);
334
+ --date-picker-height-lg: var(--size-control-lg);
335
+ --date-picker-font-family: var(--font-family-body);
336
+ --date-picker-font-size-sm: var(--font-size-sm);
337
+ --date-picker-font-size-md: var(--font-size-md);
338
+ --date-picker-font-size-lg: var(--font-size-lg);
339
+ --date-picker-bg: var(--color-surface-raised);
340
+ --date-picker-fg: var(--color-text-default);
341
+ --date-picker-placeholder: var(--color-text-faint);
342
+ --date-picker-icon: var(--color-text-muted);
343
+ --date-picker-icon-size: var(--space-6);
344
+ --date-picker-border-default: var(--color-border-default);
345
+ --date-picker-border-hover: var(--color-border-strong);
346
+ --date-picker-border-focus: var(--color-border-focus);
347
+ --date-picker-border-invalid: var(--color-status-error);
348
+ --date-picker-popover-shadow: var(--shadow-overlay);
349
+ --date-picker-popover-duration: var(--motion-duration-fast);
350
+ --date-picker-focus-ring: var(--color-border-focus);
351
+ --date-picker-focus-ring-width: var(--focus-ring-width);
352
+ --date-picker-focus-ring-offset: var(--focus-ring-offset);
353
+ --date-picker-motion-duration: var(--motion-duration-fast);
354
+ --date-picker-segment-padding-inline: var(--space-1);
355
+ --date-picker-segment-radius: var(--radius-control);
356
+ --date-picker-segment-bg-focus: var(--color-action-primary-quiet);
357
+ --date-picker-segment-fg-placeholder: var(--color-text-faint);
358
+ --date-picker-dialog-bg: var(--color-surface-raised);
359
+ --date-picker-dialog-border: var(--color-border-default);
360
+ --date-picker-dialog-radius: var(--radius-surface);
361
+ --dialog-surface: var(--color-surface-raised);
362
+ --dialog-surface-subtle: var(--color-surface-sunken);
363
+ --dialog-fg: var(--color-text-default);
364
+ --dialog-fg-muted: var(--color-text-muted);
365
+ --dialog-backdrop: var(--color-overlay-backdrop);
366
+ --dialog-border: var(--color-border-default);
367
+ --dialog-border-hover: var(--color-border-strong);
368
+ --dialog-focus: var(--color-border-focus);
369
+ --dialog-radius: var(--radius-surface);
370
+ --dialog-shadow: var(--shadow-overlay);
371
+ --dialog-padding: var(--space-5);
372
+ --dialog-gap: var(--space-3);
373
+ --dialog-font-family: var(--font-family-body);
374
+ --dialog-title-font-size: var(--font-size-lg);
375
+ --dialog-title-font-weight: var(--font-weight-semibold);
376
+ --dialog-title-font-family: var(--font-family-display);
377
+ --dialog-description-font-size: var(--font-size-sm);
378
+ --dialog-close-bg: var(--color-action-secondary);
379
+ --dialog-close-bg-hover: var(--color-action-secondary-hover);
380
+ --dialog-close-fg: var(--color-text-muted);
381
+ --dialog-close-fg-hover: var(--color-text-default);
382
+ --dialog-motion-duration: var(--motion-duration-base);
383
+ --dialog-motion-easing: var(--motion-easing-standard);
384
+ --field-gap: var(--space-1);
385
+ --field-label-fg: var(--color-text-default);
386
+ --field-label-font-size: var(--font-size-sm);
387
+ --field-label-font-weight: var(--font-weight-medium);
388
+ --field-required-fg: var(--color-status-error-text);
389
+ --field-required-gap: var(--space-1);
390
+ --field-description-fg: var(--color-text-muted);
391
+ --field-description-font-size: var(--font-size-xs);
392
+ --field-error-fg: var(--color-status-error-text);
393
+ --field-error-font-size: var(--font-size-xs);
394
+ --heading-font-family: var(--font-family-display);
395
+ --heading-font-weight: var(--font-weight-semibold);
396
+ --heading-line-height: var(--font-line-height-tight);
397
+ --heading-size-sm: var(--font-size-md);
398
+ --heading-size-md: var(--font-size-lg);
399
+ --heading-size-lg: var(--font-size-xl);
400
+ --heading-size-xl: var(--font-size-2xl);
401
+ --heading-size-2xl: var(--font-size-3xl);
402
+ --heading-tone-default: var(--color-text-default);
403
+ --heading-tone-muted: var(--color-text-muted);
404
+ --icon-button-size-sm: var(--size-control-sm);
405
+ --icon-button-size-md: var(--size-control-md);
406
+ --icon-button-size-lg: var(--size-control-lg);
407
+ --icon-size-sm: var(--font-size-sm);
408
+ --icon-size-md: var(--font-size-lg);
409
+ --icon-size-lg: var(--font-size-xl);
410
+ --inline-gap-1: var(--space-1);
411
+ --inline-gap-2: var(--space-2);
412
+ --inline-gap-3: var(--space-3);
413
+ --inline-gap-4: var(--space-4);
414
+ --inline-gap-5: var(--space-5);
415
+ --inline-gap-6: var(--space-6);
416
+ --inline-gap-7: var(--space-7);
417
+ --inline-gap-8: var(--space-8);
418
+ --listbox-bg: var(--color-surface-raised);
419
+ --listbox-fg: var(--color-text-default);
420
+ --listbox-border: var(--color-border-default);
421
+ --listbox-radius: var(--radius-surface);
422
+ --listbox-padding: var(--space-1);
423
+ --listbox-max-height: var(--size-listbox-height);
424
+ --listbox-font-family: var(--font-family-body);
425
+ --listbox-font-size: var(--font-size-sm);
426
+ --listbox-empty-fg: var(--color-text-muted);
427
+ --listbox-empty-padding: var(--space-3);
428
+ --listbox-item-padding-block: var(--space-2);
429
+ --listbox-item-padding-inline: var(--space-3);
430
+ --listbox-item-gap: var(--space-2);
431
+ --listbox-item-radius: var(--radius-control);
432
+ --listbox-item-fg: var(--color-text-default);
433
+ --listbox-item-fg-muted: var(--color-text-muted);
434
+ --listbox-item-fg-disabled: var(--color-text-faint);
435
+ --listbox-item-bg-focus: var(--color-action-primary-quiet);
436
+ --listbox-item-bg-selected: var(--color-action-primary-quiet);
437
+ --listbox-item-check: var(--color-action-text);
438
+ --listbox-item-description-font-size: var(--font-size-xs);
439
+ --listbox-focus-ring: var(--color-border-focus);
440
+ --listbox-focus-ring-width: var(--focus-ring-width);
441
+ --listbox-focus-ring-offset: var(--focus-ring-offset);
442
+ --menu-bg: var(--color-surface-raised);
443
+ --menu-fg: var(--color-text-default);
444
+ --menu-border: var(--color-border-default);
445
+ --menu-radius: var(--radius-surface);
446
+ --menu-padding: var(--space-1);
447
+ --menu-gap: var(--space-2);
448
+ --menu-min-width: var(--size-menu-width);
449
+ --menu-shadow: var(--shadow-overlay);
450
+ --menu-layer: var(--layer-popover);
451
+ --menu-duration: var(--motion-duration-fast);
452
+ --menu-item-padding-block: var(--space-2);
453
+ --menu-item-padding-inline: var(--space-3);
454
+ --menu-item-radius: var(--radius-control);
455
+ --menu-item-font-size: var(--font-size-sm);
456
+ --menu-item-fg: var(--color-text-default);
457
+ --menu-item-fg-muted: var(--color-text-muted);
458
+ --menu-item-bg-active: var(--color-action-primary-quiet);
459
+ --menu-item-fg-active: var(--color-text-default);
460
+ --menu-item-fg-danger: var(--color-status-error-text);
461
+ --menu-separator: var(--color-border-default);
462
+ --menu-focus-ring: var(--color-border-focus);
463
+ --menu-focus-ring-width: var(--focus-ring-width);
464
+ --menu-focus-ring-offset: var(--focus-ring-offset);
465
+ --pagination-gap: var(--space-1);
466
+ --pagination-font-family: var(--font-family-body);
467
+ --pagination-font-size-sm: var(--font-size-sm);
468
+ --pagination-font-size-md: var(--font-size-md);
469
+ --pagination-ellipsis-fg: var(--color-text-muted);
470
+ --pagination-ellipsis-size-sm: var(--size-control-sm);
471
+ --pagination-ellipsis-size-md: var(--size-control-md);
472
+ --picker-radius: var(--radius-control);
473
+ --picker-padding-inline: var(--space-3);
474
+ --picker-gap: var(--space-2);
475
+ --picker-height-sm: var(--size-control-sm);
476
+ --picker-height-md: var(--size-control-md);
477
+ --picker-height-lg: var(--size-control-lg);
478
+ --picker-font-family: var(--font-family-body);
479
+ --picker-font-size-sm: var(--font-size-sm);
480
+ --picker-font-size-md: var(--font-size-md);
481
+ --picker-font-size-lg: var(--font-size-lg);
482
+ --picker-bg: var(--color-surface-raised);
483
+ --picker-fg: var(--color-text-default);
484
+ --picker-placeholder: var(--color-text-faint);
485
+ --picker-icon: var(--color-text-muted);
486
+ --picker-icon-size: var(--space-6);
487
+ --picker-border-default: var(--color-border-default);
488
+ --picker-border-hover: var(--color-border-strong);
489
+ --picker-border-focus: var(--color-border-focus);
490
+ --picker-border-invalid: var(--color-status-error);
491
+ --picker-popover-shadow: var(--shadow-overlay);
492
+ --picker-popover-duration: var(--motion-duration-fast);
493
+ --picker-focus-ring: var(--color-border-focus);
494
+ --picker-focus-ring-width: var(--focus-ring-width);
495
+ --picker-focus-ring-offset: var(--focus-ring-offset);
496
+ --picker-motion-duration: var(--motion-duration-fast);
497
+ --popover-bg: var(--color-surface-raised);
498
+ --popover-fg: var(--color-text-default);
499
+ --popover-border: var(--color-border-default);
500
+ --popover-radius: var(--radius-surface);
501
+ --popover-padding: var(--space-4);
502
+ --popover-gap: var(--space-2);
503
+ --popover-width: var(--size-popover-width);
504
+ --popover-shadow: var(--shadow-overlay);
505
+ --popover-layer: var(--layer-popover);
506
+ --popover-duration: var(--motion-duration-fast);
507
+ --popover-focus-ring: var(--color-border-focus);
508
+ --popover-focus-ring-width: var(--focus-ring-width);
509
+ --popover-focus-ring-offset: var(--focus-ring-offset);
510
+ --progress-height-sm: var(--space-1);
511
+ --progress-height-md: var(--space-2);
512
+ --progress-radius: var(--radius-full);
513
+ --progress-gap: var(--space-1);
514
+ --progress-track: var(--color-surface-sunken);
515
+ --progress-label-font-size: var(--font-size-sm);
516
+ --progress-label-fg: var(--color-text-default);
517
+ --progress-value-fg: var(--color-text-muted);
518
+ --progress-indicator-primary: var(--color-action-primary);
519
+ --progress-indicator-success: var(--color-status-success);
520
+ --progress-indicator-warning: var(--color-status-warning);
521
+ --progress-indicator-error: var(--color-status-error);
522
+ --progress-duration: var(--motion-duration-base);
523
+ --radio-size-sm: var(--size-toggle-sm);
524
+ --radio-size-md: var(--size-toggle-md);
525
+ --radio-size-lg: var(--size-toggle-lg);
526
+ --radio-gap: var(--space-2);
527
+ --radio-group-gap: var(--space-2);
528
+ --radio-radius: var(--radius-full);
529
+ --radio-bg: var(--color-surface-raised);
530
+ --radio-border: var(--color-border-strong);
531
+ --radio-border-hover: var(--color-action-primary);
532
+ --radio-border-checked: var(--color-action-primary);
533
+ --radio-border-invalid: var(--color-status-error);
534
+ --radio-dot: var(--color-action-primary);
535
+ --radio-focus-ring: var(--color-border-focus);
536
+ --radio-focus-ring-width: var(--focus-ring-width);
537
+ --radio-focus-ring-offset: var(--focus-ring-offset);
538
+ --radio-motion-duration: var(--motion-duration-fast);
539
+ --select-radius: var(--radius-control);
540
+ --select-padding-inline: var(--space-3);
541
+ --select-chevron-inset: var(--space-3);
542
+ --select-chevron-gap: var(--space-6);
543
+ --select-height-sm: var(--size-control-sm);
544
+ --select-height-md: var(--size-control-md);
545
+ --select-height-lg: var(--size-control-lg);
546
+ --select-font-family: var(--font-family-body);
547
+ --select-font-size-sm: var(--font-size-sm);
548
+ --select-font-size-md: var(--font-size-md);
549
+ --select-font-size-lg: var(--font-size-lg);
550
+ --select-bg: var(--color-surface-raised);
551
+ --select-fg: var(--color-text-default);
552
+ --select-placeholder: var(--color-text-faint);
553
+ --select-chevron: var(--color-text-muted);
554
+ --select-chevron-width: var(--focus-ring-width);
555
+ --select-border-default: var(--color-border-default);
556
+ --select-border-hover: var(--color-border-strong);
557
+ --select-border-focus: var(--color-border-focus);
558
+ --select-border-invalid: var(--color-status-error);
559
+ --select-focus-ring: var(--color-border-focus);
560
+ --select-focus-ring-width: var(--focus-ring-width);
561
+ --select-focus-ring-offset: var(--focus-ring-offset);
562
+ --select-motion-duration: var(--motion-duration-fast);
563
+ --skeleton-base: var(--color-surface-sunken);
564
+ --skeleton-highlight: var(--color-surface-raised);
565
+ --skeleton-radius: var(--radius-control);
566
+ --skeleton-text-height: var(--font-size-md);
567
+ --skeleton-gap: var(--space-2);
568
+ --skeleton-circle-sm: var(--size-control-sm);
569
+ --skeleton-circle-md: var(--size-control-md);
570
+ --skeleton-circle-lg: var(--size-control-lg);
571
+ --skeleton-duration: var(--motion-duration-base);
572
+ --slider-gap: var(--space-2);
573
+ --slider-font-family: var(--font-family-body);
574
+ --slider-output-fg: var(--color-text-muted);
575
+ --slider-output-font-size: var(--font-size-sm);
576
+ --slider-output-font-family: var(--font-family-mono);
577
+ --slider-track-size: var(--space-1);
578
+ --slider-track-length: var(--size-listbox-height);
579
+ --slider-track-bg: var(--color-surface-sunken);
580
+ --slider-track-radius: var(--radius-full);
581
+ --slider-track-hit-size: var(--size-toggle-lg);
582
+ --slider-fill: var(--color-action-primary);
583
+ --slider-thumb-size: var(--size-toggle-md);
584
+ --slider-thumb-bg: var(--color-surface-raised);
585
+ --slider-thumb-border: var(--color-action-primary);
586
+ --slider-thumb-border-hover: var(--color-action-primary-hover);
587
+ --slider-thumb-border-width: var(--focus-ring-width);
588
+ --slider-thumb-radius: var(--radius-full);
589
+ --slider-thumb-shadow: var(--shadow-raised);
590
+ --slider-focus-ring: var(--color-border-focus);
591
+ --slider-focus-ring-width: var(--focus-ring-width);
592
+ --slider-focus-ring-offset: var(--focus-ring-offset);
593
+ --slider-motion-duration: var(--motion-duration-fast);
594
+ --spinner-size-sm: var(--size-toggle-sm);
595
+ --spinner-size-md: var(--size-toggle-md);
596
+ --spinner-size-lg: var(--size-toggle-lg);
597
+ --spinner-width: var(--focus-ring-width);
598
+ --spinner-track: var(--color-border-default);
599
+ --spinner-indicator: var(--color-action-primary);
600
+ --spinner-duration: var(--motion-duration-base);
601
+ --stack-gap-1: var(--space-1);
602
+ --stack-gap-2: var(--space-2);
603
+ --stack-gap-3: var(--space-3);
604
+ --stack-gap-4: var(--space-4);
605
+ --stack-gap-5: var(--space-5);
606
+ --stack-gap-6: var(--space-6);
607
+ --stack-gap-7: var(--space-7);
608
+ --stack-gap-8: var(--space-8);
609
+ --switch-size-sm: var(--size-toggle-sm);
610
+ --switch-size-md: var(--size-toggle-md);
611
+ --switch-size-lg: var(--size-toggle-lg);
612
+ --switch-gap: var(--space-2);
613
+ --switch-radius: var(--radius-full);
614
+ --switch-thumb-inset: var(--size-hairline);
615
+ --switch-track-bg: var(--color-border-strong);
616
+ --switch-track-bg-hover: var(--color-text-faint);
617
+ --switch-track-bg-checked: var(--color-action-primary);
618
+ --switch-track-bg-checked-hover: var(--color-action-primary-hover);
619
+ --switch-track-invalid: var(--color-status-error);
620
+ --switch-thumb: var(--color-surface-raised);
621
+ --switch-thumb-checked: var(--color-text-on-action);
622
+ --switch-focus-ring: var(--color-border-focus);
623
+ --switch-focus-ring-width: var(--focus-ring-width);
624
+ --switch-focus-ring-offset: var(--focus-ring-offset);
625
+ --switch-motion-duration: var(--motion-duration-fast);
626
+ --table-bg: var(--color-surface-raised);
627
+ --table-fg: var(--color-text-default);
628
+ --table-border: var(--color-border-default);
629
+ --table-radius: var(--radius-surface);
630
+ --table-font-family: var(--font-family-body);
631
+ --table-font-size: var(--font-size-sm);
632
+ --table-cell-padding-inline: var(--space-3);
633
+ --table-cell-padding-block-default: var(--space-3);
634
+ --table-cell-padding-block-compact: var(--space-2);
635
+ --table-header-bg: var(--color-surface-base);
636
+ --table-header-fg: var(--color-text-muted);
637
+ --table-header-fg-active: var(--color-text-default);
638
+ --table-header-font-size: var(--font-size-xs);
639
+ --table-header-font-weight: var(--font-weight-semibold);
640
+ --table-header-sort-indicator: var(--color-action-text);
641
+ --table-header-sort-indicator-width: var(--focus-ring-width);
642
+ --table-header-sort-indicator-size: var(--space-2);
643
+ --table-row-bg-hover: var(--color-action-secondary);
644
+ --table-row-bg-selected: var(--color-action-primary-quiet);
645
+ --table-row-fg-disabled: var(--color-text-faint);
646
+ --table-select-size: var(--size-toggle-sm);
647
+ --table-select-radius: var(--radius-control);
648
+ --table-select-bg: var(--color-surface-raised);
649
+ --table-select-bg-checked: var(--color-action-primary);
650
+ --table-select-border: var(--color-border-strong);
651
+ --table-select-check: var(--color-text-on-action);
652
+ --table-select-check-width: var(--focus-ring-width);
653
+ --table-empty-fg: var(--color-text-muted);
654
+ --table-empty-padding: var(--space-6);
655
+ --table-focus-ring: var(--color-border-focus);
656
+ --table-focus-ring-width: var(--focus-ring-width);
657
+ --table-focus-ring-offset: var(--focus-ring-offset);
658
+ --table-motion-duration: var(--motion-duration-fast);
659
+ --tabs-list-border: var(--color-border-default);
660
+ --tabs-tab-fg: var(--color-text-muted);
661
+ --tabs-tab-fg-hover: var(--color-text-default);
662
+ --tabs-tab-fg-active: var(--color-text-default);
663
+ --tabs-tab-bg-hover: var(--color-action-primary-quiet);
664
+ --tabs-tab-indicator: var(--color-action-primary);
665
+ --tabs-tab-padding-block: var(--space-2);
666
+ --tabs-tab-padding-inline: var(--space-3);
667
+ --tabs-tab-font-size: var(--font-size-sm);
668
+ --tabs-tab-font-weight: var(--font-weight-medium);
669
+ --tabs-tab-radius: var(--radius-control);
670
+ --tabs-gap: var(--space-1);
671
+ --tabs-panel-padding-block: var(--space-4);
672
+ --tabs-panel-fg: var(--color-text-default);
673
+ --tabs-focus-ring: var(--color-border-focus);
674
+ --tabs-focus-ring-width: var(--focus-ring-width);
675
+ --tabs-focus-ring-offset: var(--focus-ring-offset);
676
+ --tabs-motion-duration: var(--motion-duration-fast);
677
+ --text-field-radius: var(--radius-control);
678
+ --text-field-padding-inline: var(--space-3);
679
+ --text-field-font-family: var(--font-family-body);
680
+ --text-field-font-size-sm: var(--font-size-sm);
681
+ --text-field-font-size-md: var(--font-size-md);
682
+ --text-field-font-size-lg: var(--font-size-lg);
683
+ --text-field-height-sm: var(--size-control-sm);
684
+ --text-field-height-md: var(--size-control-md);
685
+ --text-field-height-lg: var(--size-control-lg);
686
+ --text-field-bg: var(--color-surface-raised);
687
+ --text-field-fg: var(--color-text-default);
688
+ --text-field-placeholder: var(--color-text-faint);
689
+ --text-field-border-default: var(--color-border-default);
690
+ --text-field-border-hover: var(--color-border-strong);
691
+ --text-field-border-focus: var(--color-border-focus);
692
+ --text-field-border-invalid: var(--color-status-error);
693
+ --text-field-focus-ring: var(--color-border-focus);
694
+ --text-field-focus-ring-width: var(--focus-ring-width);
695
+ --text-field-focus-ring-offset: var(--focus-ring-offset);
696
+ --text-field-motion-duration: var(--motion-duration-fast);
697
+ --text-font-family-body: var(--font-family-body);
698
+ --text-font-family-mono: var(--font-family-mono);
699
+ --text-size-xs: var(--font-size-xs);
700
+ --text-size-sm: var(--font-size-sm);
701
+ --text-size-md: var(--font-size-md);
702
+ --text-size-lg: var(--font-size-lg);
703
+ --text-size-xl: var(--font-size-xl);
704
+ --text-weight-regular: var(--font-weight-regular);
705
+ --text-weight-medium: var(--font-weight-medium);
706
+ --text-weight-semibold: var(--font-weight-semibold);
707
+ --text-line-height: var(--font-line-height-normal);
708
+ --text-tone-default: var(--color-text-default);
709
+ --text-tone-muted: var(--color-text-muted);
710
+ --text-tone-faint: var(--color-text-faint);
711
+ --textarea-radius: var(--radius-control);
712
+ --textarea-padding-inline: var(--space-3);
713
+ --textarea-padding-block: var(--space-2);
714
+ --textarea-min-height: var(--size-control-lg);
715
+ --textarea-font-family: var(--font-family-body);
716
+ --textarea-font-size-sm: var(--font-size-sm);
717
+ --textarea-font-size-md: var(--font-size-md);
718
+ --textarea-font-size-lg: var(--font-size-lg);
719
+ --textarea-line-height: var(--font-line-height-normal);
720
+ --textarea-bg: var(--color-surface-raised);
721
+ --textarea-fg: var(--color-text-default);
722
+ --textarea-placeholder: var(--color-text-faint);
723
+ --textarea-border-default: var(--color-border-default);
724
+ --textarea-border-hover: var(--color-border-strong);
725
+ --textarea-border-focus: var(--color-border-focus);
726
+ --textarea-border-invalid: var(--color-status-error);
727
+ --textarea-focus-ring: var(--color-border-focus);
728
+ --textarea-focus-ring-width: var(--focus-ring-width);
729
+ --textarea-focus-ring-offset: var(--focus-ring-offset);
730
+ --textarea-motion-duration: var(--motion-duration-fast);
731
+ --toast-width: var(--size-toast-width);
732
+ --toast-offset: var(--space-5);
733
+ --toast-gap: var(--space-3);
734
+ --toast-layer: var(--layer-toast);
735
+ --toast-shadow: var(--shadow-overlay);
736
+ --toast-radius: var(--radius-surface);
737
+ --toast-motion-duration: var(--motion-duration-base);
738
+ --tooltip-bg: var(--color-surface-inverse);
739
+ --tooltip-fg: var(--color-text-on-inverse);
740
+ --tooltip-radius: var(--radius-control);
741
+ --tooltip-padding-block: var(--space-1);
742
+ --tooltip-padding-inline: var(--space-2);
743
+ --tooltip-font-size: var(--font-size-xs);
744
+ --tooltip-max-width: var(--size-menu-width);
745
+ --tooltip-gap: var(--space-2);
746
+ --tooltip-shadow: var(--shadow-raised);
747
+ --tooltip-layer: var(--layer-tooltip);
748
+ --tooltip-duration: var(--motion-duration-fast);
749
+ --visually-hidden-size: var(--size-hairline);
750
+ }
751
+
752
+ /* Brand: bitepals */
753
+ [data-brand="bitepals"] {
754
+ --color-orange-100: #ffe4d6;
755
+ --color-orange-200: #ffb08a;
756
+ --color-orange-300: #ff8b66;
757
+ --color-orange-400: #ff7a52;
758
+ --color-orange-500: #ff6b3d;
759
+ --color-orange-600: #f45a2a;
760
+ --color-orange-700: #e24e21;
761
+ --color-orange-800: #9f3a14;
762
+ --color-orange-900: #4a1d0e;
763
+ --color-cream-50: #fff6ed;
764
+ --color-cream-100: #fcf3df;
765
+ --color-cream-200: #f8eed9;
766
+ --color-cream-300: #f0e4cf;
767
+ --color-cream-400: #eddcbf;
768
+ --color-cream-500: #e0cba6;
769
+ --color-sand-300: #e2d2b6;
770
+ --color-sand-400: #cab38e;
771
+ --color-sand-500: #a89178;
772
+ --color-neutral-0: #ffffff;
773
+ --color-neutral-50: #f7f4ee;
774
+ --color-neutral-100: #f0eae2;
775
+ --color-neutral-200: #e5dcd1;
776
+ --color-neutral-300: #d1c5b6;
777
+ --color-neutral-400: #9d968c;
778
+ --color-neutral-500: #7c756c;
779
+ --color-neutral-600: #5b6475;
780
+ --color-neutral-700: #3a4152;
781
+ --color-neutral-800: #273040;
782
+ --color-neutral-900: #1f2430;
783
+ --color-ink-200: #475467;
784
+ --color-ink-300: #344054;
785
+ --color-ink-400: #2a3240;
786
+ --color-ink-500: #273040;
787
+ --color-ink-600: #202938;
788
+ --color-ink-700: #1d2430;
789
+ --color-ink-800: #171c24;
790
+ --color-ink-900: #11151c;
791
+ --color-green-100: #dff5ea;
792
+ --color-green-300: #32c48d;
793
+ --color-green-500: #22a06b;
794
+ --color-green-700: #14633f;
795
+ --color-green-900: #0f3324;
796
+ --color-gold-100: #fff0d2;
797
+ --color-gold-300: #f5b83d;
798
+ --color-gold-500: #d98e04;
799
+ --color-gold-700: #7a4e00;
800
+ --color-gold-900: #3d2800;
801
+ --color-red-100: #fde7e7;
802
+ --color-red-300: #ff6b6b;
803
+ --color-red-500: #d64545;
804
+ --color-red-600: #c43a3a;
805
+ --color-red-700: #a83333;
806
+ --color-red-900: #3f1414;
807
+ --color-blue-100: #e3efff;
808
+ --color-blue-300: #5aa9ff;
809
+ --color-blue-500: #2f80ed;
810
+ --color-blue-600: #2368c9;
811
+ --color-blue-700: #1b5fb8;
812
+ --color-blue-900: #10284d;
813
+ --color-surface-base: light-dark(var(--color-cream-300), var(--color-ink-900));
814
+ --color-surface-raised: light-dark(var(--color-cream-200), var(--color-ink-800));
815
+ --color-surface-sunken: light-dark(var(--color-cream-400), var(--color-ink-700));
816
+ --color-surface-inverse: light-dark(var(--color-neutral-900), var(--color-neutral-50));
817
+ --color-text-default: light-dark(var(--color-neutral-900), var(--color-neutral-50));
818
+ --color-text-muted: light-dark(var(--color-neutral-700), var(--color-neutral-300));
819
+ --color-text-faint: light-dark(var(--color-neutral-600), var(--color-neutral-400));
820
+ --color-text-on-action: light-dark(var(--color-neutral-900), var(--color-neutral-900));
821
+ --color-text-on-inverse: light-dark(var(--color-neutral-0), var(--color-neutral-900));
822
+ --color-action-primary: light-dark(var(--color-orange-500), var(--color-orange-400));
823
+ --color-action-primary-hover: light-dark(var(--color-orange-400), var(--color-orange-300));
824
+ --color-action-primary-active: light-dark(var(--color-orange-300), var(--color-orange-200));
825
+ --color-action-primary-quiet: light-dark(var(--color-orange-100), var(--color-orange-900));
826
+ --color-action-secondary: light-dark(var(--color-cream-400), var(--color-ink-700));
827
+ --color-action-secondary-hover: light-dark(var(--color-cream-500), var(--color-ink-500));
828
+ --color-action-text: light-dark(var(--color-orange-800), var(--color-orange-300));
829
+ --color-border-default: light-dark(var(--color-sand-400), var(--color-ink-300));
830
+ --color-border-strong: light-dark(var(--color-sand-500), var(--color-ink-200));
831
+ --color-border-focus: light-dark(var(--color-orange-200), var(--color-orange-200));
832
+ --color-status-success: light-dark(var(--color-green-500), var(--color-green-300));
833
+ --color-status-warning: light-dark(var(--color-gold-500), var(--color-gold-300));
834
+ --color-status-error: light-dark(var(--color-red-600), var(--color-red-300));
835
+ --color-status-info: light-dark(var(--color-blue-600), var(--color-blue-300));
836
+ --color-status-error-text: light-dark(var(--color-red-700), var(--color-red-300));
837
+ --color-status-success-text: light-dark(var(--color-green-700), var(--color-green-300));
838
+ --color-status-warning-text: light-dark(var(--color-gold-700), var(--color-gold-300));
839
+ --color-status-info-text: light-dark(var(--color-blue-700), var(--color-blue-300));
840
+ --color-status-success-subtle: light-dark(var(--color-green-100), var(--color-green-900));
841
+ --color-status-warning-subtle: light-dark(var(--color-gold-100), var(--color-gold-900));
842
+ --color-status-error-subtle: light-dark(var(--color-red-100), var(--color-red-900));
843
+ --color-status-info-subtle: light-dark(var(--color-blue-100), var(--color-blue-900));
844
+ --color-status-on-success: light-dark(var(--color-neutral-900), var(--color-neutral-900));
845
+ --color-status-on-warning: light-dark(var(--color-neutral-900), var(--color-neutral-900));
846
+ --color-status-on-error: light-dark(var(--color-neutral-0), var(--color-neutral-900));
847
+ --color-status-on-info: light-dark(var(--color-neutral-0), var(--color-neutral-900));
848
+ --color-status-neutral: light-dark(var(--color-neutral-600), var(--color-neutral-400));
849
+ --color-status-neutral-subtle: light-dark(var(--color-cream-400), var(--color-ink-500));
850
+ --color-status-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300));
851
+ --color-status-on-neutral: light-dark(var(--color-neutral-0), var(--color-neutral-900));
852
+ --color-overlay-backdrop: light-dark(#1f243099, #000000b3);
853
+ --radius-sm: 10px;
854
+ --radius-lg: 18px;
855
+ --radius-pill: 9999px;
856
+ --radius-control: var(--radius-sm);
857
+ --radius-surface: var(--radius-lg);
858
+ --radius-full: var(--radius-pill);
859
+ --space-1: calc(var(--space-unit) * 1);
860
+ --space-2: calc(var(--space-unit) * 2);
861
+ --space-3: calc(var(--space-unit) * 3);
862
+ --space-4: calc(var(--space-unit) * 4);
863
+ --space-5: calc(var(--space-unit) * 6);
864
+ --space-6: calc(var(--space-unit) * 8);
865
+ --space-7: calc(var(--space-unit) * 12);
866
+ --space-8: calc(var(--space-unit) * 16);
867
+ --space-unit: 0.28rem;
868
+ --duration-fast: 120ms;
869
+ --duration-base: 220ms;
870
+ --easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
871
+ --typeface-display: 'Nunito Variable', Nunito, system-ui, sans-serif;
872
+ --typeface-body: 'Inter Variable', Inter, system-ui, sans-serif;
873
+ --typeface-mono: ui-monospace, 'SF Mono', Menlo, monospace;
874
+ --font-family-display: var(--typeface-display);
875
+ --font-family-body: var(--typeface-body);
876
+ --font-family-mono: var(--typeface-mono);
877
+ --font-size-xs: 0.75rem;
878
+ --font-size-sm: 0.875rem;
879
+ --font-size-md: 1rem;
880
+ --font-size-lg: 1.125rem;
881
+ --font-size-xl: 1.375rem;
882
+ --font-size-2xl: 1.75rem;
883
+ --font-size-3xl: 2.25rem;
884
+ --font-weight-regular: 400;
885
+ --font-weight-medium: 600;
886
+ --font-weight-semibold: 700;
887
+ --font-line-height-tight: 1.25;
888
+ --font-line-height-normal: 1.55;
889
+ --motion-duration-fast: var(--duration-fast);
890
+ --motion-duration-base: var(--duration-base);
891
+ --motion-easing-standard: var(--easing-standard);
892
+ --shadow-raised-color: light-dark(#1f24301a, #00000038);
893
+ --shadow-raised: 0px 2px 12px 0px var(--shadow-raised-color);
894
+ --shadow-overlay-color: light-dark(#1f243033, #00000080);
895
+ --shadow-overlay: 0px 16px 48px 0px var(--shadow-overlay-color);
896
+ --size-control-sm: 2rem;
897
+ --size-control-md: 2.5rem;
898
+ --size-control-lg: 3rem;
899
+ --size-hairline: 1px;
900
+ --size-toggle-sm: 1rem;
901
+ --size-toggle-md: 1.25rem;
902
+ --size-toggle-lg: 1.5rem;
903
+ --size-toast-width: 22rem;
904
+ --size-popover-width: 20rem;
905
+ --size-menu-width: 14rem;
906
+ --size-listbox-height: 18rem;
907
+ --focus-ring-width: 2px;
908
+ --focus-ring-offset: 2px;
909
+ --layer-toast: 1100;
910
+ --layer-popover: 1200;
911
+ --layer-tooltip: 1300;
912
+ }
913
+
914
+ }