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