@amsterdam/design-system-tokens 3.3.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 +11 -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 +102 -88
  9. package/dist/index.d.ts +191 -169
  10. package/dist/index.json +245 -223
  11. package/dist/index.mjs +177 -169
  12. package/dist/index.scss +102 -88
  13. package/dist/index.theme.css +102 -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 +19 -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,11 @@ 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;
664
671
  "vi-medium": {
665
672
  "margin-block-end": DesignToken;
666
673
  };
@@ -735,18 +742,6 @@ declare const tokens: {
735
742
  "line-height": DesignToken;
736
743
  };
737
744
  "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
745
  child: {
751
746
  "margin-block-end": DesignToken;
752
747
  "before-error-message": {
@@ -763,6 +758,18 @@ declare const tokens: {
763
758
  "border-inline-start": DesignToken;
764
759
  "padding-inline-start": DesignToken;
765
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
+ };
766
773
  };
767
774
  field: {
768
775
  gap: DesignToken;
@@ -944,10 +951,6 @@ declare const tokens: {
944
951
  };
945
952
  };
946
953
  icon: {
947
- "heading-0": {
948
- "font-size": DesignToken;
949
- "line-height": DesignToken;
950
- };
951
954
  "font-size": DesignToken;
952
955
  "line-height": DesignToken;
953
956
  small: {
@@ -958,6 +961,10 @@ declare const tokens: {
958
961
  "font-size": DesignToken;
959
962
  "line-height": DesignToken;
960
963
  };
964
+ "heading-0": {
965
+ "font-size": DesignToken;
966
+ "line-height": DesignToken;
967
+ };
961
968
  "heading-1": {
962
969
  "font-size": DesignToken;
963
970
  "line-height": DesignToken;
@@ -1111,7 +1118,19 @@ declare const tokens: {
1111
1118
  "background-color": DesignToken;
1112
1119
  };
1113
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
+ };
1114
1132
  link: {
1133
+ color: DesignToken;
1115
1134
  contrast: {
1116
1135
  color: DesignToken;
1117
1136
  hover: {
@@ -1124,7 +1143,6 @@ declare const tokens: {
1124
1143
  color: DesignToken;
1125
1144
  };
1126
1145
  };
1127
- color: DesignToken;
1128
1146
  gap: DesignToken;
1129
1147
  "outline-offset": DesignToken;
1130
1148
  "padding-block": DesignToken;
@@ -1140,17 +1158,6 @@ declare const tokens: {
1140
1158
  gap: DesignToken;
1141
1159
  };
1142
1160
  };
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;
1153
- };
1154
1161
  list: {
1155
1162
  gap: DesignToken;
1156
1163
  };
@@ -1406,6 +1413,21 @@ declare const tokens: {
1406
1413
  };
1407
1414
  };
1408
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
+ };
1409
1431
  step: {
1410
1432
  gap: DesignToken;
1411
1433
  medium: {
@@ -1717,11 +1739,21 @@ declare const tokens: {
1717
1739
  };
1718
1740
  };
1719
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;
1720
1752
  hover: {
1721
- "text-decoration-thickness": DesignToken;
1722
- "text-underline-offset": DesignToken;
1723
1753
  color: DesignToken;
1724
1754
  "text-decoration-line": DesignToken;
1755
+ "text-decoration-thickness": DesignToken;
1756
+ "text-underline-offset": DesignToken;
1725
1757
  };
1726
1758
  "with-icon": {
1727
1759
  "text-decoration-line": DesignToken;
@@ -1730,16 +1762,6 @@ declare const tokens: {
1730
1762
  "text-decoration-line": DesignToken;
1731
1763
  };
1732
1764
  };
1733
- color: DesignToken;
1734
- "column-gap": DesignToken;
1735
- "font-family": DesignToken;
1736
- "font-size": DesignToken;
1737
- "font-weight": DesignToken;
1738
- "line-height": DesignToken;
1739
- "outline-offset": DesignToken;
1740
- "text-decoration-line": DesignToken;
1741
- "text-decoration-thickness": DesignToken;
1742
- "text-underline-offset": DesignToken;
1743
1765
  contrast: {
1744
1766
  color: DesignToken;
1745
1767
  hover: {
@@ -1776,16 +1798,16 @@ declare const tokens: {
1776
1798
  };
1777
1799
  };
1778
1800
  "table-of-contents": {
1779
- heading: {
1780
- "font-weight": DesignToken;
1781
- "font-size": DesignToken;
1782
- "line-height": DesignToken;
1783
- };
1784
1801
  "font-family": DesignToken;
1785
1802
  "font-size": DesignToken;
1786
1803
  "font-weight": DesignToken;
1787
1804
  gap: DesignToken;
1788
1805
  "line-height": DesignToken;
1806
+ heading: {
1807
+ "font-weight": DesignToken;
1808
+ "font-size": DesignToken;
1809
+ "line-height": DesignToken;
1810
+ };
1789
1811
  link: {
1790
1812
  color: DesignToken;
1791
1813
  "outline-offset": DesignToken;
@@ -1916,41 +1938,37 @@ declare const tokens: {
1916
1938
  };
1917
1939
  };
1918
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;
1919
1953
  disabled: {
1954
+ color: DesignToken;
1955
+ cursor: DesignToken;
1920
1956
  "calendar-picker-indicator": {
1921
1957
  "background-image": DesignToken;
1922
1958
  };
1923
1959
  "calender-picker-indicator": {
1924
1960
  "background-image": DesignToken;
1925
1961
  };
1926
- color: DesignToken;
1927
- cursor: DesignToken;
1928
1962
  };
1929
1963
  hover: {
1930
- "calender-picker-indicator": {
1931
- "background-image": DesignToken;
1932
- };
1933
1964
  "box-shadow": DesignToken;
1934
1965
  "calendar-picker-indicator": {
1935
1966
  "background-image": DesignToken;
1936
1967
  };
1968
+ "calender-picker-indicator": {
1969
+ "background-image": DesignToken;
1970
+ };
1937
1971
  };
1938
- "calender-picker-indicator": {
1939
- "background-image": DesignToken;
1940
- cursor: DesignToken;
1941
- };
1942
- "background-color": DesignToken;
1943
- "border-color": DesignToken;
1944
- "border-style": DesignToken;
1945
- "border-width": DesignToken;
1946
- color: DesignToken;
1947
- "font-family": DesignToken;
1948
- "font-size": DesignToken;
1949
- "font-weight": DesignToken;
1950
- "line-height": DesignToken;
1951
- "outline-offset": DesignToken;
1952
- "padding-block": DesignToken;
1953
- "padding-inline": DesignToken;
1954
1972
  invalid: {
1955
1973
  "border-color": DesignToken;
1956
1974
  hover: {
@@ -1962,6 +1980,10 @@ declare const tokens: {
1962
1980
  "background-image": DesignToken;
1963
1981
  cursor: DesignToken;
1964
1982
  };
1983
+ "calender-picker-indicator": {
1984
+ "background-image": DesignToken;
1985
+ cursor: DesignToken;
1986
+ };
1965
1987
  };
1966
1988
  "unordered-list": {
1967
1989
  color: DesignToken;