@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
@@ -0,0 +1,15 @@
1
+ {
2
+ "ams": {
3
+ "color": {
4
+ "background": {
5
+ "body": {
6
+ "$value": "#e8e8e8"
7
+ },
8
+ "default": {
9
+ "$value": "#ffffff"
10
+ }
11
+ }
12
+ }
13
+ },
14
+ "$type": "color"
15
+ }
@@ -2,126 +2,109 @@
2
2
  "ams": {
3
3
  "color": {
4
4
  "background": {
5
- "$value": "#ffffff",
6
- "$type": "color"
5
+ "body": {
6
+ "$value": "#ffffff"
7
+ },
8
+ "default": {
9
+ "$value": "#ffffff",
10
+ "$description": "The default background colour for form controls and smaller surfaces."
11
+ }
7
12
  },
8
13
  "feedback": {
9
14
  "error": {
10
- "$value": "#ec0000",
11
- "$type": "color"
15
+ "$value": "#ec0000"
12
16
  },
13
17
  "info": {
14
- "$value": "#009de6",
15
- "$type": "color"
18
+ "$value": "#009de6"
16
19
  },
17
20
  "success": {
18
- "$value": "#00893c",
19
- "$type": "color"
21
+ "$value": "#00893c"
20
22
  },
21
23
  "warning": {
22
- "$value": "#ff9100",
23
- "$type": "color"
24
+ "$value": "#ff9100"
24
25
  }
25
26
  },
26
27
  "highlight": {
28
+ "$description": "Accent colours for visual distinction, not for interactive elements.",
27
29
  "azure": {
28
- "$value": "#009de6",
29
- "$type": "color"
30
+ "$value": "#009de6"
30
31
  },
31
32
  "green": {
32
- "$value": "#00893c",
33
- "$type": "color"
33
+ "$value": "#00893c"
34
34
  },
35
35
  "lime": {
36
- "$value": "#bed200",
37
- "$type": "color"
36
+ "$value": "#bed200"
38
37
  },
39
38
  "magenta": {
40
- "$value": "#e50082",
41
- "$type": "color"
39
+ "$value": "#e50082"
42
40
  },
43
41
  "orange": {
44
- "$value": "#ff9100",
45
- "$type": "color"
42
+ "$value": "#ff9100"
46
43
  },
47
44
  "purple": {
48
- "$value": "#a00078",
49
- "$type": "color"
45
+ "$value": "#a00078"
50
46
  },
51
47
  "yellow": {
52
- "$value": "#ffe600",
53
- "$type": "color"
48
+ "$value": "#ffe600"
54
49
  }
55
50
  },
56
51
  "interactive": {
52
+ "$description": "Colours for interactive elements like links and buttons.",
57
53
  "contrast": {
58
54
  "$value": "#202020",
59
- "$type": "color"
55
+ "$description": "For interactive elements on coloured backgrounds where the default blue lacks sufficient contrast."
60
56
  },
61
57
  "default": {
62
- "$value": "#004699",
63
- "$type": "color"
58
+ "$value": "#004699"
64
59
  },
65
60
  "disabled": {
66
- "$value": "#767676",
67
- "$type": "color"
61
+ "$value": "#767676"
68
62
  },
69
63
  "hover": {
70
- "$value": "#003677",
71
- "$type": "color"
64
+ "$value": "#003677"
72
65
  },
73
66
  "invalid": {
74
67
  "default": {
75
- "$value": "#ec0000",
76
- "$type": "color"
68
+ "$value": "#ec0000"
77
69
  },
78
70
  "hover": {
79
- "$value": "#b70000",
80
- "$type": "color"
71
+ "$value": "#b70000"
81
72
  }
82
73
  },
83
74
  "inverse": {
84
75
  "$value": "#ffffff",
85
- "$type": "color"
86
- },
87
- "secondary": {
88
- "$deprecated": "Use `currentColor` instead. Will be removed in release 4.0.0.",
89
- "$value": "#202020",
90
- "$type": "color"
76
+ "$description": "For interactive elements on dark backgrounds."
91
77
  }
92
78
  },
93
79
  "progress": {
80
+ "$description": "Colours for progress indicators like step lists.",
94
81
  "current": {
95
- "$value": "#00893c",
96
- "$type": "color"
82
+ "$value": "#00893c"
97
83
  },
98
84
  "completed": {
99
- "$value": "#00893c",
100
- "$type": "color"
85
+ "$value": "#00893c"
101
86
  },
102
87
  "upcoming": {
103
- "$value": "#767676",
104
- "$type": "color"
88
+ "$value": "#767676"
105
89
  }
106
90
  },
107
91
  "separator": {
108
92
  "$value": "#d1d1d1",
109
- "$type": "color"
93
+ "$description": "For row borders in tables."
110
94
  },
111
95
  "text": {
112
96
  "default": {
113
- "$value": "#202020",
114
- "$type": "color"
97
+ "$value": "#202020"
115
98
  },
116
99
  "inverse": {
117
- "$value": "#ffffff",
118
- "$type": "color"
100
+ "$value": "#ffffff"
119
101
  },
120
102
  "secondary": {
121
103
  "$value": "#767676",
122
- "$type": "color"
104
+ "$description": "For supporting text that is less prominent than the default, e.g. metadata."
123
105
  }
124
106
  }
125
107
  }
126
- }
108
+ },
109
+ "$type": "color"
127
110
  }
@@ -2,10 +2,17 @@
2
2
  "ams": {
3
3
  "cursor": {
4
4
  "disabled": {
5
- "$value": "not-allowed"
5
+ "$value": "not-allowed",
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "cursor"
8
+ }
6
9
  },
7
10
  "interactive": {
8
- "$value": "pointer"
11
+ "$value": "pointer",
12
+ "$description": "All interactive elements in their default state that lack a cursor style.",
13
+ "$extensions": {
14
+ "nl.amsterdam.type": "cursor"
15
+ }
9
16
  }
10
17
  }
11
18
  }
@@ -7,6 +7,7 @@
7
7
  "unit": "rem"
8
8
  },
9
9
  "$type": "dimension",
10
+ "$description": "The distance between a focused element and its outline. Provides breathing room so the outline doesn't touch the element.",
10
11
  "$extensions": {
11
12
  "nl.amsterdam.subtype": "space"
12
13
  }
@@ -17,19 +17,31 @@
17
17
  },
18
18
  "m": {
19
19
  "$value": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
20
- "$type": "dimension"
20
+ "$extensions": {
21
+ "nl.amsterdam.type": "dimension",
22
+ "nl.amsterdam.subtype": "space"
23
+ }
21
24
  },
22
25
  "l": {
23
26
  "$value": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
24
- "$type": "dimension"
27
+ "$extensions": {
28
+ "nl.amsterdam.type": "dimension",
29
+ "nl.amsterdam.subtype": "space"
30
+ }
25
31
  },
26
32
  "xl": {
27
33
  "$value": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
28
- "$type": "dimension"
34
+ "$extensions": {
35
+ "nl.amsterdam.type": "dimension",
36
+ "nl.amsterdam.subtype": "space"
37
+ }
29
38
  },
30
39
  "2xl": {
31
40
  "$value": "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)",
32
- "$type": "dimension"
41
+ "$extensions": {
42
+ "nl.amsterdam.type": "dimension",
43
+ "nl.amsterdam.subtype": "space"
44
+ }
33
45
  }
34
46
  }
35
47
  }
@@ -1,29 +1,54 @@
1
1
  {
2
2
  "ams": {
3
3
  "space": {
4
+ "$description": "A responsive spacing scale. All values scale fluidly between 320px and 1600px viewports.",
4
5
  "xs": {
5
6
  "$value": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
6
- "$type": "dimension"
7
+ "$description": "Scales from 4px to 6px.",
8
+ "$extensions": {
9
+ "nl.amsterdam.type": "dimension",
10
+ "nl.amsterdam.subtype": "space"
11
+ }
7
12
  },
8
13
  "s": {
9
14
  "$value": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
10
- "$type": "dimension"
15
+ "$description": "Scales from 8px to 12px.",
16
+ "$extensions": {
17
+ "nl.amsterdam.type": "dimension",
18
+ "nl.amsterdam.subtype": "space"
19
+ }
11
20
  },
12
21
  "m": {
13
22
  "$value": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
14
- "$type": "dimension"
23
+ "$description": "Scales from 16px to 24px.",
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "dimension",
26
+ "nl.amsterdam.subtype": "space"
27
+ }
15
28
  },
16
29
  "l": {
17
30
  "$value": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
18
- "$type": "dimension"
31
+ "$description": "Scales from 24px to 36px.",
32
+ "$extensions": {
33
+ "nl.amsterdam.type": "dimension",
34
+ "nl.amsterdam.subtype": "space"
35
+ }
19
36
  },
20
37
  "xl": {
21
38
  "$value": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)",
22
- "$type": "dimension"
39
+ "$description": "Scales from 36px to 60px.",
40
+ "$extensions": {
41
+ "nl.amsterdam.type": "dimension",
42
+ "nl.amsterdam.subtype": "space"
43
+ }
23
44
  },
24
45
  "2xl": {
25
46
  "$value": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)",
26
- "$type": "dimension"
47
+ "$description": "Scales from 48px to 90px.",
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "dimension",
50
+ "nl.amsterdam.subtype": "space"
51
+ }
27
52
  }
28
53
  }
29
54
  }
@@ -10,10 +10,11 @@
10
10
  "$type": "dimension"
11
11
  },
12
12
  "line-height": {
13
- "$value": "1.5",
13
+ "$value": 1.5,
14
14
  "$extensions": {
15
- "nl.amsterdam.type": "lineHeight"
16
- }
15
+ "nl.amsterdam.subtype": "lineHeight"
16
+ },
17
+ "$type": "number"
17
18
  },
18
19
  "small": {
19
20
  "font-size": {
@@ -24,10 +25,11 @@
24
25
  "$type": "dimension"
25
26
  },
26
27
  "line-height": {
27
- "$value": "1.4",
28
+ "$value": 1.4,
28
29
  "$extensions": {
29
- "nl.amsterdam.type": "lineHeight"
30
- }
30
+ "nl.amsterdam.subtype": "lineHeight"
31
+ },
32
+ "$type": "number"
31
33
  }
32
34
  },
33
35
  "large": {
@@ -38,10 +40,11 @@
38
40
  }
39
41
  },
40
42
  "line-height": {
41
- "$value": "1.4",
43
+ "$value": 1.4,
42
44
  "$extensions": {
43
- "nl.amsterdam.type": "lineHeight"
44
- }
45
+ "nl.amsterdam.subtype": "lineHeight"
46
+ },
47
+ "$type": "number"
45
48
  }
46
49
  },
47
50
  "x-large": {
@@ -52,23 +55,15 @@
52
55
  }
53
56
  },
54
57
  "line-height": {
55
- "$value": "1.3",
58
+ "$value": 1.3,
56
59
  "$extensions": {
57
- "nl.amsterdam.type": "lineHeight"
58
- }
60
+ "nl.amsterdam.subtype": "lineHeight"
61
+ },
62
+ "$type": "number"
59
63
  }
60
64
  }
61
65
  },
62
66
  "heading": {
63
- "0": {
64
- "font-size": {
65
- "$deprecated": "Use `ams.typography.heading.1.font-size` instead. Will be removed in release 4.0.0.",
66
- "$value": "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)",
67
- "$extensions": {
68
- "nl.amsterdam.type": "fontSize"
69
- }
70
- }
71
- },
72
67
  "1": {
73
68
  "font-size": {
74
69
  "$value": "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)",
@@ -77,10 +72,11 @@
77
72
  }
78
73
  },
79
74
  "line-height": {
80
- "$value": "1.2",
75
+ "$value": 1.2,
81
76
  "$extensions": {
82
- "nl.amsterdam.type": "lineHeight"
83
- }
77
+ "nl.amsterdam.subtype": "lineHeight"
78
+ },
79
+ "$type": "number"
84
80
  }
85
81
  },
86
82
  "2": {
@@ -91,10 +87,11 @@
91
87
  }
92
88
  },
93
89
  "line-height": {
94
- "$value": "1.3",
90
+ "$value": 1.3,
95
91
  "$extensions": {
96
- "nl.amsterdam.type": "lineHeight"
97
- }
92
+ "nl.amsterdam.subtype": "lineHeight"
93
+ },
94
+ "$type": "number"
98
95
  }
99
96
  },
100
97
  "3": {
@@ -105,10 +102,11 @@
105
102
  }
106
103
  },
107
104
  "line-height": {
108
- "$value": "1.3",
105
+ "$value": 1.3,
109
106
  "$extensions": {
110
- "nl.amsterdam.type": "lineHeight"
111
- }
107
+ "nl.amsterdam.subtype": "lineHeight"
108
+ },
109
+ "$type": "number"
112
110
  }
113
111
  },
114
112
  "4": {
@@ -119,10 +117,11 @@
119
117
  }
120
118
  },
121
119
  "line-height": {
122
- "$value": "1.4",
120
+ "$value": 1.4,
123
121
  "$extensions": {
124
- "nl.amsterdam.type": "lineHeight"
125
- }
122
+ "nl.amsterdam.subtype": "lineHeight"
123
+ },
124
+ "$type": "number"
126
125
  }
127
126
  },
128
127
  "5": {
@@ -133,19 +132,11 @@
133
132
  }
134
133
  },
135
134
  "line-height": {
136
- "$value": "1.4",
135
+ "$value": 1.4,
137
136
  "$extensions": {
138
- "nl.amsterdam.type": "lineHeight"
139
- }
140
- }
141
- },
142
- "6": {
143
- "font-size": {
144
- "$deprecated": "Use `ams.typography.heading.5.font-size` instead. Will be removed in release 4.0.0.",
145
- "$value": "{ams.typography.body-text.small.font-size}",
146
- "$extensions": {
147
- "nl.amsterdam.type": "fontSize"
148
- }
137
+ "nl.amsterdam.subtype": "lineHeight"
138
+ },
139
+ "$type": "number"
149
140
  }
150
141
  }
151
142
  }