@amsterdam/design-system-tokens 3.3.0 → 4.0.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 (109) hide show
  1. package/CHANGELOG.md +61 -3
  2. package/README.md +131 -22
  3. package/build.js +11 -1
  4. package/dist/compact.css +9 -2
  5. package/dist/compact.d.ts +21 -6
  6. package/dist/compact.json +33 -18
  7. package/dist/compact.mjs +21 -13
  8. package/dist/compact.scss +9 -2
  9. package/dist/compact.theme.css +9 -2
  10. package/dist/index.css +177 -165
  11. package/dist/index.d.ts +250 -226
  12. package/dist/index.json +345 -321
  13. package/dist/index.mjs +285 -267
  14. package/dist/index.scss +177 -165
  15. package/dist/index.theme.css +177 -165
  16. package/package.json +2 -2
  17. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  18. package/src/brand/ams/border.compact.tokens.json +20 -0
  19. package/src/brand/ams/border.tokens.json +25 -0
  20. package/src/brand/ams/color.compact.tokens.json +15 -0
  21. package/src/brand/ams/color.tokens.json +37 -49
  22. package/src/brand/ams/cursor.tokens.json +9 -2
  23. package/src/brand/ams/focus.tokens.json +1 -0
  24. package/src/brand/ams/space.compact.tokens.json +16 -4
  25. package/src/brand/ams/space.tokens.json +31 -6
  26. package/src/brand/ams/typography.compact.tokens.json +36 -27
  27. package/src/brand/ams/typography.tokens.json +60 -32
  28. package/src/common/ams/inputs.tokens.json +41 -19
  29. package/src/common/ams/links.tokens.json +35 -10
  30. package/src/components/ams/accordion.tokens.json +18 -11
  31. package/src/components/ams/action-group.tokens.json +2 -2
  32. package/src/components/ams/alert.tokens.json +38 -20
  33. package/src/components/ams/avatar.tokens.json +79 -29
  34. package/src/components/ams/badge.tokens.json +60 -23
  35. package/src/components/ams/blockquote.tokens.json +14 -5
  36. package/src/components/ams/body.compact.tokens.json +12 -0
  37. package/src/components/ams/body.tokens.json +12 -0
  38. package/src/components/ams/breadcrumb.tokens.json +36 -15
  39. package/src/components/ams/button.tokens.json +74 -33
  40. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  41. package/src/components/ams/card.tokens.json +30 -17
  42. package/src/components/ams/character-count.tokens.json +14 -5
  43. package/src/components/ams/checkbox.tokens.json +106 -39
  44. package/src/components/ams/column.tokens.json +10 -10
  45. package/src/components/ams/date-input.tokens.json +56 -23
  46. package/src/components/ams/description-list.tokens.json +101 -23
  47. package/src/components/ams/dialog.tokens.json +104 -28
  48. package/src/components/ams/error-message.tokens.json +13 -6
  49. package/src/components/ams/field-set.tokens.json +40 -17
  50. package/src/components/ams/field.tokens.json +18 -7
  51. package/src/components/ams/figure.tokens.json +16 -7
  52. package/src/components/ams/file-input.tokens.json +69 -30
  53. package/src/components/ams/file-list.tokens.json +20 -11
  54. package/src/components/ams/grid.compact.tokens.json +24 -2
  55. package/src/components/ams/grid.tokens.json +77 -24
  56. package/src/components/ams/heading.tokens.json +38 -36
  57. package/src/components/ams/hint.tokens.json +6 -2
  58. package/src/components/ams/icon-button.tokens.json +46 -16
  59. package/src/components/ams/icon.tokens.json +19 -23
  60. package/src/components/ams/image-slider.tokens.json +28 -16
  61. package/src/components/ams/image.tokens.json +4 -1
  62. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  63. package/src/components/ams/label.tokens.json +18 -6
  64. package/src/components/ams/link-list.tokens.json +50 -22
  65. package/src/components/ams/link.tokens.json +38 -25
  66. package/src/components/ams/logo.tokens.json +6 -2
  67. package/src/components/ams/mark.tokens.json +3 -1
  68. package/src/components/ams/menu.tokens.json +81 -28
  69. package/src/components/ams/ordered-list.tokens.json +39 -25
  70. package/src/components/ams/page-footer.tokens.json +70 -26
  71. package/src/components/ams/page-header.compact.tokens.json +2 -1
  72. package/src/components/ams/page-header.tokens.json +128 -59
  73. package/src/components/ams/page.compact.tokens.json +12 -0
  74. package/src/components/ams/page.tokens.json +5 -3
  75. package/src/components/ams/pagination.tokens.json +37 -17
  76. package/src/components/ams/paragraph.tokens.json +22 -8
  77. package/src/components/ams/password-input.tokens.json +47 -21
  78. package/src/components/ams/progress-list.tokens.json +194 -52
  79. package/src/components/ams/radio.tokens.json +97 -36
  80. package/src/components/ams/row.tokens.json +10 -10
  81. package/src/components/ams/search-field.tokens.json +57 -24
  82. package/src/components/ams/select.tokens.json +63 -23
  83. package/src/components/ams/skip-link.tokens.json +23 -12
  84. package/src/components/ams/spotlight.tokens.json +21 -7
  85. package/src/components/ams/standalone-link.tokens.json +44 -18
  86. package/src/components/ams/switch.tokens.json +40 -10
  87. package/src/components/ams/tab-navigation.tokens.json +205 -0
  88. package/src/components/ams/table-of-contents.tokens.json +38 -20
  89. package/src/components/ams/table.tokens.json +29 -10
  90. package/src/components/ams/tabs.tokens.json +39 -20
  91. package/src/components/ams/text-area.tokens.json +49 -23
  92. package/src/components/ams/text-input.tokens.json +47 -19
  93. package/src/components/ams/time-input.tokens.json +56 -21
  94. package/src/components/ams/unordered-list.tokens.json +37 -25
  95. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  96. package/src/brand/ams/color.deprecated.tokens.json +0 -13
  97. package/src/brand/ams/typography.deprecated.compact.tokens.json +0 -26
  98. package/src/brand/ams/typography.deprecated.tokens.json +0 -40
  99. package/src/components/ams/accordion.deprecated.tokens.json +0 -39
  100. package/src/components/ams/checkbox.deprecated.tokens.json +0 -59
  101. package/src/components/ams/date-input.deprecated.tokens.json +0 -38
  102. package/src/components/ams/field-set.deprecated.tokens.json +0 -16
  103. package/src/components/ams/field.deprecated.tokens.json +0 -14
  104. package/src/components/ams/icon.deprecated.tokens.json +0 -22
  105. package/src/components/ams/menu.deprecated.tokens.json +0 -36
  106. package/src/components/ams/page-heading.deprecated.tokens.json +0 -46
  107. package/src/components/ams/standalone-link.deprecated.tokens.json +0 -38
  108. package/src/components/ams/table-of-contents.deprecated.tokens.json +0 -24
  109. package/src/components/ams/time-input.deprecated.tokens.json +0 -38
package/dist/index.d.ts CHANGED
@@ -30,22 +30,17 @@ declare const tokens: {
30
30
  m: DesignToken;
31
31
  l: DesignToken;
32
32
  xl: DesignToken;
33
+ negative: {
34
+ m: DesignToken;
35
+ xl: DesignToken;
36
+ };
33
37
  };
34
38
  };
35
39
  color: {
36
- interactive: {
37
- secondary: DesignToken;
38
- contrast: DesignToken;
40
+ background: {
41
+ body: DesignToken;
39
42
  default: DesignToken;
40
- disabled: DesignToken;
41
- hover: DesignToken;
42
- invalid: {
43
- default: DesignToken;
44
- hover: DesignToken;
45
- };
46
- inverse: DesignToken;
47
43
  };
48
- background: DesignToken;
49
44
  feedback: {
50
45
  error: DesignToken;
51
46
  info: DesignToken;
@@ -61,6 +56,17 @@ declare const tokens: {
61
56
  purple: DesignToken;
62
57
  yellow: DesignToken;
63
58
  };
59
+ interactive: {
60
+ contrast: DesignToken;
61
+ default: DesignToken;
62
+ disabled: DesignToken;
63
+ hover: DesignToken;
64
+ invalid: {
65
+ default: DesignToken;
66
+ hover: DesignToken;
67
+ };
68
+ inverse: DesignToken;
69
+ };
64
70
  progress: {
65
71
  current: DesignToken;
66
72
  completed: DesignToken;
@@ -89,59 +95,51 @@ declare const tokens: {
89
95
  "2xl": DesignToken;
90
96
  };
91
97
  typography: {
92
- heading: {
93
- "0": {
94
- "font-size": DesignToken;
95
- "line-height": DesignToken;
96
- };
97
- "1": {
98
- "font-size": DesignToken;
99
- "line-height": DesignToken;
98
+ "font-family": DesignToken;
99
+ "hyphenate-limit-chars": DesignToken;
100
+ "body-text": {
101
+ "font-size": DesignToken;
102
+ "font-weight": DesignToken;
103
+ "line-height": DesignToken;
104
+ bold: {
105
+ "font-weight": DesignToken;
100
106
  };
101
- "2": {
107
+ small: {
102
108
  "font-size": DesignToken;
103
109
  "line-height": DesignToken;
104
110
  };
105
- "3": {
111
+ large: {
106
112
  "font-size": DesignToken;
107
113
  "line-height": DesignToken;
108
114
  };
109
- "4": {
115
+ "x-large": {
110
116
  "font-size": DesignToken;
111
117
  "line-height": DesignToken;
112
118
  };
113
- "5": {
119
+ };
120
+ heading: {
121
+ "1": {
114
122
  "font-size": DesignToken;
115
123
  "line-height": DesignToken;
116
124
  };
117
- "6": {
125
+ "2": {
118
126
  "font-size": DesignToken;
119
127
  "line-height": DesignToken;
120
128
  };
121
- "font-weight": DesignToken;
122
- "text-wrap": DesignToken;
123
- };
124
- "font-family": DesignToken;
125
- "hyphenate-limit-chars": DesignToken;
126
- "body-text": {
127
- "font-size": DesignToken;
128
- "font-weight": DesignToken;
129
- "line-height": DesignToken;
130
- bold: {
131
- "font-weight": DesignToken;
132
- };
133
- small: {
129
+ "3": {
134
130
  "font-size": DesignToken;
135
131
  "line-height": DesignToken;
136
132
  };
137
- large: {
133
+ "4": {
138
134
  "font-size": DesignToken;
139
135
  "line-height": DesignToken;
140
136
  };
141
- "x-large": {
137
+ "5": {
142
138
  "font-size": DesignToken;
143
139
  "line-height": DesignToken;
144
140
  };
141
+ "font-weight": DesignToken;
142
+ "text-wrap": DesignToken;
145
143
  };
146
144
  };
147
145
  inputs: {
@@ -203,12 +201,8 @@ declare const tokens: {
203
201
  };
204
202
  };
205
203
  accordion: {
204
+ gap: DesignToken;
206
205
  button: {
207
- "font-family": DesignToken;
208
- "font-size": DesignToken;
209
- "font-weight": DesignToken;
210
- "line-height": DesignToken;
211
- "text-wrap": DesignToken;
212
206
  color: DesignToken;
213
207
  cursor: DesignToken;
214
208
  gap: DesignToken;
@@ -219,11 +213,6 @@ declare const tokens: {
219
213
  color: DesignToken;
220
214
  };
221
215
  };
222
- panel: {
223
- "padding-block": DesignToken;
224
- "padding-inline": DesignToken;
225
- };
226
- gap: DesignToken;
227
216
  };
228
217
  "action-group": {
229
218
  gap: DesignToken;
@@ -357,6 +346,9 @@ declare const tokens: {
357
346
  color: DesignToken;
358
347
  };
359
348
  };
349
+ body: {
350
+ "background-color": DesignToken;
351
+ };
360
352
  breadcrumb: {
361
353
  "font-family": DesignToken;
362
354
  "font-size": DesignToken;
@@ -490,26 +482,55 @@ declare const tokens: {
490
482
  };
491
483
  };
492
484
  checkbox: {
485
+ color: DesignToken;
486
+ cursor: DesignToken;
487
+ "font-family": DesignToken;
488
+ "font-size": DesignToken;
489
+ "font-weight": DesignToken;
490
+ gap: DesignToken;
491
+ "line-height": DesignToken;
492
+ "outline-offset": DesignToken;
493
+ "text-decoration-thickness": DesignToken;
494
+ "text-underline-offset": DesignToken;
495
+ disabled: {
496
+ cursor: DesignToken;
497
+ color: DesignToken;
498
+ };
493
499
  hover: {
494
- "text-decoration-thickness": DesignToken;
495
500
  color: DesignToken;
496
501
  "text-decoration-line": DesignToken;
497
502
  };
503
+ "checked-indicator": {
504
+ stroke: DesignToken;
505
+ };
506
+ "hover-indicator": {
507
+ hover: {
508
+ stroke: DesignToken;
509
+ };
510
+ invalid: {
511
+ hover: {
512
+ stroke: DesignToken;
513
+ };
514
+ };
515
+ };
516
+ "icon-container": {
517
+ "block-size": DesignToken;
518
+ "inline-size": DesignToken;
519
+ };
520
+ "indeterminate-indicator": {
521
+ stroke: DesignToken;
522
+ };
498
523
  rectangle: {
524
+ fill: DesignToken;
525
+ stroke: DesignToken;
499
526
  checked: {
527
+ fill: DesignToken;
500
528
  disabled: {
501
- hover: {
502
- fill: DesignToken;
503
- };
504
529
  fill: DesignToken;
505
530
  };
506
531
  hover: {
507
- "disabled-invalid": {
508
- fill: DesignToken;
509
- };
510
532
  fill: DesignToken;
511
533
  };
512
- fill: DesignToken;
513
534
  invalid: {
514
535
  fill: DesignToken;
515
536
  hover: {
@@ -517,26 +538,20 @@ declare const tokens: {
517
538
  };
518
539
  };
519
540
  };
541
+ disabled: {
542
+ stroke: DesignToken;
543
+ };
520
544
  hover: {
521
- "disabled-invalid": {
522
- stroke: DesignToken;
523
- };
524
545
  stroke: DesignToken;
525
546
  };
526
547
  indeterminate: {
548
+ fill: DesignToken;
527
549
  disabled: {
528
- hover: {
529
- fill: DesignToken;
530
- };
531
550
  fill: DesignToken;
532
551
  };
533
552
  hover: {
534
- "disabled-invalid": {
535
- fill: DesignToken;
536
- };
537
553
  fill: DesignToken;
538
554
  };
539
- fill: DesignToken;
540
555
  invalid: {
541
556
  fill: DesignToken;
542
557
  hover: {
@@ -544,11 +559,6 @@ declare const tokens: {
544
559
  };
545
560
  };
546
561
  };
547
- fill: DesignToken;
548
- stroke: DesignToken;
549
- disabled: {
550
- stroke: DesignToken;
551
- };
552
562
  invalid: {
553
563
  stroke: DesignToken;
554
564
  hover: {
@@ -556,40 +566,6 @@ declare const tokens: {
556
566
  };
557
567
  };
558
568
  };
559
- color: DesignToken;
560
- cursor: DesignToken;
561
- "font-family": DesignToken;
562
- "font-size": DesignToken;
563
- "font-weight": DesignToken;
564
- gap: DesignToken;
565
- "line-height": DesignToken;
566
- "outline-offset": DesignToken;
567
- "text-decoration-thickness": DesignToken;
568
- "text-underline-offset": DesignToken;
569
- disabled: {
570
- cursor: DesignToken;
571
- color: DesignToken;
572
- };
573
- "checked-indicator": {
574
- stroke: DesignToken;
575
- };
576
- "hover-indicator": {
577
- hover: {
578
- stroke: DesignToken;
579
- };
580
- invalid: {
581
- hover: {
582
- stroke: DesignToken;
583
- };
584
- };
585
- };
586
- "icon-container": {
587
- "block-size": DesignToken;
588
- "inline-size": DesignToken;
589
- };
590
- "indeterminate-indicator": {
591
- stroke: DesignToken;
592
- };
593
569
  };
594
570
  column: {
595
571
  gap: {
@@ -601,29 +577,6 @@ declare const tokens: {
601
577
  };
602
578
  };
603
579
  "date-input": {
604
- disabled: {
605
- "calendar-picker-indicator": {
606
- "background-image": DesignToken;
607
- };
608
- "calender-picker-indicator": {
609
- "background-image": DesignToken;
610
- };
611
- color: DesignToken;
612
- cursor: DesignToken;
613
- };
614
- hover: {
615
- "calender-picker-indicator": {
616
- "background-image": DesignToken;
617
- };
618
- "box-shadow": DesignToken;
619
- "calendar-picker-indicator": {
620
- "background-image": DesignToken;
621
- };
622
- };
623
- "calender-picker-indicator": {
624
- "background-image": DesignToken;
625
- cursor: DesignToken;
626
- };
627
580
  "background-color": DesignToken;
628
581
  "border-color": DesignToken;
629
582
  "border-style": DesignToken;
@@ -636,6 +589,16 @@ declare const tokens: {
636
589
  "outline-offset": DesignToken;
637
590
  "padding-block": DesignToken;
638
591
  "padding-inline": DesignToken;
592
+ disabled: {
593
+ color: DesignToken;
594
+ cursor: DesignToken;
595
+ };
596
+ hover: {
597
+ "box-shadow": DesignToken;
598
+ "calendar-picker-indicator": {
599
+ "background-image": DesignToken;
600
+ };
601
+ };
639
602
  invalid: {
640
603
  "border-color": DesignToken;
641
604
  hover: {
@@ -659,8 +622,11 @@ declare const tokens: {
659
622
  color: DesignToken;
660
623
  };
661
624
  term: {
625
+ "font-size": DesignToken;
662
626
  "font-weight": DesignToken;
627
+ "line-height": DesignToken;
663
628
  "margin-block-end": DesignToken;
629
+ "text-wrap": DesignToken;
664
630
  "vi-medium": {
665
631
  "margin-block-end": DesignToken;
666
632
  };
@@ -682,6 +648,18 @@ declare const tokens: {
682
648
  wide: {
683
649
  "grid-template-columns": DesignToken;
684
650
  };
651
+ "vi-medium": {
652
+ "column-gap": DesignToken;
653
+ narrow: {
654
+ "grid-template-columns": DesignToken;
655
+ };
656
+ medium: {
657
+ "grid-template-columns": DesignToken;
658
+ };
659
+ wide: {
660
+ "grid-template-columns": DesignToken;
661
+ };
662
+ };
685
663
  };
686
664
  dialog: {
687
665
  "background-color": DesignToken;
@@ -698,6 +676,10 @@ declare const tokens: {
698
676
  "inline-size": DesignToken;
699
677
  "max-block-size": DesignToken;
700
678
  };
679
+ "vi-medium": {
680
+ "inline-size": DesignToken;
681
+ "max-block-size": DesignToken;
682
+ };
701
683
  backdrop: {
702
684
  "background-color": DesignToken;
703
685
  };
@@ -709,6 +691,10 @@ declare const tokens: {
709
691
  "padding-block": DesignToken;
710
692
  "padding-inline": DesignToken;
711
693
  };
694
+ "vi-medium": {
695
+ "padding-block": DesignToken;
696
+ "padding-inline": DesignToken;
697
+ };
712
698
  };
713
699
  body: {
714
700
  "padding-block": DesignToken;
@@ -716,6 +702,9 @@ declare const tokens: {
716
702
  medium: {
717
703
  "padding-inline": DesignToken;
718
704
  };
705
+ "vi-medium": {
706
+ "padding-inline": DesignToken;
707
+ };
719
708
  };
720
709
  footer: {
721
710
  "padding-block": DesignToken;
@@ -724,6 +713,10 @@ declare const tokens: {
724
713
  "padding-block": DesignToken;
725
714
  "padding-inline": DesignToken;
726
715
  };
716
+ "vi-medium": {
717
+ "padding-block": DesignToken;
718
+ "padding-inline": DesignToken;
719
+ };
727
720
  };
728
721
  };
729
722
  "error-message": {
@@ -735,18 +728,6 @@ declare const tokens: {
735
728
  "line-height": DesignToken;
736
729
  };
737
730
  "field-set": {
738
- legend: {
739
- "margin-block-end": DesignToken;
740
- color: DesignToken;
741
- "font-family": DesignToken;
742
- "font-size": DesignToken;
743
- "font-weight": DesignToken;
744
- "line-height": DesignToken;
745
- "text-wrap": DesignToken;
746
- "in-fieldset": {
747
- "font-weight": DesignToken;
748
- };
749
- };
750
731
  child: {
751
732
  "margin-block-end": DesignToken;
752
733
  "before-error-message": {
@@ -763,6 +744,18 @@ declare const tokens: {
763
744
  "border-inline-start": DesignToken;
764
745
  "padding-inline-start": DesignToken;
765
746
  };
747
+ legend: {
748
+ "margin-block-end": DesignToken;
749
+ color: DesignToken;
750
+ "font-family": DesignToken;
751
+ "font-size": DesignToken;
752
+ "font-weight": DesignToken;
753
+ "line-height": DesignToken;
754
+ "text-wrap": DesignToken;
755
+ "in-fieldset": {
756
+ "font-weight": DesignToken;
757
+ };
758
+ };
766
759
  };
767
760
  field: {
768
761
  gap: DesignToken;
@@ -868,6 +861,19 @@ declare const tokens: {
868
861
  "column-count": DesignToken;
869
862
  "padding-inline": DesignToken;
870
863
  };
864
+ "vi-medium": {
865
+ "column-count": DesignToken;
866
+ "padding-inline": DesignToken;
867
+ };
868
+ "vi-wide": {
869
+ "column-count": DesignToken;
870
+ "padding-inline": DesignToken;
871
+ };
872
+ cell: {
873
+ "background-color": DesignToken;
874
+ "padding-block": DesignToken;
875
+ "padding-inline": DesignToken;
876
+ };
871
877
  };
872
878
  heading: {
873
879
  "1": {
@@ -890,10 +896,6 @@ declare const tokens: {
890
896
  "font-size": DesignToken;
891
897
  "line-height": DesignToken;
892
898
  };
893
- "6": {
894
- "font-size": DesignToken;
895
- "line-height": DesignToken;
896
- };
897
899
  color: DesignToken;
898
900
  "font-family": DesignToken;
899
901
  "font-weight": DesignToken;
@@ -944,10 +946,6 @@ declare const tokens: {
944
946
  };
945
947
  };
946
948
  icon: {
947
- "heading-0": {
948
- "font-size": DesignToken;
949
- "line-height": DesignToken;
950
- };
951
949
  "font-size": DesignToken;
952
950
  "line-height": DesignToken;
953
951
  small: {
@@ -978,10 +976,6 @@ declare const tokens: {
978
976
  "font-size": DesignToken;
979
977
  "line-height": DesignToken;
980
978
  };
981
- "heading-6": {
982
- "font-size": DesignToken;
983
- "line-height": DesignToken;
984
- };
985
979
  inverse: {
986
980
  color: DesignToken;
987
981
  };
@@ -1111,19 +1105,23 @@ declare const tokens: {
1111
1105
  "background-color": DesignToken;
1112
1106
  };
1113
1107
  menu: {
1108
+ "background-color": DesignToken;
1109
+ "font-family": DesignToken;
1110
+ "font-size": DesignToken;
1111
+ "font-weight": DesignToken;
1112
+ "line-height": DesignToken;
1113
+ "padding-block": DesignToken;
1114
+ wide: {
1115
+ "max-inline-size": DesignToken;
1116
+ "padding-block": DesignToken;
1117
+ "padding-inline": DesignToken;
1118
+ };
1119
+ "vi-wide": {
1120
+ "max-inline-size": DesignToken;
1121
+ "padding-block": DesignToken;
1122
+ "padding-inline": DesignToken;
1123
+ };
1114
1124
  link: {
1115
- contrast: {
1116
- color: DesignToken;
1117
- hover: {
1118
- color: DesignToken;
1119
- };
1120
- };
1121
- inverse: {
1122
- color: DesignToken;
1123
- hover: {
1124
- color: DesignToken;
1125
- };
1126
- };
1127
1125
  color: DesignToken;
1128
1126
  gap: DesignToken;
1129
1127
  "outline-offset": DesignToken;
@@ -1139,17 +1137,9 @@ declare const tokens: {
1139
1137
  wide: {
1140
1138
  gap: DesignToken;
1141
1139
  };
1142
- };
1143
- "background-color": DesignToken;
1144
- "font-family": DesignToken;
1145
- "font-size": DesignToken;
1146
- "font-weight": DesignToken;
1147
- "line-height": DesignToken;
1148
- "padding-block": DesignToken;
1149
- wide: {
1150
- "max-inline-size": DesignToken;
1151
- "padding-block": DesignToken;
1152
- "padding-inline": DesignToken;
1140
+ "vi-wide": {
1141
+ gap: DesignToken;
1142
+ };
1153
1143
  };
1154
1144
  list: {
1155
1145
  gap: DesignToken;
@@ -1187,6 +1177,7 @@ declare const tokens: {
1187
1177
  };
1188
1178
  "page-footer": {
1189
1179
  menu: {
1180
+ "background-color": DesignToken;
1190
1181
  "column-gap": DesignToken;
1191
1182
  "padding-block": DesignToken;
1192
1183
  "padding-inline": DesignToken;
@@ -1197,6 +1188,12 @@ declare const tokens: {
1197
1188
  wide: {
1198
1189
  "padding-inline": DesignToken;
1199
1190
  };
1191
+ "vi-medium": {
1192
+ "padding-inline": DesignToken;
1193
+ };
1194
+ "vi-wide": {
1195
+ "padding-inline": DesignToken;
1196
+ };
1200
1197
  link: {
1201
1198
  color: DesignToken;
1202
1199
  "font-family": DesignToken;
@@ -1218,6 +1215,7 @@ declare const tokens: {
1218
1215
  };
1219
1216
  };
1220
1217
  "page-header": {
1218
+ "background-color": DesignToken;
1221
1219
  "font-family": DesignToken;
1222
1220
  "padding-block": DesignToken;
1223
1221
  "padding-inline": DesignToken;
@@ -1227,6 +1225,12 @@ declare const tokens: {
1227
1225
  wide: {
1228
1226
  "padding-inline": DesignToken;
1229
1227
  };
1228
+ "vi-medium": {
1229
+ "padding-inline": DesignToken;
1230
+ };
1231
+ "vi-wide": {
1232
+ "padding-inline": DesignToken;
1233
+ };
1230
1234
  "logo-link": {
1231
1235
  "column-gap": DesignToken;
1232
1236
  "outline-offset": DesignToken;
@@ -1288,17 +1292,6 @@ declare const tokens: {
1288
1292
  "row-gap": DesignToken;
1289
1293
  };
1290
1294
  };
1291
- "page-heading": {
1292
- color: DesignToken;
1293
- "font-family": DesignToken;
1294
- "font-size": DesignToken;
1295
- "font-weight": DesignToken;
1296
- "line-height": DesignToken;
1297
- "text-wrap": DesignToken;
1298
- inverse: {
1299
- color: DesignToken;
1300
- };
1301
- };
1302
1295
  page: {
1303
1296
  "background-color": DesignToken;
1304
1297
  "max-inline-size": DesignToken;
@@ -1406,11 +1399,29 @@ declare const tokens: {
1406
1399
  };
1407
1400
  };
1408
1401
  };
1402
+ button: {
1403
+ color: DesignToken;
1404
+ cursor: DesignToken;
1405
+ gap: DesignToken;
1406
+ "outline-offset": DesignToken;
1407
+ "padding-block": DesignToken;
1408
+ "padding-inline": DesignToken;
1409
+ hover: {
1410
+ color: DesignToken;
1411
+ };
1412
+ };
1413
+ icon: {
1414
+ "transition-duration": DesignToken;
1415
+ "transition-timing-function": DesignToken;
1416
+ };
1409
1417
  step: {
1410
1418
  gap: DesignToken;
1411
1419
  medium: {
1412
1420
  gap: DesignToken;
1413
1421
  };
1422
+ "vi-medium": {
1423
+ gap: DesignToken;
1424
+ };
1414
1425
  marker: {
1415
1426
  shape: {
1416
1427
  "block-size": DesignToken;
@@ -1466,6 +1477,9 @@ declare const tokens: {
1466
1477
  medium: {
1467
1478
  "margin-inline-end": DesignToken;
1468
1479
  };
1480
+ "vi-medium": {
1481
+ "margin-inline-end": DesignToken;
1482
+ };
1469
1483
  };
1470
1484
  marker: {
1471
1485
  "block-size": DesignToken;
@@ -1717,19 +1731,6 @@ declare const tokens: {
1717
1731
  };
1718
1732
  };
1719
1733
  "standalone-link": {
1720
- hover: {
1721
- "text-decoration-thickness": DesignToken;
1722
- "text-underline-offset": DesignToken;
1723
- color: DesignToken;
1724
- "text-decoration-line": DesignToken;
1725
- };
1726
- "with-icon": {
1727
- "text-decoration-line": DesignToken;
1728
- "text-decoration-thickness": DesignToken;
1729
- hover: {
1730
- "text-decoration-line": DesignToken;
1731
- };
1732
- };
1733
1734
  color: DesignToken;
1734
1735
  "column-gap": DesignToken;
1735
1736
  "font-family": DesignToken;
@@ -1740,6 +1741,10 @@ declare const tokens: {
1740
1741
  "text-decoration-line": DesignToken;
1741
1742
  "text-decoration-thickness": DesignToken;
1742
1743
  "text-underline-offset": DesignToken;
1744
+ hover: {
1745
+ color: DesignToken;
1746
+ "text-decoration-line": DesignToken;
1747
+ };
1743
1748
  contrast: {
1744
1749
  color: DesignToken;
1745
1750
  hover: {
@@ -1775,12 +1780,43 @@ declare const tokens: {
1775
1780
  cursor: DesignToken;
1776
1781
  };
1777
1782
  };
1778
- "table-of-contents": {
1779
- heading: {
1780
- "font-weight": DesignToken;
1783
+ "tab-navigation": {
1784
+ list: {
1785
+ "box-shadow": DesignToken;
1786
+ vertical: {
1787
+ "box-shadow": DesignToken;
1788
+ };
1789
+ };
1790
+ link: {
1791
+ gap: DesignToken;
1792
+ color: DesignToken;
1793
+ cursor: DesignToken;
1794
+ "font-family": DesignToken;
1781
1795
  "font-size": DesignToken;
1796
+ "font-weight": DesignToken;
1782
1797
  "line-height": DesignToken;
1798
+ "outline-offset": DesignToken;
1799
+ "padding-block": DesignToken;
1800
+ "padding-inline": DesignToken;
1801
+ hover: {
1802
+ "box-shadow": DesignToken;
1803
+ color: DesignToken;
1804
+ };
1805
+ current: {
1806
+ "box-shadow": DesignToken;
1807
+ "font-weight": DesignToken;
1808
+ };
1809
+ vertical: {
1810
+ hover: {
1811
+ "box-shadow": DesignToken;
1812
+ };
1813
+ current: {
1814
+ "box-shadow": DesignToken;
1815
+ };
1816
+ };
1783
1817
  };
1818
+ };
1819
+ "table-of-contents": {
1784
1820
  "font-family": DesignToken;
1785
1821
  "font-size": DesignToken;
1786
1822
  "font-weight": DesignToken;
@@ -1813,6 +1849,7 @@ declare const tokens: {
1813
1849
  "line-height": DesignToken;
1814
1850
  caption: {
1815
1851
  "font-weight": DesignToken;
1852
+ "margin-block-end": DesignToken;
1816
1853
  };
1817
1854
  cell: {
1818
1855
  "border-block-end": DesignToken;
@@ -1916,29 +1953,6 @@ declare const tokens: {
1916
1953
  };
1917
1954
  };
1918
1955
  "time-input": {
1919
- disabled: {
1920
- "calendar-picker-indicator": {
1921
- "background-image": DesignToken;
1922
- };
1923
- "calender-picker-indicator": {
1924
- "background-image": DesignToken;
1925
- };
1926
- color: DesignToken;
1927
- cursor: DesignToken;
1928
- };
1929
- hover: {
1930
- "calender-picker-indicator": {
1931
- "background-image": DesignToken;
1932
- };
1933
- "box-shadow": DesignToken;
1934
- "calendar-picker-indicator": {
1935
- "background-image": DesignToken;
1936
- };
1937
- };
1938
- "calender-picker-indicator": {
1939
- "background-image": DesignToken;
1940
- cursor: DesignToken;
1941
- };
1942
1956
  "background-color": DesignToken;
1943
1957
  "border-color": DesignToken;
1944
1958
  "border-style": DesignToken;
@@ -1951,6 +1965,16 @@ declare const tokens: {
1951
1965
  "outline-offset": DesignToken;
1952
1966
  "padding-block": DesignToken;
1953
1967
  "padding-inline": DesignToken;
1968
+ disabled: {
1969
+ color: DesignToken;
1970
+ cursor: DesignToken;
1971
+ };
1972
+ hover: {
1973
+ "box-shadow": DesignToken;
1974
+ "calendar-picker-indicator": {
1975
+ "background-image": DesignToken;
1976
+ };
1977
+ };
1954
1978
  invalid: {
1955
1979
  "border-color": DesignToken;
1956
1980
  hover: {