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