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