@mkatogui/uds-tokens 0.2.1 → 0.5.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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/index.d.ts +149 -1
  3. package/dist/index.js +151 -3
  4. package/dist/index.mjs +149 -1
  5. package/dist/tokens.css +713 -612
  6. package/dist/tokens.d.ts +432 -0
  7. package/dist/tokens.json +179 -33
  8. package/package.json +8 -4
package/dist/tokens.css CHANGED
@@ -1,617 +1,718 @@
1
1
  /**
2
2
  * Universal Design System -- Design Tokens
3
3
  * Auto-generated by @mkatogui/uds-tokens build script
4
- * 496 W3C DTCG tokens across 9 palettes
4
+ * W3C DTCG tokens across 9 palettes
5
5
  */
6
6
 
7
- :root {
8
-
9
- /* -- Color Tokens -- */
10
- --color-primitive-blue-50: #EFF6FF;
11
- --color-primitive-blue-100: #DBEAFE;
12
- --color-primitive-blue-200: #BFDBFE;
13
- --color-primitive-blue-300: #93C5FD;
14
- --color-primitive-blue-400: #60A5FA;
15
- --color-primitive-blue-500: #3B82F6;
16
- --color-primitive-blue-600: #2563EB;
17
- --color-primitive-blue-700: #1D4ED8;
18
- --color-primitive-blue-800: #1E40AF;
19
- --color-primitive-blue-900: #1E3A8A;
20
- --color-primitive-blue-950: #172554;
21
- --color-primitive-purple-50: #F3E8FF;
22
- --color-primitive-purple-100: #E9D5FF;
23
- --color-primitive-purple-200: #D8B4FE;
24
- --color-primitive-purple-400: #A78BFA;
25
- --color-primitive-purple-500: #8B5CF6;
26
- --color-primitive-purple-600: #7C3AED;
27
- --color-primitive-purple-700: #6D28D9;
28
- --color-primitive-purple-800: #5B21B6;
29
- --color-primitive-purple-900: #4C1D95;
30
- --color-primitive-green-50: #ECFDF5;
31
- --color-primitive-green-100: #D1FAE5;
32
- --color-primitive-green-400: #34D399;
33
- --color-primitive-green-500: #10B981;
34
- --color-primitive-green-600: #059669;
35
- --color-primitive-green-700: #047857;
36
- --color-primitive-red-50: #FEF2F2;
37
- --color-primitive-red-100: #FEE2E2;
38
- --color-primitive-red-400: #F87171;
39
- --color-primitive-red-500: #EF4444;
40
- --color-primitive-red-600: #DC2626;
41
- --color-primitive-red-700: #B91C1C;
42
- --color-primitive-amber-50: #FFFBEB;
43
- --color-primitive-amber-100: #FEF3C7;
44
- --color-primitive-amber-400: #FBBF24;
45
- --color-primitive-amber-500: #F59E0B;
46
- --color-primitive-amber-600: #D97706;
47
- --color-primitive-amber-700: #B45309;
48
- --color-primitive-cyan-400: #22D3EE;
49
- --color-primitive-cyan-500: #06B6D4;
50
- --color-primitive-cyan-600: #00D4FF;
51
- --color-primitive-neon-green-500: #00FF88;
52
- --color-primitive-pink-500: #EC4899;
53
- --color-primitive-pink-600: #DB2777;
54
- --color-primitive-neutral-0: #FFFFFF;
55
- --color-primitive-neutral-50: #FBFBFD;
56
- --color-primitive-neutral-100: #F8F8FA;
57
- --color-primitive-neutral-150: #F0F0F5;
58
- --color-primitive-neutral-200: #E8E8F0;
59
- --color-primitive-neutral-300: #C8C8D4;
60
- --color-primitive-neutral-400: #999999;
61
- --color-primitive-neutral-500: #6B6B7B;
62
- --color-primitive-neutral-600: #555566;
63
- --color-primitive-neutral-700: #3A3A4A;
64
- --color-primitive-neutral-800: #1A1A24;
65
- --color-primitive-neutral-850: #111118;
66
- --color-primitive-neutral-900: #0A0A0F;
67
- --color-primitive-neutral-1000: #000000;
68
- --color-primitive-navy-700: #2B6CB0;
69
- --color-primitive-navy-800: #1A365D;
70
- --color-primitive-navy-900: #1A202C;
71
- --color-semantic-bg-primary: #FFFFFF;
72
- --color-semantic-bg-secondary: #F8F8FA;
73
- --color-semantic-bg-tertiary: #F0F0F5;
74
- --color-semantic-bg-inverse: #111118;
75
- --color-semantic-text-primary: #111118;
76
- --color-semantic-text-secondary: #555566;
77
- --color-semantic-text-tertiary: #6B6B7B;
78
- --color-semantic-text-on-brand: #FFFFFF;
79
- --color-semantic-border-default: #C8C8D4;
80
- --color-semantic-border-input: #999999;
81
- --color-semantic-border-subtle: #E8E8F0;
82
- --color-semantic-brand-primary: #2563EB;
83
- --color-semantic-brand-secondary: #3B82F6;
84
- --color-semantic-brand-accent: #60A5FA;
85
- --color-semantic-brand-muted: #DBEAFE;
86
- --color-semantic-success: #059669;
87
- --color-semantic-success-bg: #ECFDF5;
88
- --color-semantic-warning: #D97706;
89
- --color-semantic-warning-bg: #FFFBEB;
90
- --color-semantic-error: #DC2626;
91
- --color-semantic-error-bg: #FEF2F2;
92
- --color-semantic-info: #2563EB;
93
- --color-semantic-info-bg: #EFF6FF;
94
- --color-semantic-surface-default: {color.primitive.neutral.white};
95
- --color-semantic-surface-hover: #F5F5FA;
96
- --color-semantic-surface-active: #EDEDF5;
97
- --color-semantic-text-disabled: #A0A0B0;
98
- --color-semantic-border-strong: #6E6E7E;
99
- --color-semantic-overlay: rgba(0, 0, 0, 0.5);
100
- --color-chart-1: #4F46E5;
101
- --color-chart-2: #0EA5E9;
102
- --color-chart-3: #10B981;
103
- --color-chart-4: #F59E0B;
104
- --color-chart-5: #EF4444;
105
- --color-chart-6: #8B5CF6;
106
- --color-chart-7: #EC4899;
107
- --color-chart-8: #06B6D4;
108
-
109
- /* -- Typography Tokens -- */
110
- --font-family-sans: Inter, system-ui, -apple-system, sans-serif;
111
- --font-family-display: Inter, system-ui, sans-serif;
112
- --font-family-mono: "JetBrains Mono", Menlo, Consolas, monospace;
113
- --font-family-serif: "Source Serif 4", Georgia, serif;
114
- --font-weight-regular: 400;
115
- --font-weight-medium: 500;
116
- --font-weight-semibold: 600;
117
- --font-weight-bold: 700;
118
- --font-weight-extrabold: 800;
119
- --font-size-display-xl: 4.5rem;
120
- --font-size-display-lg: 3.75rem;
121
- --font-size-display-md: 3rem;
122
- --font-size-heading-lg: 2.25rem;
123
- --font-size-heading-md: 1.75rem;
124
- --font-size-heading-sm: 1.375rem;
125
- --font-size-body-lg: 1.25rem;
126
- --font-size-body-md: 1rem;
127
- --font-size-body-sm: 0.875rem;
128
- --font-size-label: 0.75rem;
129
- --line-height-display: 1.1;
130
- --line-height-heading: 1.25;
131
- --line-height-body: 1.6;
132
- --line-height-tight: 1.05;
133
-
134
- /* -- Spacing Tokens (4px grid) -- */
135
- --spacing-1: 4px;
136
- --spacing-2: 8px;
137
- --spacing-3: 12px;
138
- --spacing-4: 16px;
139
- --spacing-5: 20px;
140
- --spacing-6: 24px;
141
- --spacing-8: 32px;
142
- --spacing-10: 40px;
143
- --spacing-12: 48px;
144
- --spacing-16: 64px;
145
- --spacing-20: 80px;
146
- --spacing-24: 96px;
147
- --spacing-32: 128px;
148
-
149
- /* -- Size Tokens -- */
150
- --size-container-max: 1280px;
151
- --size-container-narrow: 768px;
152
- --size-container-wide: 1440px;
153
- --size-icon-sm: 16px;
154
- --size-icon-md: 20px;
155
- --size-icon-lg: 24px;
156
- --size-icon-xl: 32px;
157
-
158
- /* -- Border Radius Tokens -- */
159
- --radius-sm: 6px;
160
- --radius-md: 8px;
161
- --radius-lg: 12px;
162
- --radius-xl: 16px;
163
- --radius-2xl: 24px;
164
- --radius-full: 9999px;
165
-
166
- /* -- Shadow / Elevation Tokens -- */
167
- --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
168
- --shadow-sm: 0px 2px 4px 0px rgba(0,0,0,0.06), 0px 1px 2px 0px rgba(0,0,0,0.04);
169
- --shadow-md: 0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.04);
170
- --shadow-lg: 0px 12px 32px 0px rgba(0,0,0,0.12), 0px 4px 8px 0px rgba(0,0,0,0.06);
171
- --shadow-xl: 0px 24px 64px 0px rgba(0,0,0,0.16);
172
-
173
- /* -- Motion / Animation Tokens -- */
174
- --motion-duration-instant: 100ms;
175
- --motion-duration-fast: 150ms;
176
- --motion-duration-normal: 250ms;
177
- --motion-duration-slow: 400ms;
178
- --motion-duration-slower: 600ms;
179
- --motion-duration-slowest: 1000ms;
180
- --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
181
- --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
182
- --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
183
- --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
184
-
185
- /* -- Opacity Tokens -- */
186
- --opacity-disabled: 0.4;
187
- --opacity-muted: 0.6;
188
- --opacity-subtle: 0.8;
189
- --opacity-overlay: 0.5;
190
-
191
- /* -- Breakpoint Tokens -- */
192
- --breakpoint-sm: 640px;
193
- --breakpoint-md: 768px;
194
- --breakpoint-lg: 1024px;
195
- --breakpoint-xl: 1280px;
196
- --breakpoint-2xl: 1536px;
197
-
198
- /* -- Z-Index Tokens -- */
199
- --zIndex-dropdown: 100;
200
- --zIndex-sticky: 200;
201
- --zIndex-overlay: 300;
202
- --zIndex-modal: 400;
203
- --zIndex-toast: 500;
204
- --zIndex-tooltip: 600;
205
- --zIndex-system: 9999;
206
-
207
- /* -- Font Weight Tokens -- */
208
- --font-weight-regular: 400;
209
- --font-weight-medium: 500;
210
- --font-weight-semibold: 600;
211
- --font-weight-bold: 700;
212
- --font-weight-extrabold: 800;
213
-
214
- /* -- Line Height Tokens -- */
215
- --line-height-tight: 1.2;
216
- --line-height-normal: 1.5;
217
- --line-height-relaxed: 1.6;
218
- --line-height-loose: 1.8;
219
-
220
- /* -- Border Width Tokens -- */
221
- --border-width-thin: 1px;
222
- --border-width-medium: 2px;
223
- --border-width-thick: 4px;
224
-
225
- /* -- Icon Size Tokens -- */
226
- --icon-sm: 16px;
227
- --icon-md: 20px;
228
- --icon-lg: 24px;
229
- --icon-xl: 32px;
230
-
231
- /* -- Layout Tokens -- */
232
- --layout-breakpoint-sm: 640px;
233
- --layout-breakpoint-md: 768px;
234
- --layout-breakpoint-lg: 1024px;
235
- --layout-breakpoint-xl: 1280px;
236
- --layout-breakpoint-2xl: 1536px;
237
- --layout-container-sm: 640px;
238
- --layout-container-md: 768px;
239
- --layout-container-lg: 1024px;
240
- --layout-container-xl: 1280px;
241
- --layout-container-full: 100%;
242
- --layout-sidebar-collapsed: 64px;
243
- --layout-sidebar-default: 240px;
244
- --layout-sidebar-wide: 320px;
245
-
246
- /* -- Component Tokens -- */
247
- --component-tabs-height_md: 44px;
248
- --component-tabs-height_sm: 36px;
249
- --component-tabs-indicator_width: 2px;
250
- --component-accordion-trigger_height: 52px;
251
- --component-accordion-content_padding: 16px;
252
- --component-tooltip-max_width: 240px;
253
- --component-tooltip-padding_simple: 6px 12px;
254
- --component-tooltip-padding_rich: 12px 16px;
255
- --component-tooltip-delay: 300ms;
256
- --component-toast-min_width: 320px;
257
- --component-toast-max_width: 420px;
258
- --component-toast-duration_default: 5000ms;
259
- --component-toast-max_visible: 3;
260
- --component-avatar-xs: 24px;
261
- --component-avatar-sm: 32px;
262
- --component-avatar-md: 40px;
263
- --component-avatar-lg: 48px;
264
- --component-avatar-xl: 64px;
265
- --component-avatar-status_dot_border: 2px;
266
- --component-data_table-row_compact: 36px;
267
- --component-data_table-row_default: 48px;
268
- --component-data_table-row_comfortable: 56px;
269
- --component-data_table-header_height: 44px;
270
- --component-pagination-button_size: 36px;
271
- --component-skeleton-animation_duration: 1500ms;
272
- --component-skeleton-line_height: 16px;
273
- --component-skeleton-line_gap: 12px;
274
- }
275
-
276
- /* Palette: minimal-saas (light) */
277
- [data-theme="minimal-saas"] {
278
- --color-bg-primary: #FFFFFF;
279
- --color-bg-secondary: #F8F8FA;
280
- --color-text-primary: #111118;
281
- --color-text-secondary: #555566;
282
- --color-brand-primary: #2563EB;
283
- --color-brand-secondary: #3B82F6;
284
- }
285
-
286
- /* Palette: minimal-saas (dark) */
287
- [data-theme="minimal-saas"].dark,
288
- [data-theme="minimal-saas"] .dark {
289
- --color-bg-primary: #0A0A0F;
290
- --color-bg-secondary: #111118;
291
- --color-text-primary: #F0F0F5;
292
- --color-text-secondary: #9999AA;
293
- --color-brand-primary: #2563EB;
294
- --color-brand-secondary: #3B82F6;
295
- }
296
-
297
- /* Palette: ai-futuristic (light) */
298
- [data-theme="ai-futuristic"] {
299
- --font-family-display: "DM Sans", system-ui, sans-serif;
300
- --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.3);
301
- --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.4);
302
- --shadow-lg: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.5);
303
- --shadow-glow: 0 0 40px rgba(0, 255, 136, 0.15);
304
- --color-bg-primary: #0A0A0F;
305
- --color-bg-secondary: #111118;
306
- --color-text-primary: #E0E0EE;
307
- --color-text-secondary: #9999AA;
308
- --color-brand-primary: #00FF88;
309
- --color-brand-secondary: #00D4FF;
310
- --color-success: #34D399;
311
- --color-success-bg: #062E1E;
312
- --color-warning: #FBBF24;
313
- --color-warning-bg: #2A1F00;
314
- --color-error: #F87171;
315
- --color-error-bg: #2D0A0A;
316
- --color-info: #60A5FA;
317
- --color-info-bg: #0A1628;
318
- --radius-sm: 2px;
319
- --radius-md: 4px;
320
- --radius-lg: 6px;
321
- --radius-xl: 8px;
322
- --radius-2xl: 12px;
323
- --radius-full: 9999px;
324
- }
325
-
326
- /* Palette: ai-futuristic (dark) */
327
- [data-theme="ai-futuristic"].dark,
328
- [data-theme="ai-futuristic"] .dark {
329
- --color-bg-primary: #050508;
330
- --color-bg-secondary: #0A0A0F;
331
- --color-text-primary: #E8E8F0;
332
- --color-text-secondary: #AAAABC;
333
- --color-brand-primary: #00FF88;
334
- --color-brand-secondary: #00D4FF;
335
- }
336
-
337
- /* Palette: gradient-startup (light) */
338
- [data-theme="gradient-startup"] {
339
- --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.15);
340
- --color-bg-primary: #FFFFFF;
341
- --color-bg-secondary: #F8F8FA;
342
- --color-text-primary: #111118;
343
- --color-text-secondary: #555566;
344
- --color-brand-primary: #7C3AED;
345
- --color-brand-secondary: #EC4899;
346
- --radius-sm: 8px;
347
- --radius-md: 12px;
348
- --radius-lg: 16px;
349
- --radius-xl: 24px;
350
- --radius-2xl: 32px;
351
- --radius-full: 9999px;
352
- }
353
-
354
- /* Palette: gradient-startup (dark) */
355
- [data-theme="gradient-startup"].dark,
356
- [data-theme="gradient-startup"] .dark {
357
- --color-bg-primary: #0A0A0F;
358
- --color-bg-secondary: #111118;
359
- --color-text-primary: #F0F0F5;
360
- --color-text-secondary: #9999AA;
361
- --color-brand-primary: #7C3AED;
362
- --color-brand-secondary: #EC4899;
363
- }
364
-
365
- /* Palette: corporate (light) */
366
- [data-theme="corporate"] {
367
- --font-family-display: "Source Serif 4", Georgia, serif;
368
- --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
369
- --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
370
- --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
371
- --color-bg-primary: #FFFFFF;
372
- --color-bg-secondary: #F7F8FA;
373
- --color-text-primary: #1A202C;
374
- --color-text-secondary: #4A5568;
375
- --color-brand-primary: #1A365D;
376
- --color-brand-secondary: #2B6CB0;
377
- --radius-sm: 2px;
378
- --radius-md: 4px;
379
- --radius-lg: 6px;
380
- --radius-xl: 8px;
381
- --radius-2xl: 12px;
382
- --radius-full: 9999px;
383
- }
384
-
385
- /* Palette: corporate (dark) */
386
- [data-theme="corporate"].dark,
387
- [data-theme="corporate"] .dark {
388
- --color-bg-primary: #0D1117;
389
- --color-bg-secondary: #161B22;
390
- --color-text-primary: #E6EDF3;
391
- --color-text-secondary: #8B949E;
392
- --color-brand-primary: #4A7AB5;
393
- --color-brand-secondary: #58A6FF;
394
- }
395
-
396
- /* Palette: apple-minimal (light) */
397
- [data-theme="apple-minimal"] {
398
- --font-family-display: Inter, -apple-system, sans-serif;
399
- --color-bg-primary: #FFFFFF;
400
- --color-bg-secondary: #FBFBFD;
401
- --color-text-primary: #1D1D1F;
402
- --color-text-secondary: #515154;
403
- --color-brand-primary: #0071E3;
404
- --color-brand-secondary: #0077ED;
405
- --radius-sm: 8px;
406
- --radius-md: 10px;
407
- --radius-lg: 14px;
408
- --radius-xl: 20px;
409
- --radius-2xl: 28px;
410
- --radius-full: 9999px;
411
- }
412
-
413
- /* Palette: apple-minimal (dark) */
414
- [data-theme="apple-minimal"].dark,
415
- [data-theme="apple-minimal"] .dark {
416
- --color-bg-primary: #000000;
417
- --color-bg-secondary: #1C1C1E;
418
- --color-text-primary: #F5F5F7;
419
- --color-text-secondary: #A1A1A6;
420
- --color-brand-primary: #2997FF;
421
- --color-brand-secondary: #64D2FF;
422
- }
423
-
424
- /* Palette: illustration (light) */
425
- [data-theme="illustration"] {
426
- --shadow-glow: 0 0 40px rgba(232, 89, 12, 0.15);
427
- --color-bg-primary: #FFFFFF;
428
- --color-bg-secondary: #FFF8F0;
429
- --color-bg-tertiary: #FFF0E6;
430
- --color-bg-inverse: #1A1523;
431
- --color-text-primary: #1A1523;
432
- --color-text-secondary: #5C5470;
433
- --color-text-tertiary: #7A7189;
434
- --color-text-on-brand: #FFFFFF;
435
- --color-brand-primary: #E8590C;
436
- --color-brand-primary-rgb: 232, 89, 12;
437
- --color-brand-secondary: #7048E8;
438
- --color-brand-accent: #12B886;
439
- --color-brand-muted: #FFF4E6;
440
- --color-border-default: #C4B5A4;
441
- --color-border-input: #9E8E7E;
442
- --color-border-subtle: #EDE4DA;
443
- --radius-sm: 10px;
444
- --radius-md: 14px;
445
- --radius-lg: 18px;
446
- --radius-xl: 24px;
447
- --radius-2xl: 32px;
448
- --radius-full: 9999px;
449
- }
450
-
451
- /* Palette: illustration (dark) */
452
- [data-theme="illustration"].dark,
453
- [data-theme="illustration"] .dark {
454
- --color-bg-primary: #1A1523;
455
- --color-bg-secondary: #221C2E;
456
- --color-bg-tertiary: #2A2336;
457
- --color-bg-inverse: #FFFFFF;
458
- --color-text-primary: #F0ECF5;
459
- --color-text-secondary: #A8A0B5;
460
- --color-text-tertiary: #8A8298;
461
- --color-text-on-brand: #FFFFFF;
462
- --color-brand-primary: #FF6B2B;
463
- --color-brand-primary-rgb: 255, 107, 43;
464
- --color-brand-secondary: #9775FA;
465
- --color-brand-accent: #38D9A9;
466
- --color-brand-muted: #2A1F12;
467
- --color-border-default: #3D3550;
468
- --color-border-input: #5A5070;
469
- --color-border-subtle: #2E2840;
470
- }
471
-
472
- /* Palette: dashboard (light) */
473
- [data-theme="dashboard"] {
474
- --color-bg-primary: #FFFFFF;
475
- --color-bg-secondary: #F7F8FC;
476
- --color-bg-tertiary: #EEF0F8;
477
- --color-bg-inverse: #0F1117;
478
- --color-text-primary: #0F1117;
479
- --color-text-secondary: #525866;
480
- --color-text-tertiary: #6E7585;
481
- --color-text-on-brand: #FFFFFF;
482
- --color-brand-primary: #4F46E5;
483
- --color-brand-primary-rgb: 79, 70, 229;
484
- --color-brand-secondary: #0EA5E9;
485
- --color-brand-accent: #06B6D4;
486
- --color-brand-muted: #EEF2FF;
487
- --color-border-default: #C5CAD4;
488
- --color-border-input: #8B92A0;
489
- --color-border-subtle: #E5E8F0;
490
- --radius-sm: 4px;
491
- --radius-md: 6px;
492
- --radius-lg: 8px;
493
- --radius-xl: 12px;
494
- --radius-2xl: 16px;
495
- --radius-full: 9999px;
496
- }
497
-
498
- /* Palette: dashboard (dark) */
499
- [data-theme="dashboard"].dark,
500
- [data-theme="dashboard"] .dark {
501
- --color-bg-primary: #0F1117;
502
- --color-bg-secondary: #161924;
503
- --color-bg-tertiary: #1E2130;
504
- --color-bg-inverse: #FFFFFF;
505
- --color-text-primary: #E8EAF0;
506
- --color-text-secondary: #9498A5;
507
- --color-text-tertiary: #7A7E8C;
508
- --color-text-on-brand: #FFFFFF;
509
- --color-brand-primary: #6366F1;
510
- --color-brand-primary-rgb: 99, 102, 241;
511
- --color-brand-secondary: #38BDF8;
512
- --color-brand-accent: #22D3EE;
513
- --color-brand-muted: #1E1B4B;
514
- --color-border-default: #2A2E3D;
515
- --color-border-input: #4A4E5C;
516
- --color-border-subtle: #1E2230;
517
- }
518
-
519
- /* Palette: bold-lifestyle (light) */
520
- [data-theme="bold-lifestyle"] {
521
- --font-family-display: Oswald, sans-serif;
522
- --shadow-sm: none;
523
- --shadow-md: 2px 2px 0 rgba(0,0,0,0.15);
524
- --shadow-lg: 4px 4px 0 rgba(0,0,0,0.2);
525
- --shadow-glow: none;
526
- --color-bg-primary: #FFFFFF;
527
- --color-bg-secondary: #F5F5F5;
528
- --color-bg-tertiary: #EBEBEB;
529
- --color-bg-inverse: #111111;
530
- --color-text-primary: #111111;
531
- --color-text-secondary: #525252;
532
- --color-text-tertiary: #6B6B6B;
533
- --color-text-on-brand: #FFFFFF;
534
- --color-brand-primary: #111111;
535
- --color-brand-primary-rgb: 17, 17, 17;
536
- --color-brand-secondary: #FF4500;
537
- --color-brand-accent: #FFD700;
538
- --color-brand-muted: #F5F5F5;
539
- --color-border-default: #BFBFBF;
540
- --color-border-input: #8C8C8C;
541
- --color-border-subtle: #E0E0E0;
542
- --radius-sm: 0;
543
- --radius-md: 0;
544
- --radius-lg: 0;
545
- --radius-xl: 0;
546
- --radius-2xl: 0;
547
- --radius-full: 0;
548
- }
549
-
550
- /* Palette: bold-lifestyle (dark) */
551
- [data-theme="bold-lifestyle"].dark,
552
- [data-theme="bold-lifestyle"] .dark {
553
- --color-bg-primary: #111111;
554
- --color-bg-secondary: #1A1A1A;
555
- --color-bg-tertiary: #242424;
556
- --color-bg-inverse: #FFFFFF;
557
- --color-text-primary: #F5F5F5;
558
- --color-text-secondary: #A3A3A3;
559
- --color-text-tertiary: #808080;
560
- --color-text-on-brand: #111111;
561
- --color-brand-primary: #FFFFFF;
562
- --color-brand-primary-rgb: 255, 255, 255;
563
- --color-brand-secondary: #FF6B35;
564
- --color-brand-accent: #FFE066;
565
- --color-brand-muted: #1A1A1A;
566
- --color-border-default: #3D3D3D;
567
- --color-border-input: #5C5C5C;
568
- --color-border-subtle: #242424;
569
- }
570
-
571
- /* Palette: minimal-corporate (light) */
572
- [data-theme="minimal-corporate"] {
573
- --font-family-display: "Source Serif 4", Georgia, serif;
574
- --color-bg-primary: #FDFCFB;
575
- --color-bg-secondary: #F7F5F2;
576
- --color-bg-tertiary: #EFECE8;
577
- --color-bg-inverse: #1C1917;
578
- --color-text-primary: #1C1917;
579
- --color-text-secondary: #57534E;
580
- --color-text-tertiary: #78716C;
581
- --color-text-on-brand: #FFFFFF;
582
- --color-brand-primary: #B45309;
583
- --color-brand-primary-rgb: 180, 83, 9;
584
- --color-brand-secondary: #92400E;
585
- --color-brand-accent: #D97706;
586
- --color-brand-muted: #FEF3C7;
587
- --color-border-default: #C4BEB5;
588
- --color-border-input: #918B82;
589
- --color-border-subtle: #E7E5E4;
590
- --radius-sm: 4px;
591
- --radius-md: 6px;
592
- --radius-lg: 8px;
593
- --radius-xl: 12px;
594
- --radius-2xl: 16px;
595
- --radius-full: 9999px;
596
- }
597
-
598
- /* Palette: minimal-corporate (dark) */
599
- [data-theme="minimal-corporate"].dark,
600
- [data-theme="minimal-corporate"] .dark {
601
- --color-bg-primary: #1C1917;
602
- --color-bg-secondary: #231F1C;
603
- --color-bg-tertiary: #2C2824;
604
- --color-bg-inverse: #FDFCFB;
605
- --color-text-primary: #F5F0EB;
606
- --color-text-secondary: #A8A29E;
607
- --color-text-tertiary: #8C8680;
608
- --color-text-on-brand: #FFFFFF;
609
- --color-brand-primary: #D97706;
610
- --color-brand-primary-rgb: 217, 119, 6;
611
- --color-brand-secondary: #B45309;
612
- --color-brand-accent: #F59E0B;
613
- --color-brand-muted: #2C2412;
614
- --color-border-default: #3D3834;
615
- --color-border-input: #5C5650;
616
- --color-border-subtle: #2C2824;
617
- }
7
+ @layer uds.tokens, uds.components, uds.utilities;
8
+
9
+ @layer uds.tokens {
10
+ :root {
11
+
12
+ /* -- Color Tokens -- */
13
+ --color-primitive-blue-50: #EFF6FF;
14
+ --color-primitive-blue-100: #DBEAFE;
15
+ --color-primitive-blue-200: #BFDBFE;
16
+ --color-primitive-blue-300: #93C5FD;
17
+ --color-primitive-blue-400: #60A5FA;
18
+ --color-primitive-blue-500: #3B82F6;
19
+ --color-primitive-blue-600: #2563EB;
20
+ --color-primitive-blue-700: #1D4ED8;
21
+ --color-primitive-blue-800: #1E40AF;
22
+ --color-primitive-blue-900: #1E3A8A;
23
+ --color-primitive-blue-950: #172554;
24
+ --color-primitive-purple-50: #F3E8FF;
25
+ --color-primitive-purple-100: #E9D5FF;
26
+ --color-primitive-purple-200: #D8B4FE;
27
+ --color-primitive-purple-400: #A78BFA;
28
+ --color-primitive-purple-500: #8B5CF6;
29
+ --color-primitive-purple-600: #7C3AED;
30
+ --color-primitive-purple-700: #6D28D9;
31
+ --color-primitive-purple-800: #5B21B6;
32
+ --color-primitive-purple-900: #4C1D95;
33
+ --color-primitive-green-50: #ECFDF5;
34
+ --color-primitive-green-100: #D1FAE5;
35
+ --color-primitive-green-400: #34D399;
36
+ --color-primitive-green-500: #10B981;
37
+ --color-primitive-green-600: #059669;
38
+ --color-primitive-green-700: #047857;
39
+ --color-primitive-red-50: #FEF2F2;
40
+ --color-primitive-red-100: #FEE2E2;
41
+ --color-primitive-red-400: #F87171;
42
+ --color-primitive-red-500: #EF4444;
43
+ --color-primitive-red-600: #DC2626;
44
+ --color-primitive-red-700: #B91C1C;
45
+ --color-primitive-amber-50: #FFFBEB;
46
+ --color-primitive-amber-100: #FEF3C7;
47
+ --color-primitive-amber-400: #FBBF24;
48
+ --color-primitive-amber-500: #F59E0B;
49
+ --color-primitive-amber-600: #D97706;
50
+ --color-primitive-amber-700: #B45309;
51
+ --color-primitive-amber-800: #92400e;
52
+ --color-primitive-cyan-400: #22D3EE;
53
+ --color-primitive-cyan-500: #06B6D4;
54
+ --color-primitive-cyan-600: #00D4FF;
55
+ --color-primitive-neon-green-500: #00FF88;
56
+ --color-primitive-pink-500: #EC4899;
57
+ --color-primitive-pink-600: #DB2777;
58
+ --color-primitive-neutral-0: #FFFFFF;
59
+ --color-primitive-neutral-50: #FBFBFD;
60
+ --color-primitive-neutral-100: #F8F8FA;
61
+ --color-primitive-neutral-150: #F0F0F5;
62
+ --color-primitive-neutral-200: #E8E8F0;
63
+ --color-primitive-neutral-300: #C8C8D4;
64
+ --color-primitive-neutral-400: #999999;
65
+ --color-primitive-neutral-500: #6B6B7B;
66
+ --color-primitive-neutral-600: #555566;
67
+ --color-primitive-neutral-700: #3A3A4A;
68
+ --color-primitive-neutral-800: #1A1A24;
69
+ --color-primitive-neutral-850: #111118;
70
+ --color-primitive-neutral-900: #0A0A0F;
71
+ --color-primitive-neutral-1000: #000000;
72
+ --color-primitive-navy-700: #2B6CB0;
73
+ --color-primitive-navy-800: #1A365D;
74
+ --color-primitive-navy-900: #1A202C;
75
+ --color-semantic-bg-primary: #FFFFFF;
76
+ --color-semantic-bg-secondary: #F8F8FA;
77
+ --color-semantic-bg-tertiary: #F0F0F5;
78
+ --color-semantic-bg-inverse: #111118;
79
+ --color-semantic-text-primary: #111118;
80
+ --color-semantic-text-secondary: #555566;
81
+ --color-semantic-text-tertiary: #6B6B7B;
82
+ --color-semantic-text-on-brand: #FFFFFF;
83
+ --color-semantic-border-default: #C8C8D4;
84
+ --color-semantic-border-input: #999999;
85
+ --color-semantic-border-subtle: #E8E8F0;
86
+ --color-semantic-brand-primary: #2563EB;
87
+ --color-semantic-brand-secondary: #3B82F6;
88
+ --color-semantic-brand-accent: #60A5FA;
89
+ --color-semantic-brand-muted: #DBEAFE;
90
+ --color-semantic-success: #059669;
91
+ --color-semantic-success-bg: #ECFDF5;
92
+ --color-semantic-success-on-bg: #047857;
93
+ --color-semantic-warning: #D97706;
94
+ --color-semantic-warning-bg: #FFFBEB;
95
+ --color-semantic-warning-on-bg: #92400e;
96
+ --color-semantic-text-on-error: #171717;
97
+ --color-semantic-error: #DC2626;
98
+ --color-semantic-error-bg: #FEF2F2;
99
+ --color-semantic-info: #2563EB;
100
+ --color-semantic-info-bg: #EFF6FF;
101
+ --color-semantic-surface-default: #FFFFFF;
102
+ --color-semantic-surface-hover: #F5F5FA;
103
+ --color-semantic-surface-active: #EDEDF5;
104
+ --color-semantic-text-disabled: #A0A0B0;
105
+ --color-semantic-border-strong: #6E6E7E;
106
+ --color-semantic-overlay: rgba(0, 0, 0, 0.5);
107
+ --color-semantic-action-primary: #2563EB;
108
+ --color-semantic-action-secondary: #3B82F6;
109
+ --color-semantic-action-destructive: #DC2626;
110
+ --color-semantic-feedback-success: #059669;
111
+ --color-semantic-feedback-warning: #D97706;
112
+ --color-semantic-feedback-error: #DC2626;
113
+ --color-semantic-feedback-info: #2563EB;
114
+ --color-semantic-surface-elevated: #F8F8FA;
115
+ --color-semantic-surface-overlay: #F0F0F5;
116
+ --color-semantic-text-link: #2563EB;
117
+ --color-semantic-border-focus: #2563EB;
118
+ --color-chart-1: #4F46E5;
119
+ --color-chart-2: #0EA5E9;
120
+ --color-chart-3: #10B981;
121
+ --color-chart-4: #F59E0B;
122
+ --color-chart-5: #EF4444;
123
+ --color-chart-6: #8B5CF6;
124
+ --color-chart-7: #EC4899;
125
+ --color-chart-8: #06B6D4;
126
+ --color-utility-hover-tint: color-mix(in oklch, var(--color-brand-primary) 85%, white);
127
+ --color-utility-hover-shade: color-mix(in oklch, var(--color-brand-primary) 85%, black);
128
+ --color-utility-disabled-overlay: color-mix(in oklch, var(--color-bg-primary) 50%, transparent);
129
+ --color-utility-focus-ring: color-mix(in oklch, var(--color-brand-accent) 40%, transparent);
130
+
131
+ /* -- Typography Tokens -- */
132
+ --font-family-sans: Inter, system-ui, -apple-system, sans-serif;
133
+ --font-family-display: Inter, system-ui, sans-serif;
134
+ --font-family-mono: "JetBrains Mono", Menlo, Consolas, monospace;
135
+ --font-family-serif: "Source Serif 4", Georgia, serif;
136
+ --font-weight-regular: 400;
137
+ --font-weight-medium: 500;
138
+ --font-weight-semibold: 600;
139
+ --font-weight-bold: 700;
140
+ --font-weight-extrabold: 800;
141
+ --font-size-display-xl: 4.5rem;
142
+ --font-size-display-lg: 3.75rem;
143
+ --font-size-display-md: 3rem;
144
+ --font-size-heading-lg: 2.25rem;
145
+ --font-size-heading-md: 1.75rem;
146
+ --font-size-heading-sm: 1.375rem;
147
+ --font-size-body-lg: 1.25rem;
148
+ --font-size-body-md: 1rem;
149
+ --font-size-body-sm: 0.875rem;
150
+ --font-size-label: 0.75rem;
151
+ --line-height-display: 1.1;
152
+ --line-height-heading: 1.25;
153
+ --line-height-body: 1.6;
154
+ --line-height-tight: 1.05;
155
+
156
+ /* -- Spacing Tokens (4px grid) -- */
157
+ --spacing-1: 4px;
158
+ --spacing-2: 8px;
159
+ --spacing-3: 12px;
160
+ --spacing-4: 16px;
161
+ --spacing-5: 20px;
162
+ --spacing-6: 24px;
163
+ --spacing-8: 32px;
164
+ --spacing-10: 40px;
165
+ --spacing-12: 48px;
166
+ --spacing-16: 64px;
167
+ --spacing-20: 80px;
168
+ --spacing-24: 96px;
169
+ --spacing-32: 128px;
170
+
171
+ /* -- Size Tokens -- */
172
+ --size-container-max: 1280px;
173
+ --size-container-narrow: 768px;
174
+ --size-container-wide: 1440px;
175
+ --size-icon-sm: 16px;
176
+ --size-icon-md: 20px;
177
+ --size-icon-lg: 24px;
178
+ --size-icon-xl: 32px;
179
+
180
+ /* -- Border Radius Tokens -- */
181
+ --radius-sm: 6px;
182
+ --radius-md: 8px;
183
+ --radius-lg: 12px;
184
+ --radius-xl: 16px;
185
+ --radius-2xl: 24px;
186
+ --radius-full: 9999px;
187
+
188
+ /* -- Shadow / Elevation Tokens -- */
189
+ --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
190
+ --shadow-sm: 0px 2px 4px 0px rgba(0,0,0,0.06), 0px 1px 2px 0px rgba(0,0,0,0.04);
191
+ --shadow-md: 0px 4px 12px 0px rgba(0,0,0,0.08), 0px 2px 4px 0px rgba(0,0,0,0.04);
192
+ --shadow-lg: 0px 12px 32px 0px rgba(0,0,0,0.12), 0px 4px 8px 0px rgba(0,0,0,0.06);
193
+ --shadow-xl: 0px 24px 64px 0px rgba(0,0,0,0.16);
194
+
195
+ /* -- Motion / Animation Tokens -- */
196
+ --motion-duration-instant: 100ms;
197
+ --motion-duration-fast: 150ms;
198
+ --motion-duration-normal: 250ms;
199
+ --motion-duration-slow: 400ms;
200
+ --motion-duration-slower: 600ms;
201
+ --motion-duration-slowest: 1000ms;
202
+ --motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
203
+ --motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
204
+ --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
205
+ --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
206
+ --motion-easing-spring-gentle: cubic-bezier(0.34, 1.56, 0.64, 1);
207
+ --motion-easing-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
208
+ --motion-easing-spring-stiff: cubic-bezier(0.4, 0, 0.2, 1);
209
+ --motion-keyframes-fade-in: {"0%":{"opacity":"0"},"100%":{"opacity":"1"}};
210
+ --motion-keyframes-fade-out: {"0%":{"opacity":"1"},"100%":{"opacity":"0"}};
211
+ --motion-keyframes-slide-up: {"0%":{"transform":"translateY(16px)","opacity":"0"},"100%":{"transform":"translateY(0)","opacity":"1"}};
212
+ --motion-keyframes-slide-down: {"0%":{"transform":"translateY(-16px)","opacity":"0"},"100%":{"transform":"translateY(0)","opacity":"1"}};
213
+ --motion-keyframes-slide-left: {"0%":{"transform":"translateX(16px)","opacity":"0"},"100%":{"transform":"translateX(0)","opacity":"1"}};
214
+ --motion-keyframes-slide-right: {"0%":{"transform":"translateX(-16px)","opacity":"0"},"100%":{"transform":"translateX(0)","opacity":"1"}};
215
+ --motion-keyframes-scale-in: {"0%":{"transform":"scale(0.95)","opacity":"0"},"100%":{"transform":"scale(1)","opacity":"1"}};
216
+ --motion-keyframes-scale-out: {"0%":{"transform":"scale(1)","opacity":"1"},"100%":{"transform":"scale(1.05)","opacity":"0"}};
217
+ --motion-keyframes-spin: {"0%":{"transform":"rotate(0deg)"},"100%":{"transform":"rotate(360deg)"}};
218
+ --motion-keyframes-pulse: {"0%":{"opacity":"1"},"50%":{"opacity":"0.5"},"100%":{"opacity":"1"}};
219
+ --motion-keyframes-bounce: {"0%":{"transform":"translateY(0)"},"50%":{"transform":"translateY(-8px)"},"100%":{"transform":"translateY(0)"}};
220
+ --motion-keyframes-shake: {"0%":{"transform":"translateX(0)"},"25%":{"transform":"translateX(-4px)"},"75%":{"transform":"translateX(4px)"},"100%":{"transform":"translateX(0)"}};
221
+ --motion-keyframes-shimmer: {"0%":{"background-position":"-200% 0"},"100%":{"background-position":"200% 0"}};
222
+ --motion-keyframes-skeleton-wave: {"0%":{"background-position":"-468px 0"},"100%":{"background-position":"468px 0"}};
223
+ --motion-keyframes-pulse-ring: {"0%":{"transform":"scale(0.8)","opacity":"1"},"100%":{"transform":"scale(2.0)","opacity":"0"}};
224
+ --motion-keyframes-checkbox-morph: {"0%":{"stroke-dashoffset":"20","opacity":"0"},"100%":{"stroke-dashoffset":"0","opacity":"1"}};
225
+ --motion-keyframes-toggle-slide: {"0%":{"transform":"translateX(0)"},"100%":{"transform":"translateX(20px)"}};
226
+ --motion-keyframes-accordion-height: {"0%":{"max-height":"0","opacity":"0"},"100%":{"max-height":"1000px","opacity":"1"}};
227
+ --motion-keyframes-tab-indicator: {"0%":{"transform":"scaleX(0)","opacity":"0"},"100%":{"transform":"scaleX(1)","opacity":"1"}};
228
+ --motion-keyframes-counter: {"0%":{"opacity":"0","transform":"translateY(8px)"},"100%":{"opacity":"1","transform":"translateY(0)"}};
229
+ --motion-keyframes-typing: {"0%":{"width":"0","border-right-color":"transparent"},"50%":{"border-right-color":"currentColor"},"100%":{"width":"100%","border-right-color":"transparent"}};
230
+ --motion-keyframes-fade-in-up: {"0%":{"opacity":"0","transform":"translateY(24px)"},"100%":{"opacity":"1","transform":"translateY(0)"}};
231
+ --motion-keyframes-slide-in-right: {"0%":{"opacity":"0","transform":"translateX(32px)"},"100%":{"opacity":"1","transform":"translateX(0)"}};
232
+ --motion-keyframes-bounce-in: {"0%":{"opacity":"0","transform":"scale(0.3)"},"50%":{"opacity":"1","transform":"scale(1.05)"},"70%":{"transform":"scale(0.9)"},"100%":{"opacity":"1","transform":"scale(1)"}};
233
+ --motion-scroll-driven-progress: view();
234
+ --motion-scroll-driven-reveal-threshold: 0.1;
235
+ --motion-scroll-driven-parallax-factor: 0.5;
236
+ --motion-style-conservative: fade-in;
237
+ --motion-style-moderate: slide-up;
238
+ --motion-style-expressive: scale-in;
239
+ --motion-style-instant: none;
240
+
241
+ /* -- Opacity Tokens -- */
242
+ --opacity-disabled: 0.4;
243
+ --opacity-muted: 0.6;
244
+ --opacity-subtle: 0.8;
245
+ --opacity-overlay: 0.5;
246
+
247
+ /* -- Breakpoint Tokens -- */
248
+ --breakpoint-sm: 640px;
249
+ --breakpoint-md: 768px;
250
+ --breakpoint-lg: 1024px;
251
+ --breakpoint-xl: 1280px;
252
+ --breakpoint-2xl: 1536px;
253
+
254
+ /* -- Z-Index Tokens -- */
255
+ --zIndex-dropdown: 100;
256
+ --zIndex-sticky: 200;
257
+ --zIndex-overlay: 300;
258
+ --zIndex-modal: 400;
259
+ --zIndex-toast: 500;
260
+ --zIndex-tooltip: 600;
261
+ --zIndex-system: 9999;
262
+
263
+ /* -- Font Weight Tokens -- */
264
+ --font-weight-regular: 400;
265
+ --font-weight-medium: 500;
266
+ --font-weight-semibold: 600;
267
+ --font-weight-bold: 700;
268
+ --font-weight-extrabold: 800;
269
+
270
+ /* -- Line Height Tokens -- */
271
+ --line-height-tight: 1.2;
272
+ --line-height-normal: 1.5;
273
+ --line-height-relaxed: 1.6;
274
+ --line-height-loose: 1.8;
275
+
276
+ /* -- Border Width Tokens -- */
277
+ --border-width-thin: 1px;
278
+ --border-width-medium: 2px;
279
+ --border-width-thick: 4px;
280
+
281
+ /* -- Icon Size Tokens -- */
282
+ --icon-sm: 16px;
283
+ --icon-md: 20px;
284
+ --icon-lg: 24px;
285
+ --icon-xl: 32px;
286
+
287
+ /* -- Layout Tokens -- */
288
+ --layout-breakpoint-sm: 640px;
289
+ --layout-breakpoint-md: 768px;
290
+ --layout-breakpoint-lg: 1024px;
291
+ --layout-breakpoint-xl: 1280px;
292
+ --layout-breakpoint-2xl: 1536px;
293
+ --layout-container-sm: 640px;
294
+ --layout-container-md: 768px;
295
+ --layout-container-lg: 1024px;
296
+ --layout-container-xl: 1280px;
297
+ --layout-container-full: 100%;
298
+ --layout-sidebar-collapsed: 64px;
299
+ --layout-sidebar-default: 240px;
300
+ --layout-sidebar-wide: 320px;
301
+ --layout-stack-gap-xs: 4px;
302
+ --layout-stack-gap-sm: 8px;
303
+ --layout-stack-gap-md: 16px;
304
+ --layout-stack-gap-lg: 24px;
305
+ --layout-stack-gap-xl: 32px;
306
+ --layout-grid-columns-1: 1;
307
+ --layout-grid-columns-2: 2;
308
+ --layout-grid-columns-3: 3;
309
+ --layout-grid-columns-4: 4;
310
+ --layout-grid-columns-6: 6;
311
+ --layout-grid-columns-12: 12;
312
+ --layout-container-query-sm: 320px;
313
+ --layout-container-query-md: 480px;
314
+ --layout-container-query-lg: 640px;
315
+ --layout-container-query-xl: 960px;
316
+ --layout-container-max-width-sm: 640px;
317
+ --layout-container-max-width-md: 768px;
318
+ --layout-container-max-width-lg: 1024px;
319
+ --layout-container-max-width-xl: 1280px;
320
+
321
+ /* -- Component Tokens -- */
322
+ --component-modal-overlay-opacity: 0.5;
323
+ --component-modal-content-padding: 24px;
324
+ --component-modal-header-padding: 20px;
325
+ --component-modal-footer-padding: 20px;
326
+ --component-modal-width-sm: 400px;
327
+ --component-modal-width-md: 560px;
328
+ --component-modal-width-lg: 720px;
329
+ --component-dropdown-menu-min-width: 160px;
330
+ --component-dropdown-item-height-sm: 32px;
331
+ --component-dropdown-item-height-md: 36px;
332
+ --component-dropdown-item-height-lg: 40px;
333
+ --component-dropdown-separator-margin: 4px;
334
+ --component-alert-icon-size: 20px;
335
+ --component-alert-padding-sm: 12px 16px;
336
+ --component-alert-padding-md: 16px 20px;
337
+ --component-alert-padding-lg: 20px 24px;
338
+ --component-input-label-gap: 4px;
339
+ --component-input-helper-gap: 4px;
340
+ --component-input-icon-size: 16px;
341
+ --component-input-icon-inset: 12px;
342
+ --component-feature-card-media-height: 200px;
343
+ --component-feature-card-content-padding: 20px;
344
+ --component-feature-card-footer-padding: 16px;
345
+ --component-tabs-height_md: 44px;
346
+ --component-tabs-height_sm: 36px;
347
+ --component-tabs-indicator_width: 2px;
348
+ --component-accordion-trigger_height: 52px;
349
+ --component-accordion-content_padding: 16px;
350
+ --component-tooltip-max_width: 240px;
351
+ --component-tooltip-padding_simple: 6px 12px;
352
+ --component-tooltip-padding_rich: 12px 16px;
353
+ --component-tooltip-delay: 300ms;
354
+ --component-toast-min_width: 320px;
355
+ --component-toast-max_width: 420px;
356
+ --component-toast-duration_default: 5000ms;
357
+ --component-toast-max_visible: 3;
358
+ --component-avatar-xs: 24px;
359
+ --component-avatar-sm: 32px;
360
+ --component-avatar-md: 40px;
361
+ --component-avatar-lg: 48px;
362
+ --component-avatar-xl: 64px;
363
+ --component-avatar-status_dot_border: 2px;
364
+ --component-data_table-row_compact: 36px;
365
+ --component-data_table-row_default: 48px;
366
+ --component-data_table-row_comfortable: 56px;
367
+ --component-data_table-header_height: 44px;
368
+ --component-pagination-button_size: 36px;
369
+ --component-skeleton-animation_duration: 1500ms;
370
+ --component-skeleton-line_height: 16px;
371
+ --component-skeleton-line_gap: 12px;
372
+ }
373
+
374
+ /* Palette: minimal-saas (light) */
375
+ [data-theme="minimal-saas"] {
376
+ --color-bg-primary: #FFFFFF;
377
+ --color-bg-secondary: #F8F8FA;
378
+ --color-text-primary: #111118;
379
+ --color-text-secondary: #555566;
380
+ --color-brand-primary: #2563EB;
381
+ --color-brand-secondary: #3B82F6;
382
+ }
383
+
384
+ /* Palette: minimal-saas (dark) */
385
+ [data-theme="minimal-saas"].dark,
386
+ [data-theme="minimal-saas"] .dark {
387
+ --color-bg-primary: #0A0A0F;
388
+ --color-bg-secondary: #111118;
389
+ --color-text-primary: #F0F0F5;
390
+ --color-text-secondary: #B8B8C8;
391
+ --color-brand-primary: #60A5FA;
392
+ --color-brand-secondary: #3B82F6;
393
+ }
394
+
395
+ /* Palette: ai-futuristic (light) */
396
+ [data-theme="ai-futuristic"] {
397
+ --font-family-display: "DM Sans", system-ui, sans-serif;
398
+ --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.3);
399
+ --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.4);
400
+ --shadow-lg: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.5);
401
+ --shadow-glow: 0 0 40px rgba(0, 255, 136, 0.15);
402
+ --color-bg-primary: #0A0A0F;
403
+ --color-bg-secondary: #111118;
404
+ --color-text-primary: #E0E0EE;
405
+ --color-text-secondary: #B8B8C8;
406
+ --color-brand-primary: #00FF88;
407
+ --color-brand-secondary: #00D4FF;
408
+ --color-success: #34D399;
409
+ --color-success-bg: #062E1E;
410
+ --color-warning: #FBBF24;
411
+ --color-warning-bg: #2A1F00;
412
+ --color-error: #F87171;
413
+ --color-error-bg: #2D0A0A;
414
+ --color-info: #60A5FA;
415
+ --color-info-bg: #0A1628;
416
+ --color-text-tertiary: #9e9eac;
417
+ --radius-sm: 2px;
418
+ --radius-md: 4px;
419
+ --radius-lg: 6px;
420
+ --radius-xl: 8px;
421
+ --radius-2xl: 12px;
422
+ --radius-full: 9999px;
423
+ }
424
+
425
+ /* Palette: ai-futuristic (dark) */
426
+ [data-theme="ai-futuristic"].dark,
427
+ [data-theme="ai-futuristic"] .dark {
428
+ --color-bg-primary: #050508;
429
+ --color-bg-secondary: #0A0A0F;
430
+ --color-text-primary: #E8E8F0;
431
+ --color-text-secondary: #C0C0D0;
432
+ --color-brand-primary: #00FF88;
433
+ --color-brand-secondary: #00D4FF;
434
+ }
435
+
436
+ /* Palette: gradient-startup (light) */
437
+ [data-theme="gradient-startup"] {
438
+ --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.15);
439
+ --color-bg-primary: #FFFFFF;
440
+ --color-bg-secondary: #F8F8FA;
441
+ --color-text-primary: #111118;
442
+ --color-text-secondary: #555566;
443
+ --color-brand-primary: #7C3AED;
444
+ --color-brand-secondary: #EC4899;
445
+ --radius-sm: 8px;
446
+ --radius-md: 12px;
447
+ --radius-lg: 16px;
448
+ --radius-xl: 24px;
449
+ --radius-2xl: 32px;
450
+ --radius-full: 9999px;
451
+ }
452
+
453
+ /* Palette: gradient-startup (dark) */
454
+ [data-theme="gradient-startup"].dark,
455
+ [data-theme="gradient-startup"] .dark {
456
+ --color-bg-primary: #0A0A0F;
457
+ --color-bg-secondary: #111118;
458
+ --color-text-primary: #F0F0F5;
459
+ --color-text-secondary: #B8B8C8;
460
+ --color-brand-primary: #A78BFA;
461
+ --color-brand-secondary: #EC4899;
462
+ }
463
+
464
+ /* Palette: corporate (light) */
465
+ [data-theme="corporate"] {
466
+ --font-family-display: "Source Serif 4", Georgia, serif;
467
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
468
+ --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
469
+ --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
470
+ --color-bg-primary: #FFFFFF;
471
+ --color-bg-secondary: #F7F8FA;
472
+ --color-text-primary: #1A202C;
473
+ --color-text-secondary: #4A5568;
474
+ --color-brand-primary: #1A365D;
475
+ --color-brand-secondary: #2B6CB0;
476
+ --radius-sm: 2px;
477
+ --radius-md: 4px;
478
+ --radius-lg: 6px;
479
+ --radius-xl: 8px;
480
+ --radius-2xl: 12px;
481
+ --radius-full: 9999px;
482
+ }
483
+
484
+ /* Palette: corporate (dark) */
485
+ [data-theme="corporate"].dark,
486
+ [data-theme="corporate"] .dark {
487
+ --color-bg-primary: #0D1117;
488
+ --color-bg-secondary: #161B22;
489
+ --color-text-primary: #E6EDF3;
490
+ --color-text-secondary: #B0BAC5;
491
+ --color-brand-primary: #79B8FF;
492
+ --color-brand-secondary: #58A6FF;
493
+ }
494
+
495
+ /* Palette: apple-minimal (light) */
496
+ [data-theme="apple-minimal"] {
497
+ --font-family-display: Inter, -apple-system, sans-serif;
498
+ --color-bg-primary: #FFFFFF;
499
+ --color-bg-secondary: #FBFBFD;
500
+ --color-text-primary: #1D1D1F;
501
+ --color-text-secondary: #515154;
502
+ --color-brand-primary: #0071E3;
503
+ --color-brand-secondary: #0077ED;
504
+ --radius-sm: 8px;
505
+ --radius-md: 10px;
506
+ --radius-lg: 14px;
507
+ --radius-xl: 20px;
508
+ --radius-2xl: 28px;
509
+ --radius-full: 9999px;
510
+ }
511
+
512
+ /* Palette: apple-minimal (dark) */
513
+ [data-theme="apple-minimal"].dark,
514
+ [data-theme="apple-minimal"] .dark {
515
+ --color-bg-primary: #000000;
516
+ --color-bg-secondary: #1C1C1E;
517
+ --color-text-primary: #F5F5F7;
518
+ --color-text-secondary: #B8B8BD;
519
+ --color-brand-primary: #64D2FF;
520
+ --color-brand-secondary: #64D2FF;
521
+ }
522
+
523
+ /* Palette: illustration (light) */
524
+ [data-theme="illustration"] {
525
+ --shadow-glow: 0 0 40px rgba(232, 89, 12, 0.15);
526
+ --color-bg-primary: #FFFFFF;
527
+ --color-bg-secondary: #FFF8F0;
528
+ --color-bg-tertiary: #FFF0E6;
529
+ --color-bg-inverse: #1A1523;
530
+ --color-text-primary: #1A1523;
531
+ --color-text-secondary: #5C5470;
532
+ --color-text-tertiary: #7A7189;
533
+ --color-text-on-brand: #FFFFFF;
534
+ --color-brand-primary: #C2410C;
535
+ --color-brand-primary-rgb: 194, 65, 12;
536
+ --color-brand-secondary: #7048E8;
537
+ --color-brand-accent: #12B886;
538
+ --color-brand-muted: #FFF4E6;
539
+ --color-border-default: #C4B5A4;
540
+ --color-border-input: #9E8E7E;
541
+ --color-border-subtle: #EDE4DA;
542
+ --radius-sm: 10px;
543
+ --radius-md: 14px;
544
+ --radius-lg: 18px;
545
+ --radius-xl: 24px;
546
+ --radius-2xl: 32px;
547
+ --radius-full: 9999px;
548
+ }
549
+
550
+ /* Palette: illustration (dark) */
551
+ [data-theme="illustration"].dark,
552
+ [data-theme="illustration"] .dark {
553
+ --color-bg-primary: #1A1523;
554
+ --color-bg-secondary: #221C2E;
555
+ --color-bg-tertiary: #2A2336;
556
+ --color-bg-inverse: #FFFFFF;
557
+ --color-text-primary: #F0ECF5;
558
+ --color-text-secondary: #C0B8CC;
559
+ --color-text-tertiary: #9E96AC;
560
+ --color-text-on-brand: #FFFFFF;
561
+ --color-brand-primary: #CC4A14;
562
+ --color-brand-primary-rgb: 204, 74, 20;
563
+ --color-brand-secondary: #9775FA;
564
+ --color-brand-accent: #38D9A9;
565
+ --color-brand-muted: #2A1F12;
566
+ --color-border-default: #3D3550;
567
+ --color-border-input: #5A5070;
568
+ --color-border-subtle: #2E2840;
569
+ }
570
+
571
+ /* Palette: dashboard (light) */
572
+ [data-theme="dashboard"] {
573
+ --color-bg-primary: #FFFFFF;
574
+ --color-bg-secondary: #F7F8FC;
575
+ --color-bg-tertiary: #EEF0F8;
576
+ --color-bg-inverse: #0F1117;
577
+ --color-text-primary: #0F1117;
578
+ --color-text-secondary: #525866;
579
+ --color-text-tertiary: #6E7585;
580
+ --color-text-on-brand: #FFFFFF;
581
+ --color-brand-primary: #4F46E5;
582
+ --color-brand-primary-rgb: 79, 70, 229;
583
+ --color-brand-secondary: #0EA5E9;
584
+ --color-brand-accent: #06B6D4;
585
+ --color-brand-muted: #EEF2FF;
586
+ --color-border-default: #C5CAD4;
587
+ --color-border-input: #8B92A0;
588
+ --color-border-subtle: #E5E8F0;
589
+ --radius-sm: 4px;
590
+ --radius-md: 6px;
591
+ --radius-lg: 8px;
592
+ --radius-xl: 12px;
593
+ --radius-2xl: 16px;
594
+ --radius-full: 9999px;
595
+ }
596
+
597
+ /* Palette: dashboard (dark) */
598
+ [data-theme="dashboard"].dark,
599
+ [data-theme="dashboard"] .dark {
600
+ --color-bg-primary: #0F1117;
601
+ --color-bg-secondary: #161924;
602
+ --color-bg-tertiary: #1E2130;
603
+ --color-bg-inverse: #FFFFFF;
604
+ --color-text-primary: #E8EAF0;
605
+ --color-text-secondary: #B0B4C0;
606
+ --color-text-tertiary: #8E94A0;
607
+ --color-text-on-brand: #0F1117;
608
+ --color-brand-primary: #9B93F5;
609
+ --color-brand-primary-rgb: 155, 147, 245;
610
+ --color-brand-secondary: #38BDF8;
611
+ --color-brand-accent: #22D3EE;
612
+ --color-brand-muted: #1E1B4B;
613
+ --color-border-default: #2A2E3D;
614
+ --color-border-input: #4A4E5C;
615
+ --color-border-subtle: #1E2230;
616
+ }
617
+
618
+ /* Palette: bold-lifestyle (light) */
619
+ [data-theme="bold-lifestyle"] {
620
+ --font-family-display: Oswald, sans-serif;
621
+ --shadow-sm: none;
622
+ --shadow-md: 2px 2px 0 rgba(0,0,0,0.15);
623
+ --shadow-lg: 4px 4px 0 rgba(0,0,0,0.2);
624
+ --shadow-glow: none;
625
+ --color-bg-primary: #FFFFFF;
626
+ --color-bg-secondary: #F5F5F5;
627
+ --color-bg-tertiary: #EBEBEB;
628
+ --color-bg-inverse: #111111;
629
+ --color-text-primary: #111111;
630
+ --color-text-secondary: #525252;
631
+ --color-text-tertiary: #6B6B6B;
632
+ --color-text-on-brand: #FFFFFF;
633
+ --color-brand-primary: #111111;
634
+ --color-brand-primary-rgb: 17, 17, 17;
635
+ --color-brand-secondary: #FF4500;
636
+ --color-brand-accent: #FFD700;
637
+ --color-brand-muted: #F5F5F5;
638
+ --color-border-default: #BFBFBF;
639
+ --color-border-input: #8C8C8C;
640
+ --color-border-subtle: #E0E0E0;
641
+ --radius-sm: 0;
642
+ --radius-md: 0;
643
+ --radius-lg: 0;
644
+ --radius-xl: 0;
645
+ --radius-2xl: 0;
646
+ --radius-full: 0;
647
+ }
648
+
649
+ /* Palette: bold-lifestyle (dark) */
650
+ [data-theme="bold-lifestyle"].dark,
651
+ [data-theme="bold-lifestyle"] .dark {
652
+ --color-bg-primary: #111111;
653
+ --color-bg-secondary: #1A1A1A;
654
+ --color-bg-tertiary: #242424;
655
+ --color-bg-inverse: #FFFFFF;
656
+ --color-text-primary: #F5F5F5;
657
+ --color-text-secondary: #BDBDBD;
658
+ --color-text-tertiary: #989898;
659
+ --color-text-on-brand: #111111;
660
+ --color-brand-primary: #FFFFFF;
661
+ --color-brand-primary-rgb: 255, 255, 255;
662
+ --color-brand-secondary: #FF6B35;
663
+ --color-brand-accent: #FFE066;
664
+ --color-brand-muted: #1A1A1A;
665
+ --color-border-default: #3D3D3D;
666
+ --color-border-input: #5C5C5C;
667
+ --color-border-subtle: #242424;
668
+ }
669
+
670
+ /* Palette: minimal-corporate (light) */
671
+ [data-theme="minimal-corporate"] {
672
+ --font-family-display: "Source Serif 4", Georgia, serif;
673
+ --color-bg-primary: #FDFCFB;
674
+ --color-bg-secondary: #F7F5F2;
675
+ --color-bg-tertiary: #EFECE8;
676
+ --color-bg-inverse: #1C1917;
677
+ --color-text-primary: #1C1917;
678
+ --color-text-secondary: #57534E;
679
+ --color-text-tertiary: #78716C;
680
+ --color-text-on-brand: #FFFFFF;
681
+ --color-brand-primary: #B45309;
682
+ --color-brand-primary-rgb: 180, 83, 9;
683
+ --color-brand-secondary: #92400E;
684
+ --color-brand-accent: #D97706;
685
+ --color-brand-muted: #FEF3C7;
686
+ --color-border-default: #C4BEB5;
687
+ --color-border-input: #918B82;
688
+ --color-border-subtle: #E7E5E4;
689
+ --radius-sm: 4px;
690
+ --radius-md: 6px;
691
+ --radius-lg: 8px;
692
+ --radius-xl: 12px;
693
+ --radius-2xl: 16px;
694
+ --radius-full: 9999px;
695
+ }
696
+
697
+ /* Palette: minimal-corporate (dark) */
698
+ [data-theme="minimal-corporate"].dark,
699
+ [data-theme="minimal-corporate"] .dark {
700
+ --color-bg-primary: #1C1917;
701
+ --color-bg-secondary: #231F1C;
702
+ --color-bg-tertiary: #2C2824;
703
+ --color-bg-inverse: #FDFCFB;
704
+ --color-text-primary: #F5F0EB;
705
+ --color-text-secondary: #C0BBB8;
706
+ --color-text-tertiary: #A09A96;
707
+ --color-text-on-brand: #1C1917;
708
+ --color-brand-primary: #FBBF24;
709
+ --color-brand-primary-rgb: 251, 191, 36;
710
+ --color-brand-secondary: #B45309;
711
+ --color-brand-accent: #F59E0B;
712
+ --color-brand-muted: #2C2412;
713
+ --color-border-default: #3D3834;
714
+ --color-border-input: #5C5650;
715
+ --color-border-subtle: #2C2824;
716
+ }
717
+
718
+ }