@amsterdam/design-system-tokens 0.1.7 → 0.2.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 (37) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/_variables.scss +240 -152
  3. package/dist/index.css +240 -152
  4. package/dist/index.d.ts +222 -134
  5. package/dist/index.js +227 -139
  6. package/dist/index.json +226 -138
  7. package/dist/index.tokens.json +388 -271
  8. package/dist/root.css +240 -152
  9. package/dist/tokens.d.ts +372 -255
  10. package/dist/tokens.js +4043 -2036
  11. package/dist/variables.less +240 -152
  12. package/package.json +2 -2
  13. package/src/brand/amsterdam/typography.tokens.json +70 -84
  14. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  15. package/src/components/amsterdam/accordion.tokens.json +8 -7
  16. package/src/components/amsterdam/alert.tokens.json +6 -5
  17. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  18. package/src/components/amsterdam/breadcrumb.tokens.json +19 -34
  19. package/src/components/amsterdam/button.tokens.json +6 -4
  20. package/src/components/amsterdam/card.tokens.json +6 -2
  21. package/src/components/amsterdam/checkbox.tokens.json +7 -13
  22. package/src/components/amsterdam/dialog.tokens.json +48 -0
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +6 -6
  25. package/src/components/amsterdam/heading.tokens.json +44 -28
  26. package/src/components/amsterdam/icon.tokens.json +37 -28
  27. package/src/components/amsterdam/link.tokens.json +41 -33
  28. package/src/components/amsterdam/logo.tokens.json +10 -0
  29. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  30. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  31. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  32. package/src/components/amsterdam/pagination.tokens.json +17 -18
  33. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  34. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  35. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  36. package/src/components/utrecht/button.tokens.json +1 -3
  37. package/src/components/amsterdam/footer.tokens.json +0 -11
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Nov 2023 13:11:47 GMT
3
+ * Generated on Fri, 01 Dec 2023 15:48:43 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -55,78 +55,76 @@ declare const tokens: {
55
55
  "normal": DesignToken,
56
56
  "bold": DesignToken
57
57
  },
58
- "text-level": {
59
- "0": {
60
- "narrow": {
61
- "font-size": DesignToken
58
+ "spacious": {
59
+ "text-level": {
60
+ "0": {
61
+ "font-size": DesignToken,
62
+ "line-height": DesignToken
62
63
  },
63
- "wide": {
64
- "font-size": DesignToken
64
+ "1": {
65
+ "font-size": DesignToken,
66
+ "line-height": DesignToken
65
67
  },
66
- "line-height": DesignToken
67
- },
68
- "1": {
69
- "narrow": {
70
- "font-size": DesignToken
71
- },
72
- "wide": {
73
- "font-size": DesignToken
74
- },
75
- "line-height": DesignToken
76
- },
77
- "2": {
78
- "narrow": {
79
- "font-size": DesignToken
68
+ "2": {
69
+ "font-size": DesignToken,
70
+ "line-height": DesignToken
80
71
  },
81
- "wide": {
82
- "font-size": DesignToken
72
+ "3": {
73
+ "font-size": DesignToken,
74
+ "line-height": DesignToken
83
75
  },
84
- "line-height": DesignToken
85
- },
86
- "3": {
87
- "narrow": {
88
- "font-size": DesignToken
76
+ "4": {
77
+ "font-size": DesignToken,
78
+ "line-height": DesignToken
89
79
  },
90
- "wide": {
91
- "font-size": DesignToken
80
+ "5": {
81
+ "font-size": DesignToken,
82
+ "line-height": DesignToken
92
83
  },
93
- "line-height": DesignToken
94
- },
95
- "4": {
96
- "narrow": {
97
- "font-size": DesignToken
84
+ "6": {
85
+ "font-size": DesignToken,
86
+ "line-height": DesignToken
98
87
  },
99
- "wide": {
100
- "font-size": DesignToken
88
+ "7": {
89
+ "font-size": DesignToken,
90
+ "line-height": DesignToken
91
+ }
92
+ }
93
+ },
94
+ "compact": {
95
+ "text-level": {
96
+ "0": {
97
+ "font-size": DesignToken,
98
+ "line-height": DesignToken
101
99
  },
102
- "line-height": DesignToken
103
- },
104
- "5": {
105
- "narrow": {
106
- "font-size": DesignToken
100
+ "1": {
101
+ "font-size": DesignToken,
102
+ "line-height": DesignToken
107
103
  },
108
- "wide": {
109
- "font-size": DesignToken
104
+ "2": {
105
+ "font-size": DesignToken,
106
+ "line-height": DesignToken
110
107
  },
111
- "line-height": DesignToken
112
- },
113
- "6": {
114
- "narrow": {
115
- "font-size": DesignToken
108
+ "3": {
109
+ "font-size": DesignToken,
110
+ "line-height": DesignToken
116
111
  },
117
- "wide": {
118
- "font-size": DesignToken
112
+ "4": {
113
+ "font-size": DesignToken,
114
+ "line-height": DesignToken
119
115
  },
120
- "line-height": DesignToken
121
- },
122
- "7": {
123
- "narrow": {
124
- "font-size": DesignToken
116
+ "5": {
117
+ "font-size": DesignToken,
118
+ "line-height": DesignToken
125
119
  },
126
- "wide": {
127
- "font-size": DesignToken
120
+ "6": {
121
+ "font-size": DesignToken,
122
+ "line-height": DesignToken
128
123
  },
129
- "line-height": DesignToken
124
+ "7": {
125
+ "font-size": DesignToken,
126
+ "line-height": DesignToken
127
+ }
130
128
  }
131
129
  }
132
130
  },
@@ -138,6 +136,33 @@ declare const tokens: {
138
136
  "focus": {
139
137
  "outline-offset": DesignToken
140
138
  },
139
+ "link-appearance": {
140
+ "color": DesignToken,
141
+ "text-decoration-thickness": DesignToken,
142
+ "text-underline-offset": DesignToken,
143
+ "hover": {
144
+ "color": DesignToken
145
+ },
146
+ "on-background-dark": {
147
+ "color": DesignToken
148
+ },
149
+ "on-background-light": {
150
+ "color": DesignToken
151
+ },
152
+ "regular": {
153
+ "text-decoration-line": DesignToken,
154
+ "hover": {
155
+ "text-decoration-thickness": DesignToken,
156
+ "text-underline-offset": DesignToken
157
+ }
158
+ },
159
+ "subtle": {
160
+ "text-decoration-line": DesignToken,
161
+ "hover": {
162
+ "text-decoration-line": DesignToken
163
+ }
164
+ }
165
+ },
141
166
  "spacing": {
142
167
  "inset": {
143
168
  "sm": DesignToken,
@@ -154,15 +179,16 @@ declare const tokens: {
154
179
  },
155
180
  "font-family": DesignToken,
156
181
  "font-weight": DesignToken,
157
- "line-height": DesignToken,
158
- "narrow": {
159
- "font-size": DesignToken
160
- },
161
- "wide": {
162
- "font-size": DesignToken
163
- },
164
182
  "hover": {
165
183
  "box-shadow": DesignToken
184
+ },
185
+ "spacious": {
186
+ "font-size": DesignToken,
187
+ "line-height": DesignToken
188
+ },
189
+ "compact": {
190
+ "font-size": DesignToken,
191
+ "line-height": DesignToken
166
192
  }
167
193
  }
168
194
  },
@@ -178,12 +204,13 @@ declare const tokens: {
178
204
  "color": DesignToken,
179
205
  "font-family": DesignToken,
180
206
  "font-weight": DesignToken,
181
- "line-height": DesignToken,
182
- "narrow": {
183
- "font-size": DesignToken
207
+ "spacious": {
208
+ "font-size": DesignToken,
209
+ "line-height": DesignToken
184
210
  },
185
- "wide": {
186
- "font-size": DesignToken
211
+ "compact": {
212
+ "font-size": DesignToken,
213
+ "line-height": DesignToken
187
214
  }
188
215
  },
189
216
  "error": {
@@ -215,43 +242,49 @@ declare const tokens: {
215
242
  "font-family": DesignToken,
216
243
  "font-weight": DesignToken,
217
244
  "inverse-color": DesignToken,
218
- "line-height": DesignToken,
219
- "narrow": {
220
- "font-size": DesignToken
245
+ "spacious": {
246
+ "font-size": DesignToken,
247
+ "line-height": DesignToken
221
248
  },
222
- "wide": {
223
- "font-size": DesignToken
249
+ "compact": {
250
+ "font-size": DesignToken,
251
+ "line-height": DesignToken
224
252
  }
225
253
  },
226
254
  "breadcrumb": {
227
- "color": DesignToken,
228
255
  "font-family": DesignToken,
229
256
  "font-weight": DesignToken,
230
- "line-height": DesignToken,
231
- "narrow": {
232
- "font-size": DesignToken
233
- },
234
- "wide": {
235
- "font-size": DesignToken
257
+ "separator": {
258
+ "background-color": DesignToken
236
259
  },
237
260
  "item-link": {
261
+ "color": DesignToken,
238
262
  "outline-offset": DesignToken,
263
+ "text-decoration-line": DesignToken,
264
+ "text-decoration-thickness": DesignToken,
265
+ "text-underline-offset": DesignToken,
239
266
  "hover": {
240
267
  "color": DesignToken,
241
- "box-shadow": DesignToken
242
- },
243
- "focus": {
244
- "color": DesignToken,
245
- "text-decoration": DesignToken
268
+ "text-decoration-line": DesignToken
246
269
  }
270
+ },
271
+ "spacious": {
272
+ "font-size": DesignToken,
273
+ "line-height": DesignToken
274
+ },
275
+ "compact": {
276
+ "font-size": DesignToken,
277
+ "line-height": DesignToken
247
278
  }
248
279
  },
249
280
  "button": {
250
- "narrow": {
251
- "font-size": DesignToken
281
+ "spacious": {
282
+ "font-size": DesignToken,
283
+ "line-height": DesignToken
252
284
  },
253
- "wide": {
254
- "font-size": DesignToken
285
+ "compact": {
286
+ "font-size": DesignToken,
287
+ "line-height": DesignToken
255
288
  },
256
289
  "secondary": {
257
290
  "box-shadow": DesignToken,
@@ -274,8 +307,12 @@ declare const tokens: {
274
307
  "card": {
275
308
  "link": {
276
309
  "color": DesignToken,
310
+ "text-decoration-line": DesignToken,
311
+ "text-decoration-thickness": DesignToken,
312
+ "text-underline-offset": DesignToken,
277
313
  "hover": {
278
- "color": DesignToken
314
+ "color": DesignToken,
315
+ "text-decoration-line": DesignToken
279
316
  }
280
317
  },
281
318
  "outline-offset": DesignToken
@@ -331,14 +368,7 @@ declare const tokens: {
331
368
  "hover": {
332
369
  "background-color": DesignToken
333
370
  }
334
- },
335
- "narrow": {
336
- "size": DesignToken
337
- },
338
- "wide": {
339
- "size": DesignToken
340
- },
341
- "multiplier": DesignToken
371
+ }
342
372
  },
343
373
  "disabled": {
344
374
  "color": DesignToken
@@ -349,38 +379,79 @@ declare const tokens: {
349
379
  "color": DesignToken
350
380
  },
351
381
  "outline-offset": DesignToken,
352
- "line-height": DesignToken,
353
- "narrow": {
354
- "font-size": DesignToken
382
+ "spacious": {
383
+ "font-size": DesignToken,
384
+ "line-height": DesignToken
355
385
  },
356
- "wide": {
357
- "font-size": DesignToken
386
+ "compact": {
387
+ "font-size": DesignToken,
388
+ "line-height": DesignToken
358
389
  }
359
390
  },
360
- "footer": {
361
- "top": {
362
- "background-color": DesignToken
391
+ "dialog": {
392
+ "background-color": DesignToken,
393
+ "border": DesignToken,
394
+ "max-inline-size": DesignToken,
395
+ "title": {
396
+ "color": DesignToken,
397
+ "font-family": DesignToken,
398
+ "font-weight": DesignToken,
399
+ "spacious": {
400
+ "font-size": DesignToken,
401
+ "line-height": DesignToken
402
+ },
403
+ "compact": {
404
+ "font-size": DesignToken,
405
+ "line-height": DesignToken
406
+ }
407
+ },
408
+ "backdrop": {
409
+ "background": DesignToken
410
+ },
411
+ "close": {
412
+ "background-color": DesignToken,
413
+ "fill": DesignToken,
414
+ "hover": {
415
+ "fill": DesignToken
416
+ }
417
+ },
418
+ "form": {
419
+ "gap": DesignToken,
420
+ "padding-block": DesignToken,
421
+ "padding-inline": DesignToken,
422
+ "max-block-size": DesignToken
423
+ },
424
+ "article": {
425
+ "padding-inline-end": DesignToken
426
+ },
427
+ "header": {
428
+ "gap": DesignToken
429
+ },
430
+ "footer": {
431
+ "gap": DesignToken,
432
+ "padding-block": DesignToken
363
433
  }
364
434
  },
365
435
  "form-label": {
366
436
  "color": DesignToken,
367
437
  "font-family": DesignToken,
368
438
  "font-weight": DesignToken,
369
- "line-height": DesignToken,
370
- "narrow": {
371
- "font-size": DesignToken
439
+ "spacious": {
440
+ "font-size": DesignToken,
441
+ "line-height": DesignToken
372
442
  },
373
- "wide": {
374
- "font-size": DesignToken
443
+ "compact": {
444
+ "font-size": DesignToken,
445
+ "line-height": DesignToken
375
446
  }
376
447
  },
377
448
  "grid": {
378
449
  "column-count": DesignToken,
379
- "density-low": {
450
+ "spacious": {
380
451
  "gap": DesignToken,
381
452
  "padding-inline": DesignToken
382
453
  },
383
- "density-high": {
454
+ "compact": {
384
455
  "gap": DesignToken,
385
456
  "padding-inline": DesignToken
386
457
  },
@@ -392,46 +463,46 @@ declare const tokens: {
392
463
  }
393
464
  },
394
465
  "heading": {
395
- "1": {
396
- "line-height": DesignToken,
397
- "narrow": {
466
+ "color": DesignToken,
467
+ "font-family": DesignToken,
468
+ "font-weight": DesignToken,
469
+ "inverse-color": DesignToken,
470
+ "spacious": {
471
+ "level-1": {
472
+ "line-height": DesignToken,
398
473
  "font-size": DesignToken
399
474
  },
400
- "wide": {
475
+ "level-2": {
476
+ "line-height": DesignToken,
401
477
  "font-size": DesignToken
402
- }
403
- },
404
- "2": {
405
- "line-height": DesignToken,
406
- "narrow": {
478
+ },
479
+ "level-3": {
480
+ "line-height": DesignToken,
407
481
  "font-size": DesignToken
408
482
  },
409
- "wide": {
483
+ "level-4": {
484
+ "line-height": DesignToken,
410
485
  "font-size": DesignToken
411
486
  }
412
487
  },
413
- "3": {
414
- "line-height": DesignToken,
415
- "narrow": {
488
+ "compact": {
489
+ "level-1": {
490
+ "line-height": DesignToken,
416
491
  "font-size": DesignToken
417
492
  },
418
- "wide": {
493
+ "level-2": {
494
+ "line-height": DesignToken,
419
495
  "font-size": DesignToken
420
- }
421
- },
422
- "4": {
423
- "line-height": DesignToken,
424
- "narrow": {
496
+ },
497
+ "level-3": {
498
+ "line-height": DesignToken,
425
499
  "font-size": DesignToken
426
500
  },
427
- "wide": {
501
+ "level-4": {
502
+ "line-height": DesignToken,
428
503
  "font-size": DesignToken
429
504
  }
430
- },
431
- "color": DesignToken,
432
- "font-family": DesignToken,
433
- "font-weight": DesignToken,
434
- "inverse-color": DesignToken
505
+ }
435
506
  },
436
507
  "highlight": {
437
508
  "blue": {
@@ -460,93 +531,106 @@ declare const tokens: {
460
531
  }
461
532
  },
462
533
  "icon": {
463
- "size-3": {
464
- "icon-size": {
465
- "narrow": DesignToken,
466
- "wide": DesignToken
534
+ "spacious": {
535
+ "size-3": {
536
+ "font-size": DesignToken,
537
+ "line-height": DesignToken
467
538
  },
468
- "container-multiplier": DesignToken
469
- },
470
- "size-4": {
471
- "icon-size": {
472
- "narrow": DesignToken,
473
- "wide": DesignToken
539
+ "size-4": {
540
+ "font-size": DesignToken,
541
+ "line-height": DesignToken
474
542
  },
475
- "container-multiplier": DesignToken
476
- },
477
- "size-5": {
478
- "icon-size": {
479
- "narrow": DesignToken,
480
- "wide": DesignToken
543
+ "size-5": {
544
+ "font-size": DesignToken,
545
+ "line-height": DesignToken
481
546
  },
482
- "container-multiplier": DesignToken
483
- },
484
- "size-6": {
485
- "icon-size": {
486
- "narrow": DesignToken,
487
- "wide": DesignToken
547
+ "size-6": {
548
+ "font-size": DesignToken,
549
+ "line-height": DesignToken
488
550
  },
489
- "container-multiplier": DesignToken
551
+ "size-7": {
552
+ "font-size": DesignToken,
553
+ "line-height": DesignToken
554
+ }
490
555
  },
491
- "size-7": {
492
- "icon-size": {
493
- "narrow": DesignToken,
494
- "wide": DesignToken
556
+ "compact": {
557
+ "size-3": {
558
+ "font-size": DesignToken,
559
+ "line-height": DesignToken
560
+ },
561
+ "size-4": {
562
+ "font-size": DesignToken,
563
+ "line-height": DesignToken
564
+ },
565
+ "size-5": {
566
+ "font-size": DesignToken,
567
+ "line-height": DesignToken
568
+ },
569
+ "size-6": {
570
+ "font-size": DesignToken,
571
+ "line-height": DesignToken
495
572
  },
496
- "container-multiplier": DesignToken
573
+ "size-7": {
574
+ "font-size": DesignToken,
575
+ "line-height": DesignToken
576
+ }
497
577
  }
498
578
  },
499
579
  "link": {
500
580
  "color": DesignToken,
501
- "outline-offset": DesignToken,
502
581
  "font-family": DesignToken,
503
582
  "font-weight": DesignToken,
583
+ "outline-offset": DesignToken,
504
584
  "hover": {
505
585
  "color": DesignToken
506
586
  },
507
587
  "inline": {
508
- "hover": {
509
- "text-decoration": DesignToken,
510
- "text-underline-offset": DesignToken
511
- },
588
+ "text-decoration-line": DesignToken,
589
+ "text-decoration-thickness": DesignToken,
590
+ "text-underline-offset": DesignToken,
512
591
  "font-family": DesignToken,
513
592
  "font-size": DesignToken,
514
593
  "line-height": DesignToken,
515
- "text-decoration": DesignToken,
516
- "text-decoration-thickness": DesignToken,
594
+ "hover": {
595
+ "text-decoration-thickness": DesignToken,
596
+ "text-underline-offset": DesignToken
597
+ },
517
598
  "visited": {
518
599
  "color": DesignToken
519
600
  }
520
601
  },
521
602
  "in-list": {
522
603
  "gap": DesignToken,
604
+ "text-decoration-line": DesignToken,
605
+ "text-decoration-thickness": DesignToken,
606
+ "text-underline-offset": DesignToken,
523
607
  "hover": {
524
- "text-decoration": DesignToken,
525
- "text-decoration-thickness": DesignToken,
526
- "text-underline-offset": DesignToken
608
+ "text-decoration-line": DesignToken
527
609
  },
528
- "text-decoration": DesignToken,
529
- "line-height": DesignToken,
530
- "narrow": {
531
- "font-size": DesignToken
610
+ "spacious": {
611
+ "font-size": DesignToken,
612
+ "line-height": DesignToken
532
613
  },
533
- "wide": {
534
- "font-size": DesignToken
614
+ "compact": {
615
+ "font-size": DesignToken,
616
+ "line-height": DesignToken
535
617
  }
536
618
  },
537
619
  "standalone": {
538
- "text-underline-offset": DesignToken,
620
+ "text-decoration-line": DesignToken,
539
621
  "text-decoration-thickness": DesignToken,
622
+ "text-underline-offset": DesignToken,
540
623
  "hover": {
541
624
  "text-decoration-thickness": DesignToken,
542
625
  "text-underline-offset": DesignToken
543
626
  },
544
- "line-height": DesignToken,
545
- "narrow": {
546
- "font-size": DesignToken
627
+ "spacious": {
628
+ "font-size": DesignToken,
629
+ "line-height": DesignToken
547
630
  },
548
- "wide": {
549
- "font-size": DesignToken
631
+ "compact": {
632
+ "font-size": DesignToken,
633
+ "line-height": DesignToken
550
634
  }
551
635
  },
552
636
  "on-background-dark": {
@@ -568,18 +652,31 @@ declare const tokens: {
568
652
  }
569
653
  }
570
654
  },
655
+ "logo": {
656
+ "height": DesignToken,
657
+ "emblem": {
658
+ "color": DesignToken
659
+ },
660
+ "title": {
661
+ "color": DesignToken
662
+ },
663
+ "subsite": {
664
+ "color": DesignToken
665
+ }
666
+ },
571
667
  "ordered-list": {
572
668
  "color": DesignToken,
573
669
  "font-family": DesignToken,
574
670
  "font-weight": DesignToken,
575
671
  "gap": DesignToken,
576
- "line-height": DesignToken,
577
672
  "list-style-type": DesignToken,
578
- "narrow": {
579
- "font-size": DesignToken
673
+ "spacious": {
674
+ "font-size": DesignToken,
675
+ "line-height": DesignToken
580
676
  },
581
- "wide": {
582
- "font-size": DesignToken
677
+ "compact": {
678
+ "font-size": DesignToken,
679
+ "line-height": DesignToken
583
680
  },
584
681
  "item": {
585
682
  "margin-inline-start": DesignToken,
@@ -596,15 +693,16 @@ declare const tokens: {
596
693
  "page-heading": {
597
694
  "color": DesignToken,
598
695
  "font-family": DesignToken,
599
- "line-height": DesignToken,
600
- "narrow": {
601
- "font-size": DesignToken
602
- },
603
- "wide": {
604
- "font-size": DesignToken
605
- },
606
696
  "font-weight": DesignToken,
607
- "inverse-color": DesignToken
697
+ "inverse-color": DesignToken,
698
+ "spacious": {
699
+ "font-size": DesignToken,
700
+ "line-height": DesignToken
701
+ },
702
+ "compact": {
703
+ "font-size": DesignToken,
704
+ "line-height": DesignToken
705
+ }
608
706
  },
609
707
  "page-menu": {
610
708
  "column-gap": DesignToken,
@@ -614,17 +712,21 @@ declare const tokens: {
614
712
  "font-family": DesignToken,
615
713
  "font-weight": DesignToken,
616
714
  "gap": DesignToken,
617
- "line-height": DesignToken,
618
- "text-decoration": DesignToken,
619
- "narrow": {
620
- "font-size": DesignToken
715
+ "outline-offset": DesignToken,
716
+ "text-decoration-line": DesignToken,
717
+ "text-decoration-thickness": DesignToken,
718
+ "text-underline-offset": DesignToken,
719
+ "spacious": {
720
+ "font-size": DesignToken,
721
+ "line-height": DesignToken
621
722
  },
622
- "wide": {
623
- "font-size": DesignToken
723
+ "compact": {
724
+ "font-size": DesignToken,
725
+ "line-height": DesignToken
624
726
  },
625
727
  "hover": {
626
728
  "color": DesignToken,
627
- "text-decoration": DesignToken
729
+ "text-decoration-line": DesignToken
628
730
  }
629
731
  }
630
732
  },
@@ -632,21 +734,26 @@ declare const tokens: {
632
734
  "color": DesignToken,
633
735
  "font-family": DesignToken,
634
736
  "font-weight": DesignToken,
635
- "line-height": DesignToken,
636
- "narrow": {
637
- "font-size": DesignToken
737
+ "spacious": {
738
+ "font-size": DesignToken,
739
+ "line-height": DesignToken
638
740
  },
639
- "wide": {
640
- "font-size": DesignToken
741
+ "compact": {
742
+ "font-size": DesignToken,
743
+ "line-height": DesignToken
641
744
  },
642
745
  "button": {
746
+ "outline-offset": DesignToken,
747
+ "text-decoration-line": DesignToken,
748
+ "text-decoration-thickness": DesignToken,
749
+ "text-underline-offset": DesignToken,
643
750
  "current": {
644
751
  "font-weight": DesignToken
645
752
  },
646
753
  "hover": {
647
- "color": DesignToken
648
- },
649
- "outline-offset": DesignToken
754
+ "color": DesignToken,
755
+ "text-decoration-line": DesignToken
756
+ }
650
757
  }
651
758
  },
652
759
  "paragraph": {
@@ -654,29 +761,32 @@ declare const tokens: {
654
761
  "font-family": DesignToken,
655
762
  "font-weight": DesignToken,
656
763
  "inverse-color": DesignToken,
657
- "line-height": DesignToken,
658
- "narrow": {
659
- "font-size": DesignToken
660
- },
661
- "wide": {
662
- "font-size": DesignToken
663
- },
664
- "small": {
665
- "line-height": DesignToken,
666
- "narrow": {
667
- "font-size": DesignToken
764
+ "spacious": {
765
+ "small": {
766
+ "font-size": DesignToken,
767
+ "line-height": DesignToken
668
768
  },
669
- "wide": {
670
- "font-size": DesignToken
769
+ "medium": {
770
+ "font-size": DesignToken,
771
+ "line-height": DesignToken
772
+ },
773
+ "large": {
774
+ "font-size": DesignToken,
775
+ "line-height": DesignToken
671
776
  }
672
777
  },
673
- "large": {
674
- "line-height": DesignToken,
675
- "narrow": {
676
- "font-size": DesignToken
778
+ "compact": {
779
+ "small": {
780
+ "font-size": DesignToken,
781
+ "line-height": DesignToken
677
782
  },
678
- "wide": {
679
- "font-size": DesignToken
783
+ "medium": {
784
+ "font-size": DesignToken,
785
+ "line-height": DesignToken
786
+ },
787
+ "large": {
788
+ "font-size": DesignToken,
789
+ "line-height": DesignToken
680
790
  }
681
791
  }
682
792
  },
@@ -713,27 +823,33 @@ declare const tokens: {
713
823
  "color": DesignToken,
714
824
  "font-family": DesignToken,
715
825
  "font-weight": DesignToken,
716
- "line-height": DesignToken,
717
- "narrow": {
718
- "font-size": DesignToken
826
+ "spacious": {
827
+ "font-size": DesignToken,
828
+ "line-height": DesignToken
719
829
  },
720
- "wide": {
721
- "font-size": DesignToken
830
+ "compact": {
831
+ "font-size": DesignToken,
832
+ "line-height": DesignToken
722
833
  }
723
834
  },
724
835
  "label": {
725
836
  "color": DesignToken,
726
837
  "font-family": DesignToken,
727
838
  "font-weight": DesignToken,
839
+ "text-decoration-line": DesignToken,
840
+ "text-decoration-thickness": DesignToken,
841
+ "text-underline-offset": DesignToken,
728
842
  "hover": {
729
- "color": DesignToken
843
+ "color": DesignToken,
844
+ "text-decoration-line": DesignToken
730
845
  },
731
- "line-height": DesignToken,
732
- "narrow": {
733
- "font-size": DesignToken
846
+ "spacious": {
847
+ "font-size": DesignToken,
848
+ "line-height": DesignToken
734
849
  },
735
- "wide": {
736
- "font-size": DesignToken
850
+ "compact": {
851
+ "font-size": DesignToken,
852
+ "line-height": DesignToken
737
853
  }
738
854
  },
739
855
  "outline-offset": DesignToken
@@ -743,13 +859,14 @@ declare const tokens: {
743
859
  "font-family": DesignToken,
744
860
  "font-weight": DesignToken,
745
861
  "gap": DesignToken,
746
- "line-height": DesignToken,
747
862
  "list-style-type": DesignToken,
748
- "narrow": {
749
- "font-size": DesignToken
863
+ "spacious": {
864
+ "font-size": DesignToken,
865
+ "line-height": DesignToken
750
866
  },
751
- "wide": {
752
- "font-size": DesignToken
867
+ "compact": {
868
+ "font-size": DesignToken,
869
+ "line-height": DesignToken
753
870
  },
754
871
  "item": {
755
872
  "margin-inline-start": DesignToken,
@@ -796,7 +913,7 @@ declare const tokens: {
796
913
  "color": DesignToken,
797
914
  "font-family": DesignToken,
798
915
  "font-size": {},
799
- "line-height": DesignToken,
916
+ "line-height": {},
800
917
  "padding-inline-start": DesignToken,
801
918
  "padding-inline-end": DesignToken,
802
919
  "padding-block-start": DesignToken,