@amsterdam/design-system-tokens 3.2.0 → 3.4.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 (51) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/compact.css +2 -0
  3. package/dist/compact.d.ts +4 -0
  4. package/dist/compact.json +5 -1
  5. package/dist/compact.mjs +2 -0
  6. package/dist/compact.scss +2 -0
  7. package/dist/compact.theme.css +2 -0
  8. package/dist/index.css +103 -88
  9. package/dist/index.d.ts +194 -169
  10. package/dist/index.json +249 -224
  11. package/dist/index.mjs +179 -169
  12. package/dist/index.scss +103 -88
  13. package/dist/index.theme.css +103 -88
  14. package/package.json +2 -2
  15. package/src/brand/ams/border.compact.tokens.json +20 -0
  16. package/src/brand/ams/border.tokens.json +20 -0
  17. package/src/brand/ams/color.tokens.json +5 -0
  18. package/src/brand/ams/typography.compact.tokens.json +18 -0
  19. package/src/brand/ams/typography.tokens.json +35 -3
  20. package/src/components/ams/accordion.tokens.json +38 -0
  21. package/src/components/ams/checkbox.tokens.json +40 -0
  22. package/src/components/ams/date-input.tokens.json +28 -0
  23. package/src/components/ams/description-list.tokens.json +29 -2
  24. package/src/components/ams/field-set.tokens.json +8 -0
  25. package/src/components/ams/field.tokens.json +8 -0
  26. package/src/components/ams/file-input.tokens.json +1 -0
  27. package/src/components/ams/icon.tokens.json +16 -0
  28. package/src/components/ams/menu.tokens.json +28 -0
  29. package/src/components/ams/page-header.tokens.json +1 -1
  30. package/src/components/ams/{page-heading.deprecated.tokens.json → page-heading.tokens.json} +7 -7
  31. package/src/components/ams/progress-list.tokens.json +51 -0
  32. package/src/components/ams/select.tokens.json +2 -0
  33. package/src/components/ams/standalone-link.tokens.json +30 -0
  34. package/src/components/ams/switch.tokens.json +17 -1
  35. package/src/components/ams/table-of-contents.tokens.json +21 -0
  36. package/src/components/ams/tabs.tokens.json +3 -3
  37. package/src/components/ams/text-input.tokens.json +2 -0
  38. package/src/components/ams/time-input.tokens.json +30 -0
  39. package/src/brand/ams/color.deprecated.tokens.json +0 -13
  40. package/src/brand/ams/typography.deprecated.compact.tokens.json +0 -26
  41. package/src/brand/ams/typography.deprecated.tokens.json +0 -40
  42. package/src/components/ams/accordion.deprecated.tokens.json +0 -39
  43. package/src/components/ams/checkbox.deprecated.tokens.json +0 -59
  44. package/src/components/ams/date-input.deprecated.tokens.json +0 -38
  45. package/src/components/ams/field-set.deprecated.tokens.json +0 -16
  46. package/src/components/ams/field.deprecated.tokens.json +0 -14
  47. package/src/components/ams/icon.deprecated.tokens.json +0 -22
  48. package/src/components/ams/menu.deprecated.tokens.json +0 -36
  49. package/src/components/ams/standalone-link.deprecated.tokens.json +0 -38
  50. package/src/components/ams/table-of-contents.deprecated.tokens.json +0 -24
  51. package/src/components/ams/time-input.deprecated.tokens.json +0 -38
package/dist/index.d.ts CHANGED
@@ -30,21 +30,13 @@ 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;
39
- default: DesignToken;
40
- disabled: DesignToken;
41
- hover: DesignToken;
42
- invalid: {
43
- default: DesignToken;
44
- hover: DesignToken;
45
- };
46
- inverse: DesignToken;
47
- };
48
40
  background: DesignToken;
49
41
  feedback: {
50
42
  error: DesignToken;
@@ -61,6 +53,18 @@ declare const tokens: {
61
53
  purple: DesignToken;
62
54
  yellow: DesignToken;
63
55
  };
56
+ interactive: {
57
+ contrast: DesignToken;
58
+ default: DesignToken;
59
+ disabled: DesignToken;
60
+ hover: DesignToken;
61
+ invalid: {
62
+ default: DesignToken;
63
+ hover: DesignToken;
64
+ };
65
+ inverse: DesignToken;
66
+ secondary: DesignToken;
67
+ };
64
68
  progress: {
65
69
  current: DesignToken;
66
70
  completed: DesignToken;
@@ -89,6 +93,28 @@ declare const tokens: {
89
93
  "2xl": DesignToken;
90
94
  };
91
95
  typography: {
96
+ "font-family": DesignToken;
97
+ "hyphenate-limit-chars": DesignToken;
98
+ "body-text": {
99
+ "font-size": DesignToken;
100
+ "font-weight": DesignToken;
101
+ "line-height": DesignToken;
102
+ bold: {
103
+ "font-weight": DesignToken;
104
+ };
105
+ small: {
106
+ "font-size": DesignToken;
107
+ "line-height": DesignToken;
108
+ };
109
+ large: {
110
+ "font-size": DesignToken;
111
+ "line-height": DesignToken;
112
+ };
113
+ "x-large": {
114
+ "font-size": DesignToken;
115
+ "line-height": DesignToken;
116
+ };
117
+ };
92
118
  heading: {
93
119
  "0": {
94
120
  "font-size": DesignToken;
@@ -121,28 +147,6 @@ declare const tokens: {
121
147
  "font-weight": DesignToken;
122
148
  "text-wrap": DesignToken;
123
149
  };
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: {
134
- "font-size": DesignToken;
135
- "line-height": DesignToken;
136
- };
137
- large: {
138
- "font-size": DesignToken;
139
- "line-height": DesignToken;
140
- };
141
- "x-large": {
142
- "font-size": DesignToken;
143
- "line-height": DesignToken;
144
- };
145
- };
146
150
  };
147
151
  inputs: {
148
152
  "background-color": DesignToken;
@@ -203,6 +207,7 @@ declare const tokens: {
203
207
  };
204
208
  };
205
209
  accordion: {
210
+ gap: DesignToken;
206
211
  button: {
207
212
  "font-family": DesignToken;
208
213
  "font-size": DesignToken;
@@ -223,7 +228,6 @@ declare const tokens: {
223
228
  "padding-block": DesignToken;
224
229
  "padding-inline": DesignToken;
225
230
  };
226
- gap: DesignToken;
227
231
  };
228
232
  "action-group": {
229
233
  gap: DesignToken;
@@ -490,26 +494,62 @@ declare const tokens: {
490
494
  };
491
495
  };
492
496
  checkbox: {
497
+ color: DesignToken;
498
+ cursor: DesignToken;
499
+ "font-family": DesignToken;
500
+ "font-size": DesignToken;
501
+ "font-weight": DesignToken;
502
+ gap: DesignToken;
503
+ "line-height": DesignToken;
504
+ "outline-offset": DesignToken;
505
+ "text-decoration-thickness": DesignToken;
506
+ "text-underline-offset": DesignToken;
507
+ disabled: {
508
+ cursor: DesignToken;
509
+ color: DesignToken;
510
+ };
493
511
  hover: {
494
- "text-decoration-thickness": DesignToken;
495
512
  color: DesignToken;
496
513
  "text-decoration-line": DesignToken;
514
+ "text-decoration-thickness": DesignToken;
515
+ };
516
+ "checked-indicator": {
517
+ stroke: DesignToken;
518
+ };
519
+ "hover-indicator": {
520
+ hover: {
521
+ stroke: DesignToken;
522
+ };
523
+ invalid: {
524
+ hover: {
525
+ stroke: DesignToken;
526
+ };
527
+ };
528
+ };
529
+ "icon-container": {
530
+ "block-size": DesignToken;
531
+ "inline-size": DesignToken;
532
+ };
533
+ "indeterminate-indicator": {
534
+ stroke: DesignToken;
497
535
  };
498
536
  rectangle: {
537
+ fill: DesignToken;
538
+ stroke: DesignToken;
499
539
  checked: {
540
+ fill: DesignToken;
500
541
  disabled: {
542
+ fill: DesignToken;
501
543
  hover: {
502
544
  fill: DesignToken;
503
545
  };
504
- fill: DesignToken;
505
546
  };
506
547
  hover: {
548
+ fill: DesignToken;
507
549
  "disabled-invalid": {
508
550
  fill: DesignToken;
509
551
  };
510
- fill: DesignToken;
511
552
  };
512
- fill: DesignToken;
513
553
  invalid: {
514
554
  fill: DesignToken;
515
555
  hover: {
@@ -517,26 +557,29 @@ declare const tokens: {
517
557
  };
518
558
  };
519
559
  };
560
+ disabled: {
561
+ stroke: DesignToken;
562
+ };
520
563
  hover: {
564
+ stroke: DesignToken;
521
565
  "disabled-invalid": {
522
566
  stroke: DesignToken;
523
567
  };
524
- stroke: DesignToken;
525
568
  };
526
569
  indeterminate: {
570
+ fill: DesignToken;
527
571
  disabled: {
572
+ fill: DesignToken;
528
573
  hover: {
529
574
  fill: DesignToken;
530
575
  };
531
- fill: DesignToken;
532
576
  };
533
577
  hover: {
578
+ fill: DesignToken;
534
579
  "disabled-invalid": {
535
580
  fill: DesignToken;
536
581
  };
537
- fill: DesignToken;
538
582
  };
539
- fill: DesignToken;
540
583
  invalid: {
541
584
  fill: DesignToken;
542
585
  hover: {
@@ -544,11 +587,6 @@ declare const tokens: {
544
587
  };
545
588
  };
546
589
  };
547
- fill: DesignToken;
548
- stroke: DesignToken;
549
- disabled: {
550
- stroke: DesignToken;
551
- };
552
590
  invalid: {
553
591
  stroke: DesignToken;
554
592
  hover: {
@@ -556,40 +594,6 @@ declare const tokens: {
556
594
  };
557
595
  };
558
596
  };
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
597
  };
594
598
  column: {
595
599
  gap: {
@@ -601,41 +605,37 @@ declare const tokens: {
601
605
  };
602
606
  };
603
607
  "date-input": {
608
+ "background-color": DesignToken;
609
+ "border-color": DesignToken;
610
+ "border-style": DesignToken;
611
+ "border-width": DesignToken;
612
+ color: DesignToken;
613
+ "font-family": DesignToken;
614
+ "font-size": DesignToken;
615
+ "font-weight": DesignToken;
616
+ "line-height": DesignToken;
617
+ "outline-offset": DesignToken;
618
+ "padding-block": DesignToken;
619
+ "padding-inline": DesignToken;
604
620
  disabled: {
621
+ color: DesignToken;
622
+ cursor: DesignToken;
605
623
  "calendar-picker-indicator": {
606
624
  "background-image": DesignToken;
607
625
  };
608
626
  "calender-picker-indicator": {
609
627
  "background-image": DesignToken;
610
628
  };
611
- color: DesignToken;
612
- cursor: DesignToken;
613
629
  };
614
630
  hover: {
615
- "calender-picker-indicator": {
616
- "background-image": DesignToken;
617
- };
618
631
  "box-shadow": DesignToken;
619
632
  "calendar-picker-indicator": {
620
633
  "background-image": DesignToken;
621
634
  };
635
+ "calender-picker-indicator": {
636
+ "background-image": DesignToken;
637
+ };
622
638
  };
623
- "calender-picker-indicator": {
624
- "background-image": DesignToken;
625
- cursor: DesignToken;
626
- };
627
- "background-color": DesignToken;
628
- "border-color": DesignToken;
629
- "border-style": DesignToken;
630
- "border-width": DesignToken;
631
- color: DesignToken;
632
- "font-family": DesignToken;
633
- "font-size": DesignToken;
634
- "font-weight": DesignToken;
635
- "line-height": DesignToken;
636
- "outline-offset": DesignToken;
637
- "padding-block": DesignToken;
638
- "padding-inline": DesignToken;
639
639
  invalid: {
640
640
  "border-color": DesignToken;
641
641
  hover: {
@@ -647,6 +647,10 @@ declare const tokens: {
647
647
  "background-image": DesignToken;
648
648
  cursor: DesignToken;
649
649
  };
650
+ "calender-picker-indicator": {
651
+ "background-image": DesignToken;
652
+ cursor: DesignToken;
653
+ };
650
654
  };
651
655
  "description-list": {
652
656
  color: DesignToken;
@@ -659,8 +663,14 @@ declare const tokens: {
659
663
  color: DesignToken;
660
664
  };
661
665
  term: {
666
+ "font-size": DesignToken;
662
667
  "font-weight": DesignToken;
668
+ "line-height": DesignToken;
663
669
  "margin-block-end": DesignToken;
670
+ "text-wrap": DesignToken;
671
+ "vi-medium": {
672
+ "margin-block-end": DesignToken;
673
+ };
664
674
  };
665
675
  description: {
666
676
  "font-weight": DesignToken;
@@ -732,18 +742,6 @@ declare const tokens: {
732
742
  "line-height": DesignToken;
733
743
  };
734
744
  "field-set": {
735
- legend: {
736
- "margin-block-end": DesignToken;
737
- color: DesignToken;
738
- "font-family": DesignToken;
739
- "font-size": DesignToken;
740
- "font-weight": DesignToken;
741
- "line-height": DesignToken;
742
- "text-wrap": DesignToken;
743
- "in-fieldset": {
744
- "font-weight": DesignToken;
745
- };
746
- };
747
745
  child: {
748
746
  "margin-block-end": DesignToken;
749
747
  "before-error-message": {
@@ -760,6 +758,18 @@ declare const tokens: {
760
758
  "border-inline-start": DesignToken;
761
759
  "padding-inline-start": DesignToken;
762
760
  };
761
+ legend: {
762
+ "margin-block-end": DesignToken;
763
+ color: DesignToken;
764
+ "font-family": DesignToken;
765
+ "font-size": DesignToken;
766
+ "font-weight": DesignToken;
767
+ "line-height": DesignToken;
768
+ "text-wrap": DesignToken;
769
+ "in-fieldset": {
770
+ "font-weight": DesignToken;
771
+ };
772
+ };
763
773
  };
764
774
  field: {
765
775
  gap: DesignToken;
@@ -941,10 +951,6 @@ declare const tokens: {
941
951
  };
942
952
  };
943
953
  icon: {
944
- "heading-0": {
945
- "font-size": DesignToken;
946
- "line-height": DesignToken;
947
- };
948
954
  "font-size": DesignToken;
949
955
  "line-height": DesignToken;
950
956
  small: {
@@ -955,6 +961,10 @@ declare const tokens: {
955
961
  "font-size": DesignToken;
956
962
  "line-height": DesignToken;
957
963
  };
964
+ "heading-0": {
965
+ "font-size": DesignToken;
966
+ "line-height": DesignToken;
967
+ };
958
968
  "heading-1": {
959
969
  "font-size": DesignToken;
960
970
  "line-height": DesignToken;
@@ -1108,7 +1118,19 @@ declare const tokens: {
1108
1118
  "background-color": DesignToken;
1109
1119
  };
1110
1120
  menu: {
1121
+ "background-color": DesignToken;
1122
+ "font-family": DesignToken;
1123
+ "font-size": DesignToken;
1124
+ "font-weight": DesignToken;
1125
+ "line-height": DesignToken;
1126
+ "padding-block": DesignToken;
1127
+ wide: {
1128
+ "max-inline-size": DesignToken;
1129
+ "padding-block": DesignToken;
1130
+ "padding-inline": DesignToken;
1131
+ };
1111
1132
  link: {
1133
+ color: DesignToken;
1112
1134
  contrast: {
1113
1135
  color: DesignToken;
1114
1136
  hover: {
@@ -1121,7 +1143,6 @@ declare const tokens: {
1121
1143
  color: DesignToken;
1122
1144
  };
1123
1145
  };
1124
- color: DesignToken;
1125
1146
  gap: DesignToken;
1126
1147
  "outline-offset": DesignToken;
1127
1148
  "padding-block": DesignToken;
@@ -1137,17 +1158,6 @@ declare const tokens: {
1137
1158
  gap: DesignToken;
1138
1159
  };
1139
1160
  };
1140
- "background-color": DesignToken;
1141
- "font-family": DesignToken;
1142
- "font-size": DesignToken;
1143
- "font-weight": DesignToken;
1144
- "line-height": DesignToken;
1145
- "padding-block": DesignToken;
1146
- wide: {
1147
- "max-inline-size": DesignToken;
1148
- "padding-block": DesignToken;
1149
- "padding-inline": DesignToken;
1150
- };
1151
1161
  list: {
1152
1162
  gap: DesignToken;
1153
1163
  };
@@ -1403,6 +1413,21 @@ declare const tokens: {
1403
1413
  };
1404
1414
  };
1405
1415
  };
1416
+ button: {
1417
+ color: DesignToken;
1418
+ cursor: DesignToken;
1419
+ gap: DesignToken;
1420
+ "outline-offset": DesignToken;
1421
+ "padding-block": DesignToken;
1422
+ "padding-inline": DesignToken;
1423
+ hover: {
1424
+ color: DesignToken;
1425
+ };
1426
+ };
1427
+ icon: {
1428
+ "transition-duration": DesignToken;
1429
+ "transition-timing-function": DesignToken;
1430
+ };
1406
1431
  step: {
1407
1432
  gap: DesignToken;
1408
1433
  medium: {
@@ -1714,11 +1739,21 @@ declare const tokens: {
1714
1739
  };
1715
1740
  };
1716
1741
  "standalone-link": {
1742
+ color: DesignToken;
1743
+ "column-gap": DesignToken;
1744
+ "font-family": DesignToken;
1745
+ "font-size": DesignToken;
1746
+ "font-weight": DesignToken;
1747
+ "line-height": DesignToken;
1748
+ "outline-offset": DesignToken;
1749
+ "text-decoration-line": DesignToken;
1750
+ "text-decoration-thickness": DesignToken;
1751
+ "text-underline-offset": DesignToken;
1717
1752
  hover: {
1718
- "text-decoration-thickness": DesignToken;
1719
- "text-underline-offset": DesignToken;
1720
1753
  color: DesignToken;
1721
1754
  "text-decoration-line": DesignToken;
1755
+ "text-decoration-thickness": DesignToken;
1756
+ "text-underline-offset": DesignToken;
1722
1757
  };
1723
1758
  "with-icon": {
1724
1759
  "text-decoration-line": DesignToken;
@@ -1727,16 +1762,6 @@ declare const tokens: {
1727
1762
  "text-decoration-line": DesignToken;
1728
1763
  };
1729
1764
  };
1730
- color: DesignToken;
1731
- "column-gap": DesignToken;
1732
- "font-family": DesignToken;
1733
- "font-size": DesignToken;
1734
- "font-weight": DesignToken;
1735
- "line-height": DesignToken;
1736
- "outline-offset": DesignToken;
1737
- "text-decoration-line": DesignToken;
1738
- "text-decoration-thickness": DesignToken;
1739
- "text-underline-offset": DesignToken;
1740
1765
  contrast: {
1741
1766
  color: DesignToken;
1742
1767
  hover: {
@@ -1773,16 +1798,16 @@ declare const tokens: {
1773
1798
  };
1774
1799
  };
1775
1800
  "table-of-contents": {
1776
- heading: {
1777
- "font-weight": DesignToken;
1778
- "font-size": DesignToken;
1779
- "line-height": DesignToken;
1780
- };
1781
1801
  "font-family": DesignToken;
1782
1802
  "font-size": DesignToken;
1783
1803
  "font-weight": DesignToken;
1784
1804
  gap: DesignToken;
1785
1805
  "line-height": DesignToken;
1806
+ heading: {
1807
+ "font-weight": DesignToken;
1808
+ "font-size": DesignToken;
1809
+ "line-height": DesignToken;
1810
+ };
1786
1811
  link: {
1787
1812
  color: DesignToken;
1788
1813
  "outline-offset": DesignToken;
@@ -1913,41 +1938,37 @@ declare const tokens: {
1913
1938
  };
1914
1939
  };
1915
1940
  "time-input": {
1941
+ "background-color": DesignToken;
1942
+ "border-color": DesignToken;
1943
+ "border-style": DesignToken;
1944
+ "border-width": DesignToken;
1945
+ color: DesignToken;
1946
+ "font-family": DesignToken;
1947
+ "font-size": DesignToken;
1948
+ "font-weight": DesignToken;
1949
+ "line-height": DesignToken;
1950
+ "outline-offset": DesignToken;
1951
+ "padding-block": DesignToken;
1952
+ "padding-inline": DesignToken;
1916
1953
  disabled: {
1954
+ color: DesignToken;
1955
+ cursor: DesignToken;
1917
1956
  "calendar-picker-indicator": {
1918
1957
  "background-image": DesignToken;
1919
1958
  };
1920
1959
  "calender-picker-indicator": {
1921
1960
  "background-image": DesignToken;
1922
1961
  };
1923
- color: DesignToken;
1924
- cursor: DesignToken;
1925
1962
  };
1926
1963
  hover: {
1927
- "calender-picker-indicator": {
1928
- "background-image": DesignToken;
1929
- };
1930
1964
  "box-shadow": DesignToken;
1931
1965
  "calendar-picker-indicator": {
1932
1966
  "background-image": DesignToken;
1933
1967
  };
1968
+ "calender-picker-indicator": {
1969
+ "background-image": DesignToken;
1970
+ };
1934
1971
  };
1935
- "calender-picker-indicator": {
1936
- "background-image": DesignToken;
1937
- cursor: DesignToken;
1938
- };
1939
- "background-color": DesignToken;
1940
- "border-color": DesignToken;
1941
- "border-style": DesignToken;
1942
- "border-width": DesignToken;
1943
- color: DesignToken;
1944
- "font-family": DesignToken;
1945
- "font-size": DesignToken;
1946
- "font-weight": DesignToken;
1947
- "line-height": DesignToken;
1948
- "outline-offset": DesignToken;
1949
- "padding-block": DesignToken;
1950
- "padding-inline": DesignToken;
1951
1972
  invalid: {
1952
1973
  "border-color": DesignToken;
1953
1974
  hover: {
@@ -1959,6 +1980,10 @@ declare const tokens: {
1959
1980
  "background-image": DesignToken;
1960
1981
  cursor: DesignToken;
1961
1982
  };
1983
+ "calender-picker-indicator": {
1984
+ "background-image": DesignToken;
1985
+ cursor: DesignToken;
1986
+ };
1962
1987
  };
1963
1988
  "unordered-list": {
1964
1989
  color: DesignToken;