@phcdevworks/spectre-tokens 0.2.1 → 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 (16) hide show
  1. package/README.md +13 -17
  2. package/dist/index.cjs +1251 -602
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +105 -73
  5. package/dist/index.d.cts +1340 -87
  6. package/dist/index.d.ts +1340 -87
  7. package/dist/index.js +1251 -602
  8. package/dist/index.js.map +1 -1
  9. package/package.json +15 -4
  10. package/tokens/components.json +155 -0
  11. package/tokens/modes.json +182 -0
  12. package/tokens/palette.json +102 -0
  13. package/tokens/primitives.json +145 -0
  14. package/tokens/semantic-roles.json +64 -0
  15. package/tokens/typography.json +94 -0
  16. package/tokens/core.json +0 -714
package/dist/index.js CHANGED
@@ -1,532 +1,1002 @@
1
- // tokens/core.json
2
- var core_default = {
3
- colors: {
4
- brand: {
5
- "50": "#f5f0ff",
6
- "100": "#ebe2ff",
7
- "200": "#d7c6ff",
8
- "300": "#bfa1ff",
9
- "400": "#a37aff",
10
- "500": "#8652ff",
11
- "600": "#6c32e6",
12
- "700": "#5626b4",
13
- "800": "#3d1b7f",
14
- "900": "#241147"
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": "#cbd5f5",
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": "#e5fff8",
30
- "100": "#b8ffed",
31
- "200": "#89ffe1",
32
- "300": "#59ffd6",
33
- "400": "#29ffca",
34
- "500": "#03e6b3",
35
- "600": "#00b389",
36
- "700": "#008060",
37
- "800": "#004d38",
38
- "900": "#002a20"
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: "#8652ff",
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: "#6b7280",
122
- subtle: "#94a3b8",
123
- meta: "#94a3b8"
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
+ }
298
+ },
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
+ }
324
+ },
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
+ }
124
347
  }
125
348
  },
126
- component: {
127
- card: {
128
- text: "#0f172a",
129
- textMuted: "#6b7280"
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
+ }
130
363
  },
131
- input: {
132
- text: "#0f172a",
133
- placeholder: "#94a3b8"
364
+ "hover": {
365
+ "border": {
366
+ "value": "{colors.info.500}"
367
+ }
134
368
  },
135
- button: {
136
- textDefault: "#0f172a",
137
- textOnPrimary: "#ffffff"
369
+ "focus": {
370
+ "border": {
371
+ "value": "{colors.info.500}"
372
+ },
373
+ "ring": {
374
+ "value": "{colors.info.500}"
375
+ }
138
376
  },
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"
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
+ }
390
+ },
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
+ }
150
404
  },
151
- iconBox: {
152
- bg: "#ffffff",
153
- border: "#e2e8f0",
154
- iconDefault: "#6c32e6",
155
- iconSuccess: "#16a34a",
156
- iconWarning: "#d97706",
157
- iconDanger: "#dc2626"
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
+ }
158
415
  }
159
416
  },
160
- modes: {
161
- default: {
162
- surface: {
163
- page: {
164
- value: "#f8fafc"
417
+ "modes": {
418
+ "default": {
419
+ "surface": {
420
+ "page": {
421
+ "value": "{colors.neutral.50}"
165
422
  },
166
- card: {
167
- value: "#ffffff"
423
+ "card": {
424
+ "value": "{colors.white}"
168
425
  },
169
- input: {
170
- value: "#ffffff"
426
+ "input": {
427
+ "value": "{colors.white}"
171
428
  },
172
- overlay: {
173
- value: "rgba(15,23,42,0.6)"
429
+ "overlay": {
430
+ "value": "{colors.neutral.900} / 0.6"
431
+ },
432
+ "alternate": {
433
+ "value": "{colors.neutral.100}"
434
+ },
435
+ "hero": {
436
+ "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
174
437
  }
175
438
  },
176
- text: {
177
- onPage: {
178
- default: {
179
- value: "#0f172a"
439
+ "text": {
440
+ "onPage": {
441
+ "default": {
442
+ "value": "{colors.neutral.900}"
443
+ },
444
+ "muted": {
445
+ "value": "{colors.neutral.600}"
180
446
  },
181
- muted: {
182
- value: "#475569"
447
+ "subtle": {
448
+ "value": "{colors.neutral.500}"
183
449
  },
184
- subtle: {
185
- value: "#94a3b8"
450
+ "meta": {
451
+ "value": "{colors.neutral.500}"
186
452
  },
187
- meta: {
188
- value: "#94a3b8"
453
+ "brand": {
454
+ "value": "{colors.brand.600}"
189
455
  }
190
456
  },
191
- onSurface: {
192
- default: {
193
- value: "#0f172a"
457
+ "onSurface": {
458
+ "default": {
459
+ "value": "{colors.neutral.900}"
194
460
  },
195
- muted: {
196
- value: "#6b7280"
461
+ "muted": {
462
+ "value": "{colors.neutral.600}"
197
463
  },
198
- subtle: {
199
- value: "#94a3b8"
464
+ "subtle": {
465
+ "value": "{colors.neutral.500}"
200
466
  },
201
- meta: {
202
- value: "#94a3b8"
467
+ "meta": {
468
+ "value": "{colors.neutral.500}"
469
+ },
470
+ "brand": {
471
+ "value": "{colors.brand.600}"
203
472
  }
204
473
  }
205
474
  },
206
- component: {
207
- card: {
208
- text: {
209
- value: "#0f172a"
475
+ "component": {
476
+ "card": {
477
+ "text": {
478
+ "value": "{colors.neutral.900}"
479
+ },
480
+ "textMuted": {
481
+ "value": "{colors.neutral.500}"
482
+ }
483
+ },
484
+ "input": {
485
+ "text": {
486
+ "value": "{colors.neutral.900}"
210
487
  },
211
- textMuted: {
212
- value: "#6b7280"
488
+ "placeholder": {
489
+ "value": "{colors.neutral.400}"
213
490
  }
214
491
  },
215
- input: {
216
- text: {
217
- value: "#0f172a"
492
+ "button": {
493
+ "textDefault": {
494
+ "value": "{colors.neutral.900}"
218
495
  },
219
- placeholder: {
220
- value: "#94a3b8"
496
+ "textOnPrimary": {
497
+ "value": "{colors.white}"
221
498
  }
222
499
  },
223
- button: {
224
- textDefault: {
225
- value: "#0f172a"
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
+ }
226
526
  },
227
- textOnPrimary: {
228
- value: "#ffffff"
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": {}
229
550
  }
230
551
  },
231
- badge: {
232
- neutralBg: {
233
- value: "#f1f5f9"
552
+ "iconBox": {
553
+ "bg": {
554
+ "value": "{colors.white}",
555
+ "metadata": {}
234
556
  },
235
- neutralText: {
236
- value: "#334155"
557
+ "border": {
558
+ "value": "{colors.neutral.200}",
559
+ "metadata": {}
237
560
  },
238
- infoBg: {
239
- value: "#dbeafe"
561
+ "iconDefault": {
562
+ "value": "{colors.info.600}",
563
+ "metadata": {}
240
564
  },
241
- infoText: {
242
- value: "#1d4ed8"
565
+ "iconSuccess": {
566
+ "value": "{colors.success.600}",
567
+ "metadata": {}
243
568
  },
244
- successBg: {
245
- value: "#dcfce7"
569
+ "iconWarning": {
570
+ "value": "{colors.warning.600}",
571
+ "metadata": {}
246
572
  },
247
- successText: {
248
- value: "#15803d"
573
+ "iconDanger": {
574
+ "value": "{colors.error.600}",
575
+ "metadata": {}
576
+ }
577
+ },
578
+ "testimonial": {
579
+ "bg": {
580
+ "value": "{colors.white}",
581
+ "metadata": {}
249
582
  },
250
- warningBg: {
251
- value: "#fef3c7"
583
+ "border": {
584
+ "value": "{colors.neutral.200}",
585
+ "metadata": {}
252
586
  },
253
- warningText: {
254
- value: "#b45309"
587
+ "text": {
588
+ "value": "{colors.neutral.700}",
589
+ "metadata": {}
255
590
  },
256
- dangerBg: {
257
- value: "#fee2e2"
591
+ "authorName": {
592
+ "value": "{colors.neutral.900}",
593
+ "metadata": {}
258
594
  },
259
- dangerText: {
260
- value: "#b91c1c"
595
+ "authorTitle": {
596
+ "value": "{colors.neutral.500}",
597
+ "metadata": {}
598
+ },
599
+ "quoteMark": {
600
+ "value": "{colors.neutral.300}",
601
+ "metadata": {}
261
602
  }
262
603
  },
263
- iconBox: {
264
- bg: {
265
- value: "#ffffff"
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
+ }
266
618
  },
267
- border: {
268
- value: "#e2e8f0"
619
+ "featuredText": {
620
+ "value": "{colors.white}",
621
+ "metadata": {}
269
622
  },
270
- iconDefault: {
271
- value: "#6c32e6"
623
+ "featuredBadgeBg": {
624
+ "value": "{colors.warning.500}",
625
+ "metadata": {
626
+ "pair": "modes.default.component.pricingCard.featuredBadgeText"
627
+ }
272
628
  },
273
- iconSuccess: {
274
- value: "#16a34a"
629
+ "featuredBadgeText": {
630
+ "value": "{colors.neutral.900}",
631
+ "metadata": {}
275
632
  },
276
- iconWarning: {
277
- value: "#d97706"
633
+ "price": {
634
+ "value": "{colors.neutral.900}",
635
+ "metadata": {}
278
636
  },
279
- iconDanger: {
280
- value: "#dc2626"
637
+ "priceDescription": {
638
+ "value": "{colors.neutral.500}",
639
+ "metadata": {}
640
+ }
641
+ },
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": {}
281
654
  }
282
655
  }
283
656
  }
284
657
  },
285
- dark: {
286
- surface: {
287
- page: {
288
- value: "#0f172a"
658
+ "dark": {
659
+ "surface": {
660
+ "page": {
661
+ "value": "{colors.neutral.900}"
662
+ },
663
+ "card": {
664
+ "value": "{colors.neutral.800}"
665
+ },
666
+ "input": {
667
+ "value": "{colors.neutral.700}"
289
668
  },
290
- card: {
291
- value: "#1e293b"
669
+ "overlay": {
670
+ "value": "{colors.neutral.800}"
292
671
  },
293
- input: {
294
- value: "#334155"
672
+ "alternate": {
673
+ "value": "{colors.neutral.800}"
295
674
  },
296
- overlay: {
297
- value: "#1e293b"
675
+ "hero": {
676
+ "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
298
677
  }
299
678
  },
300
- text: {
301
- onPage: {
302
- default: {
303
- value: "#f8fafc"
679
+ "text": {
680
+ "onPage": {
681
+ "default": {
682
+ "value": "{colors.neutral.50}"
304
683
  },
305
- muted: {
306
- value: "#cbd5f5"
684
+ "muted": {
685
+ "value": "{colors.neutral.300}"
307
686
  },
308
- subtle: {
309
- value: "#94a3b8"
687
+ "subtle": {
688
+ "value": "{colors.neutral.400}"
310
689
  },
311
- meta: {
312
- value: "#94a3b8"
690
+ "meta": {
691
+ "value": "{colors.neutral.400}"
692
+ },
693
+ "brand": {
694
+ "value": "{colors.brand.400}"
313
695
  }
314
696
  },
315
- onSurface: {
316
- default: {
317
- value: "#f1f5f9"
697
+ "onSurface": {
698
+ "default": {
699
+ "value": "{colors.neutral.100}"
700
+ },
701
+ "muted": {
702
+ "value": "{colors.neutral.300}"
318
703
  },
319
- muted: {
320
- value: "#cbd5f5"
704
+ "subtle": {
705
+ "value": "{colors.neutral.400}"
321
706
  },
322
- subtle: {
323
- value: "#94a3b8"
707
+ "meta": {
708
+ "value": "{colors.neutral.400}"
324
709
  },
325
- meta: {
326
- value: "#94a3b8"
710
+ "brand": {
711
+ "value": "{colors.brand.400}"
327
712
  }
328
713
  }
329
714
  },
330
- component: {
331
- card: {
332
- text: {
333
- value: "#f1f5f9"
715
+ "component": {
716
+ "card": {
717
+ "text": {
718
+ "value": "{colors.neutral.100}"
334
719
  },
335
- textMuted: {
336
- value: "#cbd5f5"
720
+ "textMuted": {
721
+ "value": "{colors.neutral.300}"
337
722
  }
338
723
  },
339
- input: {
340
- text: {
341
- value: "#f1f5f9"
724
+ "input": {
725
+ "text": {
726
+ "value": "{colors.neutral.100}"
342
727
  },
343
- placeholder: {
344
- value: "#94a3b8"
728
+ "placeholder": {
729
+ "value": "{colors.neutral.400}"
345
730
  }
346
731
  },
347
- button: {
348
- textDefault: {
349
- value: "#f1f5f9"
732
+ "button": {
733
+ "textDefault": {
734
+ "value": "{colors.neutral.100}"
350
735
  },
351
- textOnPrimary: {
352
- value: "#ffffff"
736
+ "textOnPrimary": {
737
+ "value": "{colors.white}"
353
738
  }
354
739
  },
355
- badge: {
356
- neutralBg: {
357
- value: "#334155"
740
+ "badge": {
741
+ "neutralBg": {
742
+ "value": "{colors.neutral.700}",
743
+ "metadata": {
744
+ "pair": "modes.dark.component.badge.neutralText"
745
+ }
358
746
  },
359
- neutralText: {
360
- value: "#f1f5f9"
747
+ "neutralText": {
748
+ "value": "{colors.neutral.100}",
749
+ "metadata": {}
361
750
  },
362
- infoBg: {
363
- value: "#1e40af"
751
+ "infoBg": {
752
+ "value": "{colors.info.800}",
753
+ "metadata": {
754
+ "pair": "modes.dark.component.badge.infoText"
755
+ }
364
756
  },
365
- infoText: {
366
- value: "#dbeafe"
757
+ "infoText": {
758
+ "value": "{colors.info.100}",
759
+ "metadata": {}
367
760
  },
368
- successBg: {
369
- value: "#166534"
761
+ "successBg": {
762
+ "value": "{colors.success.800}",
763
+ "metadata": {
764
+ "pair": "modes.dark.component.badge.successText"
765
+ }
370
766
  },
371
- successText: {
372
- value: "#dcfce7"
767
+ "successText": {
768
+ "value": "{colors.success.100}",
769
+ "metadata": {}
373
770
  },
374
- warningBg: {
375
- value: "#92400e"
771
+ "warningBg": {
772
+ "value": "{colors.warning.800}",
773
+ "metadata": {
774
+ "pair": "modes.dark.component.badge.warningText"
775
+ }
376
776
  },
377
- warningText: {
378
- value: "#fef3c7"
777
+ "warningText": {
778
+ "value": "{colors.warning.100}",
779
+ "metadata": {}
379
780
  },
380
- dangerBg: {
381
- value: "#991b1b"
781
+ "dangerBg": {
782
+ "value": "{colors.error.800}",
783
+ "metadata": {
784
+ "pair": "modes.dark.component.badge.dangerText"
785
+ }
382
786
  },
383
- dangerText: {
384
- value: "#fee2e2"
787
+ "dangerText": {
788
+ "value": "{colors.error.100}",
789
+ "metadata": {}
385
790
  }
386
791
  },
387
- iconBox: {
388
- bg: {
389
- value: "#1e293b"
792
+ "iconBox": {
793
+ "bg": {
794
+ "value": "{colors.neutral.800}",
795
+ "metadata": {}
390
796
  },
391
- border: {
392
- value: "#334155"
797
+ "border": {
798
+ "value": "{colors.neutral.700}",
799
+ "metadata": {}
393
800
  },
394
- iconDefault: {
395
- value: "#a37aff"
801
+ "iconDefault": {
802
+ "value": "{colors.info.300}",
803
+ "metadata": {}
396
804
  },
397
- iconSuccess: {
398
- value: "#4ade80"
805
+ "iconSuccess": {
806
+ "value": "{colors.success.400}",
807
+ "metadata": {}
399
808
  },
400
- iconWarning: {
401
- value: "#fbbf24"
809
+ "iconWarning": {
810
+ "value": "{colors.warning.400}",
811
+ "metadata": {}
402
812
  },
403
- iconDanger: {
404
- value: "#f87171"
813
+ "iconDanger": {
814
+ "value": "{colors.error.400}",
815
+ "metadata": {}
816
+ }
817
+ },
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": {}
842
+ }
843
+ },
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": {}
880
+ }
881
+ },
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": {}
405
894
  }
406
895
  }
407
896
  }
408
897
  }
409
898
  },
410
- opacity: {
411
- disabled: "0.38",
412
- hover: "0.92",
413
- active: "0.84",
414
- focus: "1",
415
- overlay: "0.5",
416
- tooltip: "0.95"
417
- },
418
- accessibility: {
419
- focusRing: {
420
- width: "2px",
421
- offset: "2px",
422
- style: "solid"
423
- },
424
- minTouchTarget: "44px",
425
- minTextSize: "16px"
426
- },
427
- buttons: {
428
- primary: {
429
- bg: "#8652ff",
430
- bgHover: "#6c32e6",
431
- bgActive: "#5626b4",
432
- bgDisabled: "#cbd5f5",
433
- text: "#ffffff",
434
- textDisabled: "#94a3b8"
435
- },
436
- secondary: {
437
- bg: "#ffffff",
438
- bgHover: "#f1f5f9",
439
- bgActive: "#e2e8f0",
440
- bgDisabled: "#f8fafc",
441
- text: "#8652ff",
442
- textDisabled: "#94a3b8",
443
- border: "#8652ff",
444
- borderDisabled: "#cbd5f5"
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"
445
911
  },
446
- ghost: {
447
- bg: "transparent",
448
- bgHover: "#f5f0ff",
449
- bgActive: "#ebe2ff",
450
- bgDisabled: "transparent",
451
- text: "#8652ff",
452
- 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"
453
923
  },
454
- danger: {
455
- bg: "#ef4444",
456
- bgHover: "#dc2626",
457
- bgActive: "#b91c1c",
458
- bgDisabled: "#fecaca",
459
- text: "#ffffff",
460
- textDisabled: "#94a3b8"
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"
461
935
  },
462
- success: {
463
- bg: "#22c55e",
464
- bgHover: "#16a34a",
465
- bgActive: "#15803d",
466
- bgDisabled: "#bbf7d0",
467
- text: "#ffffff",
468
- textDisabled: "#94a3b8"
469
- }
470
- },
471
- forms: {
472
- default: {
473
- bg: "#ffffff",
474
- border: "#cbd5f5",
475
- text: "#0f172a",
476
- 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"
477
947
  },
478
- hover: {
479
- border: "#8652ff"
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"
480
959
  },
481
- focus: {
482
- border: "#8652ff",
483
- ring: "#8652ff"
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"
484
971
  },
485
- valid: {
486
- border: "#22c55e",
487
- bg: "#f0fdf4",
488
- 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"
489
983
  },
490
- invalid: {
491
- border: "#ef4444",
492
- bg: "#fef2f2",
493
- text: "#b91c1c"
984
+ "indigo": {
985
+ "500": "#667eea",
986
+ "600": "#5c67f2"
494
987
  },
495
- disabled: {
496
- bg: "#f8fafc",
497
- border: "#e2e8f0",
498
- text: "#94a3b8"
499
- }
500
- },
501
- layout: {
502
- section: {
503
- padding: {
504
- sm: "1.5rem",
505
- md: "2rem",
506
- lg: "3rem"
507
- },
508
- gap: {
509
- sm: "1rem",
510
- md: "1.5rem",
511
- lg: "2rem"
512
- }
988
+ "violet": {
989
+ "600": "#764ba2"
513
990
  },
514
- stack: {
515
- gap: {
516
- sm: "0.5rem",
517
- md: "0.75rem",
518
- lg: "1rem"
519
- }
991
+ "focus": {
992
+ "primary": "#3b82f6",
993
+ "error": "#ef4444",
994
+ "info": "#3b82f6"
520
995
  },
521
- container: {
522
- paddingInline: {
523
- sm: "1rem",
524
- md: "1.5rem",
525
- lg: "2rem"
526
- }
527
- }
996
+ "white": "#ffffff",
997
+ "black": "#000000"
528
998
  },
529
- space: {
999
+ "space": {
530
1000
  "0": "0rem",
531
1001
  "4": "0.25rem",
532
1002
  "8": "0.5rem",
@@ -542,174 +1012,285 @@ var core_default = {
542
1012
  "80": "5rem",
543
1013
  "96": "6rem"
544
1014
  },
545
- radii: {
546
- none: "0",
547
- sm: "2px",
548
- md: "4px",
549
- lg: "8px",
550
- 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"
1034
+ },
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"
551
1044
  },
552
- borders: {
553
- card: "#334155",
554
- input: "#cbd5f5"
1045
+ "transitions": {
1046
+ "duration": {
1047
+ "instant": "75ms",
1048
+ "fast": "150ms",
1049
+ "base": "200ms",
1050
+ "moderate": "300ms",
1051
+ "slow": "500ms",
1052
+ "slower": "700ms"
1053
+ },
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
+ }
555
1061
  },
556
- font: {
557
- xs: {
558
- size: "0.75rem",
559
- lineHeight: "1.25rem",
560
- weight: 400
1062
+ "animations": {
1063
+ "fadeIn": {
1064
+ "duration": "200ms",
1065
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1066
+ "keyframes": "fade-in"
561
1067
  },
562
- sm: {
563
- size: "0.875rem",
564
- lineHeight: "1.5rem",
565
- weight: 400
1068
+ "fadeOut": {
1069
+ "duration": "150ms",
1070
+ "easing": "cubic-bezier(0.4, 0, 1, 1)",
1071
+ "keyframes": "fade-out"
566
1072
  },
567
- md: {
568
- size: "1rem",
569
- lineHeight: "1.75rem",
570
- weight: 500
1073
+ "slideUp": {
1074
+ "duration": "300ms",
1075
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1076
+ "keyframes": "slide-up"
571
1077
  },
572
- lg: {
573
- size: "1.25rem",
574
- lineHeight: "2rem",
575
- weight: 500
1078
+ "slideDown": {
1079
+ "duration": "300ms",
1080
+ "easing": "cubic-bezier(0, 0, 0.2, 1)",
1081
+ "keyframes": "slide-down"
576
1082
  },
577
- xl: {
578
- size: "1.5rem",
579
- lineHeight: "2.125rem",
580
- weight: 600
1083
+ "scaleIn": {
1084
+ "duration": "200ms",
1085
+ "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
1086
+ "keyframes": "scale-in"
581
1087
  },
582
- "2xl": {
583
- size: "1.875rem",
584
- lineHeight: "2.5rem",
585
- weight: 600
586
- }
587
- },
588
- typography: {
589
- families: {
590
- sans: "'Inter', 'Helvetica Neue', Arial, sans-serif",
591
- serif: "'Spectre Serif', 'Georgia', serif",
592
- mono: "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
1088
+ "bounce": {
1089
+ "duration": "300ms",
1090
+ "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
1091
+ "keyframes": "bounce"
593
1092
  },
594
- scale: {
595
- xs: {
596
- fontSize: "0.75rem",
597
- lineHeight: "1.25rem",
598
- fontWeight: 400,
599
- letterSpacing: "0.02em"
600
- },
601
- sm: {
602
- fontSize: "0.875rem",
603
- lineHeight: "1.5rem",
604
- fontWeight: 400
605
- },
606
- md: {
607
- fontSize: "1rem",
608
- lineHeight: "1.75rem",
609
- fontWeight: 500
610
- },
611
- lg: {
612
- fontSize: "1.25rem",
613
- lineHeight: "2rem",
614
- fontWeight: 600
615
- },
616
- xl: {
617
- fontSize: "1.5rem",
618
- lineHeight: "2.125rem",
619
- fontWeight: 600
620
- },
621
- "2xl": {
622
- fontSize: "1.875rem",
623
- lineHeight: "2.5rem",
624
- fontWeight: 700
625
- },
626
- "3xl": {
627
- fontSize: "2.25rem",
628
- lineHeight: "2.75rem",
629
- fontWeight: 700
630
- }
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"
631
1102
  }
632
1103
  },
633
- shadows: {
634
- none: "none",
635
- sm: "0 1px 2px 0 rgba(15, 23, 42, 0.08)",
636
- md: "0 3px 8px -1px rgba(15, 23, 42, 0.1)",
637
- lg: "0 8px 20px -4px rgba(15, 23, 42, 0.18)"
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"
638
1111
  },
639
- breakpoints: {
640
- sm: "640px",
641
- md: "768px",
642
- lg: "1024px",
643
- xl: "1280px",
644
- "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"
1119
+ },
1120
+ "icons": {
1121
+ "xs": "12px",
1122
+ "sm": "16px",
1123
+ "md": "20px",
1124
+ "lg": "24px",
1125
+ "xl": "32px",
1126
+ "2xl": "40px",
1127
+ "3xl": "48px"
1128
+ },
1129
+ "accessibility": {
1130
+ "focusRing": {
1131
+ "width": "2px",
1132
+ "offset": "2px",
1133
+ "style": "solid"
1134
+ },
1135
+ "minTouchTarget": "44px",
1136
+ "minTextSize": "16px"
645
1137
  },
646
- zIndex: {
647
- base: "0",
648
- dropdown: "1000",
649
- sticky: "1100",
650
- fixed: "1200",
651
- overlay: "1300",
652
- modal: "1400",
653
- popover: "1500",
654
- tooltip: "1600"
1138
+ "borders": {
1139
+ "card": "{colors.neutral.200}",
1140
+ "input": "{colors.neutral.300}"
655
1141
  },
656
- transitions: {
657
- duration: {
658
- instant: "75ms",
659
- fast: "150ms",
660
- base: "200ms",
661
- moderate: "300ms",
662
- slow: "500ms",
663
- slower: "700ms"
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"
1150
+ },
1151
+ "input": {
1152
+ "value": "{colors.white}",
1153
+ "description": "form inputs, textareas"
664
1154
  },
665
- easing: {
666
- linear: "linear",
667
- in: "cubic-bezier(0.4, 0, 1, 1)",
668
- out: "cubic-bezier(0, 0, 0.2, 1)",
669
- inOut: "cubic-bezier(0.4, 0, 0.2, 1)",
670
- spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"
1155
+ "overlay": {
1156
+ "value": "{colors.neutral.900} / 0.6",
1157
+ "description": "modals, dropdowns, flyouts"
671
1158
  }
672
1159
  },
673
- animations: {
674
- fadeIn: {
675
- duration: "200ms",
676
- easing: "cubic-bezier(0, 0, 0.2, 1)",
677
- keyframes: "fade-in"
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}"
1174
+ }
1175
+ },
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
+ }
678
1188
  },
679
- fadeOut: {
680
- duration: "150ms",
681
- easing: "cubic-bezier(0.4, 0, 1, 1)",
682
- keyframes: "fade-out"
1189
+ "stack": {
1190
+ "gap": {
1191
+ "sm": "0.5rem",
1192
+ "md": "0.75rem",
1193
+ "lg": "1rem"
1194
+ }
683
1195
  },
684
- slideUp: {
685
- duration: "300ms",
686
- easing: "cubic-bezier(0, 0, 0.2, 1)",
687
- 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
688
1209
  },
689
- slideDown: {
690
- duration: "300ms",
691
- easing: "cubic-bezier(0, 0, 0.2, 1)",
692
- keyframes: "slide-down"
1210
+ "sm": {
1211
+ "size": "0.875rem",
1212
+ "lineHeight": "1.5rem",
1213
+ "weight": 400
693
1214
  },
694
- scaleIn: {
695
- duration: "200ms",
696
- easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
697
- keyframes: "scale-in"
1215
+ "md": {
1216
+ "size": "1rem",
1217
+ "lineHeight": "1.75rem",
1218
+ "weight": 500
698
1219
  },
699
- bounce: {
700
- duration: "500ms",
701
- easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
702
- keyframes: "bounce"
1220
+ "lg": {
1221
+ "size": "1.25rem",
1222
+ "lineHeight": "2rem",
1223
+ "weight": 500
703
1224
  },
704
- shake: {
705
- duration: "400ms",
706
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
707
- keyframes: "shake"
1225
+ "xl": {
1226
+ "size": "1.5rem",
1227
+ "lineHeight": "2.125rem",
1228
+ "weight": 600
708
1229
  },
709
- pulse: {
710
- duration: "1500ms",
711
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
712
- keyframes: "pulse"
1230
+ "2xl": {
1231
+ "size": "1.875rem",
1232
+ "lineHeight": "2.5rem",
1233
+ "weight": 600
1234
+ }
1235
+ },
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
+ }
713
1294
  }
714
1295
  }
715
1296
  };
@@ -737,18 +1318,55 @@ var ICON_BOX_FIELDS = [
737
1318
  { name: "icon-warning", tokenKey: "iconWarning" },
738
1319
  { name: "icon-danger", tokenKey: "iconDanger" }
739
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
+ };
740
1358
  var createCssVariableMap = (tokens2, options = {}) => {
741
1359
  const prefix = options.prefix ?? DEFAULT_PREFIX;
742
1360
  const map = {};
743
1361
  const baseTokens = tokens2;
744
1362
  const assign = (name, value) => {
745
- const resolved = resolveSemanticValue(value);
1363
+ const resolved = resolveSemanticValue(value, tokens2);
746
1364
  if (resolved !== void 0) {
747
1365
  map[name] = resolved;
748
1366
  return;
749
1367
  }
750
1368
  if (value === void 0) return;
751
- map[name] = String(value);
1369
+ map[name] = resolveValue(tokens2, value);
752
1370
  };
753
1371
  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
754
1372
  Object.entries(scale).forEach(([step, value]) => {
@@ -761,24 +1379,24 @@ var createCssVariableMap = (tokens2, options = {}) => {
761
1379
  });
762
1380
  }
763
1381
  if (baseTokens.layout) {
764
- const { section, stack, container } = baseTokens.layout;
765
- if (section?.padding) {
766
- 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]) => {
767
1385
  assign(toVariableName(prefix, "layout", "section", "padding", key), value);
768
1386
  });
769
1387
  }
770
- if (section?.gap) {
771
- Object.entries(section.gap).forEach(([key, value]) => {
1388
+ if (layout.section?.gap) {
1389
+ Object.entries(layout.section.gap).forEach(([key, value]) => {
772
1390
  assign(toVariableName(prefix, "layout", "section", "gap", key), value);
773
1391
  });
774
1392
  }
775
- if (stack?.gap) {
776
- Object.entries(stack.gap).forEach(([key, value]) => {
1393
+ if (layout.stack?.gap) {
1394
+ Object.entries(layout.stack.gap).forEach(([key, value]) => {
777
1395
  assign(toVariableName(prefix, "layout", "stack", "gap", key), value);
778
1396
  });
779
1397
  }
780
- if (container?.paddingInline) {
781
- Object.entries(container.paddingInline).forEach(([key, value]) => {
1398
+ if (layout.container?.paddingInline) {
1399
+ Object.entries(layout.container.paddingInline).forEach(([key, value]) => {
782
1400
  assign(toVariableName(prefix, "layout", "container", "padding-inline", key), value);
783
1401
  });
784
1402
  }
@@ -805,7 +1423,8 @@ var createCssVariableMap = (tokens2, options = {}) => {
805
1423
  });
806
1424
  }
807
1425
  Object.entries(typographyScale).forEach(([key, entry]) => {
808
- assign(toVariableName(prefix, "font", key, "letter-spacing"), entry.letterSpacing);
1426
+ const scaleEntry = entry;
1427
+ assign(toVariableName(prefix, "font", key, "letter-spacing"), scaleEntry.letterSpacing);
809
1428
  });
810
1429
  assign(toVariableName(prefix, "text", "on", "page", "default"), tokens2.text.onPage.default);
811
1430
  assign(toVariableName(prefix, "text", "on", "page", "muted"), tokens2.text.onPage.muted);
@@ -861,24 +1480,28 @@ var createCssVariableMap = (tokens2, options = {}) => {
861
1480
  if (value) assign(toVariableName(prefix, "form", state, prop), value);
862
1481
  });
863
1482
  });
864
- Object.entries(baseTokens.animations).forEach(([name, animation]) => {
865
- assign(toVariableName(prefix, "animation", name, "duration"), animation.duration);
866
- assign(toVariableName(prefix, "animation", name, "easing"), animation.easing);
867
- assign(toVariableName(prefix, "animation", name, "keyframes"), animation.keyframes);
868
- });
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
+ }
869
1490
  return map;
870
1491
  };
871
- var resolveSemanticValue = (value) => {
872
- 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
+ }
873
1496
  if (value && typeof value === "object" && "value" in value) {
874
- return String(value.value);
1497
+ return resolveValue(tokens2, value.value);
875
1498
  }
876
1499
  return void 0;
877
1500
  };
878
1501
  var getPath = (source, path) => path.reduce((acc, key) => acc && typeof acc === "object" ? acc[key] : void 0, source);
879
- var pickSemantic = (...candidates) => {
1502
+ var pickSemantic = (tokens2, ...candidates) => {
880
1503
  for (const candidate of candidates) {
881
- const resolved = resolveSemanticValue(candidate);
1504
+ const resolved = resolveSemanticValue(candidate, tokens2);
882
1505
  if (resolved !== void 0) return resolved;
883
1506
  }
884
1507
  return void 0;
@@ -897,38 +1520,39 @@ var generateCssVariables = (tokens2, options = {}) => {
897
1520
  const addBase = (name, value) => {
898
1521
  if (value !== void 0) baseLines.push(` ${name}: ${value};`);
899
1522
  };
900
- addBase(toVariableName(prefix, "surface", "page"), pickSemantic(getPath(defaultMode, ["surface", "page"]), getPath(surfaceAliases, ["page"])));
901
- addBase(toVariableName(prefix, "surface", "card"), pickSemantic(getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
902
- addBase(toVariableName(prefix, "surface", "input"), pickSemantic(getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
903
- addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
904
- addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
905
- addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
906
- addBase(toVariableName(prefix, "text", "on", "page", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
907
- addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
908
- addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
909
- addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
910
- addBase(toVariableName(prefix, "text", "on", "surface", "subtle"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
911
- addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
912
- addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
913
- addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
914
- addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
915
- addBase(toVariableName(prefix, "component", "input", "placeholder"), pickSemantic(getPath(defaultMode, ["component", "input", "placeholder"]), getPath(componentAliases, ["input", "placeholder"])));
916
- addBase(toVariableName(prefix, "button", "text", "default"), pickSemantic(getPath(defaultMode, ["component", "button", "textDefault"]), getPath(componentAliases, ["button", "textDefault"])));
917
- 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"])));
918
1542
  BADGE_VARIANTS.forEach(({ variant, bgKey, textKey }) => {
919
1543
  addBase(
920
1544
  toVariableName(prefix, "badge", variant, "bg"),
921
- pickSemantic(getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
1545
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", bgKey]), getPath(componentAliases, ["badge", bgKey]))
922
1546
  );
923
1547
  addBase(
924
1548
  toVariableName(prefix, "badge", variant, "text"),
925
- pickSemantic(getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
1549
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "badge", textKey]), getPath(componentAliases, ["badge", textKey]))
926
1550
  );
927
1551
  });
928
1552
  ICON_BOX_FIELDS.forEach(({ name, tokenKey }) => {
929
1553
  addBase(
930
1554
  toVariableName(prefix, "icon-box", name),
931
- pickSemantic(getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
1555
+ pickSemantic(tokens2, getPath(defaultMode, ["component", "iconBox", tokenKey]), getPath(componentAliases, ["iconBox", tokenKey]))
932
1556
  );
933
1557
  });
934
1558
  const rootLines = [...baseLines, ...mapLines];
@@ -938,23 +1562,28 @@ var generateCssVariables = (tokens2, options = {}) => {
938
1562
  };
939
1563
  addDark(
940
1564
  toVariableName(prefix, "surface", "page"),
941
- 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"]))
942
1566
  );
943
1567
  addDark(
944
1568
  toVariableName(prefix, "surface", "card"),
945
- 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"]))
946
1570
  );
947
1571
  addDark(
948
1572
  toVariableName(prefix, "surface", "input"),
949
- 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"]))
950
1574
  );
951
1575
  addDark(
952
1576
  toVariableName(prefix, "surface", "overlay"),
953
- 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"]))
954
1582
  );
955
1583
  addDark(
956
1584
  toVariableName(prefix, "text", "on", "page", "default"),
957
1585
  pickSemantic(
1586
+ tokens2,
958
1587
  getPath(darkMode, ["text", "onPage", "default"]),
959
1588
  getPath(defaultMode, ["text", "onPage", "default"]),
960
1589
  getPath(textAliases, ["onPage", "default"])
@@ -963,6 +1592,7 @@ var generateCssVariables = (tokens2, options = {}) => {
963
1592
  addDark(
964
1593
  toVariableName(prefix, "text", "on", "page", "muted"),
965
1594
  pickSemantic(
1595
+ tokens2,
966
1596
  getPath(darkMode, ["text", "onPage", "muted"]),
967
1597
  getPath(defaultMode, ["text", "onPage", "muted"]),
968
1598
  getPath(textAliases, ["onPage", "muted"])
@@ -971,6 +1601,7 @@ var generateCssVariables = (tokens2, options = {}) => {
971
1601
  addDark(
972
1602
  toVariableName(prefix, "text", "on", "page", "subtle"),
973
1603
  pickSemantic(
1604
+ tokens2,
974
1605
  getPath(darkMode, ["text", "onPage", "subtle"]),
975
1606
  getPath(defaultMode, ["text", "onPage", "subtle"]),
976
1607
  getPath(textAliases, ["onPage", "subtle"])
@@ -979,6 +1610,7 @@ var generateCssVariables = (tokens2, options = {}) => {
979
1610
  addDark(
980
1611
  toVariableName(prefix, "text", "on", "page", "meta"),
981
1612
  pickSemantic(
1613
+ tokens2,
982
1614
  getPath(darkMode, ["text", "onPage", "meta"]),
983
1615
  getPath(defaultMode, ["text", "onPage", "meta"]),
984
1616
  getPath(textAliases, ["onPage", "meta"])
@@ -987,6 +1619,7 @@ var generateCssVariables = (tokens2, options = {}) => {
987
1619
  addDark(
988
1620
  toVariableName(prefix, "text", "on", "surface", "default"),
989
1621
  pickSemantic(
1622
+ tokens2,
990
1623
  getPath(darkMode, ["text", "onSurface", "default"]),
991
1624
  getPath(defaultMode, ["text", "onSurface", "default"]),
992
1625
  getPath(textAliases, ["onSurface", "default"])
@@ -995,6 +1628,7 @@ var generateCssVariables = (tokens2, options = {}) => {
995
1628
  addDark(
996
1629
  toVariableName(prefix, "text", "on", "surface", "muted"),
997
1630
  pickSemantic(
1631
+ tokens2,
998
1632
  getPath(darkMode, ["text", "onSurface", "muted"]),
999
1633
  getPath(defaultMode, ["text", "onSurface", "muted"]),
1000
1634
  getPath(textAliases, ["onSurface", "muted"])
@@ -1003,6 +1637,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1003
1637
  addDark(
1004
1638
  toVariableName(prefix, "text", "on", "surface", "subtle"),
1005
1639
  pickSemantic(
1640
+ tokens2,
1006
1641
  getPath(darkMode, ["text", "onSurface", "subtle"]),
1007
1642
  getPath(defaultMode, ["text", "onSurface", "subtle"]),
1008
1643
  getPath(textAliases, ["onSurface", "subtle"])
@@ -1011,6 +1646,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1011
1646
  addDark(
1012
1647
  toVariableName(prefix, "text", "on", "surface", "meta"),
1013
1648
  pickSemantic(
1649
+ tokens2,
1014
1650
  getPath(darkMode, ["text", "onSurface", "meta"]),
1015
1651
  getPath(defaultMode, ["text", "onSurface", "meta"]),
1016
1652
  getPath(textAliases, ["onSurface", "meta"])
@@ -1019,6 +1655,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1019
1655
  addDark(
1020
1656
  toVariableName(prefix, "component", "card", "text"),
1021
1657
  pickSemantic(
1658
+ tokens2,
1022
1659
  getPath(darkMode, ["component", "card", "text"]),
1023
1660
  getPath(defaultMode, ["component", "card", "text"]),
1024
1661
  getPath(componentAliases, ["card", "text"])
@@ -1027,6 +1664,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1027
1664
  addDark(
1028
1665
  toVariableName(prefix, "component", "card", "text-muted"),
1029
1666
  pickSemantic(
1667
+ tokens2,
1030
1668
  getPath(darkMode, ["component", "card", "textMuted"]),
1031
1669
  getPath(defaultMode, ["component", "card", "textMuted"]),
1032
1670
  getPath(componentAliases, ["card", "textMuted"])
@@ -1035,6 +1673,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1035
1673
  addDark(
1036
1674
  toVariableName(prefix, "component", "input", "text"),
1037
1675
  pickSemantic(
1676
+ tokens2,
1038
1677
  getPath(darkMode, ["component", "input", "text"]),
1039
1678
  getPath(defaultMode, ["component", "input", "text"]),
1040
1679
  getPath(componentAliases, ["input", "text"])
@@ -1043,6 +1682,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1043
1682
  addDark(
1044
1683
  toVariableName(prefix, "component", "input", "placeholder"),
1045
1684
  pickSemantic(
1685
+ tokens2,
1046
1686
  getPath(darkMode, ["component", "input", "placeholder"]),
1047
1687
  getPath(defaultMode, ["component", "input", "placeholder"]),
1048
1688
  getPath(componentAliases, ["input", "placeholder"])
@@ -1051,6 +1691,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1051
1691
  addDark(
1052
1692
  toVariableName(prefix, "button", "text", "default"),
1053
1693
  pickSemantic(
1694
+ tokens2,
1054
1695
  getPath(darkMode, ["component", "button", "textDefault"]),
1055
1696
  getPath(defaultMode, ["component", "button", "textDefault"]),
1056
1697
  getPath(componentAliases, ["button", "textDefault"])
@@ -1059,6 +1700,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1059
1700
  addDark(
1060
1701
  toVariableName(prefix, "button", "text", "on", "primary"),
1061
1702
  pickSemantic(
1703
+ tokens2,
1062
1704
  getPath(darkMode, ["component", "button", "textOnPrimary"]),
1063
1705
  getPath(defaultMode, ["component", "button", "textOnPrimary"]),
1064
1706
  getPath(componentAliases, ["button", "textOnPrimary"])
@@ -1068,6 +1710,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1068
1710
  addDark(
1069
1711
  toVariableName(prefix, "badge", variant, "bg"),
1070
1712
  pickSemantic(
1713
+ tokens2,
1071
1714
  getPath(darkMode, ["component", "badge", bgKey]),
1072
1715
  getPath(defaultMode, ["component", "badge", bgKey]),
1073
1716
  getPath(componentAliases, ["badge", bgKey])
@@ -1076,6 +1719,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1076
1719
  addDark(
1077
1720
  toVariableName(prefix, "badge", variant, "text"),
1078
1721
  pickSemantic(
1722
+ tokens2,
1079
1723
  getPath(darkMode, ["component", "badge", textKey]),
1080
1724
  getPath(defaultMode, ["component", "badge", textKey]),
1081
1725
  getPath(componentAliases, ["badge", textKey])
@@ -1086,6 +1730,7 @@ var generateCssVariables = (tokens2, options = {}) => {
1086
1730
  addDark(
1087
1731
  toVariableName(prefix, "icon-box", name),
1088
1732
  pickSemantic(
1733
+ tokens2,
1089
1734
  getPath(darkMode, ["component", "iconBox", tokenKey]),
1090
1735
  getPath(defaultMode, ["component", "iconBox", tokenKey]),
1091
1736
  getPath(componentAliases, ["iconBox", tokenKey])
@@ -1104,12 +1749,16 @@ ${darkBlock}
1104
1749
  };
1105
1750
 
1106
1751
  // src/index.ts
1107
- var tokens = core_default;
1752
+ var tokens = coreTokens;
1108
1753
  var sanitizeFontFamily = (value) => value.split(",").map((segment) => segment.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
1109
1754
  var createTailwindTheme = (source = tokens) => {
1110
1755
  const colors = {};
1111
- Object.entries(source.colors).forEach(([group, scale]) => {
1112
- 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
+ }
1113
1762
  });
1114
1763
  const fontFamily = Object.entries(source.typography.families).reduce((acc, [key, value]) => {
1115
1764
  acc[key] = sanitizeFontFamily(value);
@@ -1121,7 +1770,7 @@ var createTailwindTheme = (source = tokens) => {
1121
1770
  {
1122
1771
  lineHeight: entry.lineHeight,
1123
1772
  ...entry.fontWeight ? { fontWeight: entry.fontWeight } : {},
1124
- ...entry.letterSpacing ? { letterSpacing: entry.letterSpacing } : {}
1773
+ ..."letterSpacing" in entry ? { letterSpacing: entry.letterSpacing } : {}
1125
1774
  }
1126
1775
  ];
1127
1776
  return acc;