@amsterdam/design-system-tokens 0.1.8 → 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 (35) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/_variables.scss +218 -154
  3. package/dist/index.css +218 -154
  4. package/dist/index.d.ts +200 -136
  5. package/dist/index.js +205 -141
  6. package/dist/index.json +204 -140
  7. package/dist/index.tokens.json +336 -269
  8. package/dist/root.css +218 -154
  9. package/dist/tokens.d.ts +324 -257
  10. package/dist/tokens.js +3343 -1864
  11. package/dist/variables.less +218 -154
  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 +6 -5
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +2 -2
  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/ordered-list.tokens.json +6 -5
  29. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  30. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  31. package/src/components/amsterdam/pagination.tokens.json +17 -18
  32. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  33. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  34. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  35. package/src/components/utrecht/button.tokens.json +1 -3
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 27 Nov 2023 11:07:10 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
68
+ "2": {
69
+ "font-size": DesignToken,
70
+ "line-height": DesignToken
71
71
  },
72
- "wide": {
73
- "font-size": DesignToken
72
+ "3": {
73
+ "font-size": DesignToken,
74
+ "line-height": DesignToken
74
75
  },
75
- "line-height": DesignToken
76
- },
77
- "2": {
78
- "narrow": {
79
- "font-size": DesignToken
80
- },
81
- "wide": {
82
- "font-size": DesignToken
83
- },
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,12 +379,13 @@ 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
391
  "dialog": {
@@ -365,12 +396,13 @@ declare const tokens: {
365
396
  "color": DesignToken,
366
397
  "font-family": DesignToken,
367
398
  "font-weight": DesignToken,
368
- "line-height": DesignToken,
369
- "narrow": {
370
- "font-size": DesignToken
399
+ "spacious": {
400
+ "font-size": DesignToken,
401
+ "line-height": DesignToken
371
402
  },
372
- "wide": {
373
- "font-size": DesignToken
403
+ "compact": {
404
+ "font-size": DesignToken,
405
+ "line-height": DesignToken
374
406
  }
375
407
  },
376
408
  "backdrop": {
@@ -404,21 +436,22 @@ declare const tokens: {
404
436
  "color": DesignToken,
405
437
  "font-family": DesignToken,
406
438
  "font-weight": DesignToken,
407
- "line-height": DesignToken,
408
- "narrow": {
409
- "font-size": DesignToken
439
+ "spacious": {
440
+ "font-size": DesignToken,
441
+ "line-height": DesignToken
410
442
  },
411
- "wide": {
412
- "font-size": DesignToken
443
+ "compact": {
444
+ "font-size": DesignToken,
445
+ "line-height": DesignToken
413
446
  }
414
447
  },
415
448
  "grid": {
416
449
  "column-count": DesignToken,
417
- "density-low": {
450
+ "spacious": {
418
451
  "gap": DesignToken,
419
452
  "padding-inline": DesignToken
420
453
  },
421
- "density-high": {
454
+ "compact": {
422
455
  "gap": DesignToken,
423
456
  "padding-inline": DesignToken
424
457
  },
@@ -430,46 +463,46 @@ declare const tokens: {
430
463
  }
431
464
  },
432
465
  "heading": {
433
- "1": {
434
- "line-height": DesignToken,
435
- "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,
436
473
  "font-size": DesignToken
437
474
  },
438
- "wide": {
475
+ "level-2": {
476
+ "line-height": DesignToken,
439
477
  "font-size": DesignToken
440
- }
441
- },
442
- "2": {
443
- "line-height": DesignToken,
444
- "narrow": {
478
+ },
479
+ "level-3": {
480
+ "line-height": DesignToken,
445
481
  "font-size": DesignToken
446
482
  },
447
- "wide": {
483
+ "level-4": {
484
+ "line-height": DesignToken,
448
485
  "font-size": DesignToken
449
486
  }
450
487
  },
451
- "3": {
452
- "line-height": DesignToken,
453
- "narrow": {
488
+ "compact": {
489
+ "level-1": {
490
+ "line-height": DesignToken,
454
491
  "font-size": DesignToken
455
492
  },
456
- "wide": {
493
+ "level-2": {
494
+ "line-height": DesignToken,
457
495
  "font-size": DesignToken
458
- }
459
- },
460
- "4": {
461
- "line-height": DesignToken,
462
- "narrow": {
496
+ },
497
+ "level-3": {
498
+ "line-height": DesignToken,
463
499
  "font-size": DesignToken
464
500
  },
465
- "wide": {
501
+ "level-4": {
502
+ "line-height": DesignToken,
466
503
  "font-size": DesignToken
467
504
  }
468
- },
469
- "color": DesignToken,
470
- "font-family": DesignToken,
471
- "font-weight": DesignToken,
472
- "inverse-color": DesignToken
505
+ }
473
506
  },
474
507
  "highlight": {
475
508
  "blue": {
@@ -498,93 +531,106 @@ declare const tokens: {
498
531
  }
499
532
  },
500
533
  "icon": {
501
- "size-3": {
502
- "icon-size": {
503
- "narrow": DesignToken,
504
- "wide": DesignToken
534
+ "spacious": {
535
+ "size-3": {
536
+ "font-size": DesignToken,
537
+ "line-height": DesignToken
505
538
  },
506
- "container-multiplier": DesignToken
507
- },
508
- "size-4": {
509
- "icon-size": {
510
- "narrow": DesignToken,
511
- "wide": DesignToken
539
+ "size-4": {
540
+ "font-size": DesignToken,
541
+ "line-height": DesignToken
512
542
  },
513
- "container-multiplier": DesignToken
514
- },
515
- "size-5": {
516
- "icon-size": {
517
- "narrow": DesignToken,
518
- "wide": DesignToken
543
+ "size-5": {
544
+ "font-size": DesignToken,
545
+ "line-height": DesignToken
519
546
  },
520
- "container-multiplier": DesignToken
521
- },
522
- "size-6": {
523
- "icon-size": {
524
- "narrow": DesignToken,
525
- "wide": DesignToken
547
+ "size-6": {
548
+ "font-size": DesignToken,
549
+ "line-height": DesignToken
526
550
  },
527
- "container-multiplier": DesignToken
551
+ "size-7": {
552
+ "font-size": DesignToken,
553
+ "line-height": DesignToken
554
+ }
528
555
  },
529
- "size-7": {
530
- "icon-size": {
531
- "narrow": DesignToken,
532
- "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
533
564
  },
534
- "container-multiplier": DesignToken
565
+ "size-5": {
566
+ "font-size": DesignToken,
567
+ "line-height": DesignToken
568
+ },
569
+ "size-6": {
570
+ "font-size": DesignToken,
571
+ "line-height": DesignToken
572
+ },
573
+ "size-7": {
574
+ "font-size": DesignToken,
575
+ "line-height": DesignToken
576
+ }
535
577
  }
536
578
  },
537
579
  "link": {
538
580
  "color": DesignToken,
539
- "outline-offset": DesignToken,
540
581
  "font-family": DesignToken,
541
582
  "font-weight": DesignToken,
583
+ "outline-offset": DesignToken,
542
584
  "hover": {
543
585
  "color": DesignToken
544
586
  },
545
587
  "inline": {
546
- "hover": {
547
- "text-decoration": DesignToken,
548
- "text-underline-offset": DesignToken
549
- },
588
+ "text-decoration-line": DesignToken,
589
+ "text-decoration-thickness": DesignToken,
590
+ "text-underline-offset": DesignToken,
550
591
  "font-family": DesignToken,
551
592
  "font-size": DesignToken,
552
593
  "line-height": DesignToken,
553
- "text-decoration": DesignToken,
554
- "text-decoration-thickness": DesignToken,
594
+ "hover": {
595
+ "text-decoration-thickness": DesignToken,
596
+ "text-underline-offset": DesignToken
597
+ },
555
598
  "visited": {
556
599
  "color": DesignToken
557
600
  }
558
601
  },
559
602
  "in-list": {
560
603
  "gap": DesignToken,
604
+ "text-decoration-line": DesignToken,
605
+ "text-decoration-thickness": DesignToken,
606
+ "text-underline-offset": DesignToken,
561
607
  "hover": {
562
- "text-decoration": DesignToken,
563
- "text-decoration-thickness": DesignToken,
564
- "text-underline-offset": DesignToken
608
+ "text-decoration-line": DesignToken
565
609
  },
566
- "text-decoration": DesignToken,
567
- "line-height": DesignToken,
568
- "narrow": {
569
- "font-size": DesignToken
610
+ "spacious": {
611
+ "font-size": DesignToken,
612
+ "line-height": DesignToken
570
613
  },
571
- "wide": {
572
- "font-size": DesignToken
614
+ "compact": {
615
+ "font-size": DesignToken,
616
+ "line-height": DesignToken
573
617
  }
574
618
  },
575
619
  "standalone": {
576
- "text-underline-offset": DesignToken,
620
+ "text-decoration-line": DesignToken,
577
621
  "text-decoration-thickness": DesignToken,
622
+ "text-underline-offset": DesignToken,
578
623
  "hover": {
579
624
  "text-decoration-thickness": DesignToken,
580
625
  "text-underline-offset": DesignToken
581
626
  },
582
- "line-height": DesignToken,
583
- "narrow": {
584
- "font-size": DesignToken
627
+ "spacious": {
628
+ "font-size": DesignToken,
629
+ "line-height": DesignToken
585
630
  },
586
- "wide": {
587
- "font-size": DesignToken
631
+ "compact": {
632
+ "font-size": DesignToken,
633
+ "line-height": DesignToken
588
634
  }
589
635
  },
590
636
  "on-background-dark": {
@@ -623,13 +669,14 @@ declare const tokens: {
623
669
  "font-family": DesignToken,
624
670
  "font-weight": DesignToken,
625
671
  "gap": DesignToken,
626
- "line-height": DesignToken,
627
672
  "list-style-type": DesignToken,
628
- "narrow": {
629
- "font-size": DesignToken
673
+ "spacious": {
674
+ "font-size": DesignToken,
675
+ "line-height": DesignToken
630
676
  },
631
- "wide": {
632
- "font-size": DesignToken
677
+ "compact": {
678
+ "font-size": DesignToken,
679
+ "line-height": DesignToken
633
680
  },
634
681
  "item": {
635
682
  "margin-inline-start": DesignToken,
@@ -646,15 +693,16 @@ declare const tokens: {
646
693
  "page-heading": {
647
694
  "color": DesignToken,
648
695
  "font-family": DesignToken,
649
- "line-height": DesignToken,
650
- "narrow": {
651
- "font-size": DesignToken
652
- },
653
- "wide": {
654
- "font-size": DesignToken
655
- },
656
696
  "font-weight": DesignToken,
657
- "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
+ }
658
706
  },
659
707
  "page-menu": {
660
708
  "column-gap": DesignToken,
@@ -664,17 +712,21 @@ declare const tokens: {
664
712
  "font-family": DesignToken,
665
713
  "font-weight": DesignToken,
666
714
  "gap": DesignToken,
667
- "line-height": DesignToken,
668
- "text-decoration": DesignToken,
669
- "narrow": {
670
- "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
671
722
  },
672
- "wide": {
673
- "font-size": DesignToken
723
+ "compact": {
724
+ "font-size": DesignToken,
725
+ "line-height": DesignToken
674
726
  },
675
727
  "hover": {
676
728
  "color": DesignToken,
677
- "text-decoration": DesignToken
729
+ "text-decoration-line": DesignToken
678
730
  }
679
731
  }
680
732
  },
@@ -682,21 +734,26 @@ declare const tokens: {
682
734
  "color": DesignToken,
683
735
  "font-family": DesignToken,
684
736
  "font-weight": DesignToken,
685
- "line-height": DesignToken,
686
- "narrow": {
687
- "font-size": DesignToken
737
+ "spacious": {
738
+ "font-size": DesignToken,
739
+ "line-height": DesignToken
688
740
  },
689
- "wide": {
690
- "font-size": DesignToken
741
+ "compact": {
742
+ "font-size": DesignToken,
743
+ "line-height": DesignToken
691
744
  },
692
745
  "button": {
746
+ "outline-offset": DesignToken,
747
+ "text-decoration-line": DesignToken,
748
+ "text-decoration-thickness": DesignToken,
749
+ "text-underline-offset": DesignToken,
693
750
  "current": {
694
751
  "font-weight": DesignToken
695
752
  },
696
753
  "hover": {
697
- "color": DesignToken
698
- },
699
- "outline-offset": DesignToken
754
+ "color": DesignToken,
755
+ "text-decoration-line": DesignToken
756
+ }
700
757
  }
701
758
  },
702
759
  "paragraph": {
@@ -704,29 +761,32 @@ declare const tokens: {
704
761
  "font-family": DesignToken,
705
762
  "font-weight": DesignToken,
706
763
  "inverse-color": DesignToken,
707
- "line-height": DesignToken,
708
- "narrow": {
709
- "font-size": DesignToken
710
- },
711
- "wide": {
712
- "font-size": DesignToken
713
- },
714
- "small": {
715
- "line-height": DesignToken,
716
- "narrow": {
717
- "font-size": DesignToken
764
+ "spacious": {
765
+ "small": {
766
+ "font-size": DesignToken,
767
+ "line-height": DesignToken
718
768
  },
719
- "wide": {
720
- "font-size": DesignToken
769
+ "medium": {
770
+ "font-size": DesignToken,
771
+ "line-height": DesignToken
772
+ },
773
+ "large": {
774
+ "font-size": DesignToken,
775
+ "line-height": DesignToken
721
776
  }
722
777
  },
723
- "large": {
724
- "line-height": DesignToken,
725
- "narrow": {
726
- "font-size": DesignToken
778
+ "compact": {
779
+ "small": {
780
+ "font-size": DesignToken,
781
+ "line-height": DesignToken
727
782
  },
728
- "wide": {
729
- "font-size": DesignToken
783
+ "medium": {
784
+ "font-size": DesignToken,
785
+ "line-height": DesignToken
786
+ },
787
+ "large": {
788
+ "font-size": DesignToken,
789
+ "line-height": DesignToken
730
790
  }
731
791
  }
732
792
  },
@@ -763,27 +823,33 @@ declare const tokens: {
763
823
  "color": DesignToken,
764
824
  "font-family": DesignToken,
765
825
  "font-weight": DesignToken,
766
- "line-height": DesignToken,
767
- "narrow": {
768
- "font-size": DesignToken
826
+ "spacious": {
827
+ "font-size": DesignToken,
828
+ "line-height": DesignToken
769
829
  },
770
- "wide": {
771
- "font-size": DesignToken
830
+ "compact": {
831
+ "font-size": DesignToken,
832
+ "line-height": DesignToken
772
833
  }
773
834
  },
774
835
  "label": {
775
836
  "color": DesignToken,
776
837
  "font-family": DesignToken,
777
838
  "font-weight": DesignToken,
839
+ "text-decoration-line": DesignToken,
840
+ "text-decoration-thickness": DesignToken,
841
+ "text-underline-offset": DesignToken,
778
842
  "hover": {
779
- "color": DesignToken
843
+ "color": DesignToken,
844
+ "text-decoration-line": DesignToken
780
845
  },
781
- "line-height": DesignToken,
782
- "narrow": {
783
- "font-size": DesignToken
846
+ "spacious": {
847
+ "font-size": DesignToken,
848
+ "line-height": DesignToken
784
849
  },
785
- "wide": {
786
- "font-size": DesignToken
850
+ "compact": {
851
+ "font-size": DesignToken,
852
+ "line-height": DesignToken
787
853
  }
788
854
  },
789
855
  "outline-offset": DesignToken
@@ -793,13 +859,14 @@ declare const tokens: {
793
859
  "font-family": DesignToken,
794
860
  "font-weight": DesignToken,
795
861
  "gap": DesignToken,
796
- "line-height": DesignToken,
797
862
  "list-style-type": DesignToken,
798
- "narrow": {
799
- "font-size": DesignToken
863
+ "spacious": {
864
+ "font-size": DesignToken,
865
+ "line-height": DesignToken
800
866
  },
801
- "wide": {
802
- "font-size": DesignToken
867
+ "compact": {
868
+ "font-size": DesignToken,
869
+ "line-height": DesignToken
803
870
  },
804
871
  "item": {
805
872
  "margin-inline-start": DesignToken,
@@ -846,7 +913,7 @@ declare const tokens: {
846
913
  "color": DesignToken,
847
914
  "font-family": DesignToken,
848
915
  "font-size": {},
849
- "line-height": DesignToken,
916
+ "line-height": {},
850
917
  "padding-inline-start": DesignToken,
851
918
  "padding-inline-end": DesignToken,
852
919
  "padding-block-start": DesignToken,