@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/src/components/ams/page-footer.tokens.json CHANGED
@@ -2,60 +2,90 @@
2
2
  "ams": {
3
3
  "page-footer": {
4
4
  "menu": {
5
+ "background-color": {
6
+ "$value": "{ams.color.background.default}",
7
+ "$extensions": {
8
+ "nl.amsterdam.type": "color"
9
+ }
10
+ },
5
11
  "column-gap": {
6
12
  "$value": "{ams.space.l}",
7
- "$type": "dimension",
8
13
  "$extensions": {
9
- "nl.amsterdam.subtype": "space"
14
+ "nl.amsterdam.subtype": "space",
15
+ "nl.amsterdam.type": "dimension"
10
16
  }
11
17
  },
12
18
  "padding-block": {
13
19
  "$value": "{ams.space.l}",
14
- "$type": "dimension",
15
20
  "$extensions": {
16
- "nl.amsterdam.subtype": "space"
21
+ "nl.amsterdam.subtype": "space",
22
+ "nl.amsterdam.type": "dimension"
17
23
  }
18
24
  },
19
25
  "padding-inline": {
20
26
  "$value": "{ams.grid.padding-inline}",
21
- "$type": "dimension",
22
27
  "$extensions": {
23
- "nl.amsterdam.subtype": "space"
28
+ "nl.amsterdam.subtype": "space",
29
+ "nl.amsterdam.type": "dimension"
24
30
  }
25
31
  },
26
32
  "row-gap": {
27
33
  "$value": "{ams.space.xs}",
28
- "$type": "dimension",
29
34
  "$extensions": {
30
- "nl.amsterdam.subtype": "space"
35
+ "nl.amsterdam.subtype": "space",
36
+ "nl.amsterdam.type": "dimension"
31
37
  }
32
38
  },
33
39
  "medium": {
34
40
  "padding-inline": {
35
- "$value": "{ams.grid.medium.padding-inline}",
36
- "$type": "dimension",
41
+ "$deprecated": "Use `ams.page-footer.menu.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
42
+ "$value": "initial",
37
43
  "$extensions": {
38
- "nl.amsterdam.subtype": "space"
44
+ "nl.amsterdam.subtype": "space",
45
+ "nl.amsterdam.type": "dimension"
39
46
  }
40
47
  }
41
48
  },
42
49
  "wide": {
43
50
  "padding-inline": {
44
- "$value": "{ams.grid.wide.padding-inline}",
45
- "$type": "dimension",
51
+ "$deprecated": "Use `ams.page-footer.menu.vi-wide.padding-inline` instead. Will be removed on or after 2026-10-20.",
52
+ "$value": "initial",
53
+ "$extensions": {
54
+ "nl.amsterdam.subtype": "space",
55
+ "nl.amsterdam.type": "dimension"
56
+ }
57
+ }
58
+ },
59
+ "vi-medium": {
60
+ "padding-inline": {
61
+ "$value": "{ams.grid.vi-medium.padding-inline}",
62
+ "$extensions": {
63
+ "nl.amsterdam.subtype": "space",
64
+ "nl.amsterdam.type": "dimension"
65
+ }
66
+ }
67
+ },
68
+ "vi-wide": {
69
+ "padding-inline": {
70
+ "$value": "{ams.grid.vi-wide.padding-inline}",
46
71
  "$extensions": {
47
- "nl.amsterdam.subtype": "space"
72
+ "nl.amsterdam.subtype": "space",
73
+ "nl.amsterdam.type": "dimension"
48
74
  }
49
75
  }
50
76
  },
51
77
  "link": {
52
78
  "color": {
53
79
  "$value": "{ams.links.color}",
54
- "$type": "color"
80
+ "$extensions": {
81
+ "nl.amsterdam.type": "color"
82
+ }
55
83
  },
56
84
  "font-family": {
57
85
  "$value": "{ams.typography.font-family}",
58
- "$type": "fontFamily"
86
+ "$extensions": {
87
+ "nl.amsterdam.type": "fontFamily"
88
+ }
59
89
  },
60
90
  "font-size": {
61
91
  "$value": "{ams.typography.body-text.font-size}",
@@ -65,42 +95,56 @@
65
95
  },
66
96
  "font-weight": {
67
97
  "$value": "{ams.typography.body-text.font-weight}",
68
- "$type": "fontWeight"
98
+ "$extensions": {
99
+ "nl.amsterdam.type": "fontWeight"
100
+ }
69
101
  },
70
102
  "line-height": {
71
103
  "$value": "{ams.typography.body-text.line-height}",
72
104
  "$extensions": {
73
- "nl.amsterdam.type": "lineHeight"
105
+ "nl.amsterdam.subtype": "lineHeight",
106
+ "nl.amsterdam.type": "number"
74
107
  }
75
108
  },
76
109
  "outline-offset": {
77
110
  "$value": "{ams.focus.outline-offset}",
78
- "$type": "dimension",
79
111
  "$extensions": {
80
- "nl.amsterdam.subtype": "space"
112
+ "nl.amsterdam.subtype": "space",
113
+ "nl.amsterdam.type": "dimension"
81
114
  }
82
115
  },
83
116
  "text-decoration-line": {
84
- "$value": "{ams.links.subtle.text-decoration-line}"
117
+ "$value": "{ams.links.subtle.text-decoration-line}",
118
+ "$extensions": {
119
+ "nl.amsterdam.type": "textDecorationLine"
120
+ }
85
121
  },
86
122
  "text-decoration-thickness": {
87
123
  "$value": "{ams.links.text-decoration-thickness}",
88
- "$type": "dimension"
124
+ "$extensions": {
125
+ "nl.amsterdam.subtype": "space",
126
+ "nl.amsterdam.type": "dimension"
127
+ }
89
128
  },
90
129
  "text-underline-offset": {
91
130
  "$value": "{ams.links.text-underline-offset}",
92
- "$type": "dimension",
93
131
  "$extensions": {
94
- "nl.amsterdam.subtype": "space"
132
+ "nl.amsterdam.subtype": "space",
133
+ "nl.amsterdam.type": "dimension"
95
134
  }
96
135
  },
97
136
  "hover": {
98
137
  "color": {
99
138
  "$value": "{ams.links.hover.color}",
100
- "$type": "color"
139
+ "$extensions": {
140
+ "nl.amsterdam.type": "color"
141
+ }
101
142
  },
102
143
  "text-decoration-line": {
103
- "$value": "{ams.links.subtle.hover.text-decoration-line}"
144
+ "$value": "{ams.links.subtle.hover.text-decoration-line}",
145
+ "$extensions": {
146
+ "nl.amsterdam.type": "textDecorationLine"
147
+ }
104
148
  }
105
149
  }
106
150
  }
package/src/components/ams/page-header.compact.tokens.json CHANGED
@@ -11,7 +11,8 @@
11
11
  "line-height": {
12
12
  "$value": "{ams.typography.heading.2.line-height}",
13
13
  "$extensions": {
14
- "nl.amsterdam.type": "lineHeight"
14
+ "nl.amsterdam.subtype": "lineHeight",
15
+ "nl.amsterdam.type": "number"
15
16
  }
16
17
  }
17
18
  },
package/src/components/ams/page-header.tokens.json CHANGED
@@ -1,63 +1,93 @@
1
1
  {
2
2
  "ams": {
3
3
  "page-header": {
4
+ "background-color": {
5
+ "$value": "{ams.color.background.default}",
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
9
+ },
4
10
  "font-family": {
5
11
  "$value": "{ams.typography.font-family}",
6
- "$type": "fontFamily"
12
+ "$extensions": {
13
+ "nl.amsterdam.type": "fontFamily"
14
+ }
7
15
  },
8
16
  "padding-block": {
9
17
  "$value": "{ams.space.l}",
10
- "$type": "dimension",
11
18
  "$extensions": {
12
- "nl.amsterdam.subtype": "space"
19
+ "nl.amsterdam.subtype": "space",
20
+ "nl.amsterdam.type": "dimension"
13
21
  }
14
22
  },
15
23
  "padding-inline": {
16
24
  "$value": "{ams.grid.padding-inline}",
17
- "$type": "dimension",
18
25
  "$extensions": {
19
26
  "nl.amsterdam.hint": "Must be the Grid inline padding, to make sure Header and Grid line up.",
20
- "nl.amsterdam.subtype": "space"
27
+ "nl.amsterdam.subtype": "space",
28
+ "nl.amsterdam.type": "dimension"
21
29
  }
22
30
  },
23
31
  "medium": {
24
32
  "padding-inline": {
25
- "$value": "{ams.grid.medium.padding-inline}",
26
- "$type": "dimension",
33
+ "$deprecated": "Use `ams.page-header.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
34
+ "$value": "initial",
27
35
  "$extensions": {
28
- "nl.amsterdam.subtype": "space"
36
+ "nl.amsterdam.subtype": "space",
37
+ "nl.amsterdam.type": "dimension"
29
38
  }
30
39
  }
31
40
  },
32
41
  "wide": {
33
42
  "padding-inline": {
34
- "$value": "{ams.grid.wide.padding-inline}",
35
- "$type": "dimension",
43
+ "$deprecated": "Use `ams.page-header.vi-wide.padding-inline` instead. Will be removed on or after 2026-10-20.",
44
+ "$value": "initial",
45
+ "$extensions": {
46
+ "nl.amsterdam.subtype": "space",
47
+ "nl.amsterdam.type": "dimension"
48
+ }
49
+ }
50
+ },
51
+ "vi-medium": {
52
+ "padding-inline": {
53
+ "$value": "{ams.grid.vi-medium.padding-inline}",
54
+ "$extensions": {
55
+ "nl.amsterdam.subtype": "space",
56
+ "nl.amsterdam.type": "dimension"
57
+ }
58
+ }
59
+ },
60
+ "vi-wide": {
61
+ "padding-inline": {
62
+ "$value": "{ams.grid.vi-wide.padding-inline}",
36
63
  "$extensions": {
37
- "nl.amsterdam.subtype": "space"
64
+ "nl.amsterdam.subtype": "space",
65
+ "nl.amsterdam.type": "dimension"
38
66
  }
39
67
  }
40
68
  },
41
69
  "logo-link": {
42
70
  "column-gap": {
43
71
  "$value": "{ams.space.m}",
44
- "$type": "dimension",
45
72
  "$extensions": {
46
- "nl.amsterdam.subtype": "space"
73
+ "nl.amsterdam.subtype": "space",
74
+ "nl.amsterdam.type": "dimension"
47
75
  }
48
76
  },
49
77
  "outline-offset": {
50
78
  "$value": "{ams.focus.outline-offset}",
51
- "$type": "dimension",
52
79
  "$extensions": {
53
- "nl.amsterdam.subtype": "space"
80
+ "nl.amsterdam.subtype": "space",
81
+ "nl.amsterdam.type": "dimension"
54
82
  }
55
83
  }
56
84
  },
57
85
  "brand-name": {
58
86
  "color": {
59
87
  "$value": "{ams.color.text.default}",
60
- "$type": "color"
88
+ "$extensions": {
89
+ "nl.amsterdam.type": "color"
90
+ }
61
91
  },
62
92
  "font-size": {
63
93
  "$value": "{ams.typography.heading.3.font-size}",
@@ -67,62 +97,81 @@
67
97
  },
68
98
  "font-weight": {
69
99
  "$value": "{ams.typography.heading.font-weight}",
70
- "$type": "fontWeight"
100
+ "$extensions": {
101
+ "nl.amsterdam.type": "fontWeight"
102
+ }
71
103
  },
72
104
  "line-height": {
73
105
  "$value": "{ams.typography.heading.3.line-height}",
74
106
  "$extensions": {
75
- "nl.amsterdam.type": "lineHeight"
107
+ "nl.amsterdam.subtype": "lineHeight",
108
+ "nl.amsterdam.type": "number"
76
109
  }
77
110
  },
78
111
  "text-wrap": {
79
- "$value": "{ams.typography.heading.text-wrap}"
112
+ "$value": "{ams.typography.heading.text-wrap}",
113
+ "$extensions": {
114
+ "nl.amsterdam.type": "textWrap"
115
+ }
80
116
  }
81
117
  },
82
118
  "mega-menu": {
83
119
  "padding-block": {
84
120
  "$value": "{ams.space.l}",
85
- "$type": "dimension",
86
121
  "$extensions": {
87
- "nl.amsterdam.subtype": "space"
122
+ "nl.amsterdam.subtype": "space",
123
+ "nl.amsterdam.type": "dimension"
88
124
  }
89
125
  },
90
126
  "button": {
91
127
  "background-color": {
92
128
  "$value": "{ams.color.interactive.default}",
93
- "$type": "color"
129
+ "$extensions": {
130
+ "nl.amsterdam.type": "color"
131
+ }
94
132
  },
95
133
  "color": {
96
134
  "$value": "{ams.color.text.inverse}",
97
- "$type": "color"
135
+ "$extensions": {
136
+ "nl.amsterdam.type": "color"
137
+ }
98
138
  },
99
139
  "cursor": {
100
- "$value": "{ams.cursor.interactive}"
140
+ "$value": "{ams.cursor.interactive}",
141
+ "$extensions": {
142
+ "nl.amsterdam.type": "cursor"
143
+ }
101
144
  },
102
145
  "label": {
103
146
  "open": {
104
147
  "font-weight": {
105
- "$value": "{ams.typography.body-text.bold.font-weight}",
106
- "$type": "fontWeight",
107
- "$deprecated": "We no longer make the button label bold when the mega menu is open. Will be removed in release 6.0.0."
148
+ "$value": "{ams.typography.body-text.font-weight}",
149
+ "$extensions": {
150
+ "nl.amsterdam.type": "fontWeight"
151
+ },
152
+ "$deprecated": "We no longer make the button label bold when the mega menu is open. Will be removed on or after 2026-09-13."
108
153
  }
109
154
  }
110
155
  },
111
156
  "padding-inline": {
112
157
  "$value": "{ams.space.s}",
113
- "$type": "dimension",
114
158
  "$extensions": {
115
- "nl.amsterdam.subtype": "space"
159
+ "nl.amsterdam.subtype": "space",
160
+ "nl.amsterdam.type": "dimension"
116
161
  }
117
162
  },
118
163
  "hover": {
119
164
  "background-color": {
120
165
  "$value": "{ams.color.interactive.hover}",
121
- "$type": "color"
166
+ "$extensions": {
167
+ "nl.amsterdam.type": "color"
168
+ }
122
169
  },
123
170
  "color": {
124
171
  "$value": "{ams.color.text.inverse}",
125
- "$type": "color"
172
+ "$extensions": {
173
+ "nl.amsterdam.type": "color"
174
+ }
126
175
  }
127
176
  }
128
177
  }
@@ -130,34 +179,38 @@
130
179
  "menu": {
131
180
  "column-gap": {
132
181
  "$value": "{ams.space.l}",
133
- "$type": "dimension",
134
182
  "$extensions": {
135
- "nl.amsterdam.subtype": "space"
183
+ "nl.amsterdam.subtype": "space",
184
+ "nl.amsterdam.type": "dimension"
136
185
  }
137
186
  },
138
187
  "row-gap": {
139
188
  "$value": "{ams.space.xs}",
140
- "$type": "dimension",
141
189
  "$extensions": {
142
- "nl.amsterdam.subtype": "space"
190
+ "nl.amsterdam.subtype": "space",
191
+ "nl.amsterdam.type": "dimension"
143
192
  }
144
193
  },
145
194
  "item": {
146
195
  "color": {
147
- "$deprecated": "Use `ams.page-header.menu.link.color` instead.",
148
196
  "$value": "{ams.links.color}",
149
- "$type": "color"
197
+ "$extensions": {
198
+ "nl.amsterdam.type": "color"
199
+ },
200
+ "$deprecated": "Use `ams.page-header.menu.link.color` instead. Will be removed on or after 2026-09-13."
150
201
  },
151
202
  "column-gap": {
152
203
  "$value": "{ams.space.xs}",
153
- "$type": "dimension",
154
204
  "$extensions": {
155
- "nl.amsterdam.subtype": "space"
205
+ "nl.amsterdam.subtype": "space",
206
+ "nl.amsterdam.type": "dimension"
156
207
  }
157
208
  },
158
209
  "font-family": {
159
210
  "$value": "{ams.typography.font-family}",
160
- "$type": "fontFamily"
211
+ "$extensions": {
212
+ "nl.amsterdam.type": "fontFamily"
213
+ }
161
214
  },
162
215
  "font-size": {
163
216
  "$value": "{ams.typography.body-text.font-size}",
@@ -167,64 +220,80 @@
167
220
  },
168
221
  "font-weight": {
169
222
  "$value": "{ams.typography.body-text.font-weight}",
170
- "$type": "fontWeight"
223
+ "$extensions": {
224
+ "nl.amsterdam.type": "fontWeight"
225
+ }
171
226
  },
172
227
  "line-height": {
173
228
  "$value": "{ams.typography.body-text.line-height}",
174
229
  "$extensions": {
175
- "nl.amsterdam.type": "lineHeight"
230
+ "nl.amsterdam.subtype": "lineHeight",
231
+ "nl.amsterdam.type": "number"
176
232
  }
177
233
  },
178
234
  "outline-offset": {
179
235
  "$value": "{ams.focus.outline-offset}",
180
- "$type": "dimension",
181
236
  "$extensions": {
182
- "nl.amsterdam.subtype": "space"
237
+ "nl.amsterdam.subtype": "space",
238
+ "nl.amsterdam.type": "dimension"
183
239
  }
184
240
  },
185
241
  "padding-block": {
186
242
  "$value": "{ams.space.xs}",
187
- "$type": "dimension",
188
243
  "$extensions": {
189
- "nl.amsterdam.subtype": "space"
244
+ "nl.amsterdam.subtype": "space",
245
+ "nl.amsterdam.type": "dimension"
190
246
  }
191
247
  },
192
248
  "hover": {
193
249
  "color": {
194
250
  "$value": "{ams.links.hover.color}",
195
- "$type": "color"
251
+ "$extensions": {
252
+ "nl.amsterdam.type": "color"
253
+ }
196
254
  }
197
255
  }
198
256
  },
199
257
  "link": {
200
258
  "color": {
201
259
  "$value": "{ams.links.color}",
202
- "$type": "color"
260
+ "$extensions": {
261
+ "nl.amsterdam.type": "color"
262
+ }
203
263
  },
204
264
  "gap": {
205
265
  "$value": "{ams.space.xs}",
206
- "$type": "dimension",
207
266
  "$extensions": {
208
- "nl.amsterdam.subtype": "space"
267
+ "nl.amsterdam.subtype": "space",
268
+ "nl.amsterdam.type": "dimension"
209
269
  }
210
270
  },
211
271
  "text-decoration-line": {
212
- "$value": "{ams.links.subtle.text-decoration-line}"
272
+ "$value": "{ams.links.subtle.text-decoration-line}",
273
+ "$extensions": {
274
+ "nl.amsterdam.type": "textDecorationLine"
275
+ }
213
276
  },
214
277
  "text-decoration-thickness": {
215
278
  "$value": "{ams.links.text-decoration-thickness}",
216
- "$type": "dimension"
279
+ "$extensions": {
280
+ "nl.amsterdam.subtype": "space",
281
+ "nl.amsterdam.type": "dimension"
282
+ }
217
283
  },
218
284
  "text-underline-offset": {
219
285
  "$value": "{ams.links.text-underline-offset}",
220
- "$type": "dimension",
221
286
  "$extensions": {
222
- "nl.amsterdam.subtype": "space"
287
+ "nl.amsterdam.subtype": "space",
288
+ "nl.amsterdam.type": "dimension"
223
289
  }
224
290
  },
225
291
  "hover": {
226
292
  "text-decoration-line": {
227
- "$value": "{ams.links.subtle.hover.text-decoration-line}"
293
+ "$value": "{ams.links.subtle.hover.text-decoration-line}",
294
+ "$extensions": {
295
+ "nl.amsterdam.type": "textDecorationLine"
296
+ }
228
297
  }
229
298
  }
230
299
  }
@@ -232,16 +301,16 @@
232
301
  "navigation": {
233
302
  "column-gap": {
234
303
  "$value": "{ams.space.l}",
235
- "$type": "dimension",
236
304
  "$extensions": {
237
- "nl.amsterdam.subtype": "space"
305
+ "nl.amsterdam.subtype": "space",
306
+ "nl.amsterdam.type": "dimension"
238
307
  }
239
308
  },
240
309
  "row-gap": {
241
310
  "$value": "{ams.space.l}",
242
- "$type": "dimension",
243
311
  "$extensions": {
244
- "nl.amsterdam.subtype": "space"
312
+ "nl.amsterdam.subtype": "space",
313
+ "nl.amsterdam.type": "dimension"
245
314
  }
246
315
  }
247
316
  }
package/src/components/ams/page.compact.tokens.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "ams": {
3
+ "page": {
4
+ "background-color": {
5
+ "$value": "{ams.color.background.body}",
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
9
+ }
10
+ }
11
+ }
12
+ }
package/src/components/ams/page.tokens.json CHANGED
@@ -2,8 +2,10 @@
2
2
  "ams": {
3
3
  "page": {
4
4
  "background-color": {
5
- "$value": "{ams.color.background}",
6
- "$type": "color"
5
+ "$value": "{ams.color.background.body}",
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
7
9
  },
8
10
  "max-inline-size": {
9
11
  "$value": {
@@ -23,9 +25,9 @@
23
25
  "area-skip-link": {
24
26
  "margin-inline-end": {
25
27
  "$value": "{ams.grid.padding-inline}",
26
- "$type": "dimension",
27
28
  "$extensions": {
28
29
  "nl.amsterdam.hint": "Must be the Grid inline padding, to make sure Skip Link and Grid line up.",
30
+ "nl.amsterdam.type": "dimension",
29
31
  "nl.amsterdam.subtype": "space"
30
32
  }
31
33
  }