@phcdevworks/spectre-tokens 1.0.0 → 2.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 (15) hide show
  1. package/dist/index.cjs +1261 -810
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +47 -28
  4. package/dist/index.d.cts +1310 -86
  5. package/dist/index.d.ts +1310 -86
  6. package/dist/index.js +1261 -810
  7. package/dist/index.js.map +1 -1
  8. package/package.json +15 -4
  9. package/tokens/components.json +155 -0
  10. package/tokens/modes.json +182 -0
  11. package/tokens/palette.json +102 -0
  12. package/tokens/primitives.json +145 -0
  13. package/tokens/semantic-roles.json +64 -0
  14. package/tokens/typography.json +94 -0
  15. package/tokens/core.json +0 -912
package/dist/index.cjs CHANGED
@@ -28,701 +28,1005 @@ __export(index_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(index_exports);
30
30
 
31
- // tokens/core.json
32
- var core_default = {
33
- colors: {
34
- brand: {
35
- "50": "#eff6ff",
36
- "100": "#dbeafe",
37
- "200": "#bfdbfe",
38
- "300": "#93c5fd",
39
- "400": "#60a5fa",
40
- "500": "#3b82f6",
41
- "600": "#2563eb",
42
- "700": "#1d4ed8",
43
- "800": "#1e40af",
44
- "900": "#1e3a8a"
31
+ // src/generated/tokens.ts
32
+ var coreTokens = {
33
+ "component": {
34
+ "card": {
35
+ "text": {
36
+ "value": "{colors.neutral.900}"
37
+ },
38
+ "textMuted": {
39
+ "value": "{colors.neutral.500}"
40
+ }
45
41
  },
46
- neutral: {
47
- "50": "#f8fafc",
48
- "100": "#f1f5f9",
49
- "200": "#e2e8f0",
50
- "300": "#cbd5e1",
51
- "400": "#94a3b8",
52
- "500": "#64748b",
53
- "600": "#475569",
54
- "700": "#334155",
55
- "800": "#1e293b",
56
- "900": "#0f172a"
42
+ "input": {
43
+ "text": {
44
+ "value": "{colors.neutral.900}"
45
+ },
46
+ "placeholder": {
47
+ "value": "{colors.neutral.400}"
48
+ }
57
49
  },
58
- accent: {
59
- "50": "#eff6ff",
60
- "100": "#dbeafe",
61
- "200": "#bfdbfe",
62
- "300": "#93c5fd",
63
- "400": "#60a5fa",
64
- "500": "#3b82f6",
65
- "600": "#2563eb",
66
- "700": "#1d4ed8",
67
- "800": "#1e40af",
68
- "900": "#1e3a8a"
50
+ "button": {
51
+ "textDefault": {
52
+ "value": "{colors.neutral.900}"
53
+ },
54
+ "textOnPrimary": {
55
+ "value": "{colors.white}"
56
+ }
69
57
  },
70
- success: {
71
- "50": "#f0fdf4",
72
- "100": "#dcfce7",
73
- "200": "#bbf7d0",
74
- "300": "#86efac",
75
- "400": "#4ade80",
76
- "500": "#22c55e",
77
- "600": "#16a34a",
78
- "700": "#15803d",
79
- "800": "#166534",
80
- "900": "#14532d"
58
+ "badge": {
59
+ "neutralBg": {
60
+ "value": "{colors.neutral.100}",
61
+ "metadata": {
62
+ "pair": "component.badge.neutralText"
63
+ }
64
+ },
65
+ "neutralBgHover": {
66
+ "value": "{colors.neutral.200}"
67
+ },
68
+ "neutralText": {
69
+ "value": "{colors.neutral.700}"
70
+ },
71
+ "infoBg": {
72
+ "value": "{colors.info.100}",
73
+ "metadata": {
74
+ "pair": "component.badge.infoText"
75
+ }
76
+ },
77
+ "infoBgHover": {
78
+ "value": "{colors.info.200}"
79
+ },
80
+ "infoText": {
81
+ "value": "{colors.info.700}"
82
+ },
83
+ "successBg": {
84
+ "value": "{colors.success.100}",
85
+ "metadata": {
86
+ "pair": "component.badge.successText"
87
+ }
88
+ },
89
+ "successBgHover": {
90
+ "value": "{colors.success.200}"
91
+ },
92
+ "successText": {
93
+ "value": "{colors.success.700}"
94
+ },
95
+ "warningBg": {
96
+ "value": "{colors.warning.100}",
97
+ "metadata": {
98
+ "pair": "component.badge.warningText"
99
+ }
100
+ },
101
+ "warningBgHover": {
102
+ "value": "{colors.warning.200}"
103
+ },
104
+ "warningText": {
105
+ "value": "{colors.warning.700}"
106
+ },
107
+ "dangerBg": {
108
+ "value": "{colors.error.100}",
109
+ "metadata": {
110
+ "pair": "component.badge.dangerText"
111
+ }
112
+ },
113
+ "dangerBgHover": {
114
+ "value": "{colors.error.200}"
115
+ },
116
+ "dangerText": {
117
+ "value": "{colors.error.700}"
118
+ }
81
119
  },
82
- warning: {
83
- "50": "#fffbeb",
84
- "100": "#fef3c7",
85
- "200": "#fde68a",
86
- "300": "#fcd34d",
87
- "400": "#fbbf24",
88
- "500": "#f59e0b",
89
- "600": "#d97706",
90
- "700": "#b45309",
91
- "800": "#92400e",
92
- "900": "#78350f"
120
+ "iconBox": {
121
+ "bg": {
122
+ "value": "{colors.white}"
123
+ },
124
+ "border": {
125
+ "value": "{colors.neutral.200}"
126
+ },
127
+ "iconDefault": {
128
+ "value": "{colors.info.600}"
129
+ },
130
+ "iconSuccess": {
131
+ "value": "{colors.success.600}"
132
+ },
133
+ "iconWarning": {
134
+ "value": "{colors.warning.600}"
135
+ },
136
+ "iconDanger": {
137
+ "value": "{colors.error.600}"
138
+ }
93
139
  },
94
- error: {
95
- "50": "#fef2f2",
96
- "100": "#fee2e2",
97
- "200": "#fecaca",
98
- "300": "#fca5a5",
99
- "400": "#f87171",
100
- "500": "#ef4444",
101
- "600": "#dc2626",
102
- "700": "#b91c1c",
103
- "800": "#991b1b",
104
- "900": "#7f1d1d"
140
+ "testimonial": {
141
+ "bg": {
142
+ "value": "{colors.white}"
143
+ },
144
+ "border": {
145
+ "value": "{colors.neutral.200}"
146
+ },
147
+ "text": {
148
+ "value": "{colors.neutral.700}"
149
+ },
150
+ "authorName": {
151
+ "value": "{colors.neutral.900}"
152
+ },
153
+ "authorTitle": {
154
+ "value": "{colors.neutral.500}"
155
+ },
156
+ "quoteMark": {
157
+ "value": "{colors.neutral.300}"
158
+ }
105
159
  },
106
- info: {
107
- "50": "#eff6ff",
108
- "100": "#dbeafe",
109
- "200": "#bfdbfe",
110
- "300": "#93c5fd",
111
- "400": "#60a5fa",
112
- "500": "#3b82f6",
113
- "600": "#2563eb",
114
- "700": "#1d4ed8",
115
- "800": "#1e40af",
116
- "900": "#1e3a8a"
160
+ "pricingCard": {
161
+ "bg": {
162
+ "value": "{colors.white}",
163
+ "metadata": {}
164
+ },
165
+ "border": {
166
+ "value": "{colors.neutral.200}",
167
+ "metadata": {}
168
+ },
169
+ "featuredBg": {
170
+ "value": "{colors.info.600}",
171
+ "metadata": {
172
+ "pair": "component.pricingCard.featuredText"
173
+ }
174
+ },
175
+ "featuredText": {
176
+ "value": "{colors.white}",
177
+ "metadata": {}
178
+ },
179
+ "featuredBadgeBg": {
180
+ "value": "{colors.warning.500}",
181
+ "metadata": {
182
+ "pair": "component.pricingCard.featuredBadgeText"
183
+ }
184
+ },
185
+ "featuredBadgeText": {
186
+ "value": "{colors.neutral.900}",
187
+ "metadata": {}
188
+ },
189
+ "price": {
190
+ "value": "{colors.neutral.900}",
191
+ "metadata": {}
192
+ },
193
+ "priceDescription": {
194
+ "value": "{colors.neutral.500}",
195
+ "metadata": {}
196
+ }
117
197
  },
118
- focus: {
119
- primary: "#3b82f6",
120
- error: "#ef4444",
121
- info: "#3b82f6"
198
+ "rating": {
199
+ "starFilled": {
200
+ "value": "{colors.warning.500}"
201
+ },
202
+ "starEmpty": {
203
+ "value": "{colors.neutral.200}"
204
+ },
205
+ "text": {
206
+ "value": "{colors.neutral.500}"
207
+ }
122
208
  }
123
209
  },
124
- surface: {
125
- page: {
126
- value: "#f8fafc",
127
- description: "primary app background"
210
+ "buttons": {
211
+ "primary": {
212
+ "bg": {
213
+ "value": "{colors.info.600}",
214
+ "metadata": {
215
+ "pair": "buttons.primary.text"
216
+ }
217
+ },
218
+ "bgHover": {
219
+ "value": "{colors.info.700}"
220
+ },
221
+ "bgActive": {
222
+ "value": "{colors.info.800}"
223
+ },
224
+ "bgDisabled": {
225
+ "value": "{colors.neutral.200}"
226
+ },
227
+ "text": {
228
+ "value": "{colors.white}"
229
+ },
230
+ "textDisabled": {
231
+ "value": "{colors.neutral.400}"
232
+ }
128
233
  },
129
- card: {
130
- value: "#ffffff",
131
- description: "containers and tiles"
234
+ "secondary": {
235
+ "bg": {
236
+ "value": "{colors.white}",
237
+ "metadata": {
238
+ "pair": "buttons.secondary.text"
239
+ }
240
+ },
241
+ "bgHover": {
242
+ "value": "{colors.neutral.50}"
243
+ },
244
+ "bgActive": {
245
+ "value": "{colors.neutral.100}"
246
+ },
247
+ "bgDisabled": {
248
+ "value": "{colors.neutral.50}"
249
+ },
250
+ "text": {
251
+ "value": "{colors.info.600}"
252
+ },
253
+ "textDisabled": {
254
+ "value": "{colors.neutral.400}"
255
+ },
256
+ "border": {
257
+ "value": "{colors.info.600}"
258
+ },
259
+ "borderDisabled": {
260
+ "value": "{colors.neutral.200}"
261
+ }
132
262
  },
133
- input: {
134
- value: "#ffffff",
135
- description: "form inputs, textareas"
263
+ "ghost": {
264
+ "bg": {
265
+ "value": "transparent"
266
+ },
267
+ "bgHover": {
268
+ "value": "{colors.info.50}"
269
+ },
270
+ "bgActive": {
271
+ "value": "{colors.info.100}"
272
+ },
273
+ "bgDisabled": {
274
+ "value": "transparent"
275
+ },
276
+ "text": {
277
+ "value": "{colors.info.600}"
278
+ },
279
+ "textDisabled": {
280
+ "value": "{colors.neutral.400}"
281
+ }
136
282
  },
137
- overlay: {
138
- value: "rgba(15,23,42,0.6)",
139
- description: "modals, dropdowns, flyouts"
140
- }
141
- },
142
- text: {
143
- onPage: {
144
- default: "#0f172a",
145
- muted: "#475569",
146
- subtle: "#94a3b8",
147
- meta: "#94a3b8"
283
+ "danger": {
284
+ "bg": {
285
+ "value": "{colors.error.600}",
286
+ "metadata": {
287
+ "pair": "buttons.danger.text"
288
+ }
289
+ },
290
+ "bgHover": {
291
+ "value": "{colors.error.700}"
292
+ },
293
+ "bgActive": {
294
+ "value": "{colors.error.800}"
295
+ },
296
+ "bgDisabled": {
297
+ "value": "{colors.error.200}"
298
+ },
299
+ "text": {
300
+ "value": "{colors.white}"
301
+ },
302
+ "textDisabled": {
303
+ "value": "{colors.neutral.400}"
304
+ }
148
305
  },
149
- onSurface: {
150
- default: "#0f172a",
151
- muted: "#64748b",
152
- subtle: "#94a3b8",
153
- meta: "#94a3b8"
154
- }
155
- },
156
- component: {
157
- card: {
158
- text: "#0f172a",
159
- textMuted: "#64748b"
306
+ "success": {
307
+ "bg": {
308
+ "value": "{colors.success.700}",
309
+ "metadata": {
310
+ "pair": "buttons.success.text"
311
+ }
312
+ },
313
+ "bgHover": {
314
+ "value": "{colors.success.800}"
315
+ },
316
+ "bgActive": {
317
+ "value": "{colors.success.900}"
318
+ },
319
+ "bgDisabled": {
320
+ "value": "{colors.success.200}"
321
+ },
322
+ "text": {
323
+ "value": "{colors.white}"
324
+ },
325
+ "textDisabled": {
326
+ "value": "{colors.neutral.400}"
327
+ }
160
328
  },
161
- input: {
162
- text: "#0f172a",
163
- placeholder: "#94a3b8"
329
+ "cta": {
330
+ "bg": {
331
+ "value": "{colors.warning.500}",
332
+ "metadata": {
333
+ "pair": "buttons.cta.text"
334
+ }
335
+ },
336
+ "bgHover": {
337
+ "value": "{colors.warning.600}"
338
+ },
339
+ "bgActive": {
340
+ "value": "{colors.warning.700}"
341
+ },
342
+ "bgDisabled": {
343
+ "value": "{colors.warning.200}"
344
+ },
345
+ "text": {
346
+ "value": "{colors.neutral.900}"
347
+ },
348
+ "textDisabled": {
349
+ "value": "{colors.neutral.400}"
350
+ },
351
+ "shadow": {
352
+ "value": "0 4px 14px 0 {colors.warning.500} / 0.39"
353
+ }
164
354
  },
165
- button: {
166
- textDefault: "#0f172a",
167
- textOnPrimary: "#ffffff"
355
+ "accent": {
356
+ "bg": {
357
+ "value": "{colors.accent.600}",
358
+ "metadata": {
359
+ "pair": "buttons.accent.text"
360
+ }
361
+ },
362
+ "bgHover": {
363
+ "value": "{colors.accent.700}"
364
+ },
365
+ "bgActive": {
366
+ "value": "{colors.accent.800}"
367
+ },
368
+ "bgDisabled": {
369
+ "value": "{colors.accent.200}"
370
+ },
371
+ "text": {
372
+ "value": "{colors.white}"
373
+ },
374
+ "textDisabled": {
375
+ "value": "{colors.neutral.400}"
376
+ }
377
+ }
378
+ },
379
+ "forms": {
380
+ "default": {
381
+ "bg": {
382
+ "value": "{colors.white}"
383
+ },
384
+ "border": {
385
+ "value": "{colors.neutral.300}"
386
+ },
387
+ "text": {
388
+ "value": "{colors.neutral.900}"
389
+ },
390
+ "placeholder": {
391
+ "value": "{colors.neutral.400}"
392
+ }
168
393
  },
169
- badge: {
170
- neutralBg: "#f1f5f9",
171
- neutralText: "#334155",
172
- infoBg: "#dbeafe",
173
- infoText: "#1d4ed8",
174
- successBg: "#dcfce7",
175
- successText: "#15803d",
176
- warningBg: "#fef3c7",
177
- warningText: "#b45309",
178
- dangerBg: "#fee2e2",
179
- dangerText: "#b91c1c"
394
+ "hover": {
395
+ "border": {
396
+ "value": "{colors.info.500}"
397
+ }
180
398
  },
181
- iconBox: {
182
- bg: "#ffffff",
183
- border: "#e2e8f0",
184
- iconDefault: "#2563eb",
185
- iconSuccess: "#16a34a",
186
- iconWarning: "#d97706",
187
- iconDanger: "#dc2626"
399
+ "focus": {
400
+ "border": {
401
+ "value": "{colors.info.500}"
402
+ },
403
+ "ring": {
404
+ "value": "{colors.info.500}"
405
+ }
188
406
  },
189
- testimonial: {
190
- bg: "#ffffff",
191
- border: "#e2e8f0",
192
- text: "#334155",
193
- authorName: "#0f172a",
194
- authorTitle: "#64748b",
195
- quoteMark: "#cbd5e1"
407
+ "valid": {
408
+ "border": {
409
+ "value": "{colors.success.500}"
410
+ },
411
+ "bg": {
412
+ "value": "{colors.success.50}",
413
+ "metadata": {
414
+ "pair": "forms.valid.text"
415
+ }
416
+ },
417
+ "text": {
418
+ "value": "{colors.success.700}"
419
+ }
196
420
  },
197
- pricingCard: {
198
- bg: "#ffffff",
199
- border: "#e2e8f0",
200
- featuredBg: "#2563eb",
201
- featuredText: "#ffffff",
202
- featuredBadgeBg: "#f59e0b",
203
- featuredBadgeText: "#ffffff",
204
- price: "#0f172a",
205
- priceDescription: "#64748b"
421
+ "invalid": {
422
+ "border": {
423
+ "value": "{colors.error.500}"
424
+ },
425
+ "bg": {
426
+ "value": "{colors.error.50}",
427
+ "metadata": {
428
+ "pair": "forms.invalid.text"
429
+ }
430
+ },
431
+ "text": {
432
+ "value": "{colors.error.700}"
433
+ }
206
434
  },
207
- rating: {
208
- starFilled: "#f59e0b",
209
- starEmpty: "#e2e8f0",
210
- text: "#64748b"
435
+ "disabled": {
436
+ "bg": {
437
+ "value": "{colors.neutral.50}"
438
+ },
439
+ "border": {
440
+ "value": "{colors.neutral.200}"
441
+ },
442
+ "text": {
443
+ "value": "{colors.neutral.400}"
444
+ }
211
445
  }
212
446
  },
213
- modes: {
214
- default: {
215
- surface: {
216
- page: {
217
- value: "#f8fafc"
447
+ "modes": {
448
+ "default": {
449
+ "surface": {
450
+ "page": {
451
+ "value": "{colors.neutral.50}"
218
452
  },
219
- card: {
220
- value: "#ffffff"
453
+ "card": {
454
+ "value": "{colors.white}"
221
455
  },
222
- input: {
223
- value: "#ffffff"
456
+ "input": {
457
+ "value": "{colors.white}"
224
458
  },
225
- overlay: {
226
- value: "rgba(15,23,42,0.6)"
459
+ "overlay": {
460
+ "value": "{colors.neutral.900} / 0.6"
227
461
  },
228
- alternate: {
229
- value: "#f1f5f9"
462
+ "alternate": {
463
+ "value": "{colors.neutral.100}"
230
464
  },
231
- hero: {
232
- value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
465
+ "hero": {
466
+ "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
233
467
  }
234
468
  },
235
- text: {
236
- onPage: {
237
- default: {
238
- value: "#0f172a"
469
+ "text": {
470
+ "onPage": {
471
+ "default": {
472
+ "value": "{colors.neutral.900}"
473
+ },
474
+ "muted": {
475
+ "value": "{colors.neutral.600}"
239
476
  },
240
- muted: {
241
- value: "#475569"
477
+ "subtle": {
478
+ "value": "{colors.neutral.500}"
242
479
  },
243
- subtle: {
244
- value: "#94a3b8"
480
+ "meta": {
481
+ "value": "{colors.neutral.500}"
245
482
  },
246
- meta: {
247
- value: "#94a3b8"
483
+ "brand": {
484
+ "value": "{colors.brand.600}"
248
485
  }
249
486
  },
250
- onSurface: {
251
- default: {
252
- value: "#0f172a"
487
+ "onSurface": {
488
+ "default": {
489
+ "value": "{colors.neutral.900}"
490
+ },
491
+ "muted": {
492
+ "value": "{colors.neutral.600}"
253
493
  },
254
- muted: {
255
- value: "#64748b"
494
+ "subtle": {
495
+ "value": "{colors.neutral.500}"
256
496
  },
257
- subtle: {
258
- value: "#94a3b8"
497
+ "meta": {
498
+ "value": "{colors.neutral.500}"
259
499
  },
260
- meta: {
261
- value: "#94a3b8"
500
+ "brand": {
501
+ "value": "{colors.brand.600}"
262
502
  }
263
503
  }
264
504
  },
265
- component: {
266
- card: {
267
- text: {
268
- value: "#0f172a"
505
+ "component": {
506
+ "card": {
507
+ "text": {
508
+ "value": "{colors.neutral.900}"
269
509
  },
270
- textMuted: {
271
- value: "#64748b"
510
+ "textMuted": {
511
+ "value": "{colors.neutral.500}"
272
512
  }
273
513
  },
274
- input: {
275
- text: {
276
- value: "#0f172a"
514
+ "input": {
515
+ "text": {
516
+ "value": "{colors.neutral.900}"
277
517
  },
278
- placeholder: {
279
- value: "#94a3b8"
518
+ "placeholder": {
519
+ "value": "{colors.neutral.400}"
280
520
  }
281
521
  },
282
- button: {
283
- textDefault: {
284
- value: "#0f172a"
522
+ "button": {
523
+ "textDefault": {
524
+ "value": "{colors.neutral.900}"
285
525
  },
286
- textOnPrimary: {
287
- value: "#ffffff"
526
+ "textOnPrimary": {
527
+ "value": "{colors.white}"
288
528
  }
289
529
  },
290
- badge: {
291
- neutralBg: {
292
- value: "#f1f5f9"
293
- },
294
- neutralText: {
295
- value: "#334155"
296
- },
297
- infoBg: {
298
- value: "#dbeafe"
299
- },
300
- infoText: {
301
- value: "#1d4ed8"
302
- },
303
- successBg: {
304
- value: "#dcfce7"
305
- },
306
- successText: {
307
- value: "#15803d"
308
- },
309
- warningBg: {
310
- value: "#fef3c7"
311
- },
312
- warningText: {
313
- value: "#b45309"
314
- },
315
- dangerBg: {
316
- value: "#fee2e2"
317
- },
318
- dangerText: {
319
- value: "#b91c1c"
530
+ "badge": {
531
+ "neutralBg": {
532
+ "value": "{colors.neutral.100}",
533
+ "metadata": {
534
+ "pair": "modes.default.component.badge.neutralText"
535
+ }
536
+ },
537
+ "neutralText": {
538
+ "value": "{colors.neutral.700}",
539
+ "metadata": {}
540
+ },
541
+ "infoBg": {
542
+ "value": "{colors.info.100}",
543
+ "metadata": {
544
+ "pair": "modes.default.component.badge.infoText"
545
+ }
546
+ },
547
+ "infoText": {
548
+ "value": "{colors.info.700}",
549
+ "metadata": {}
550
+ },
551
+ "successBg": {
552
+ "value": "{colors.success.100}",
553
+ "metadata": {
554
+ "pair": "modes.default.component.badge.successText"
555
+ }
556
+ },
557
+ "successText": {
558
+ "value": "{colors.success.700}",
559
+ "metadata": {}
560
+ },
561
+ "warningBg": {
562
+ "value": "{colors.warning.100}",
563
+ "metadata": {
564
+ "pair": "modes.default.component.badge.warningText"
565
+ }
566
+ },
567
+ "warningText": {
568
+ "value": "{colors.warning.700}",
569
+ "metadata": {}
570
+ },
571
+ "dangerBg": {
572
+ "value": "{colors.error.100}",
573
+ "metadata": {
574
+ "pair": "modes.default.component.badge.dangerText"
575
+ }
576
+ },
577
+ "dangerText": {
578
+ "value": "{colors.error.700}",
579
+ "metadata": {}
320
580
  }
321
581
  },
322
- iconBox: {
323
- bg: {
324
- value: "#ffffff"
325
- },
326
- border: {
327
- value: "#e2e8f0"
328
- },
329
- iconDefault: {
330
- value: "#2563eb"
331
- },
332
- iconSuccess: {
333
- value: "#16a34a"
334
- },
335
- iconWarning: {
336
- value: "#d97706"
337
- },
338
- iconDanger: {
339
- value: "#dc2626"
582
+ "iconBox": {
583
+ "bg": {
584
+ "value": "{colors.white}",
585
+ "metadata": {}
586
+ },
587
+ "border": {
588
+ "value": "{colors.neutral.200}",
589
+ "metadata": {}
590
+ },
591
+ "iconDefault": {
592
+ "value": "{colors.info.600}",
593
+ "metadata": {}
594
+ },
595
+ "iconSuccess": {
596
+ "value": "{colors.success.600}",
597
+ "metadata": {}
598
+ },
599
+ "iconWarning": {
600
+ "value": "{colors.warning.600}",
601
+ "metadata": {}
602
+ },
603
+ "iconDanger": {
604
+ "value": "{colors.error.600}",
605
+ "metadata": {}
340
606
  }
341
607
  },
342
- testimonial: {
343
- bg: {
344
- value: "#ffffff"
345
- },
346
- border: {
347
- value: "#e2e8f0"
348
- },
349
- text: {
350
- value: "#334155"
351
- },
352
- authorName: {
353
- value: "#0f172a"
354
- },
355
- authorTitle: {
356
- value: "#64748b"
357
- },
358
- quoteMark: {
359
- value: "#cbd5e1"
608
+ "testimonial": {
609
+ "bg": {
610
+ "value": "{colors.white}",
611
+ "metadata": {}
612
+ },
613
+ "border": {
614
+ "value": "{colors.neutral.200}",
615
+ "metadata": {}
616
+ },
617
+ "text": {
618
+ "value": "{colors.neutral.700}",
619
+ "metadata": {}
620
+ },
621
+ "authorName": {
622
+ "value": "{colors.neutral.900}",
623
+ "metadata": {}
624
+ },
625
+ "authorTitle": {
626
+ "value": "{colors.neutral.500}",
627
+ "metadata": {}
628
+ },
629
+ "quoteMark": {
630
+ "value": "{colors.neutral.300}",
631
+ "metadata": {}
360
632
  }
361
633
  },
362
- pricingCard: {
363
- bg: {
364
- value: "#ffffff"
365
- },
366
- border: {
367
- value: "#e2e8f0"
368
- },
369
- featuredBg: {
370
- value: "#2563eb"
371
- },
372
- featuredText: {
373
- value: "#ffffff"
374
- },
375
- featuredBadgeBg: {
376
- value: "#f59e0b"
377
- },
378
- featuredBadgeText: {
379
- value: "#ffffff"
380
- },
381
- price: {
382
- value: "#0f172a"
383
- },
384
- priceDescription: {
385
- value: "#64748b"
634
+ "pricingCard": {
635
+ "bg": {
636
+ "value": "{colors.white}",
637
+ "metadata": {}
638
+ },
639
+ "border": {
640
+ "value": "{colors.neutral.200}",
641
+ "metadata": {}
642
+ },
643
+ "featuredBg": {
644
+ "value": "{colors.info.600}",
645
+ "metadata": {
646
+ "pair": "modes.default.component.pricingCard.featuredText"
647
+ }
648
+ },
649
+ "featuredText": {
650
+ "value": "{colors.white}",
651
+ "metadata": {}
652
+ },
653
+ "featuredBadgeBg": {
654
+ "value": "{colors.warning.500}",
655
+ "metadata": {
656
+ "pair": "modes.default.component.pricingCard.featuredBadgeText"
657
+ }
658
+ },
659
+ "featuredBadgeText": {
660
+ "value": "{colors.neutral.900}",
661
+ "metadata": {}
662
+ },
663
+ "price": {
664
+ "value": "{colors.neutral.900}",
665
+ "metadata": {}
666
+ },
667
+ "priceDescription": {
668
+ "value": "{colors.neutral.500}",
669
+ "metadata": {}
386
670
  }
387
671
  },
388
- rating: {
389
- starFilled: {
390
- value: "#f59e0b"
391
- },
392
- starEmpty: {
393
- value: "#e2e8f0"
394
- },
395
- text: {
396
- value: "#64748b"
672
+ "rating": {
673
+ "starFilled": {
674
+ "value": "{colors.warning.500}",
675
+ "metadata": {}
676
+ },
677
+ "starEmpty": {
678
+ "value": "{colors.neutral.200}",
679
+ "metadata": {}
680
+ },
681
+ "text": {
682
+ "value": "{colors.neutral.500}",
683
+ "metadata": {}
397
684
  }
398
685
  }
399
686
  }
400
687
  },
401
- dark: {
402
- surface: {
403
- page: {
404
- value: "#0f172a"
688
+ "dark": {
689
+ "surface": {
690
+ "page": {
691
+ "value": "{colors.neutral.900}"
405
692
  },
406
- card: {
407
- value: "#1e293b"
693
+ "card": {
694
+ "value": "{colors.neutral.800}"
408
695
  },
409
- input: {
410
- value: "#334155"
696
+ "input": {
697
+ "value": "{colors.neutral.700}"
411
698
  },
412
- overlay: {
413
- value: "#1e293b"
699
+ "overlay": {
700
+ "value": "{colors.neutral.800}"
414
701
  },
415
- alternate: {
416
- value: "#1e293b"
702
+ "alternate": {
703
+ "value": "{colors.neutral.800}"
417
704
  },
418
- hero: {
419
- value: "linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%)"
705
+ "hero": {
706
+ "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
420
707
  }
421
708
  },
422
- text: {
423
- onPage: {
424
- default: {
425
- value: "#f8fafc"
709
+ "text": {
710
+ "onPage": {
711
+ "default": {
712
+ "value": "{colors.neutral.50}"
713
+ },
714
+ "muted": {
715
+ "value": "{colors.neutral.300}"
426
716
  },
427
- muted: {
428
- value: "#cbd5e1"
717
+ "subtle": {
718
+ "value": "{colors.neutral.400}"
429
719
  },
430
- subtle: {
431
- value: "#94a3b8"
720
+ "meta": {
721
+ "value": "{colors.neutral.400}"
432
722
  },
433
- meta: {
434
- value: "#94a3b8"
723
+ "brand": {
724
+ "value": "{colors.brand.400}"
435
725
  }
436
726
  },
437
- onSurface: {
438
- default: {
439
- value: "#f1f5f9"
727
+ "onSurface": {
728
+ "default": {
729
+ "value": "{colors.neutral.100}"
440
730
  },
441
- muted: {
442
- value: "#cbd5e1"
731
+ "muted": {
732
+ "value": "{colors.neutral.300}"
443
733
  },
444
- subtle: {
445
- value: "#94a3b8"
734
+ "subtle": {
735
+ "value": "{colors.neutral.400}"
446
736
  },
447
- meta: {
448
- value: "#94a3b8"
737
+ "meta": {
738
+ "value": "{colors.neutral.400}"
739
+ },
740
+ "brand": {
741
+ "value": "{colors.brand.400}"
449
742
  }
450
743
  }
451
744
  },
452
- component: {
453
- card: {
454
- text: {
455
- value: "#f1f5f9"
745
+ "component": {
746
+ "card": {
747
+ "text": {
748
+ "value": "{colors.neutral.100}"
456
749
  },
457
- textMuted: {
458
- value: "#cbd5e1"
750
+ "textMuted": {
751
+ "value": "{colors.neutral.300}"
459
752
  }
460
753
  },
461
- input: {
462
- text: {
463
- value: "#f1f5f9"
754
+ "input": {
755
+ "text": {
756
+ "value": "{colors.neutral.100}"
464
757
  },
465
- placeholder: {
466
- value: "#94a3b8"
758
+ "placeholder": {
759
+ "value": "{colors.neutral.400}"
467
760
  }
468
761
  },
469
- button: {
470
- textDefault: {
471
- value: "#f1f5f9"
762
+ "button": {
763
+ "textDefault": {
764
+ "value": "{colors.neutral.100}"
472
765
  },
473
- textOnPrimary: {
474
- value: "#ffffff"
766
+ "textOnPrimary": {
767
+ "value": "{colors.white}"
475
768
  }
476
769
  },
477
- badge: {
478
- neutralBg: {
479
- value: "#334155"
480
- },
481
- neutralText: {
482
- value: "#f1f5f9"
483
- },
484
- infoBg: {
485
- value: "#1e40af"
486
- },
487
- infoText: {
488
- value: "#dbeafe"
489
- },
490
- successBg: {
491
- value: "#166534"
492
- },
493
- successText: {
494
- value: "#dcfce7"
495
- },
496
- warningBg: {
497
- value: "#92400e"
498
- },
499
- warningText: {
500
- value: "#fef3c7"
501
- },
502
- dangerBg: {
503
- value: "#991b1b"
504
- },
505
- dangerText: {
506
- value: "#fee2e2"
770
+ "badge": {
771
+ "neutralBg": {
772
+ "value": "{colors.neutral.700}",
773
+ "metadata": {
774
+ "pair": "modes.dark.component.badge.neutralText"
775
+ }
776
+ },
777
+ "neutralText": {
778
+ "value": "{colors.neutral.100}",
779
+ "metadata": {}
780
+ },
781
+ "infoBg": {
782
+ "value": "{colors.info.800}",
783
+ "metadata": {
784
+ "pair": "modes.dark.component.badge.infoText"
785
+ }
786
+ },
787
+ "infoText": {
788
+ "value": "{colors.info.100}",
789
+ "metadata": {}
790
+ },
791
+ "successBg": {
792
+ "value": "{colors.success.800}",
793
+ "metadata": {
794
+ "pair": "modes.dark.component.badge.successText"
795
+ }
796
+ },
797
+ "successText": {
798
+ "value": "{colors.success.100}",
799
+ "metadata": {}
800
+ },
801
+ "warningBg": {
802
+ "value": "{colors.warning.800}",
803
+ "metadata": {
804
+ "pair": "modes.dark.component.badge.warningText"
805
+ }
806
+ },
807
+ "warningText": {
808
+ "value": "{colors.warning.100}",
809
+ "metadata": {}
810
+ },
811
+ "dangerBg": {
812
+ "value": "{colors.error.800}",
813
+ "metadata": {
814
+ "pair": "modes.dark.component.badge.dangerText"
815
+ }
816
+ },
817
+ "dangerText": {
818
+ "value": "{colors.error.100}",
819
+ "metadata": {}
507
820
  }
508
821
  },
509
- iconBox: {
510
- bg: {
511
- value: "#1e293b"
512
- },
513
- border: {
514
- value: "#334155"
515
- },
516
- iconDefault: {
517
- value: "#93c5fd"
518
- },
519
- iconSuccess: {
520
- value: "#4ade80"
521
- },
522
- iconWarning: {
523
- value: "#fbbf24"
524
- },
525
- iconDanger: {
526
- value: "#f87171"
822
+ "iconBox": {
823
+ "bg": {
824
+ "value": "{colors.neutral.800}",
825
+ "metadata": {}
826
+ },
827
+ "border": {
828
+ "value": "{colors.neutral.700}",
829
+ "metadata": {}
830
+ },
831
+ "iconDefault": {
832
+ "value": "{colors.info.300}",
833
+ "metadata": {}
834
+ },
835
+ "iconSuccess": {
836
+ "value": "{colors.success.400}",
837
+ "metadata": {}
838
+ },
839
+ "iconWarning": {
840
+ "value": "{colors.warning.400}",
841
+ "metadata": {}
842
+ },
843
+ "iconDanger": {
844
+ "value": "{colors.error.400}",
845
+ "metadata": {}
527
846
  }
528
847
  },
529
- testimonial: {
530
- bg: {
531
- value: "#1e293b"
532
- },
533
- border: {
534
- value: "#334155"
535
- },
536
- text: {
537
- value: "#cbd5e1"
538
- },
539
- authorName: {
540
- value: "#f1f5f9"
541
- },
542
- authorTitle: {
543
- value: "#94a3b8"
544
- },
545
- quoteMark: {
546
- value: "#475569"
848
+ "testimonial": {
849
+ "bg": {
850
+ "value": "{colors.neutral.800}",
851
+ "metadata": {}
852
+ },
853
+ "border": {
854
+ "value": "{colors.neutral.700}",
855
+ "metadata": {}
856
+ },
857
+ "text": {
858
+ "value": "{colors.neutral.300}",
859
+ "metadata": {}
860
+ },
861
+ "authorName": {
862
+ "value": "{colors.neutral.100}",
863
+ "metadata": {}
864
+ },
865
+ "authorTitle": {
866
+ "value": "{colors.neutral.400}",
867
+ "metadata": {}
868
+ },
869
+ "quoteMark": {
870
+ "value": "{colors.neutral.600}",
871
+ "metadata": {}
547
872
  }
548
873
  },
549
- pricingCard: {
550
- bg: {
551
- value: "#1e293b"
552
- },
553
- border: {
554
- value: "#334155"
555
- },
556
- featuredBg: {
557
- value: "#3b82f6"
558
- },
559
- featuredText: {
560
- value: "#ffffff"
561
- },
562
- featuredBadgeBg: {
563
- value: "#f59e0b"
564
- },
565
- featuredBadgeText: {
566
- value: "#ffffff"
567
- },
568
- price: {
569
- value: "#f1f5f9"
570
- },
571
- priceDescription: {
572
- value: "#94a3b8"
874
+ "pricingCard": {
875
+ "bg": {
876
+ "value": "{colors.neutral.800}",
877
+ "metadata": {}
878
+ },
879
+ "border": {
880
+ "value": "{colors.neutral.700}",
881
+ "metadata": {}
882
+ },
883
+ "featuredBg": {
884
+ "value": "{colors.info.600}",
885
+ "metadata": {
886
+ "pair": "modes.dark.component.pricingCard.featuredText"
887
+ }
888
+ },
889
+ "featuredText": {
890
+ "value": "{colors.white}",
891
+ "metadata": {}
892
+ },
893
+ "featuredBadgeBg": {
894
+ "value": "{colors.warning.500}",
895
+ "metadata": {
896
+ "pair": "modes.dark.component.pricingCard.featuredBadgeText"
897
+ }
898
+ },
899
+ "featuredBadgeText": {
900
+ "value": "{colors.neutral.900}",
901
+ "metadata": {}
902
+ },
903
+ "price": {
904
+ "value": "{colors.neutral.100}",
905
+ "metadata": {}
906
+ },
907
+ "priceDescription": {
908
+ "value": "{colors.neutral.400}",
909
+ "metadata": {}
573
910
  }
574
911
  },
575
- rating: {
576
- starFilled: {
577
- value: "#fbbf24"
578
- },
579
- starEmpty: {
580
- value: "#334155"
581
- },
582
- text: {
583
- value: "#94a3b8"
912
+ "rating": {
913
+ "starFilled": {
914
+ "value": "{colors.warning.400}",
915
+ "metadata": {}
916
+ },
917
+ "starEmpty": {
918
+ "value": "{colors.neutral.700}",
919
+ "metadata": {}
920
+ },
921
+ "text": {
922
+ "value": "{colors.neutral.400}",
923
+ "metadata": {}
584
924
  }
585
925
  }
586
926
  }
587
927
  }
588
928
  },
589
- opacity: {
590
- disabled: "0.38",
591
- hover: "0.92",
592
- active: "0.84",
593
- focus: "1",
594
- overlay: "0.5",
595
- tooltip: "0.95"
596
- },
597
- accessibility: {
598
- focusRing: {
599
- width: "2px",
600
- offset: "2px",
601
- style: "solid"
602
- },
603
- minTouchTarget: "44px",
604
- minTextSize: "16px"
605
- },
606
- buttons: {
607
- primary: {
608
- bg: "#2563eb",
609
- bgHover: "#1d4ed8",
610
- bgActive: "#1e40af",
611
- bgDisabled: "#e2e8f0",
612
- text: "#ffffff",
613
- textDisabled: "#94a3b8"
614
- },
615
- secondary: {
616
- bg: "#ffffff",
617
- bgHover: "#f8fafc",
618
- bgActive: "#f1f5f9",
619
- bgDisabled: "#f8fafc",
620
- text: "#2563eb",
621
- textDisabled: "#94a3b8",
622
- border: "#2563eb",
623
- borderDisabled: "#e2e8f0"
624
- },
625
- ghost: {
626
- bg: "transparent",
627
- bgHover: "#eff6ff",
628
- bgActive: "#dbeafe",
629
- bgDisabled: "transparent",
630
- text: "#2563eb",
631
- textDisabled: "#94a3b8"
632
- },
633
- danger: {
634
- bg: "#ef4444",
635
- bgHover: "#dc2626",
636
- bgActive: "#b91c1c",
637
- bgDisabled: "#fecaca",
638
- text: "#ffffff",
639
- textDisabled: "#94a3b8"
929
+ "colors": {
930
+ "brand": {
931
+ "50": "#eff6ff",
932
+ "100": "#dbeafe",
933
+ "200": "#bfdbfe",
934
+ "300": "#93c5fd",
935
+ "400": "#60a5fa",
936
+ "500": "#3b82f6",
937
+ "600": "#2563eb",
938
+ "700": "#1d4ed8",
939
+ "800": "#1e40af",
940
+ "900": "#1e3a8a"
640
941
  },
641
- success: {
642
- bg: "#22c55e",
643
- bgHover: "#16a34a",
644
- bgActive: "#15803d",
645
- bgDisabled: "#bbf7d0",
646
- text: "#ffffff",
647
- textDisabled: "#94a3b8"
942
+ "neutral": {
943
+ "50": "#f8fafc",
944
+ "100": "#f1f5f9",
945
+ "200": "#e2e8f0",
946
+ "300": "#cbd5e1",
947
+ "400": "#94a3b8",
948
+ "500": "#64748b",
949
+ "600": "#475569",
950
+ "700": "#334155",
951
+ "800": "#1e293b",
952
+ "900": "#0f172a"
648
953
  },
649
- cta: {
650
- bg: "#f59e0b",
651
- bgHover: "#d97706",
652
- bgActive: "#b45309",
653
- bgDisabled: "#fde68a",
654
- text: "#ffffff",
655
- textDisabled: "#94a3b8",
656
- shadow: "0 4px 14px 0 rgba(245, 158, 11, 0.39)"
954
+ "accent": {
955
+ "50": "#eff6ff",
956
+ "100": "#dbeafe",
957
+ "200": "#ddd6fe",
958
+ "300": "#93c5fd",
959
+ "400": "#60a5fa",
960
+ "500": "#8b5cf6",
961
+ "600": "#7c3aed",
962
+ "700": "#6d28d9",
963
+ "800": "#1e40af",
964
+ "900": "#1e3a8a"
657
965
  },
658
- accent: {
659
- bg: "#8b5cf6",
660
- bgHover: "#7c3aed",
661
- bgActive: "#6d28d9",
662
- bgDisabled: "#ddd6fe",
663
- text: "#ffffff",
664
- textDisabled: "#94a3b8"
665
- }
666
- },
667
- forms: {
668
- default: {
669
- bg: "#ffffff",
670
- border: "#cbd5e1",
671
- text: "#0f172a",
672
- placeholder: "#94a3b8"
966
+ "success": {
967
+ "50": "#f0fdf4",
968
+ "100": "#dcfce7",
969
+ "200": "#bbf7d0",
970
+ "300": "#86efac",
971
+ "400": "#4ade80",
972
+ "500": "#22c55e",
973
+ "600": "#16a34a",
974
+ "700": "#15803d",
975
+ "800": "#166534",
976
+ "900": "#14532d"
673
977
  },
674
- hover: {
675
- border: "#3b82f6"
978
+ "warning": {
979
+ "50": "#fffbeb",
980
+ "100": "#fef3c7",
981
+ "200": "#fde68a",
982
+ "300": "#fcd34d",
983
+ "400": "#fbbf24",
984
+ "500": "#f59e0b",
985
+ "600": "#d97706",
986
+ "700": "#b45309",
987
+ "800": "#92400e",
988
+ "900": "#78350f"
676
989
  },
677
- focus: {
678
- border: "#3b82f6",
679
- ring: "#3b82f6"
990
+ "error": {
991
+ "50": "#fef2f2",
992
+ "100": "#fee2e2",
993
+ "200": "#fecaca",
994
+ "300": "#fca5a5",
995
+ "400": "#f87171",
996
+ "500": "#ef4444",
997
+ "600": "#dc2626",
998
+ "700": "#b91c1c",
999
+ "800": "#991b1b",
1000
+ "900": "#7f1d1d"
680
1001
  },
681
- valid: {
682
- border: "#22c55e",
683
- bg: "#f0fdf4",
684
- text: "#15803d"
1002
+ "info": {
1003
+ "50": "#eff6ff",
1004
+ "100": "#dbeafe",
1005
+ "200": "#bfdbfe",
1006
+ "300": "#93c5fd",
1007
+ "400": "#60a5fa",
1008
+ "500": "#3b82f6",
1009
+ "600": "#2563eb",
1010
+ "700": "#1d4ed8",
1011
+ "800": "#1e40af",
1012
+ "900": "#1e3a8a"
685
1013
  },
686
- invalid: {
687
- border: "#ef4444",
688
- bg: "#fef2f2",
689
- text: "#b91c1c"
1014
+ "indigo": {
1015
+ "500": "#667eea",
1016
+ "600": "#5c67f2"
690
1017
  },
691
- disabled: {
692
- bg: "#f8fafc",
693
- border: "#e2e8f0",
694
- text: "#94a3b8"
695
- }
696
- },
697
- layout: {
698
- section: {
699
- padding: {
700
- sm: "1.5rem",
701
- md: "2rem",
702
- lg: "3rem"
703
- },
704
- gap: {
705
- sm: "1rem",
706
- md: "1.5rem",
707
- lg: "2rem"
708
- }
1018
+ "violet": {
1019
+ "600": "#764ba2"
709
1020
  },
710
- stack: {
711
- gap: {
712
- sm: "0.5rem",
713
- md: "0.75rem",
714
- lg: "1rem"
715
- }
1021
+ "focus": {
1022
+ "primary": "#3b82f6",
1023
+ "error": "#ef4444",
1024
+ "info": "#3b82f6"
716
1025
  },
717
- container: {
718
- paddingInline: {
719
- sm: "1rem",
720
- md: "1.5rem",
721
- lg: "2rem"
722
- }
723
- }
1026
+ "white": "#ffffff",
1027
+ "black": "#000000"
724
1028
  },
725
- space: {
1029
+ "space": {
726
1030
  "0": "0rem",
727
1031
  "4": "0.25rem",
728
1032
  "8": "0.5rem",
@@ -738,207 +1042,286 @@ var core_default = {
738
1042
  "80": "5rem",
739
1043
  "96": "6rem"
740
1044
  },
741
- radii: {
742
- none: "0",
743
- sm: "2px",
744
- md: "4px",
745
- lg: "8px",
746
- pill: "999px"
1045
+ "radii": {
1046
+ "none": "0",
1047
+ "sm": "2px",
1048
+ "md": "4px",
1049
+ "lg": "8px",
1050
+ "pill": "999px"
1051
+ },
1052
+ "shadows": {
1053
+ "none": "none",
1054
+ "sm": "0 1px 2px 0 {colors.neutral.800} / 0.06",
1055
+ "md": "0 2px 6px -1px {colors.neutral.800} / 0.08",
1056
+ "lg": "0 6px 16px -4px {colors.neutral.800} / 0.12"
1057
+ },
1058
+ "breakpoints": {
1059
+ "sm": "640px",
1060
+ "md": "768px",
1061
+ "lg": "1024px",
1062
+ "xl": "1280px",
1063
+ "2xl": "1536px"
747
1064
  },
748
- borders: {
749
- card: "#e2e8f0",
750
- input: "#cbd5e1"
1065
+ "zIndex": {
1066
+ "base": "0",
1067
+ "dropdown": "1000",
1068
+ "sticky": "1100",
1069
+ "fixed": "1200",
1070
+ "overlay": "1300",
1071
+ "modal": "1400",
1072
+ "popover": "1500",
1073
+ "tooltip": "1600"
751
1074
  },
752
- font: {
753
- xs: {
754
- size: "0.75rem",
755
- lineHeight: "1.25rem",
756
- weight: 400
1075
+ "transitions": {
1076
+ "duration": {
1077
+ "instant": "75ms",
1078
+ "fast": "150ms",
1079
+ "base": "200ms",
1080
+ "moderate": "300ms",
1081
+ "slow": "500ms",
1082
+ "slower": "700ms"
757
1083
  },
758
- sm: {
759
- size: "0.875rem",
760
- lineHeight: "1.5rem",
761
- weight: 400
1084
+ "easing": {
1085
+ "linear": "linear",
1086
+ "in": "cubic-bezier(0.4, 0, 1, 1)",
1087
+ "out": "cubic-bezier(0, 0, 0.2, 1)",
1088
+ "inOut": "cubic-bezier(0.4, 0, 0.2, 1)",
1089
+ "spring": "cubic-bezier(0.4, 0, 0.2, 1)"
1090
+ }
1091
+ },
1092
+ "animations": {
1093
+ "fadeIn": {
1094
+ "duration": "200ms",
1095
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1096
+ "keyframes": "fade-in"
762
1097
  },
763
- md: {
764
- size: "1rem",
765
- lineHeight: "1.75rem",
766
- weight: 500
1098
+ "fadeOut": {
1099
+ "duration": "150ms",
1100
+ "easing": "cubic-bezier(0.4, 0, 1, 1)",
1101
+ "keyframes": "fade-out"
767
1102
  },
768
- lg: {
769
- size: "1.25rem",
770
- lineHeight: "2rem",
771
- weight: 500
1103
+ "slideUp": {
1104
+ "duration": "300ms",
1105
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1106
+ "keyframes": "slide-up"
772
1107
  },
773
- xl: {
774
- size: "1.5rem",
775
- lineHeight: "2.125rem",
776
- weight: 600
1108
+ "slideDown": {
1109
+ "duration": "300ms",
1110
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1111
+ "keyframes": "slide-down"
777
1112
  },
778
- "2xl": {
779
- size: "1.875rem",
780
- lineHeight: "2.5rem",
781
- weight: 600
782
- }
783
- },
784
- typography: {
785
- families: {
786
- sans: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
787
- serif: "'Times New Roman', Times, serif",
788
- mono: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace"
1113
+ "scaleIn": {
1114
+ "duration": "200ms",
1115
+ "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
1116
+ "keyframes": "scale-in"
789
1117
  },
790
- scale: {
791
- xs: {
792
- fontSize: "0.75rem",
793
- lineHeight: "1.25rem",
794
- fontWeight: 400,
795
- letterSpacing: "0.02em"
796
- },
797
- sm: {
798
- fontSize: "0.875rem",
799
- lineHeight: "1.5rem",
800
- fontWeight: 400
801
- },
802
- md: {
803
- fontSize: "1rem",
804
- lineHeight: "1.75rem",
805
- fontWeight: 500
806
- },
807
- lg: {
808
- fontSize: "1.25rem",
809
- lineHeight: "2rem",
810
- fontWeight: 600
811
- },
812
- xl: {
813
- fontSize: "1.5rem",
814
- lineHeight: "2.125rem",
815
- fontWeight: 600
816
- },
817
- "2xl": {
818
- fontSize: "1.875rem",
819
- lineHeight: "2.5rem",
820
- fontWeight: 700
821
- },
822
- "3xl": {
823
- fontSize: "2.25rem",
824
- lineHeight: "2.75rem",
825
- fontWeight: 700
826
- },
827
- "4xl": {
828
- fontSize: "3rem",
829
- lineHeight: "3.5rem",
830
- fontWeight: 800
831
- },
832
- "5xl": {
833
- fontSize: "3.75rem",
834
- lineHeight: "4.25rem",
835
- fontWeight: 800
836
- },
837
- "6xl": {
838
- fontSize: "4.5rem",
839
- lineHeight: "5rem",
840
- fontWeight: 900
841
- }
1118
+ "bounce": {
1119
+ "duration": "300ms",
1120
+ "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
1121
+ "keyframes": "bounce"
1122
+ },
1123
+ "shake": {
1124
+ "duration": "250ms",
1125
+ "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
1126
+ "keyframes": "shake"
1127
+ },
1128
+ "pulse": {
1129
+ "duration": "1200ms",
1130
+ "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
1131
+ "keyframes": "pulse"
842
1132
  }
843
1133
  },
844
- shadows: {
845
- none: "none",
846
- sm: "0 1px 2px 0 rgba(15, 23, 42, 0.06)",
847
- md: "0 2px 6px -1px rgba(15, 23, 42, 0.08)",
848
- lg: "0 6px 16px -4px rgba(15, 23, 42, 0.12)"
1134
+ "opacity": {
1135
+ "disabled": "0.38",
1136
+ "hover": "0.92",
1137
+ "active": "0.84",
1138
+ "focus": "1",
1139
+ "overlay": "0.5",
1140
+ "tooltip": "0.95"
849
1141
  },
850
- breakpoints: {
851
- sm: "640px",
852
- md: "768px",
853
- lg: "1024px",
854
- xl: "1280px",
855
- "2xl": "1536px"
1142
+ "aspectRatios": {
1143
+ "square": "1/1",
1144
+ "video": "16/9",
1145
+ "portrait": "3/4",
1146
+ "landscape": "4/3",
1147
+ "ultrawide": "21/9",
1148
+ "hero": "2/1"
856
1149
  },
857
- zIndex: {
858
- base: "0",
859
- dropdown: "1000",
860
- sticky: "1100",
861
- fixed: "1200",
862
- overlay: "1300",
863
- modal: "1400",
864
- popover: "1500",
865
- tooltip: "1600"
1150
+ "icons": {
1151
+ "xs": "12px",
1152
+ "sm": "16px",
1153
+ "md": "20px",
1154
+ "lg": "24px",
1155
+ "xl": "32px",
1156
+ "2xl": "40px",
1157
+ "3xl": "48px"
866
1158
  },
867
- transitions: {
868
- duration: {
869
- instant: "75ms",
870
- fast: "150ms",
871
- base: "200ms",
872
- moderate: "300ms",
873
- slow: "500ms",
874
- slower: "700ms"
1159
+ "accessibility": {
1160
+ "focusRing": {
1161
+ "width": "2px",
1162
+ "offset": "2px",
1163
+ "style": "solid"
1164
+ },
1165
+ "minTouchTarget": "44px",
1166
+ "minTextSize": "16px"
1167
+ },
1168
+ "borders": {
1169
+ "card": "{colors.neutral.200}",
1170
+ "input": "{colors.neutral.300}"
1171
+ },
1172
+ "surface": {
1173
+ "page": {
1174
+ "value": "{colors.neutral.50}",
1175
+ "description": "primary app background"
1176
+ },
1177
+ "card": {
1178
+ "value": "{colors.white}",
1179
+ "description": "containers and tiles"
875
1180
  },
876
- easing: {
877
- linear: "linear",
878
- in: "cubic-bezier(0.4, 0, 1, 1)",
879
- out: "cubic-bezier(0, 0, 0.2, 1)",
880
- inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
881
- spring: "cubic-bezier(0.4, 0, 0.2, 1)"
1181
+ "input": {
1182
+ "value": "{colors.white}",
1183
+ "description": "form inputs, textareas"
1184
+ },
1185
+ "overlay": {
1186
+ "value": "{colors.neutral.900} / 0.6",
1187
+ "description": "modals, dropdowns, flyouts"
1188
+ }
1189
+ },
1190
+ "text": {
1191
+ "onPage": {
1192
+ "default": "{colors.neutral.900}",
1193
+ "muted": "{colors.neutral.600}",
1194
+ "subtle": "{colors.neutral.500}",
1195
+ "meta": "{colors.neutral.500}",
1196
+ "brand": "{colors.brand.600}"
1197
+ },
1198
+ "onSurface": {
1199
+ "default": "{colors.neutral.900}",
1200
+ "muted": "{colors.neutral.600}",
1201
+ "subtle": "{colors.neutral.500}",
1202
+ "meta": "{colors.neutral.500}",
1203
+ "brand": "{colors.brand.600}"
882
1204
  }
883
1205
  },
884
- animations: {
885
- fadeIn: {
886
- duration: "200ms",
887
- easing: "cubic-bezier(0, 0, 0.2, 1)",
888
- keyframes: "fade-in"
1206
+ "layout": {
1207
+ "section": {
1208
+ "padding": {
1209
+ "sm": "1.5rem",
1210
+ "md": "2rem",
1211
+ "lg": "3rem"
1212
+ },
1213
+ "gap": {
1214
+ "sm": "1rem",
1215
+ "md": "1.5rem",
1216
+ "lg": "2rem"
1217
+ }
889
1218
  },
890
- fadeOut: {
891
- duration: "150ms",
892
- easing: "cubic-bezier(0.4, 0, 1, 1)",
893
- keyframes: "fade-out"
1219
+ "stack": {
1220
+ "gap": {
1221
+ "sm": "0.5rem",
1222
+ "md": "0.75rem",
1223
+ "lg": "1rem"
1224
+ }
894
1225
  },
895
- slideUp: {
896
- duration: "300ms",
897
- easing: "cubic-bezier(0, 0, 0.2, 1)",
898
- keyframes: "slide-up"
1226
+ "container": {
1227
+ "paddingInline": {
1228
+ "sm": "1rem",
1229
+ "md": "1.5rem",
1230
+ "lg": "2rem"
1231
+ }
1232
+ }
1233
+ },
1234
+ "font": {
1235
+ "xs": {
1236
+ "size": "0.75rem",
1237
+ "lineHeight": "1.25rem",
1238
+ "weight": 400
899
1239
  },
900
- slideDown: {
901
- duration: "300ms",
902
- easing: "cubic-bezier(0, 0, 0.2, 1)",
903
- keyframes: "slide-down"
1240
+ "sm": {
1241
+ "size": "0.875rem",
1242
+ "lineHeight": "1.5rem",
1243
+ "weight": 400
904
1244
  },
905
- scaleIn: {
906
- duration: "200ms",
907
- easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
908
- keyframes: "scale-in"
1245
+ "md": {
1246
+ "size": "1rem",
1247
+ "lineHeight": "1.75rem",
1248
+ "weight": 500
909
1249
  },
910
- bounce: {
911
- duration: "300ms",
912
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
913
- keyframes: "bounce"
1250
+ "lg": {
1251
+ "size": "1.25rem",
1252
+ "lineHeight": "2rem",
1253
+ "weight": 500
914
1254
  },
915
- shake: {
916
- duration: "250ms",
917
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
918
- keyframes: "shake"
1255
+ "xl": {
1256
+ "size": "1.5rem",
1257
+ "lineHeight": "2.125rem",
1258
+ "weight": 600
919
1259
  },
920
- pulse: {
921
- duration: "1200ms",
922
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
923
- keyframes: "pulse"
1260
+ "2xl": {
1261
+ "size": "1.875rem",
1262
+ "lineHeight": "2.5rem",
1263
+ "weight": 600
924
1264
  }
925
1265
  },
926
- icons: {
927
- xs: "12px",
928
- sm: "16px",
929
- md: "20px",
930
- lg: "24px",
931
- xl: "32px",
932
- "2xl": "40px",
933
- "3xl": "48px"
934
- },
935
- aspectRatios: {
936
- square: "1/1",
937
- video: "16/9",
938
- portrait: "3/4",
939
- landscape: "4/3",
940
- ultrawide: "21/9",
941
- hero: "2/1"
1266
+ "typography": {
1267
+ "families": {
1268
+ "sans": "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
1269
+ "serif": "'Times New Roman', Times, serif",
1270
+ "mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace"
1271
+ },
1272
+ "scale": {
1273
+ "xs": {
1274
+ "fontSize": "0.75rem",
1275
+ "lineHeight": "1.25rem",
1276
+ "fontWeight": 400,
1277
+ "letterSpacing": "0.02em"
1278
+ },
1279
+ "sm": {
1280
+ "fontSize": "0.875rem",
1281
+ "lineHeight": "1.5rem",
1282
+ "fontWeight": 400
1283
+ },
1284
+ "md": {
1285
+ "fontSize": "1rem",
1286
+ "lineHeight": "1.75rem",
1287
+ "fontWeight": 500
1288
+ },
1289
+ "lg": {
1290
+ "fontSize": "1.25rem",
1291
+ "lineHeight": "2rem",
1292
+ "fontWeight": 600
1293
+ },
1294
+ "xl": {
1295
+ "fontSize": "1.5rem",
1296
+ "lineHeight": "2.125rem",
1297
+ "fontWeight": 600
1298
+ },
1299
+ "2xl": {
1300
+ "fontSize": "1.875rem",
1301
+ "lineHeight": "2.5rem",
1302
+ "fontWeight": 700
1303
+ },
1304
+ "3xl": {
1305
+ "fontSize": "2.25rem",
1306
+ "lineHeight": "2.75rem",
1307
+ "fontWeight": 700
1308
+ },
1309
+ "4xl": {
1310
+ "fontSize": "3rem",
1311
+ "lineHeight": "3.5rem",
1312
+ "fontWeight": 800
1313
+ },
1314
+ "5xl": {
1315
+ "fontSize": "3.75rem",
1316
+ "lineHeight": "4.25rem",
1317
+ "fontWeight": 800
1318
+ },
1319
+ "6xl": {
1320
+ "fontSize": "4.5rem",
1321
+ "lineHeight": "5rem",
1322
+ "fontWeight": 900
1323
+ }
1324
+ }
942
1325
  }
943
1326
  };
944
1327
 
@@ -965,18 +1348,55 @@ var ICON_BOX_FIELDS = [
965
1348
  { name: "icon-warning", tokenKey: "iconWarning" },
966
1349
  { name: "icon-danger", tokenKey: "iconDanger" }
967
1350
  ];
1351
+ var resolveTokenReference = (tokens2, reference) => {
1352
+ const path = reference.slice(1, -1).split(".");
1353
+ let current = tokens2;
1354
+ for (const part of path) {
1355
+ if (current && typeof current === "object" && part in current) {
1356
+ current = current[part];
1357
+ } else {
1358
+ return reference;
1359
+ }
1360
+ }
1361
+ return typeof current === "string" || typeof current === "number" ? String(current) : reference;
1362
+ };
1363
+ var hexToRgba = (hex, opacity) => {
1364
+ const cleanHex = hex.replace("#", "");
1365
+ let r = 0, g = 0, b = 0;
1366
+ if (cleanHex.length === 3) {
1367
+ const rh = cleanHex.charAt(0);
1368
+ const gh = cleanHex.charAt(1);
1369
+ const bh = cleanHex.charAt(2);
1370
+ r = parseInt(rh + rh, 16);
1371
+ g = parseInt(gh + gh, 16);
1372
+ b = parseInt(bh + bh, 16);
1373
+ } else if (cleanHex.length === 6) {
1374
+ r = parseInt(cleanHex.substring(0, 2), 16);
1375
+ g = parseInt(cleanHex.substring(2, 4), 16);
1376
+ b = parseInt(cleanHex.substring(4, 6), 16);
1377
+ }
1378
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
1379
+ };
1380
+ var resolveValue = (tokens2, value) => {
1381
+ let str = String(value);
1382
+ const regex = /\{([^}]+)\}/g;
1383
+ str = str.replace(regex, (match) => resolveTokenReference(tokens2, match));
1384
+ const opacityRegex = /(#[0-9a-fA-F]{3,6})\s*\/\s*([0-9.]+)/g;
1385
+ str = str.replace(opacityRegex, (match, hex, opacity) => hexToRgba(hex, opacity));
1386
+ return str;
1387
+ };
968
1388
  var createCssVariableMap = (tokens2, options = {}) => {
969
1389
  const prefix = options.prefix ?? DEFAULT_PREFIX;
970
1390
  const map = {};
971
1391
  const baseTokens = tokens2;
972
1392
  const assign = (name, value) => {
973
- const resolved = resolveSemanticValue(value);
1393
+ const resolved = resolveSemanticValue(value, tokens2);
974
1394
  if (resolved !== void 0) {
975
1395
  map[name] = resolved;
976
1396
  return;
977
1397
  }
978
1398
  if (value === void 0) return;
979
- map[name] = String(value);
1399
+ map[name] = resolveValue(tokens2, value);
980
1400
  };
981
1401
  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
982
1402
  Object.entries(scale).forEach(([step, value]) => {
@@ -989,24 +1409,24 @@ var createCssVariableMap = (tokens2, options = {}) => {
989
1409
  });
990
1410
  }
991
1411
  if (baseTokens.layout) {
992
- const { section, stack, container } = baseTokens.layout;
993
- if (section?.padding) {
994
- Object.entries(section.padding).forEach(([key, value]) => {
1412
+ const layout = baseTokens.layout;
1413
+ if (layout.section?.padding) {
1414
+ Object.entries(layout.section.padding).forEach(([key, value]) => {
995
1415
  assign(toVariableName(prefix, "layout", "section", "padding", key), value);
996
1416
  });
997
1417
  }
998
- if (section?.gap) {
999
- Object.entries(section.gap).forEach(([key, value]) => {
1418
+ if (layout.section?.gap) {
1419
+ Object.entries(layout.section.gap).forEach(([key, value]) => {
1000
1420
  assign(toVariableName(prefix, "layout", "section", "gap", key), value);
1001
1421
  });
1002
1422
  }
1003
- if (stack?.gap) {
1004
- Object.entries(stack.gap).forEach(([key, value]) => {
1423
+ if (layout.stack?.gap) {
1424
+ Object.entries(layout.stack.gap).forEach(([key, value]) => {
1005
1425
  assign(toVariableName(prefix, "layout", "stack", "gap", key), value);
1006
1426
  });
1007
1427
  }
1008
- if (container?.paddingInline) {
1009
- Object.entries(container.paddingInline).forEach(([key, value]) => {
1428
+ if (layout.container?.paddingInline) {
1429
+ Object.entries(layout.container.paddingInline).forEach(([key, value]) => {
1010
1430
  assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
1011
1431
  });
1012
1432
  }
@@ -1033,7 +1453,8 @@ var createCssVariableMap = (tokens2, options = {}) => {
1033
1453
  });
1034
1454
  }
1035
1455
  Object.entries(typographyScale).forEach(([key, entry]) => {
1036
- assign(toVariableName(prefix, "font", key, "letter-spacing"), entry.letterSpacing);
1456
+ const scaleEntry = entry;
1457
+ assign(toVariableName(prefix, "font", key, "letter-spacing"), scaleEntry.letterSpacing);
1037
1458
  });
1038
1459
  assign(toVariableName(prefix, "text", "on", "page", "default"), tokens2.text.onPage.default);
1039
1460
  assign(toVariableName(prefix, "text", "on", "page", "muted"), tokens2.text.onPage.muted);
@@ -1089,24 +1510,28 @@ var createCssVariableMap = (tokens2, options = {}) => {
1089
1510
  if (value) assign(toVariableName(prefix, "form", state, prop), value);
1090
1511
  });
1091
1512
  });
1092
- Object.entries(baseTokens.animations).forEach(([name, animation]) => {
1093
- assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
1094
- assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
1095
- assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
1096
- });
1513
+ if (baseTokens.animations) {
1514
+ Object.entries(baseTokens.animations).forEach(([name, animation]) => {
1515
+ assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
1516
+ assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
1517
+ assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
1518
+ });
1519
+ }
1097
1520
  return map;
1098
1521
  };
1099
- var resolveSemanticValue = (value) => {
1100
- if (typeof value === "string" || typeof value === "number") return String(value);
1522
+ var resolveSemanticValue = (value, tokens2) => {
1523
+ if (typeof value === "string" || typeof value === "number") {
1524
+ return resolveValue(tokens2, value);
1525
+ }
1101
1526
  if (value && typeof value === "object" && "value" in value) {
1102
- return String(value.value);
1527
+ return resolveValue(tokens2, value.value);
1103
1528
  }
1104
1529
  return void 0;
1105
1530
  };
1106
1531
  var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
1107
- var pickSemantic = (...candidates) => {
1532
+ var pickSemantic = (tokens2, ...candidates) => {
1108
1533
  for (const candidate of candidates) {
1109
- const resolved = resolveSemanticValue(candidate);
1534
+ const resolved = resolveSemanticValue(candidate, tokens2);
1110
1535
  if (resolved !== void 0) return resolved;
1111
1536
  }
1112
1537
  return void 0;
@@ -1125,38 +1550,39 @@ var generateCssVariables = (tokens2, options = {}) => {
1125
1550
  const addBase = (name, value) => {
1126
1551
  if (value !== void 0) baseLines.push(` ${name}: ${value};`);
1127
1552
  };
1128
- addBase(toVariableName(prefix, "surface", "page"), pickSemantic(getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
1129
- addBase(toVariableName(prefix, "surface", "card"), pickSemantic(getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
1130
- addBase(toVariableName(prefix, "surface", "input"), pickSemantic(getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
1131
- addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
1132
- addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
1133
- addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
1134
- addBase(toVariableName(prefix, "text", "on", "page", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
1135
- addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
1136
- addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
1137
- addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
1138
- addBase(toVariableName(prefix, "text", "on", "surface", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
1139
- addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
1140
- addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
1141
- addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
1142
- addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
1143
- addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
1144
- addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
1145
- addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
1553
+ addBase(toVariableName(prefix, "surface", "page"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
1554
+ addBase(toVariableName(prefix, "surface", "card"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
1555
+ addBase(toVariableName(prefix, "surface", "input"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
1556
+ addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
1557
+ addBase(toVariableName(prefix, "surface", "hero"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"])));
1558
+ addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
1559
+ addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
1560
+ addBase(toVariableName(prefix, "text", "on", "page", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
1561
+ addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
1562
+ addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
1563
+ addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
1564
+ addBase(toVariableName(prefix, "text", "on", "surface", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
1565
+ addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
1566
+ addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
1567
+ addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
1568
+ addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
1569
+ addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(tokens2, getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
1570
+ addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(tokens2, getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
1571
+ addBase(toVariableName(prefix, "button", "text", "on", "primary"), pickSemantic(tokens2, getPath(defaultMode, ["component", "button", "textOnPrimary"]), getPath(componentAliases, ["button", "textOnPrimary"])));
1146
1572
  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
1147
1573
  addBase(
1148
1574
  toVariableName(prefix, "badge", variant, "bg"),
1149
- pickSemantic(getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
1575
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
1150
1576
  );
1151
1577
  addBase(
1152
1578
  toVariableName(prefix, "badge", variant, "text"),
1153
- pickSemantic(getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
1579
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
1154
1580
  );
1155
1581
  });
1156
1582
  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
1157
1583
  addBase(
1158
1584
  toVariableName(prefix, "icon-box", name),
1159
- pickSemantic(getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
1585
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
1160
1586
  );
1161
1587
  });
1162
1588
  const rootLines = [...baseLines, ...mapLines];
@@ -1166,23 +1592,28 @@ var generateCssVariables = (tokens2, options = {}) => {
1166
1592
  };
1167
1593
  addDark(
1168
1594
  toVariableName(prefix, "surface", "page"),
1169
- pickSemantic(getPath(darkMode, ["surface", "page"]), getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"]))
1595
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "page"]), getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"]))
1170
1596
  );
1171
1597
  addDark(
1172
1598
  toVariableName(prefix, "surface", "card"),
1173
- pickSemantic(getPath(darkMode, ["surface", "card"]), getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"]))
1599
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "card"]), getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"]))
1174
1600
  );
1175
1601
  addDark(
1176
1602
  toVariableName(prefix, "surface", "input"),
1177
- pickSemantic(getPath(darkMode, ["surface", "input"]), getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"]))
1603
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "input"]), getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"]))
1178
1604
  );
1179
1605
  addDark(
1180
1606
  toVariableName(prefix, "surface", "overlay"),
1181
- pickSemantic(getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
1607
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
1608
+ );
1609
+ addDark(
1610
+ toVariableName(prefix, "surface", "hero"),
1611
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "hero"]), getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"]))
1182
1612
  );
1183
1613
  addDark(
1184
1614
  toVariableName(prefix, "text", "on", "page", "default"),
1185
1615
  pickSemantic(
1616
+ tokens2,
1186
1617
  getPath(darkMode, ["text", "onPage", "default"]),
1187
1618
  getPath(defaultMode, ["text", "onPage", "default"]),
1188
1619
  getPath(textAliases, ["onPage", "default"])
@@ -1191,6 +1622,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1191
1622
  addDark(
1192
1623
  toVariableName(prefix, "text", "on", "page", "muted"),
1193
1624
  pickSemantic(
1625
+ tokens2,
1194
1626
  getPath(darkMode, ["text", "onPage", "muted"]),
1195
1627
  getPath(defaultMode, ["text", "onPage", "muted"]),
1196
1628
  getPath(textAliases, ["onPage", "muted"])
@@ -1199,6 +1631,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1199
1631
  addDark(
1200
1632
  toVariableName(prefix, "text", "on", "page", "subtle"),
1201
1633
  pickSemantic(
1634
+ tokens2,
1202
1635
  getPath(darkMode, ["text", "onPage", "subtle"]),
1203
1636
  getPath(defaultMode, ["text", "onPage", "subtle"]),
1204
1637
  getPath(textAliases, ["onPage", "subtle"])
@@ -1207,6 +1640,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1207
1640
  addDark(
1208
1641
  toVariableName(prefix, "text", "on", "page", "meta"),
1209
1642
  pickSemantic(
1643
+ tokens2,
1210
1644
  getPath(darkMode, ["text", "onPage", "meta"]),
1211
1645
  getPath(defaultMode, ["text", "onPage", "meta"]),
1212
1646
  getPath(textAliases, ["onPage", "meta"])
@@ -1215,6 +1649,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1215
1649
  addDark(
1216
1650
  toVariableName(prefix, "text", "on", "surface", "default"),
1217
1651
  pickSemantic(
1652
+ tokens2,
1218
1653
  getPath(darkMode, ["text", "onSurface", "default"]),
1219
1654
  getPath(defaultMode, ["text", "onSurface", "default"]),
1220
1655
  getPath(textAliases, ["onSurface", "default"])
@@ -1223,6 +1658,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1223
1658
  addDark(
1224
1659
  toVariableName(prefix, "text", "on", "surface", "muted"),
1225
1660
  pickSemantic(
1661
+ tokens2,
1226
1662
  getPath(darkMode, ["text", "onSurface", "muted"]),
1227
1663
  getPath(defaultMode, ["text", "onSurface", "muted"]),
1228
1664
  getPath(textAliases, ["onSurface", "muted"])
@@ -1231,6 +1667,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1231
1667
  addDark(
1232
1668
  toVariableName(prefix, "text", "on", "surface", "subtle"),
1233
1669
  pickSemantic(
1670
+ tokens2,
1234
1671
  getPath(darkMode, ["text", "onSurface", "subtle"]),
1235
1672
  getPath(defaultMode, ["text", "onSurface", "subtle"]),
1236
1673
  getPath(textAliases, ["onSurface", "subtle"])
@@ -1239,6 +1676,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1239
1676
  addDark(
1240
1677
  toVariableName(prefix, "text", "on", "surface", "meta"),
1241
1678
  pickSemantic(
1679
+ tokens2,
1242
1680
  getPath(darkMode, ["text", "onSurface", "meta"]),
1243
1681
  getPath(defaultMode, ["text", "onSurface", "meta"]),
1244
1682
  getPath(textAliases, ["onSurface", "meta"])
@@ -1247,6 +1685,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1247
1685
  addDark(
1248
1686
  toVariableName(prefix, "component", "card", "text"),
1249
1687
  pickSemantic(
1688
+ tokens2,
1250
1689
  getPath(darkMode, ["component", "card", "text"]),
1251
1690
  getPath(defaultMode, ["component", "card", "text"]),
1252
1691
  getPath(componentAliases, ["card", "text"])
@@ -1255,6 +1694,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1255
1694
  addDark(
1256
1695
  toVariableName(prefix, "component", "card", "text-muted"),
1257
1696
  pickSemantic(
1697
+ tokens2,
1258
1698
  getPath(darkMode, ["component", "card", "textMuted"]),
1259
1699
  getPath(defaultMode, ["component", "card", "textMuted"]),
1260
1700
  getPath(componentAliases, ["card", "textMuted"])
@@ -1263,6 +1703,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1263
1703
  addDark(
1264
1704
  toVariableName(prefix, "component", "input", "text"),
1265
1705
  pickSemantic(
1706
+ tokens2,
1266
1707
  getPath(darkMode, ["component", "input", "text"]),
1267
1708
  getPath(defaultMode, ["component", "input", "text"]),
1268
1709
  getPath(componentAliases, ["input", "text"])
@@ -1271,6 +1712,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1271
1712
  addDark(
1272
1713
  toVariableName(prefix, "component", "input", "placeholder"),
1273
1714
  pickSemantic(
1715
+ tokens2,
1274
1716
  getPath(darkMode, ["component", "input", "placeholder"]),
1275
1717
  getPath(defaultMode, ["component", "input", "placeholder"]),
1276
1718
  getPath(componentAliases, ["input", "placeholder"])
@@ -1279,6 +1721,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1279
1721
  addDark(
1280
1722
  toVariableName(prefix, "button", "text", "default"),
1281
1723
  pickSemantic(
1724
+ tokens2,
1282
1725
  getPath(darkMode, ["component", "button", "textDefault"]),
1283
1726
  getPath(defaultMode, ["component", "button", "textDefault"]),
1284
1727
  getPath(componentAliases, ["button", "textDefault"])
@@ -1287,6 +1730,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1287
1730
  addDark(
1288
1731
  toVariableName(prefix, "button", "text", "on", "primary"),
1289
1732
  pickSemantic(
1733
+ tokens2,
1290
1734
  getPath(darkMode, ["component", "button", "textOnPrimary"]),
1291
1735
  getPath(defaultMode, ["component", "button", "textOnPrimary"]),
1292
1736
  getPath(componentAliases, ["button", "textOnPrimary"])
@@ -1296,6 +1740,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1296
1740
  addDark(
1297
1741
  toVariableName(prefix, "badge", variant, "bg"),
1298
1742
  pickSemantic(
1743
+ tokens2,
1299
1744
  getPath(darkMode, ["component", "badge", bgKey]),
1300
1745
  getPath(defaultMode, ["component", "badge", bgKey]),
1301
1746
  getPath(componentAliases, ["badge", bgKey])
@@ -1304,6 +1749,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1304
1749
  addDark(
1305
1750
  toVariableName(prefix, "badge", variant, "text"),
1306
1751
  pickSemantic(
1752
+ tokens2,
1307
1753
  getPath(darkMode, ["component", "badge", textKey]),
1308
1754
  getPath(defaultMode, ["component", "badge", textKey]),
1309
1755
  getPath(componentAliases, ["badge", textKey])
@@ -1314,6 +1760,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1314
1760
  addDark(
1315
1761
  toVariableName(prefix, "icon-box", name),
1316
1762
  pickSemantic(
1763
+ tokens2,
1317
1764
  getPath(darkMode, ["component", "iconBox", tokenKey]),
1318
1765
  getPath(defaultMode, ["component", "iconBox", tokenKey]),
1319
1766
  getPath(componentAliases, ["iconBox", tokenKey])
@@ -1332,12 +1779,16 @@ ${darkBlock}
1332
1779
  };
1333
1780
 
1334
1781
  // src/index.ts
1335
- var tokens = core_default;
1782
+ var tokens = coreTokens;
1336
1783
  var sanitizeFontFamily = (value) => value.split(",").map((segment) => segment.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
1337
1784
  var createTailwindTheme = (source = tokens) => {
1338
1785
  const colors = {};
1339
- Object.entries(source.colors).forEach(([group, scale]) => {
1340
- colors[group] = { ...scale };
1786
+ Object.entries(source.colors).forEach(([group, value]) => {
1787
+ if (typeof value === "object" && value !== null) {
1788
+ colors[group] = { ...value };
1789
+ } else {
1790
+ colors[group] = value;
1791
+ }
1341
1792
  });
1342
1793
  const fontFamily = Object.entries(source.typography.families).reduce((acc, [key, value]) => {
1343
1794
  acc[key] = sanitizeFontFamily(value);
@@ -1349,7 +1800,7 @@ var createTailwindTheme = (source = tokens) => {
1349
1800
  {
1350
1801
  lineHeight: entry.lineHeight,
1351
1802
  ...entry.fontWeight ? { fontWeight: entry.fontWeight } : {},
1352
- ...entry.letterSpacing ? { letterSpacing: entry.letterSpacing } : {}
1803
+ ..."letterSpacing" in entry ? { letterSpacing: entry.letterSpacing } : {}
1353
1804
  }
1354
1805
  ];
1355
1806
  return acc;