@amsterdam/design-system-tokens 3.4.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 (95) hide show
  1. package/CHANGELOG.md +50 -3
  2. package/README.md +131 -22
  3. package/build.js +11 -1
  4. package/dist/compact.css +7 -2
  5. package/dist/compact.d.ts +17 -6
  6. package/dist/compact.json +28 -17
  7. package/dist/compact.mjs +19 -13
  8. package/dist/compact.scss +7 -2
  9. package/dist/compact.theme.css +7 -2
  10. package/dist/index.css +108 -110
  11. package/dist/index.d.ts +112 -110
  12. package/dist/index.json +218 -216
  13. package/dist/index.mjs +218 -208
  14. package/dist/index.scss +108 -110
  15. package/dist/index.theme.css +108 -110
  16. package/package.json +1 -1
  17. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  18. package/src/brand/ams/border.tokens.json +5 -0
  19. package/src/brand/ams/color.compact.tokens.json +15 -0
  20. package/src/brand/ams/color.tokens.json +37 -54
  21. package/src/brand/ams/cursor.tokens.json +9 -2
  22. package/src/brand/ams/focus.tokens.json +1 -0
  23. package/src/brand/ams/space.compact.tokens.json +16 -4
  24. package/src/brand/ams/space.tokens.json +31 -6
  25. package/src/brand/ams/typography.compact.tokens.json +36 -45
  26. package/src/brand/ams/typography.tokens.json +59 -63
  27. package/src/common/ams/inputs.tokens.json +41 -19
  28. package/src/common/ams/links.tokens.json +35 -10
  29. package/src/components/ams/accordion.tokens.json +17 -48
  30. package/src/components/ams/action-group.tokens.json +2 -2
  31. package/src/components/ams/alert.tokens.json +38 -20
  32. package/src/components/ams/avatar.tokens.json +79 -29
  33. package/src/components/ams/badge.tokens.json +60 -23
  34. package/src/components/ams/blockquote.tokens.json +14 -5
  35. package/src/components/ams/body.compact.tokens.json +12 -0
  36. package/src/components/ams/body.tokens.json +12 -0
  37. package/src/components/ams/breadcrumb.tokens.json +36 -15
  38. package/src/components/ams/button.tokens.json +74 -33
  39. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  40. package/src/components/ams/card.tokens.json +30 -17
  41. package/src/components/ams/character-count.tokens.json +14 -5
  42. package/src/components/ams/checkbox.tokens.json +101 -74
  43. package/src/components/ams/column.tokens.json +10 -10
  44. package/src/components/ams/date-input.tokens.json +55 -50
  45. package/src/components/ams/description-list.tokens.json +85 -24
  46. package/src/components/ams/dialog.tokens.json +104 -28
  47. package/src/components/ams/error-message.tokens.json +13 -6
  48. package/src/components/ams/field-set.tokens.json +35 -20
  49. package/src/components/ams/field.tokens.json +13 -10
  50. package/src/components/ams/figure.tokens.json +16 -7
  51. package/src/components/ams/file-input.tokens.json +69 -31
  52. package/src/components/ams/file-list.tokens.json +20 -11
  53. package/src/components/ams/grid.compact.tokens.json +24 -2
  54. package/src/components/ams/grid.tokens.json +77 -24
  55. package/src/components/ams/heading.tokens.json +38 -36
  56. package/src/components/ams/hint.tokens.json +6 -2
  57. package/src/components/ams/icon-button.tokens.json +46 -16
  58. package/src/components/ams/icon.tokens.json +19 -39
  59. package/src/components/ams/image-slider.tokens.json +28 -16
  60. package/src/components/ams/image.tokens.json +4 -1
  61. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  62. package/src/components/ams/label.tokens.json +18 -6
  63. package/src/components/ams/link-list.tokens.json +50 -22
  64. package/src/components/ams/link.tokens.json +38 -25
  65. package/src/components/ams/logo.tokens.json +6 -2
  66. package/src/components/ams/mark.tokens.json +3 -1
  67. package/src/components/ams/menu.tokens.json +80 -55
  68. package/src/components/ams/ordered-list.tokens.json +39 -25
  69. package/src/components/ams/page-footer.tokens.json +70 -26
  70. package/src/components/ams/page-header.compact.tokens.json +2 -1
  71. package/src/components/ams/page-header.tokens.json +128 -59
  72. package/src/components/ams/page.compact.tokens.json +12 -0
  73. package/src/components/ams/page.tokens.json +5 -3
  74. package/src/components/ams/pagination.tokens.json +37 -17
  75. package/src/components/ams/paragraph.tokens.json +22 -8
  76. package/src/components/ams/password-input.tokens.json +47 -21
  77. package/src/components/ams/progress-list.tokens.json +152 -61
  78. package/src/components/ams/radio.tokens.json +97 -36
  79. package/src/components/ams/row.tokens.json +10 -10
  80. package/src/components/ams/search-field.tokens.json +57 -24
  81. package/src/components/ams/select.tokens.json +63 -25
  82. package/src/components/ams/skip-link.tokens.json +23 -12
  83. package/src/components/ams/spotlight.tokens.json +21 -7
  84. package/src/components/ams/standalone-link.tokens.json +42 -46
  85. package/src/components/ams/switch.tokens.json +23 -9
  86. package/src/components/ams/tab-navigation.tokens.json +205 -0
  87. package/src/components/ams/table-of-contents.tokens.json +38 -41
  88. package/src/components/ams/table.tokens.json +29 -10
  89. package/src/components/ams/tabs.tokens.json +36 -17
  90. package/src/components/ams/text-area.tokens.json +49 -23
  91. package/src/components/ams/text-input.tokens.json +47 -21
  92. package/src/components/ams/time-input.tokens.json +55 -50
  93. package/src/components/ams/unordered-list.tokens.json +37 -25
  94. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  95. package/src/components/ams/page-heading.tokens.json +0 -46
package/dist/index.d.ts CHANGED
@@ -37,7 +37,10 @@ declare const tokens: {
37
37
  };
38
38
  };
39
39
  color: {
40
- background: DesignToken;
40
+ background: {
41
+ body: DesignToken;
42
+ default: DesignToken;
43
+ };
41
44
  feedback: {
42
45
  error: DesignToken;
43
46
  info: DesignToken;
@@ -63,7 +66,6 @@ declare const tokens: {
63
66
  hover: DesignToken;
64
67
  };
65
68
  inverse: DesignToken;
66
- secondary: DesignToken;
67
69
  };
68
70
  progress: {
69
71
  current: DesignToken;
@@ -116,10 +118,6 @@ declare const tokens: {
116
118
  };
117
119
  };
118
120
  heading: {
119
- "0": {
120
- "font-size": DesignToken;
121
- "line-height": DesignToken;
122
- };
123
121
  "1": {
124
122
  "font-size": DesignToken;
125
123
  "line-height": DesignToken;
@@ -140,10 +138,6 @@ declare const tokens: {
140
138
  "font-size": DesignToken;
141
139
  "line-height": DesignToken;
142
140
  };
143
- "6": {
144
- "font-size": DesignToken;
145
- "line-height": DesignToken;
146
- };
147
141
  "font-weight": DesignToken;
148
142
  "text-wrap": DesignToken;
149
143
  };
@@ -209,11 +203,6 @@ declare const tokens: {
209
203
  accordion: {
210
204
  gap: DesignToken;
211
205
  button: {
212
- "font-family": DesignToken;
213
- "font-size": DesignToken;
214
- "font-weight": DesignToken;
215
- "line-height": DesignToken;
216
- "text-wrap": DesignToken;
217
206
  color: DesignToken;
218
207
  cursor: DesignToken;
219
208
  gap: DesignToken;
@@ -224,10 +213,6 @@ declare const tokens: {
224
213
  color: DesignToken;
225
214
  };
226
215
  };
227
- panel: {
228
- "padding-block": DesignToken;
229
- "padding-inline": DesignToken;
230
- };
231
216
  };
232
217
  "action-group": {
233
218
  gap: DesignToken;
@@ -361,6 +346,9 @@ declare const tokens: {
361
346
  color: DesignToken;
362
347
  };
363
348
  };
349
+ body: {
350
+ "background-color": DesignToken;
351
+ };
364
352
  breadcrumb: {
365
353
  "font-family": DesignToken;
366
354
  "font-size": DesignToken;
@@ -511,7 +499,6 @@ declare const tokens: {
511
499
  hover: {
512
500
  color: DesignToken;
513
501
  "text-decoration-line": DesignToken;
514
- "text-decoration-thickness": DesignToken;
515
502
  };
516
503
  "checked-indicator": {
517
504
  stroke: DesignToken;
@@ -540,15 +527,9 @@ declare const tokens: {
540
527
  fill: DesignToken;
541
528
  disabled: {
542
529
  fill: DesignToken;
543
- hover: {
544
- fill: DesignToken;
545
- };
546
530
  };
547
531
  hover: {
548
532
  fill: DesignToken;
549
- "disabled-invalid": {
550
- fill: DesignToken;
551
- };
552
533
  };
553
534
  invalid: {
554
535
  fill: DesignToken;
@@ -562,23 +543,14 @@ declare const tokens: {
562
543
  };
563
544
  hover: {
564
545
  stroke: DesignToken;
565
- "disabled-invalid": {
566
- stroke: DesignToken;
567
- };
568
546
  };
569
547
  indeterminate: {
570
548
  fill: DesignToken;
571
549
  disabled: {
572
550
  fill: DesignToken;
573
- hover: {
574
- fill: DesignToken;
575
- };
576
551
  };
577
552
  hover: {
578
553
  fill: DesignToken;
579
- "disabled-invalid": {
580
- fill: DesignToken;
581
- };
582
554
  };
583
555
  invalid: {
584
556
  fill: DesignToken;
@@ -620,21 +592,12 @@ declare const tokens: {
620
592
  disabled: {
621
593
  color: DesignToken;
622
594
  cursor: DesignToken;
623
- "calendar-picker-indicator": {
624
- "background-image": DesignToken;
625
- };
626
- "calender-picker-indicator": {
627
- "background-image": DesignToken;
628
- };
629
595
  };
630
596
  hover: {
631
597
  "box-shadow": DesignToken;
632
598
  "calendar-picker-indicator": {
633
599
  "background-image": DesignToken;
634
600
  };
635
- "calender-picker-indicator": {
636
- "background-image": DesignToken;
637
- };
638
601
  };
639
602
  invalid: {
640
603
  "border-color": DesignToken;
@@ -647,10 +610,6 @@ declare const tokens: {
647
610
  "background-image": DesignToken;
648
611
  cursor: DesignToken;
649
612
  };
650
- "calender-picker-indicator": {
651
- "background-image": DesignToken;
652
- cursor: DesignToken;
653
- };
654
613
  };
655
614
  "description-list": {
656
615
  color: DesignToken;
@@ -689,6 +648,18 @@ declare const tokens: {
689
648
  wide: {
690
649
  "grid-template-columns": DesignToken;
691
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
+ };
692
663
  };
693
664
  dialog: {
694
665
  "background-color": DesignToken;
@@ -705,6 +676,10 @@ declare const tokens: {
705
676
  "inline-size": DesignToken;
706
677
  "max-block-size": DesignToken;
707
678
  };
679
+ "vi-medium": {
680
+ "inline-size": DesignToken;
681
+ "max-block-size": DesignToken;
682
+ };
708
683
  backdrop: {
709
684
  "background-color": DesignToken;
710
685
  };
@@ -716,6 +691,10 @@ declare const tokens: {
716
691
  "padding-block": DesignToken;
717
692
  "padding-inline": DesignToken;
718
693
  };
694
+ "vi-medium": {
695
+ "padding-block": DesignToken;
696
+ "padding-inline": DesignToken;
697
+ };
719
698
  };
720
699
  body: {
721
700
  "padding-block": DesignToken;
@@ -723,6 +702,9 @@ declare const tokens: {
723
702
  medium: {
724
703
  "padding-inline": DesignToken;
725
704
  };
705
+ "vi-medium": {
706
+ "padding-inline": DesignToken;
707
+ };
726
708
  };
727
709
  footer: {
728
710
  "padding-block": DesignToken;
@@ -731,6 +713,10 @@ declare const tokens: {
731
713
  "padding-block": DesignToken;
732
714
  "padding-inline": DesignToken;
733
715
  };
716
+ "vi-medium": {
717
+ "padding-block": DesignToken;
718
+ "padding-inline": DesignToken;
719
+ };
734
720
  };
735
721
  };
736
722
  "error-message": {
@@ -875,6 +861,19 @@ declare const tokens: {
875
861
  "column-count": DesignToken;
876
862
  "padding-inline": DesignToken;
877
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
+ };
878
877
  };
879
878
  heading: {
880
879
  "1": {
@@ -897,10 +896,6 @@ declare const tokens: {
897
896
  "font-size": DesignToken;
898
897
  "line-height": DesignToken;
899
898
  };
900
- "6": {
901
- "font-size": DesignToken;
902
- "line-height": DesignToken;
903
- };
904
899
  color: DesignToken;
905
900
  "font-family": DesignToken;
906
901
  "font-weight": DesignToken;
@@ -961,10 +956,6 @@ declare const tokens: {
961
956
  "font-size": DesignToken;
962
957
  "line-height": DesignToken;
963
958
  };
964
- "heading-0": {
965
- "font-size": DesignToken;
966
- "line-height": DesignToken;
967
- };
968
959
  "heading-1": {
969
960
  "font-size": DesignToken;
970
961
  "line-height": DesignToken;
@@ -985,10 +976,6 @@ declare const tokens: {
985
976
  "font-size": DesignToken;
986
977
  "line-height": DesignToken;
987
978
  };
988
- "heading-6": {
989
- "font-size": DesignToken;
990
- "line-height": DesignToken;
991
- };
992
979
  inverse: {
993
980
  color: DesignToken;
994
981
  };
@@ -1129,20 +1116,13 @@ declare const tokens: {
1129
1116
  "padding-block": DesignToken;
1130
1117
  "padding-inline": DesignToken;
1131
1118
  };
1119
+ "vi-wide": {
1120
+ "max-inline-size": DesignToken;
1121
+ "padding-block": DesignToken;
1122
+ "padding-inline": DesignToken;
1123
+ };
1132
1124
  link: {
1133
1125
  color: DesignToken;
1134
- contrast: {
1135
- color: DesignToken;
1136
- hover: {
1137
- color: DesignToken;
1138
- };
1139
- };
1140
- inverse: {
1141
- color: DesignToken;
1142
- hover: {
1143
- color: DesignToken;
1144
- };
1145
- };
1146
1126
  gap: DesignToken;
1147
1127
  "outline-offset": DesignToken;
1148
1128
  "padding-block": DesignToken;
@@ -1157,6 +1137,9 @@ declare const tokens: {
1157
1137
  wide: {
1158
1138
  gap: DesignToken;
1159
1139
  };
1140
+ "vi-wide": {
1141
+ gap: DesignToken;
1142
+ };
1160
1143
  };
1161
1144
  list: {
1162
1145
  gap: DesignToken;
@@ -1194,6 +1177,7 @@ declare const tokens: {
1194
1177
  };
1195
1178
  "page-footer": {
1196
1179
  menu: {
1180
+ "background-color": DesignToken;
1197
1181
  "column-gap": DesignToken;
1198
1182
  "padding-block": DesignToken;
1199
1183
  "padding-inline": DesignToken;
@@ -1204,6 +1188,12 @@ declare const tokens: {
1204
1188
  wide: {
1205
1189
  "padding-inline": DesignToken;
1206
1190
  };
1191
+ "vi-medium": {
1192
+ "padding-inline": DesignToken;
1193
+ };
1194
+ "vi-wide": {
1195
+ "padding-inline": DesignToken;
1196
+ };
1207
1197
  link: {
1208
1198
  color: DesignToken;
1209
1199
  "font-family": DesignToken;
@@ -1225,6 +1215,7 @@ declare const tokens: {
1225
1215
  };
1226
1216
  };
1227
1217
  "page-header": {
1218
+ "background-color": DesignToken;
1228
1219
  "font-family": DesignToken;
1229
1220
  "padding-block": DesignToken;
1230
1221
  "padding-inline": DesignToken;
@@ -1234,6 +1225,12 @@ declare const tokens: {
1234
1225
  wide: {
1235
1226
  "padding-inline": DesignToken;
1236
1227
  };
1228
+ "vi-medium": {
1229
+ "padding-inline": DesignToken;
1230
+ };
1231
+ "vi-wide": {
1232
+ "padding-inline": DesignToken;
1233
+ };
1237
1234
  "logo-link": {
1238
1235
  "column-gap": DesignToken;
1239
1236
  "outline-offset": DesignToken;
@@ -1295,17 +1292,6 @@ declare const tokens: {
1295
1292
  "row-gap": DesignToken;
1296
1293
  };
1297
1294
  };
1298
- "page-heading": {
1299
- color: DesignToken;
1300
- "font-family": DesignToken;
1301
- "font-size": DesignToken;
1302
- "font-weight": DesignToken;
1303
- "line-height": DesignToken;
1304
- "text-wrap": DesignToken;
1305
- inverse: {
1306
- color: DesignToken;
1307
- };
1308
- };
1309
1295
  page: {
1310
1296
  "background-color": DesignToken;
1311
1297
  "max-inline-size": DesignToken;
@@ -1433,6 +1419,9 @@ declare const tokens: {
1433
1419
  medium: {
1434
1420
  gap: DesignToken;
1435
1421
  };
1422
+ "vi-medium": {
1423
+ gap: DesignToken;
1424
+ };
1436
1425
  marker: {
1437
1426
  shape: {
1438
1427
  "block-size": DesignToken;
@@ -1488,6 +1477,9 @@ declare const tokens: {
1488
1477
  medium: {
1489
1478
  "margin-inline-end": DesignToken;
1490
1479
  };
1480
+ "vi-medium": {
1481
+ "margin-inline-end": DesignToken;
1482
+ };
1491
1483
  };
1492
1484
  marker: {
1493
1485
  "block-size": DesignToken;
@@ -1752,15 +1744,6 @@ declare const tokens: {
1752
1744
  hover: {
1753
1745
  color: DesignToken;
1754
1746
  "text-decoration-line": DesignToken;
1755
- "text-decoration-thickness": DesignToken;
1756
- "text-underline-offset": DesignToken;
1757
- };
1758
- "with-icon": {
1759
- "text-decoration-line": DesignToken;
1760
- "text-decoration-thickness": DesignToken;
1761
- hover: {
1762
- "text-decoration-line": DesignToken;
1763
- };
1764
1747
  };
1765
1748
  contrast: {
1766
1749
  color: DesignToken;
@@ -1797,17 +1780,48 @@ declare const tokens: {
1797
1780
  cursor: DesignToken;
1798
1781
  };
1799
1782
  };
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;
1795
+ "font-size": DesignToken;
1796
+ "font-weight": DesignToken;
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
+ };
1817
+ };
1818
+ };
1800
1819
  "table-of-contents": {
1801
1820
  "font-family": DesignToken;
1802
1821
  "font-size": DesignToken;
1803
1822
  "font-weight": DesignToken;
1804
1823
  gap: DesignToken;
1805
1824
  "line-height": DesignToken;
1806
- heading: {
1807
- "font-weight": DesignToken;
1808
- "font-size": DesignToken;
1809
- "line-height": DesignToken;
1810
- };
1811
1825
  link: {
1812
1826
  color: DesignToken;
1813
1827
  "outline-offset": DesignToken;
@@ -1835,6 +1849,7 @@ declare const tokens: {
1835
1849
  "line-height": DesignToken;
1836
1850
  caption: {
1837
1851
  "font-weight": DesignToken;
1852
+ "margin-block-end": DesignToken;
1838
1853
  };
1839
1854
  cell: {
1840
1855
  "border-block-end": DesignToken;
@@ -1953,21 +1968,12 @@ declare const tokens: {
1953
1968
  disabled: {
1954
1969
  color: DesignToken;
1955
1970
  cursor: DesignToken;
1956
- "calendar-picker-indicator": {
1957
- "background-image": DesignToken;
1958
- };
1959
- "calender-picker-indicator": {
1960
- "background-image": DesignToken;
1961
- };
1962
1971
  };
1963
1972
  hover: {
1964
1973
  "box-shadow": DesignToken;
1965
1974
  "calendar-picker-indicator": {
1966
1975
  "background-image": DesignToken;
1967
1976
  };
1968
- "calender-picker-indicator": {
1969
- "background-image": DesignToken;
1970
- };
1971
1977
  };
1972
1978
  invalid: {
1973
1979
  "border-color": DesignToken;
@@ -1980,10 +1986,6 @@ declare const tokens: {
1980
1986
  "background-image": DesignToken;
1981
1987
  cursor: DesignToken;
1982
1988
  };
1983
- "calender-picker-indicator": {
1984
- "background-image": DesignToken;
1985
- cursor: DesignToken;
1986
- };
1987
1989
  };
1988
1990
  "unordered-list": {
1989
1991
  color: DesignToken;