@phcdevworks/spectre-tokens 2.1.2 → 2.3.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.
package/dist/index.js CHANGED
@@ -2,1214 +2,349 @@
2
2
  var coreTokens = {
3
3
  "component": {
4
4
  "card": {
5
- "text": {
6
- "value": "{colors.neutral.900}",
7
- "metadata": {
8
- "pair": "surface.card"
9
- }
10
- },
11
- "textMuted": {
12
- "value": "{colors.neutral.500}",
13
- "metadata": {
14
- "pair": "surface.card"
15
- }
16
- }
5
+ "text": "{colors.neutral.900}",
6
+ "textMuted": "{colors.neutral.500}"
17
7
  },
18
8
  "input": {
19
- "text": {
20
- "value": "{colors.neutral.900}",
21
- "metadata": {
22
- "pair": "surface.input"
23
- }
24
- },
25
- "placeholder": {
26
- "value": "{colors.neutral.500}",
27
- "metadata": {
28
- "pair": "forms.default.bg"
29
- }
30
- }
9
+ "text": "{colors.neutral.900}",
10
+ "placeholder": "{colors.neutral.500}"
31
11
  },
32
12
  "button": {
33
- "textDefault": {
34
- "value": "{colors.neutral.900}"
35
- },
36
- "textOnPrimary": {
37
- "value": "{colors.white}"
38
- }
13
+ "textDefault": "{colors.neutral.900}",
14
+ "textOnPrimary": "{colors.white}"
39
15
  },
40
16
  "badge": {
41
- "neutralBg": {
42
- "value": "{colors.neutral.100}",
43
- "metadata": {
44
- "pair": "component.badge.neutralText"
45
- }
46
- },
47
- "neutralBgHover": {
48
- "value": "{colors.neutral.200}",
49
- "metadata": {
50
- "pair": "component.badge.neutralText"
51
- }
52
- },
53
- "neutralText": {
54
- "value": "{colors.neutral.700}"
55
- },
56
- "infoBg": {
57
- "value": "{colors.info.100}",
58
- "metadata": {
59
- "pair": "component.badge.infoText"
60
- }
61
- },
62
- "infoBgHover": {
63
- "value": "{colors.info.200}",
64
- "metadata": {
65
- "pair": "component.badge.infoText"
66
- }
67
- },
68
- "infoText": {
69
- "value": "{colors.info.700}"
70
- },
71
- "successBg": {
72
- "value": "{colors.success.100}",
73
- "metadata": {
74
- "pair": "component.badge.successText"
75
- }
76
- },
77
- "successBgHover": {
78
- "value": "{colors.success.200}",
79
- "metadata": {
80
- "pair": "component.badge.successText"
81
- }
82
- },
83
- "successText": {
84
- "value": "{colors.success.800}"
85
- },
86
- "warningBg": {
87
- "value": "{colors.warning.100}",
88
- "metadata": {
89
- "pair": "component.badge.warningText"
90
- }
91
- },
92
- "warningBgHover": {
93
- "value": "{colors.warning.200}",
94
- "metadata": {
95
- "pair": "component.badge.warningText"
96
- }
97
- },
98
- "warningText": {
99
- "value": "{colors.warning.800}"
100
- },
101
- "dangerBg": {
102
- "value": "{colors.error.100}",
103
- "metadata": {
104
- "pair": "component.badge.dangerText"
105
- }
106
- },
107
- "dangerBgHover": {
108
- "value": "{colors.error.200}",
109
- "metadata": {
110
- "pair": "component.badge.dangerText"
111
- }
112
- },
113
- "dangerText": {
114
- "value": "{colors.error.800}"
115
- }
17
+ "neutralBg": "{colors.neutral.100}",
18
+ "neutralBgHover": "{colors.neutral.200}",
19
+ "neutralText": "{colors.neutral.700}",
20
+ "infoBg": "{colors.info.100}",
21
+ "infoBgHover": "{colors.info.200}",
22
+ "infoText": "{colors.info.700}",
23
+ "successBg": "{colors.success.100}",
24
+ "successBgHover": "{colors.success.200}",
25
+ "successText": "{colors.success.800}",
26
+ "warningBg": "{colors.warning.100}",
27
+ "warningBgHover": "{colors.warning.200}",
28
+ "warningText": "{colors.warning.800}",
29
+ "dangerBg": "{colors.error.100}",
30
+ "dangerBgHover": "{colors.error.200}",
31
+ "dangerText": "{colors.error.800}"
116
32
  },
117
33
  "iconBox": {
118
- "bg": {
119
- "value": "{colors.white}",
120
- "metadata": {
121
- "pair": "component.iconBox.iconDefault"
122
- }
123
- },
124
- "border": {
125
- "value": "{colors.neutral.200}"
126
- },
127
- "iconDefault": {
128
- "value": "{colors.info.600}",
129
- "metadata": {
130
- "pair": "component.iconBox.bg"
131
- }
132
- },
133
- "iconSuccess": {
134
- "value": "{colors.success.600}"
135
- },
136
- "iconWarning": {
137
- "value": "{colors.warning.600}"
138
- },
139
- "iconDanger": {
140
- "value": "{colors.error.600}"
141
- }
34
+ "bg": "{colors.white}",
35
+ "border": "{colors.neutral.200}",
36
+ "iconDefault": "{colors.info.600}",
37
+ "iconSuccess": "{colors.success.600}",
38
+ "iconWarning": "{colors.warning.600}",
39
+ "iconDanger": "{colors.error.600}"
142
40
  },
143
41
  "testimonial": {
144
- "bg": {
145
- "value": "{colors.white}",
146
- "metadata": {
147
- "pair": "component.testimonial.text"
148
- }
149
- },
150
- "border": {
151
- "value": "{colors.neutral.200}"
152
- },
153
- "text": {
154
- "value": "{colors.neutral.700}",
155
- "metadata": {
156
- "pair": "component.testimonial.bg"
157
- }
158
- },
159
- "authorName": {
160
- "value": "{colors.neutral.900}",
161
- "metadata": {
162
- "pair": "component.testimonial.bg"
163
- }
164
- },
165
- "authorTitle": {
166
- "value": "{colors.neutral.500}",
167
- "metadata": {
168
- "pair": "component.testimonial.bg"
169
- }
170
- },
171
- "quoteMark": {
172
- "value": "{colors.neutral.300}"
173
- }
42
+ "bg": "{colors.white}",
43
+ "bgHover": "{colors.neutral.50}",
44
+ "border": "{colors.neutral.200}",
45
+ "text": "{colors.neutral.700}",
46
+ "authorName": "{colors.neutral.900}",
47
+ "authorTitle": "{colors.neutral.500}",
48
+ "quoteMark": "{colors.neutral.500}"
174
49
  },
175
50
  "pricingCard": {
176
- "bg": {
177
- "value": "{colors.white}",
178
- "metadata": {
179
- "pair": "component.pricingCard.price"
180
- }
181
- },
182
- "border": {
183
- "value": "{colors.neutral.200}",
184
- "metadata": {}
185
- },
186
- "featuredBg": {
187
- "value": "{colors.info.600}",
188
- "metadata": {
189
- "pair": "component.pricingCard.featuredText"
190
- }
191
- },
192
- "featuredText": {
193
- "value": "{colors.white}",
194
- "metadata": {}
195
- },
196
- "featuredBadgeBg": {
197
- "value": "{colors.warning.500}",
198
- "metadata": {
199
- "pair": "component.pricingCard.featuredBadgeText"
200
- }
201
- },
202
- "featuredBadgeText": {
203
- "value": "{colors.neutral.900}",
204
- "metadata": {}
205
- },
206
- "price": {
207
- "value": "{colors.neutral.900}",
208
- "metadata": {
209
- "pair": "component.pricingCard.bg"
210
- }
211
- },
212
- "priceDescription": {
213
- "value": "{colors.neutral.500}",
214
- "metadata": {
215
- "pair": "component.pricingCard.bg"
216
- }
217
- }
51
+ "bg": "{colors.white}",
52
+ "bgHover": "{colors.neutral.50}",
53
+ "border": "{colors.neutral.200}",
54
+ "featuredBg": "{colors.info.600}",
55
+ "featuredText": "{colors.white}",
56
+ "featuredBadgeBg": "{colors.warning.500}",
57
+ "featuredBadgeText": "{colors.neutral.900}",
58
+ "price": "{colors.neutral.900}",
59
+ "priceDescription": "{colors.neutral.500}"
218
60
  },
219
61
  "rating": {
220
- "starFilled": {
221
- "value": "{colors.warning.500}"
222
- },
223
- "starEmpty": {
224
- "value": "{colors.neutral.200}"
225
- },
226
- "text": {
227
- "value": "{colors.neutral.500}",
228
- "metadata": {
229
- "pair": "surface.card"
230
- }
231
- }
62
+ "starFilled": "{colors.warning.500}",
63
+ "starEmpty": "{colors.neutral.200}",
64
+ "text": "{colors.neutral.500}"
232
65
  }
233
66
  },
234
67
  "buttons": {
235
68
  "primary": {
236
- "bg": {
237
- "value": "{colors.info.600}",
238
- "metadata": {
239
- "pair": "buttons.primary.text"
240
- }
241
- },
242
- "bgHover": {
243
- "value": "{colors.info.700}",
244
- "metadata": {
245
- "pair": "buttons.primary.text"
246
- }
247
- },
248
- "bgActive": {
249
- "value": "{colors.info.800}",
250
- "metadata": {
251
- "pair": "buttons.primary.text"
252
- }
253
- },
254
- "bgDisabled": {
255
- "value": "{colors.neutral.200}"
256
- },
257
- "text": {
258
- "value": "{colors.white}"
259
- },
260
- "textDisabled": {
261
- "value": "{colors.neutral.400}"
262
- },
263
- "focusRing": {
264
- "value": "{colors.info.500} / 0.4"
265
- }
69
+ "bg": "{colors.info.600}",
70
+ "bgHover": "{colors.info.700}",
71
+ "bgActive": "{colors.info.800}",
72
+ "bgDisabled": "{colors.neutral.200}",
73
+ "text": "{colors.white}",
74
+ "textDisabled": "{colors.neutral.400}",
75
+ "focusRing": "{colors.info.500} / 0.4",
76
+ "focusVisible": "{colors.info.500} / 0.4"
266
77
  },
267
78
  "secondary": {
268
- "bg": {
269
- "value": "{colors.white}",
270
- "metadata": {
271
- "pair": "buttons.secondary.text"
272
- }
273
- },
274
- "bgHover": {
275
- "value": "{colors.neutral.50}",
276
- "metadata": {
277
- "pair": "buttons.secondary.text"
278
- }
279
- },
280
- "bgActive": {
281
- "value": "{colors.neutral.100}",
282
- "metadata": {
283
- "pair": "buttons.secondary.text"
284
- }
285
- },
286
- "bgDisabled": {
287
- "value": "{colors.neutral.50}"
288
- },
289
- "text": {
290
- "value": "{colors.info.700}"
291
- },
292
- "textDisabled": {
293
- "value": "{colors.neutral.400}"
294
- },
295
- "border": {
296
- "value": "{colors.info.700}"
297
- },
298
- "borderDisabled": {
299
- "value": "{colors.neutral.200}"
300
- },
301
- "focusRing": {
302
- "value": "{colors.info.500} / 0.4"
303
- }
79
+ "bg": "{colors.white}",
80
+ "bgHover": "{colors.neutral.50}",
81
+ "bgActive": "{colors.neutral.100}",
82
+ "bgDisabled": "{colors.neutral.50}",
83
+ "text": "{colors.info.700}",
84
+ "textDisabled": "{colors.neutral.400}",
85
+ "border": "{colors.info.700}",
86
+ "borderDisabled": "{colors.neutral.200}",
87
+ "focusRing": "{colors.info.500} / 0.4",
88
+ "focusVisible": "{colors.info.500} / 0.4"
304
89
  },
305
90
  "ghost": {
306
- "bg": {
307
- "value": "transparent"
308
- },
309
- "bgHover": {
310
- "value": "{colors.info.50}",
311
- "metadata": {
312
- "pair": "buttons.ghost.text"
313
- }
314
- },
315
- "bgActive": {
316
- "value": "{colors.info.100}",
317
- "metadata": {
318
- "pair": "buttons.ghost.text"
319
- }
320
- },
321
- "bgDisabled": {
322
- "value": "transparent"
323
- },
324
- "text": {
325
- "value": "{colors.info.700}"
326
- },
327
- "textDisabled": {
328
- "value": "{colors.neutral.400}"
329
- },
330
- "focusRing": {
331
- "value": "{colors.info.500} / 0.4"
332
- }
91
+ "bg": "transparent",
92
+ "bgHover": "{colors.info.50}",
93
+ "bgActive": "{colors.info.100}",
94
+ "bgDisabled": "transparent",
95
+ "text": "{colors.info.700}",
96
+ "textDisabled": "{colors.neutral.400}",
97
+ "focusRing": "{colors.info.500} / 0.4",
98
+ "focusVisible": "{colors.info.500} / 0.4"
333
99
  },
334
100
  "danger": {
335
- "bg": {
336
- "value": "{colors.error.600}",
337
- "metadata": {
338
- "pair": "buttons.danger.text"
339
- }
340
- },
341
- "bgHover": {
342
- "value": "{colors.error.700}",
343
- "metadata": {
344
- "pair": "buttons.danger.text"
345
- }
346
- },
347
- "bgActive": {
348
- "value": "{colors.error.800}",
349
- "metadata": {
350
- "pair": "buttons.danger.text"
351
- }
352
- },
353
- "bgDisabled": {
354
- "value": "{colors.error.200}"
355
- },
356
- "text": {
357
- "value": "{colors.white}"
358
- },
359
- "textDisabled": {
360
- "value": "{colors.neutral.400}"
361
- },
362
- "focusRing": {
363
- "value": "{colors.error.500} / 0.4"
364
- }
101
+ "bg": "{colors.error.600}",
102
+ "bgHover": "{colors.error.700}",
103
+ "bgActive": "{colors.error.800}",
104
+ "bgDisabled": "{colors.error.200}",
105
+ "text": "{colors.white}",
106
+ "textDisabled": "{colors.neutral.400}",
107
+ "focusRing": "{colors.error.500} / 0.4"
365
108
  },
366
109
  "success": {
367
- "bg": {
368
- "value": "{colors.success.700}",
369
- "metadata": {
370
- "pair": "buttons.success.text"
371
- }
372
- },
373
- "bgHover": {
374
- "value": "{colors.success.800}",
375
- "metadata": {
376
- "pair": "buttons.success.text"
377
- }
378
- },
379
- "bgActive": {
380
- "value": "{colors.success.900}",
381
- "metadata": {
382
- "pair": "buttons.success.text"
383
- }
384
- },
385
- "bgDisabled": {
386
- "value": "{colors.success.200}"
387
- },
388
- "text": {
389
- "value": "{colors.white}"
390
- },
391
- "textDisabled": {
392
- "value": "{colors.neutral.400}"
393
- },
394
- "focusRing": {
395
- "value": "{colors.success.500} / 0.4"
396
- }
110
+ "bg": "{colors.success.700}",
111
+ "bgHover": "{colors.success.800}",
112
+ "bgActive": "{colors.success.900}",
113
+ "bgDisabled": "{colors.success.200}",
114
+ "text": "{colors.white}",
115
+ "textDisabled": "{colors.neutral.400}",
116
+ "focusRing": "{colors.success.500} / 0.4"
397
117
  },
398
118
  "cta": {
399
- "bg": {
400
- "value": "{colors.brand.600}",
401
- "metadata": {
402
- "pair": "buttons.cta.text"
403
- }
404
- },
405
- "bgHover": {
406
- "value": "{colors.brand.700}",
407
- "metadata": {
408
- "pair": "buttons.cta.text"
409
- }
410
- },
411
- "bgActive": {
412
- "value": "{colors.brand.800}",
413
- "metadata": {
414
- "pair": "buttons.cta.text"
415
- }
416
- },
417
- "bgDisabled": {
418
- "value": "{colors.brand.200}"
419
- },
420
- "text": {
421
- "value": "{colors.white}"
422
- },
423
- "textDisabled": {
424
- "value": "{colors.neutral.400}"
425
- },
426
- "shadow": {
427
- "value": "0 4px 14px 0 {colors.brand.500} / 0.39"
428
- },
429
- "focusRing": {
430
- "value": "{colors.brand.500} / 0.4"
431
- }
119
+ "bg": "{colors.brand.600}",
120
+ "bgHover": "{colors.brand.700}",
121
+ "bgActive": "{colors.brand.800}",
122
+ "bgDisabled": "{colors.brand.200}",
123
+ "text": "{colors.white}",
124
+ "textDisabled": "{colors.neutral.400}",
125
+ "shadow": "0 4px 14px 0 {colors.brand.500} / 0.39",
126
+ "focusRing": "{colors.brand.500} / 0.4"
432
127
  },
433
128
  "accent": {
434
- "bg": {
435
- "value": "{colors.accent.600}",
436
- "metadata": {
437
- "pair": "buttons.accent.text"
438
- }
439
- },
440
- "bgHover": {
441
- "value": "{colors.accent.700}",
442
- "metadata": {
443
- "pair": "buttons.accent.text"
444
- }
445
- },
446
- "bgActive": {
447
- "value": "{colors.accent.800}",
448
- "metadata": {
449
- "pair": "buttons.accent.text"
450
- }
451
- },
452
- "bgDisabled": {
453
- "value": "{colors.accent.200}"
454
- },
455
- "text": {
456
- "value": "{colors.white}"
457
- },
458
- "textDisabled": {
459
- "value": "{colors.neutral.400}"
460
- },
461
- "focusRing": {
462
- "value": "{colors.accent.500} / 0.4"
463
- }
129
+ "bg": "{colors.accent.600}",
130
+ "bgHover": "{colors.accent.700}",
131
+ "bgActive": "{colors.accent.800}",
132
+ "bgDisabled": "{colors.accent.200}",
133
+ "text": "{colors.white}",
134
+ "textDisabled": "{colors.neutral.400}",
135
+ "focusRing": "{colors.accent.500} / 0.4",
136
+ "focusVisible": "{colors.accent.500} / 0.4"
464
137
  }
465
138
  },
466
139
  "forms": {
467
140
  "default": {
468
- "bg": {
469
- "value": "{colors.white}"
470
- },
471
- "border": {
472
- "value": "{colors.neutral.300}"
473
- },
474
- "text": {
475
- "value": "{colors.neutral.900}"
476
- },
477
- "placeholder": {
478
- "value": "{colors.neutral.500}",
479
- "metadata": {
480
- "pair": "forms.default.bg"
481
- }
482
- }
141
+ "bg": "{colors.white}",
142
+ "border": "{colors.neutral.300}",
143
+ "text": "{colors.neutral.900}",
144
+ "placeholder": "{colors.neutral.500}"
483
145
  },
484
146
  "hover": {
485
- "border": {
486
- "value": "{colors.info.500}"
487
- }
147
+ "border": "{colors.info.500}"
488
148
  },
489
149
  "focus": {
490
- "border": {
491
- "value": "{colors.info.500}"
492
- },
493
- "ring": {
494
- "value": "{colors.info.500}"
495
- }
150
+ "border": "{colors.info.500}",
151
+ "ring": "{colors.info.500}"
152
+ },
153
+ "focusVisible": {
154
+ "border": "{colors.info.500}",
155
+ "ring": "{colors.info.500}"
496
156
  },
497
157
  "valid": {
498
- "border": {
499
- "value": "{colors.success.500}"
500
- },
501
- "bg": {
502
- "value": "{colors.success.50}",
503
- "metadata": {
504
- "pair": "forms.valid.text"
505
- }
506
- },
507
- "text": {
508
- "value": "{colors.success.700}"
509
- }
158
+ "border": "{colors.success.500}",
159
+ "bg": "{colors.success.50}",
160
+ "text": "{colors.success.700}"
510
161
  },
511
162
  "invalid": {
512
- "border": {
513
- "value": "{colors.error.500}"
514
- },
515
- "bg": {
516
- "value": "{colors.error.50}",
517
- "metadata": {
518
- "pair": "forms.invalid.text"
519
- }
520
- },
521
- "text": {
522
- "value": "{colors.error.700}"
523
- }
163
+ "border": "{colors.error.500}",
164
+ "bg": "{colors.error.50}",
165
+ "text": "{colors.error.700}"
524
166
  },
525
167
  "disabled": {
526
- "bg": {
527
- "value": "{colors.neutral.50}"
528
- },
529
- "border": {
530
- "value": "{colors.neutral.200}"
531
- },
532
- "text": {
533
- "value": "{colors.neutral.400}"
534
- }
168
+ "bg": "{colors.neutral.50}",
169
+ "border": "{colors.neutral.200}",
170
+ "text": "{colors.neutral.400}"
535
171
  }
536
172
  },
537
173
  "modes": {
538
174
  "default": {
539
175
  "surface": {
540
- "page": {
541
- "value": "{colors.neutral.50}",
542
- "metadata": {
543
- "pair": "modes.default.text.onPage.default"
544
- }
545
- },
546
- "card": {
547
- "value": "{colors.white}",
548
- "metadata": {
549
- "pair": "modes.default.text.onSurface.default"
550
- }
551
- },
552
- "input": {
553
- "value": "{colors.white}",
554
- "metadata": {
555
- "pair": "modes.default.text.onSurface.default"
556
- }
557
- },
558
- "overlay": {
559
- "value": "{colors.neutral.900} / 0.6"
560
- },
561
- "alternate": {
562
- "value": "{colors.neutral.100}",
563
- "metadata": {
564
- "pair": "modes.default.text.onPage.default"
565
- }
566
- },
567
- "hero": {
568
- "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
569
- }
176
+ "page": "{colors.neutral.50}",
177
+ "card": "{colors.white}",
178
+ "input": "{colors.white}",
179
+ "overlay": "{colors.neutral.900} / 0.6",
180
+ "alternate": "{colors.neutral.100}",
181
+ "hero": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
570
182
  },
571
183
  "text": {
572
184
  "onPage": {
573
- "default": {
574
- "value": "{colors.neutral.900}",
575
- "metadata": {
576
- "pair": "modes.default.surface.page"
577
- }
578
- },
579
- "muted": {
580
- "value": "{colors.neutral.600}",
581
- "metadata": {
582
- "pair": "modes.default.surface.page"
583
- }
584
- },
585
- "subtle": {
586
- "value": "{colors.neutral.500}",
587
- "metadata": {
588
- "pair": "modes.default.surface.page"
589
- }
590
- },
591
- "meta": {
592
- "value": "{colors.neutral.500}",
593
- "metadata": {
594
- "pair": "modes.default.surface.page"
595
- }
596
- },
597
- "brand": {
598
- "value": "{colors.brand.600}",
599
- "metadata": {
600
- "pair": "modes.default.surface.page"
601
- }
602
- }
185
+ "default": "{colors.neutral.900}",
186
+ "muted": "{colors.neutral.600}",
187
+ "subtle": "{colors.neutral.500}",
188
+ "meta": "{colors.neutral.500}",
189
+ "brand": "{colors.brand.600}"
603
190
  },
604
191
  "onSurface": {
605
- "default": {
606
- "value": "{colors.neutral.900}",
607
- "metadata": {
608
- "pair": "modes.default.surface.card"
609
- }
610
- },
611
- "muted": {
612
- "value": "{colors.neutral.600}",
613
- "metadata": {
614
- "pair": "modes.default.surface.card"
615
- }
616
- },
617
- "subtle": {
618
- "value": "{colors.neutral.500}",
619
- "metadata": {
620
- "pair": "modes.default.surface.card"
621
- }
622
- },
623
- "meta": {
624
- "value": "{colors.neutral.500}",
625
- "metadata": {
626
- "pair": "modes.default.surface.card"
627
- }
628
- },
629
- "brand": {
630
- "value": "{colors.brand.600}",
631
- "metadata": {
632
- "pair": "modes.default.surface.card"
633
- }
634
- }
192
+ "default": "{colors.neutral.900}",
193
+ "muted": "{colors.neutral.600}",
194
+ "subtle": "{colors.neutral.500}",
195
+ "meta": "{colors.neutral.500}",
196
+ "brand": "{colors.brand.600}"
635
197
  }
636
198
  },
637
199
  "component": {
638
200
  "card": {
639
- "text": {
640
- "value": "{colors.neutral.900}",
641
- "metadata": {
642
- "pair": "modes.default.surface.card"
643
- }
644
- },
645
- "textMuted": {
646
- "value": "{colors.neutral.500}",
647
- "metadata": {
648
- "pair": "modes.default.surface.card"
649
- }
650
- }
201
+ "text": "{colors.neutral.900}",
202
+ "textMuted": "{colors.neutral.600}"
651
203
  },
652
204
  "input": {
653
- "text": {
654
- "value": "{colors.neutral.900}",
655
- "metadata": {
656
- "pair": "modes.default.surface.input"
657
- }
658
- },
659
- "placeholder": {
660
- "value": "{colors.neutral.500}",
661
- "metadata": {
662
- "pair": "modes.default.surface.input"
663
- }
664
- }
205
+ "text": "{colors.neutral.900}",
206
+ "placeholder": "{colors.neutral.500}"
665
207
  },
666
208
  "button": {
667
- "textDefault": {
668
- "value": "{colors.neutral.900}"
669
- },
670
- "textOnPrimary": {
671
- "value": "{colors.white}"
672
- }
209
+ "textDefault": "{colors.neutral.900}",
210
+ "textOnPrimary": "{colors.white}"
673
211
  },
674
212
  "badge": {
675
- "neutralBg": {
676
- "value": "{colors.neutral.100}",
677
- "metadata": {
678
- "pair": "modes.default.component.badge.neutralText"
679
- }
680
- },
681
- "neutralBgHover": {
682
- "value": "{colors.neutral.200}",
683
- "metadata": {
684
- "pair": "modes.default.component.badge.neutralText"
685
- }
686
- },
687
- "neutralText": {
688
- "value": "{colors.neutral.700}",
689
- "metadata": {}
690
- },
691
- "infoBg": {
692
- "value": "{colors.info.100}",
693
- "metadata": {
694
- "pair": "modes.default.component.badge.infoText"
695
- }
696
- },
697
- "infoBgHover": {
698
- "value": "{colors.info.200}",
699
- "metadata": {
700
- "pair": "modes.default.component.badge.infoText"
701
- }
702
- },
703
- "infoText": {
704
- "value": "{colors.info.700}",
705
- "metadata": {}
706
- },
707
- "successBg": {
708
- "value": "{colors.success.100}",
709
- "metadata": {
710
- "pair": "modes.default.component.badge.successText"
711
- }
712
- },
713
- "successText": {
714
- "value": "{colors.success.700}",
715
- "metadata": {}
716
- },
717
- "warningBg": {
718
- "value": "{colors.warning.100}",
719
- "metadata": {
720
- "pair": "modes.default.component.badge.warningText"
721
- }
722
- },
723
- "warningText": {
724
- "value": "{colors.warning.800}",
725
- "metadata": {}
726
- },
727
- "dangerBg": {
728
- "value": "{colors.error.100}",
729
- "metadata": {
730
- "pair": "modes.default.component.badge.dangerText"
731
- }
732
- },
733
- "dangerText": {
734
- "value": "{colors.error.700}",
735
- "metadata": {}
736
- }
213
+ "neutralBg": "{colors.neutral.100}",
214
+ "neutralBgHover": "{colors.neutral.200}",
215
+ "neutralText": "{colors.neutral.700}",
216
+ "infoBg": "{colors.info.100}",
217
+ "infoBgHover": "{colors.info.200}",
218
+ "infoText": "{colors.info.700}",
219
+ "successBg": "{colors.success.100}",
220
+ "successText": "{colors.success.700}",
221
+ "warningBg": "{colors.warning.100}",
222
+ "warningText": "{colors.warning.800}",
223
+ "dangerBg": "{colors.error.100}",
224
+ "dangerText": "{colors.error.700}"
737
225
  },
738
226
  "iconBox": {
739
- "bg": {
740
- "value": "{colors.white}",
741
- "metadata": {
742
- "pair": "modes.default.component.iconBox.iconDefault"
743
- }
744
- },
745
- "border": {
746
- "value": "{colors.neutral.200}",
747
- "metadata": {}
748
- },
749
- "iconDefault": {
750
- "value": "{colors.info.600}",
751
- "metadata": {
752
- "pair": "modes.default.component.iconBox.bg"
753
- }
754
- },
755
- "iconSuccess": {
756
- "value": "{colors.success.600}",
757
- "metadata": {}
758
- },
759
- "iconWarning": {
760
- "value": "{colors.warning.600}",
761
- "metadata": {}
762
- },
763
- "iconDanger": {
764
- "value": "{colors.error.600}",
765
- "metadata": {
766
- "pair": "modes.default.component.iconBox.bg"
767
- }
768
- }
227
+ "bg": "{colors.white}",
228
+ "border": "{colors.neutral.200}",
229
+ "iconDefault": "{colors.info.600}",
230
+ "iconSuccess": "{colors.success.600}",
231
+ "iconWarning": "{colors.warning.600}",
232
+ "iconDanger": "{colors.error.600}"
769
233
  },
770
234
  "testimonial": {
771
- "bg": {
772
- "value": "{colors.white}",
773
- "metadata": {
774
- "pair": "modes.default.component.testimonial.text"
775
- }
776
- },
777
- "border": {
778
- "value": "{colors.neutral.200}",
779
- "metadata": {}
780
- },
781
- "text": {
782
- "value": "{colors.neutral.700}",
783
- "metadata": {
784
- "pair": "modes.default.component.testimonial.bg"
785
- }
786
- },
787
- "authorName": {
788
- "value": "{colors.neutral.900}",
789
- "metadata": {
790
- "pair": "modes.default.component.testimonial.bg"
791
- }
792
- },
793
- "authorTitle": {
794
- "value": "{colors.neutral.500}",
795
- "metadata": {
796
- "pair": "modes.default.component.testimonial.bg"
797
- }
798
- },
799
- "quoteMark": {
800
- "value": "{colors.neutral.300}",
801
- "metadata": {}
802
- }
235
+ "bg": "{colors.white}",
236
+ "bgHover": "{colors.neutral.50}",
237
+ "border": "{colors.neutral.200}",
238
+ "text": "{colors.neutral.700}",
239
+ "authorName": "{colors.neutral.900}",
240
+ "authorTitle": "{colors.neutral.500}",
241
+ "quoteMark": "{colors.neutral.500}"
803
242
  },
804
243
  "pricingCard": {
805
- "bg": {
806
- "value": "{colors.white}",
807
- "metadata": {
808
- "pair": "modes.default.component.pricingCard.price"
809
- }
810
- },
811
- "border": {
812
- "value": "{colors.neutral.200}",
813
- "metadata": {}
814
- },
815
- "featuredBg": {
816
- "value": "{colors.info.600}",
817
- "metadata": {
818
- "pair": "modes.default.component.pricingCard.featuredText"
819
- }
820
- },
821
- "featuredText": {
822
- "value": "{colors.white}",
823
- "metadata": {}
824
- },
825
- "featuredBadgeBg": {
826
- "value": "{colors.warning.500}",
827
- "metadata": {
828
- "pair": "modes.default.component.pricingCard.featuredBadgeText"
829
- }
830
- },
831
- "featuredBadgeText": {
832
- "value": "{colors.neutral.900}",
833
- "metadata": {}
834
- },
835
- "price": {
836
- "value": "{colors.neutral.900}",
837
- "metadata": {
838
- "pair": "modes.default.component.pricingCard.bg"
839
- }
840
- },
841
- "priceDescription": {
842
- "value": "{colors.neutral.500}",
843
- "metadata": {
844
- "pair": "modes.default.component.pricingCard.bg"
845
- }
846
- }
244
+ "bg": "{colors.white}",
245
+ "bgHover": "{colors.neutral.50}",
246
+ "border": "{colors.neutral.200}",
247
+ "featuredBg": "{colors.info.600}",
248
+ "featuredText": "{colors.white}",
249
+ "featuredBadgeBg": "{colors.warning.500}",
250
+ "featuredBadgeText": "{colors.neutral.900}",
251
+ "price": "{colors.neutral.900}",
252
+ "priceDescription": "{colors.neutral.500}"
847
253
  },
848
254
  "rating": {
849
- "starFilled": {
850
- "value": "{colors.warning.500}",
851
- "metadata": {}
852
- },
853
- "starEmpty": {
854
- "value": "{colors.neutral.200}",
855
- "metadata": {}
856
- },
857
- "text": {
858
- "value": "{colors.neutral.500}",
859
- "metadata": {
860
- "pair": "modes.default.surface.card"
861
- }
862
- }
255
+ "starFilled": "{colors.warning.500}",
256
+ "starEmpty": "{colors.neutral.200}",
257
+ "text": "{colors.neutral.500}"
863
258
  }
864
259
  }
865
260
  },
866
261
  "dark": {
867
262
  "surface": {
868
- "page": {
869
- "value": "{colors.neutral.900}",
870
- "metadata": {
871
- "pair": "modes.dark.text.onPage.default"
872
- }
873
- },
874
- "card": {
875
- "value": "{colors.neutral.800}",
876
- "metadata": {
877
- "pair": "modes.dark.text.onSurface.default"
878
- }
879
- },
880
- "input": {
881
- "value": "{colors.neutral.700}",
882
- "metadata": {
883
- "pair": "modes.dark.text.onSurface.default"
884
- }
885
- },
886
- "overlay": {
887
- "value": "{colors.neutral.800}"
888
- },
889
- "alternate": {
890
- "value": "{colors.neutral.800}",
891
- "metadata": {
892
- "pair": "modes.dark.text.onPage.default"
893
- }
894
- },
895
- "hero": {
896
- "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)"
897
- }
263
+ "page": "{colors.neutral.900}",
264
+ "card": "{colors.neutral.800}",
265
+ "input": "{colors.neutral.700}",
266
+ "overlay": "{colors.neutral.800}",
267
+ "alternate": "{colors.neutral.800}",
268
+ "hero": "linear-gradient(135deg, {colors.accent.700} 0%, {colors.accent.900} 100%)"
898
269
  },
899
270
  "text": {
900
271
  "onPage": {
901
- "default": {
902
- "value": "{colors.neutral.50}",
903
- "metadata": {
904
- "pair": "modes.dark.surface.page"
905
- }
906
- },
907
- "muted": {
908
- "value": "{colors.neutral.300}",
909
- "metadata": {
910
- "pair": "modes.dark.surface.page"
911
- }
912
- },
913
- "subtle": {
914
- "value": "{colors.neutral.400}",
915
- "metadata": {
916
- "pair": "modes.dark.surface.page"
917
- }
918
- },
919
- "meta": {
920
- "value": "{colors.neutral.400}",
921
- "metadata": {
922
- "pair": "modes.dark.surface.page"
923
- }
924
- },
925
- "brand": {
926
- "value": "{colors.brand.400}",
927
- "metadata": {
928
- "pair": "modes.dark.surface.page"
929
- }
930
- }
272
+ "default": "{colors.neutral.50}",
273
+ "muted": "{colors.neutral.300}",
274
+ "subtle": "{colors.neutral.400}",
275
+ "meta": "{colors.neutral.400}",
276
+ "brand": "{colors.brand.400}"
931
277
  },
932
278
  "onSurface": {
933
- "default": {
934
- "value": "{colors.neutral.100}",
935
- "metadata": {
936
- "pair": "modes.dark.surface.card"
937
- }
938
- },
939
- "muted": {
940
- "value": "{colors.neutral.300}",
941
- "metadata": {
942
- "pair": "modes.dark.surface.card"
943
- }
944
- },
945
- "subtle": {
946
- "value": "{colors.neutral.400}",
947
- "metadata": {
948
- "pair": "modes.dark.surface.card"
949
- }
950
- },
951
- "meta": {
952
- "value": "{colors.neutral.400}",
953
- "metadata": {
954
- "pair": "modes.dark.surface.card"
955
- }
956
- },
957
- "brand": {
958
- "value": "{colors.brand.400}",
959
- "metadata": {
960
- "pair": "modes.dark.surface.card"
961
- }
962
- }
279
+ "default": "{colors.neutral.100}",
280
+ "muted": "{colors.neutral.300}",
281
+ "subtle": "{colors.neutral.400}",
282
+ "meta": "{colors.neutral.400}",
283
+ "brand": "{colors.brand.400}"
963
284
  }
964
285
  },
965
286
  "component": {
966
287
  "card": {
967
- "text": {
968
- "value": "{colors.neutral.100}",
969
- "metadata": {
970
- "pair": "modes.dark.surface.card"
971
- }
972
- },
973
- "textMuted": {
974
- "value": "{colors.neutral.300}",
975
- "metadata": {
976
- "pair": "modes.dark.surface.card"
977
- }
978
- }
288
+ "text": "{colors.neutral.100}",
289
+ "textMuted": "{colors.neutral.300}"
979
290
  },
980
291
  "input": {
981
- "text": {
982
- "value": "{colors.neutral.100}",
983
- "metadata": {
984
- "pair": "modes.dark.surface.input"
985
- }
986
- },
987
- "placeholder": {
988
- "value": "{colors.neutral.300}",
989
- "metadata": {
990
- "pair": "modes.dark.surface.input"
991
- }
992
- }
292
+ "text": "{colors.neutral.100}",
293
+ "placeholder": "{colors.neutral.300}"
993
294
  },
994
295
  "button": {
995
- "textDefault": {
996
- "value": "{colors.neutral.100}"
997
- },
998
- "textOnPrimary": {
999
- "value": "{colors.white}"
1000
- }
296
+ "textDefault": "{colors.neutral.100}",
297
+ "textOnPrimary": "{colors.white}"
1001
298
  },
1002
299
  "badge": {
1003
- "neutralBg": {
1004
- "value": "{colors.neutral.700}",
1005
- "metadata": {
1006
- "pair": "modes.dark.component.badge.neutralText"
1007
- }
1008
- },
1009
- "neutralBgHover": {
1010
- "value": "{colors.neutral.600}",
1011
- "metadata": {
1012
- "pair": "modes.dark.component.badge.neutralText"
1013
- }
1014
- },
1015
- "neutralText": {
1016
- "value": "{colors.neutral.100}",
1017
- "metadata": {}
1018
- },
1019
- "infoBg": {
1020
- "value": "{colors.info.800}",
1021
- "metadata": {
1022
- "pair": "modes.dark.component.badge.infoText"
1023
- }
1024
- },
1025
- "infoBgHover": {
1026
- "value": "{colors.info.700}",
1027
- "metadata": {
1028
- "pair": "modes.dark.component.badge.infoText"
1029
- }
1030
- },
1031
- "infoText": {
1032
- "value": "{colors.info.100}",
1033
- "metadata": {}
1034
- },
1035
- "successBg": {
1036
- "value": "{colors.success.800}",
1037
- "metadata": {
1038
- "pair": "modes.dark.component.badge.successText"
1039
- }
1040
- },
1041
- "successBgHover": {
1042
- "value": "{colors.success.700}",
1043
- "metadata": {
1044
- "pair": "modes.dark.component.badge.successText"
1045
- }
1046
- },
1047
- "successText": {
1048
- "value": "{colors.success.100}",
1049
- "metadata": {}
1050
- },
1051
- "warningBg": {
1052
- "value": "{colors.warning.800}",
1053
- "metadata": {
1054
- "pair": "modes.dark.component.badge.warningText"
1055
- }
1056
- },
1057
- "warningBgHover": {
1058
- "value": "{colors.warning.800}",
1059
- "metadata": {
1060
- "pair": "modes.dark.component.badge.warningText"
1061
- }
1062
- },
1063
- "warningText": {
1064
- "value": "{colors.warning.100}",
1065
- "metadata": {}
1066
- },
1067
- "dangerBg": {
1068
- "value": "{colors.error.800}",
1069
- "metadata": {
1070
- "pair": "modes.dark.component.badge.dangerText"
1071
- }
1072
- },
1073
- "dangerBgHover": {
1074
- "value": "{colors.error.700}",
1075
- "metadata": {
1076
- "pair": "modes.dark.component.badge.dangerText"
1077
- }
1078
- },
1079
- "dangerText": {
1080
- "value": "{colors.error.100}",
1081
- "metadata": {}
1082
- }
300
+ "neutralBg": "{colors.neutral.700}",
301
+ "neutralBgHover": "{colors.neutral.600}",
302
+ "neutralText": "{colors.neutral.100}",
303
+ "infoBg": "{colors.info.800}",
304
+ "infoBgHover": "{colors.info.700}",
305
+ "infoText": "{colors.info.100}",
306
+ "successBg": "{colors.success.800}",
307
+ "successBgHover": "{colors.success.700}",
308
+ "successText": "{colors.success.100}",
309
+ "warningBg": "{colors.warning.800}",
310
+ "warningBgHover": "{colors.warning.800}",
311
+ "warningText": "{colors.warning.100}",
312
+ "dangerBg": "{colors.error.800}",
313
+ "dangerBgHover": "{colors.error.700}",
314
+ "dangerText": "{colors.error.100}"
1083
315
  },
1084
316
  "iconBox": {
1085
- "bg": {
1086
- "value": "{colors.neutral.800}",
1087
- "metadata": {
1088
- "pair": "modes.dark.component.iconBox.iconDefault"
1089
- }
1090
- },
1091
- "border": {
1092
- "value": "{colors.neutral.700}",
1093
- "metadata": {}
1094
- },
1095
- "iconDefault": {
1096
- "value": "{colors.info.300}",
1097
- "metadata": {
1098
- "pair": "modes.dark.component.iconBox.bg"
1099
- }
1100
- },
1101
- "iconSuccess": {
1102
- "value": "{colors.success.400}",
1103
- "metadata": {
1104
- "pair": "modes.dark.component.iconBox.bg"
1105
- }
1106
- },
1107
- "iconWarning": {
1108
- "value": "{colors.warning.400}",
1109
- "metadata": {
1110
- "pair": "modes.dark.component.iconBox.bg"
1111
- }
1112
- },
1113
- "iconDanger": {
1114
- "value": "{colors.error.400}",
1115
- "metadata": {
1116
- "pair": "modes.dark.component.iconBox.bg"
1117
- }
1118
- }
317
+ "bg": "{colors.neutral.800}",
318
+ "border": "{colors.neutral.700}",
319
+ "iconDefault": "{colors.info.400}",
320
+ "iconSuccess": "{colors.success.400}",
321
+ "iconWarning": "{colors.warning.400}",
322
+ "iconDanger": "{colors.error.400}"
1119
323
  },
1120
324
  "testimonial": {
1121
- "bg": {
1122
- "value": "{colors.neutral.800}",
1123
- "metadata": {
1124
- "pair": "modes.dark.component.testimonial.text"
1125
- }
1126
- },
1127
- "border": {
1128
- "value": "{colors.neutral.700}",
1129
- "metadata": {}
1130
- },
1131
- "text": {
1132
- "value": "{colors.neutral.200}",
1133
- "metadata": {
1134
- "pair": "modes.dark.component.testimonial.bg"
1135
- }
1136
- },
1137
- "authorName": {
1138
- "value": "{colors.neutral.100}",
1139
- "metadata": {
1140
- "pair": "modes.dark.component.testimonial.bg"
1141
- }
1142
- },
1143
- "authorTitle": {
1144
- "value": "{colors.neutral.400}",
1145
- "metadata": {
1146
- "pair": "modes.dark.component.testimonial.bg"
1147
- }
1148
- },
1149
- "quoteMark": {
1150
- "value": "{colors.neutral.600}",
1151
- "metadata": {}
1152
- }
325
+ "bg": "{colors.neutral.800}",
326
+ "bgHover": "{colors.neutral.700}",
327
+ "border": "{colors.neutral.700}",
328
+ "text": "{colors.neutral.200}",
329
+ "authorName": "{colors.neutral.100}",
330
+ "authorTitle": "{colors.neutral.400}",
331
+ "quoteMark": "{colors.neutral.400}"
1153
332
  },
1154
333
  "pricingCard": {
1155
- "bg": {
1156
- "value": "{colors.neutral.800}",
1157
- "metadata": {
1158
- "pair": "modes.dark.component.pricingCard.price"
1159
- }
1160
- },
1161
- "border": {
1162
- "value": "{colors.neutral.700}",
1163
- "metadata": {}
1164
- },
1165
- "featuredBg": {
1166
- "value": "{colors.info.600}",
1167
- "metadata": {
1168
- "pair": "modes.dark.component.pricingCard.featuredText"
1169
- }
1170
- },
1171
- "featuredText": {
1172
- "value": "{colors.white}",
1173
- "metadata": {}
1174
- },
1175
- "featuredBadgeBg": {
1176
- "value": "{colors.warning.500}",
1177
- "metadata": {
1178
- "pair": "modes.dark.component.pricingCard.featuredBadgeText"
1179
- }
1180
- },
1181
- "featuredBadgeText": {
1182
- "value": "{colors.neutral.900}",
1183
- "metadata": {}
1184
- },
1185
- "price": {
1186
- "value": "{colors.neutral.100}",
1187
- "metadata": {
1188
- "pair": "modes.dark.component.pricingCard.bg"
1189
- }
1190
- },
1191
- "priceDescription": {
1192
- "value": "{colors.neutral.400}",
1193
- "metadata": {
1194
- "pair": "modes.dark.component.pricingCard.bg"
1195
- }
1196
- }
334
+ "bg": "{colors.neutral.800}",
335
+ "bgHover": "{colors.neutral.700}",
336
+ "border": "{colors.neutral.700}",
337
+ "featuredBg": "{colors.info.600}",
338
+ "featuredText": "{colors.white}",
339
+ "featuredBadgeBg": "{colors.warning.500}",
340
+ "featuredBadgeText": "{colors.neutral.900}",
341
+ "price": "{colors.neutral.100}",
342
+ "priceDescription": "{colors.neutral.400}"
1197
343
  },
1198
344
  "rating": {
1199
- "starFilled": {
1200
- "value": "{colors.warning.400}",
1201
- "metadata": {}
1202
- },
1203
- "starEmpty": {
1204
- "value": "{colors.neutral.700}",
1205
- "metadata": {}
1206
- },
1207
- "text": {
1208
- "value": "{colors.neutral.400}",
1209
- "metadata": {
1210
- "pair": "modes.dark.surface.card"
1211
- }
1212
- }
345
+ "starFilled": "{colors.warning.400}",
346
+ "starEmpty": "{colors.neutral.700}",
347
+ "text": "{colors.neutral.400}"
1213
348
  }
1214
349
  }
1215
350
  }
@@ -1453,10 +588,6 @@ var coreTokens = {
1453
588
  "minTouchTarget": "44px",
1454
589
  "minTextSize": "16px"
1455
590
  },
1456
- "borders": {
1457
- "card": "{colors.neutral.200}",
1458
- "input": "{colors.neutral.300}"
1459
- },
1460
591
  "border": {
1461
592
  "width": {
1462
593
  "base": "1px",
@@ -1464,22 +595,10 @@ var coreTokens = {
1464
595
  }
1465
596
  },
1466
597
  "surface": {
1467
- "page": {
1468
- "value": "{colors.neutral.50}",
1469
- "description": "primary app background"
1470
- },
1471
- "card": {
1472
- "value": "{colors.white}",
1473
- "description": "containers and tiles"
1474
- },
1475
- "input": {
1476
- "value": "{colors.white}",
1477
- "description": "form inputs, textareas"
1478
- },
1479
- "overlay": {
1480
- "value": "{colors.neutral.900} / 0.6",
1481
- "description": "modals, dropdowns, flyouts"
1482
- }
598
+ "page": "{colors.neutral.50}",
599
+ "card": "{colors.white}",
600
+ "input": "{colors.white}",
601
+ "overlay": "{colors.neutral.900} / 0.6"
1483
602
  },
1484
603
  "text": {
1485
604
  "onPage": {
@@ -1530,7 +649,8 @@ var coreTokens = {
1530
649
  "xs": {
1531
650
  "size": "0.75rem",
1532
651
  "lineHeight": "1.25rem",
1533
- "weight": 400
652
+ "weight": 400,
653
+ "letterSpacing": "0.02em"
1534
654
  },
1535
655
  "sm": {
1536
656
  "size": "0.875rem",
@@ -1545,7 +665,7 @@ var coreTokens = {
1545
665
  "lg": {
1546
666
  "size": "1.25rem",
1547
667
  "lineHeight": "2rem",
1548
- "weight": 500
668
+ "weight": 600
1549
669
  },
1550
670
  "xl": {
1551
671
  "size": "1.5rem",
@@ -1555,7 +675,27 @@ var coreTokens = {
1555
675
  "2xl": {
1556
676
  "size": "1.875rem",
1557
677
  "lineHeight": "2.5rem",
1558
- "weight": 600
678
+ "weight": 700
679
+ },
680
+ "3xl": {
681
+ "size": "2.25rem",
682
+ "lineHeight": "2.75rem",
683
+ "weight": 700
684
+ },
685
+ "4xl": {
686
+ "size": "3rem",
687
+ "lineHeight": "3.5rem",
688
+ "weight": 800
689
+ },
690
+ "5xl": {
691
+ "size": "3.75rem",
692
+ "lineHeight": "4.25rem",
693
+ "weight": 800
694
+ },
695
+ "6xl": {
696
+ "size": "4.5rem",
697
+ "lineHeight": "5rem",
698
+ "weight": 900
1559
699
  }
1560
700
  },
1561
701
  "typography": {
@@ -1694,6 +834,10 @@ var createCssVariableMap = (tokens2, options = {}) => {
1694
834
  map[name] = resolveValue(tokens2, value);
1695
835
  };
1696
836
  Object.entries(baseTokens.colors).forEach(([group, scale]) => {
837
+ if (typeof scale === "string" || typeof scale === "number") {
838
+ assign(toVariableName(prefix, "color", group), scale);
839
+ return;
840
+ }
1697
841
  Object.entries(scale).forEach(([step, value]) => {
1698
842
  assign(toVariableName(prefix, "color", group, step), value);
1699
843
  });
@@ -1859,15 +1003,18 @@ var generateCssVariables = (tokens2, options = {}) => {
1859
1003
  addBase(toVariableName(prefix, "surface", "card"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "card"]), getPath(surfaceAliases, ["card"])));
1860
1004
  addBase(toVariableName(prefix, "surface", "input"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "input"]), getPath(surfaceAliases, ["input"])));
1861
1005
  addBase(toVariableName(prefix, "surface", "overlay"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"])));
1006
+ addBase(toVariableName(prefix, "surface", "alternate"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "alternate"])));
1862
1007
  addBase(toVariableName(prefix, "surface", "hero"), pickSemantic(tokens2, getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"])));
1863
1008
  addBase(toVariableName(prefix, "text", "on", "page", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "default"]), getPath(textAliases, ["onPage", "default"])));
1864
1009
  addBase(toVariableName(prefix, "text", "on", "page", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "muted"]), getPath(textAliases, ["onPage", "muted"])));
1865
1010
  addBase(toVariableName(prefix, "text", "on", "page", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "subtle"]), getPath(textAliases, ["onPage", "subtle"])));
1866
1011
  addBase(toVariableName(prefix, "text", "on", "page", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "meta"]), getPath(textAliases, ["onPage", "meta"])));
1012
+ addBase(toVariableName(prefix, "text", "on", "page", "brand"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onPage", "brand"]), getPath(textAliases, ["onPage", "brand"])));
1867
1013
  addBase(toVariableName(prefix, "text", "on", "surface", "default"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "default"]), getPath(textAliases, ["onSurface", "default"])));
1868
1014
  addBase(toVariableName(prefix, "text", "on", "surface", "muted"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "muted"]), getPath(textAliases, ["onSurface", "muted"])));
1869
1015
  addBase(toVariableName(prefix, "text", "on", "surface", "subtle"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "subtle"]), getPath(textAliases, ["onSurface", "subtle"])));
1870
1016
  addBase(toVariableName(prefix, "text", "on", "surface", "meta"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "meta"]), getPath(textAliases, ["onSurface", "meta"])));
1017
+ addBase(toVariableName(prefix, "text", "on", "surface", "brand"), pickSemantic(tokens2, getPath(defaultMode, ["text", "onSurface", "brand"]), getPath(textAliases, ["onSurface", "brand"])));
1871
1018
  addBase(toVariableName(prefix, "component", "card", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "text"]), getPath(componentAliases, ["card", "text"])));
1872
1019
  addBase(toVariableName(prefix, "component", "card", "text-muted"), pickSemantic(tokens2, getPath(defaultMode, ["component", "card", "textMuted"]), getPath(componentAliases, ["card", "textMuted"])));
1873
1020
  addBase(toVariableName(prefix, "component", "input", "text"), pickSemantic(tokens2, getPath(defaultMode, ["component", "input", "text"]), getPath(componentAliases, ["input", "text"])));
@@ -1911,6 +1058,10 @@ var generateCssVariables = (tokens2, options = {}) => {
1911
1058
  toVariableName(prefix, "surface", "overlay"),
1912
1059
  pickSemantic(tokens2, getPath(darkMode, ["surface", "overlay"]), getPath(defaultMode, ["surface", "overlay"]), getPath(surfaceAliases, ["overlay"]))
1913
1060
  );
1061
+ addDark(
1062
+ toVariableName(prefix, "surface", "alternate"),
1063
+ pickSemantic(tokens2, getPath(darkMode, ["surface", "alternate"]), getPath(defaultMode, ["surface", "alternate"]))
1064
+ );
1914
1065
  addDark(
1915
1066
  toVariableName(prefix, "surface", "hero"),
1916
1067
  pickSemantic(tokens2, getPath(darkMode, ["surface", "hero"]), getPath(defaultMode, ["surface", "hero"]), getPath(surfaceAliases, ["hero"]))
@@ -1951,6 +1102,15 @@ var generateCssVariables = (tokens2, options = {}) => {
1951
1102
  getPath(textAliases, ["onPage", "meta"])
1952
1103
  )
1953
1104
  );
1105
+ addDark(
1106
+ toVariableName(prefix, "text", "on", "page", "brand"),
1107
+ pickSemantic(
1108
+ tokens2,
1109
+ getPath(darkMode, ["text", "onPage", "brand"]),
1110
+ getPath(defaultMode, ["text", "onPage", "brand"]),
1111
+ getPath(textAliases, ["onPage", "brand"])
1112
+ )
1113
+ );
1954
1114
  addDark(
1955
1115
  toVariableName(prefix, "text", "on", "surface", "default"),
1956
1116
  pickSemantic(
@@ -1987,6 +1147,15 @@ var generateCssVariables = (tokens2, options = {}) => {
1987
1147
  getPath(textAliases, ["onSurface", "meta"])
1988
1148
  )
1989
1149
  );
1150
+ addDark(
1151
+ toVariableName(prefix, "text", "on", "surface", "brand"),
1152
+ pickSemantic(
1153
+ tokens2,
1154
+ getPath(darkMode, ["text", "onSurface", "brand"]),
1155
+ getPath(defaultMode, ["text", "onSurface", "brand"]),
1156
+ getPath(textAliases, ["onSurface", "brand"])
1157
+ )
1158
+ );
1990
1159
  addDark(
1991
1160
  toVariableName(prefix, "component", "card", "text"),
1992
1161
  pickSemantic(