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