@amsterdam/design-system-tokens 0.1.2 → 0.1.4

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 (32) hide show
  1. package/dist/_variables.scss +202 -86
  2. package/dist/index.css +202 -86
  3. package/dist/index.d.ts +195 -71
  4. package/dist/index.js +196 -80
  5. package/dist/index.json +195 -79
  6. package/dist/index.tokens.json +450 -176
  7. package/dist/root.css +202 -86
  8. package/dist/tokens.d.ts +439 -116
  9. package/dist/tokens.js +4337 -1690
  10. package/dist/variables.less +202 -86
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +42 -26
  13. package/src/common/utrecht/action.tokens.json +12 -0
  14. package/src/common/utrecht/focus.tokens.json +7 -0
  15. package/src/components/amsterdam/accordion.tokens.json +26 -0
  16. package/src/components/amsterdam/blockquote.tokens.json +17 -0
  17. package/src/components/amsterdam/breadcrumb.tokens.json +42 -0
  18. package/src/components/amsterdam/button.tokens.json +34 -4
  19. package/src/components/amsterdam/checkbox.tokens.json +121 -0
  20. package/src/components/amsterdam/footer.tokens.json +11 -0
  21. package/src/components/amsterdam/form-label.tokens.json +7 -5
  22. package/src/components/amsterdam/heading.tokens.json +25 -16
  23. package/src/components/amsterdam/icon.tokens.json +10 -10
  24. package/src/components/amsterdam/link.tokens.json +38 -51
  25. package/src/components/amsterdam/ordered-list.tokens.json +41 -0
  26. package/src/components/amsterdam/page-grid.tokens.json +20 -0
  27. package/src/components/amsterdam/page-heading.tokens.json +17 -0
  28. package/src/components/amsterdam/page-menu.tokens.json +25 -0
  29. package/src/components/amsterdam/paragraph.tokens.json +19 -12
  30. package/src/components/amsterdam/top-task-link.tokens.json +34 -0
  31. package/src/components/amsterdam/unordered-list.tokens.json +41 -0
  32. package/src/components/utrecht/button.tokens.json +17 -27
package/dist/index.tokens.json CHANGED
@@ -26,58 +26,74 @@
26
26
  },
27
27
  "text-level": {
28
28
  "0": {
29
- "font-size": {
30
- "narrow": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)",
31
- "wide": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
29
+ "narrow": {
30
+ "font-size": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)"
31
+ },
32
+ "wide": {
33
+ "font-size": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
32
34
  },
33
35
  "line-height": "1.1"
34
36
  },
35
37
  "1": {
36
- "font-size": {
37
- "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
38
- "wide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
38
+ "narrow": {
39
+ "font-size": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)"
40
+ },
41
+ "wide": {
42
+ "font-size": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
39
43
  },
40
44
  "line-height": "1.2"
41
45
  },
42
46
  "2": {
43
- "font-size": {
44
- "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
45
- "wide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
47
+ "narrow": {
48
+ "font-size": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)"
49
+ },
50
+ "wide": {
51
+ "font-size": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
46
52
  },
47
53
  "line-height": "1.3"
48
54
  },
49
55
  "3": {
50
- "font-size": {
51
- "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
52
- "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
56
+ "narrow": {
57
+ "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
58
+ },
59
+ "wide": {
60
+ "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
53
61
  },
54
62
  "line-height": "1.4"
55
63
  },
56
64
  "4": {
57
- "font-size": {
58
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
59
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
65
+ "narrow": {
66
+ "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
60
67
  },
61
- "line-height": "1.5"
68
+ "wide": {
69
+ "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
70
+ },
71
+ "line-height": "1.4"
62
72
  },
63
73
  "5": {
64
- "font-size": {
65
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
66
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
74
+ "narrow": {
75
+ "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
67
76
  },
68
- "line-height": "1.4"
77
+ "wide": {
78
+ "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
79
+ },
80
+ "line-height": "1.5"
69
81
  },
70
82
  "6": {
71
- "font-size": {
72
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
73
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
83
+ "narrow": {
84
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
85
+ },
86
+ "wide": {
87
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
74
88
  },
75
89
  "line-height": "1.6"
76
90
  },
77
91
  "7": {
78
- "font-size": {
79
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
80
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
92
+ "narrow": {
93
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
94
+ },
95
+ "wide": {
96
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
81
97
  },
82
98
  "line-height": "1.6"
83
99
  }
@@ -99,59 +115,225 @@
99
115
  "xl": "2.5rem"
100
116
  }
101
117
  },
118
+ "accordion": {
119
+ "button": {
120
+ "color": "#004699",
121
+ "focus": {
122
+ "outline-offset": "2px"
123
+ },
124
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
125
+ "font-weight": 800,
126
+ "line-height": "1.5",
127
+ "narrow": {
128
+ "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
129
+ },
130
+ "wide": {
131
+ "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
132
+ },
133
+ "hover": {
134
+ "box-shadow": "inset 0 0 0 2px #767676"
135
+ }
136
+ }
137
+ },
138
+ "blockquote": {
139
+ "color": "#000000",
140
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
141
+ "font-weight": 800,
142
+ "inverse-color": "#ffffff",
143
+ "line-height": "1.4",
144
+ "narrow": {
145
+ "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
146
+ },
147
+ "wide": {
148
+ "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
149
+ }
150
+ },
151
+ "breadcrumb": {
152
+ "color": "#004699",
153
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
154
+ "line-height": "1.6",
155
+ "narrow": {
156
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
157
+ },
158
+ "wide": {
159
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
160
+ },
161
+ "item-link": {
162
+ "outline-offset": "2px",
163
+ "hover": {
164
+ "color": "#00387A",
165
+ "box-shadow": "inset 0 -2px 0 0 #00387A"
166
+ },
167
+ "focus": {
168
+ "color": "#00387A",
169
+ "text-decoration": "underline"
170
+ }
171
+ }
172
+ },
102
173
  "button": {
103
- "font-size": {
104
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
105
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
174
+ "narrow": {
175
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
176
+ },
177
+ "wide": {
178
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
106
179
  },
107
180
  "secondary": {
181
+ "box-shadow": "inset 0 0 0 2px #004699",
108
182
  "hover": {
109
- "box-shadow": "0 0 0 1px #00387A"
183
+ "box-shadow": "inset 0 0 0 3px #00387A"
184
+ },
185
+ "disabled": {
186
+ "box-shadow": "inset 0 0 0 2px #B4B4B4"
187
+ },
188
+ "focus": {
189
+ "box-shadow": "inset 0 0 0 3px #00387A",
190
+ "color": "#00387A"
191
+ }
192
+ },
193
+ "tertiary": {
194
+ "hover": {
195
+ "box-shadow": "inset 0 0 0 2px #767676"
196
+ },
197
+ "focus": {
198
+ "box-shadow": "inset 0 0 0 2px #767676"
110
199
  }
111
200
  }
112
201
  },
113
- "form-label": {
202
+ "checkbox": {
114
203
  "color": "#000000",
204
+ "checkmark": {
205
+ "border-color": "#004699",
206
+ "checked": {
207
+ "background-color": "#004699",
208
+ "hover": {
209
+ "background-color": "#00387A"
210
+ }
211
+ },
212
+ "disabled": {
213
+ "border-color": "#767676",
214
+ "checked": {
215
+ "background-color": "#767676",
216
+ "hover": {
217
+ "background-color": "#767676"
218
+ }
219
+ },
220
+ "indeterminate": {
221
+ "background-color": "#767676",
222
+ "hover": {
223
+ "background-color": "#767676"
224
+ }
225
+ }
226
+ },
227
+ "hover": {
228
+ "border-color": "#00387A"
229
+ },
230
+ "invalid": {
231
+ "border-color": "#EC0000",
232
+ "checked": {
233
+ "background-color": "#EC0000",
234
+ "hover": {
235
+ "background-color": "#EC0000"
236
+ }
237
+ },
238
+ "hover": {
239
+ "border-color": "#EC0000"
240
+ },
241
+ "indeterminate": {
242
+ "background-color": "#EC0000",
243
+ "hover": {
244
+ "background-color": "#EC0000"
245
+ }
246
+ }
247
+ },
248
+ "indeterminate": {
249
+ "background-color": "#004699",
250
+ "hover": {
251
+ "background-color": "#00387A"
252
+ }
253
+ },
254
+ "narrow": {
255
+ "size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
256
+ },
257
+ "wide": {
258
+ "size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
259
+ },
260
+ "multiplier": "1.6"
261
+ },
262
+ "disabled": {
263
+ "color": "#767676"
264
+ },
115
265
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
116
- "font-size": {
117
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
118
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
266
+ "font-weight": 400,
267
+ "hover": {
268
+ "color": "#00387A"
269
+ },
270
+ "outline-offset": "2px",
271
+ "line-height": "1.6",
272
+ "narrow": {
273
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
119
274
  },
275
+ "wide": {
276
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
277
+ }
278
+ },
279
+ "footer": {
280
+ "top": {
281
+ "background-color": "#004699"
282
+ }
283
+ },
284
+ "form-label": {
285
+ "color": "#000000",
286
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
120
287
  "font-weight": 800,
121
- "line-height": "1.6"
288
+ "line-height": "1.6",
289
+ "narrow": {
290
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
291
+ },
292
+ "wide": {
293
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
294
+ }
122
295
  },
123
296
  "heading": {
124
297
  "1": {
125
- "font-size": {
126
- "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
127
- "wide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
298
+ "line-height": "1.2",
299
+ "narrow": {
300
+ "font-size": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)"
128
301
  },
129
- "line-height": "1.2"
302
+ "wide": {
303
+ "font-size": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
304
+ }
130
305
  },
131
306
  "2": {
132
- "font-size": {
133
- "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
134
- "wide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
307
+ "line-height": "1.3",
308
+ "narrow": {
309
+ "font-size": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)"
135
310
  },
136
- "line-height": "1.3"
311
+ "wide": {
312
+ "font-size": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
313
+ }
137
314
  },
138
315
  "3": {
139
- "font-size": {
140
- "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
141
- "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
316
+ "line-height": "1.4",
317
+ "narrow": {
318
+ "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
142
319
  },
143
- "line-height": "1.4"
320
+ "wide": {
321
+ "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
322
+ }
144
323
  },
145
324
  "4": {
146
- "font-size": {
147
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
148
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
325
+ "line-height": "1.4",
326
+ "narrow": {
327
+ "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
149
328
  },
150
- "line-height": "1.4"
329
+ "wide": {
330
+ "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
331
+ }
151
332
  },
152
333
  "color": "#000000",
153
334
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
154
- "font-weight": 800
335
+ "font-weight": 800,
336
+ "inverse-color": "#ffffff"
155
337
  },
156
338
  "icon": {
157
339
  "size-3": {
@@ -163,17 +345,17 @@
163
345
  },
164
346
  "size-4": {
165
347
  "icon-size": {
166
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
167
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
348
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
349
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
168
350
  },
169
- "container-multiplier": "1.5"
351
+ "container-multiplier": "1.4"
170
352
  },
171
353
  "size-5": {
172
354
  "icon-size": {
173
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
174
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
355
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
356
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
175
357
  },
176
- "container-multiplier": "1.4"
358
+ "container-multiplier": "1.5"
177
359
  },
178
360
  "size-6": {
179
361
  "icon-size": {
@@ -193,58 +375,59 @@
193
375
  "link": {
194
376
  "color": "#004699",
195
377
  "outline-offset": "2px",
196
- "text-decoration": "none",
197
- "text-underline-offset": "9px",
198
- "text-decoration-thickness": "2px",
199
378
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
200
- "font-size": {
201
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
202
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
203
- },
204
379
  "font-weight": 400,
205
380
  "focus": {
206
- "color": "#00387A",
207
- "text-decoration": "underline"
208
- },
209
- "hover": {
210
- "color": "#00387A",
211
- "text-decoration": "underline",
212
- "text-decoration-thickness": "2px"
213
- },
214
- "line-height": "1.6",
215
- "visited": {
216
- "color": "#004699"
217
- },
218
- "standalone-bold": {
219
- "font-weight": 800
381
+ "color": "#00387A"
220
382
  },
221
383
  "inline": {
222
- "text-underline-offset": "3px",
384
+ "focus": {
385
+ "text-decoration": "underline",
386
+ "text-underline-offset": "3px"
387
+ },
223
388
  "font-family": "inherit",
224
389
  "font-size": "inherit",
390
+ "line-height": "inherit",
391
+ "text-decoration": "none",
225
392
  "visited": {
226
393
  "color": "#A00078"
227
394
  }
228
395
  },
229
396
  "in-list": {
230
397
  "gap": "0.5em",
231
- "text-underline-offset": "0.3em",
232
- "font-size": {
233
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
234
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
398
+ "focus": {
399
+ "text-decoration": "underline",
400
+ "text-decoration-thickness": "2px",
401
+ "text-underline-offset": "7px"
402
+ },
403
+ "text-decoration": "none",
404
+ "line-height": "1.6",
405
+ "narrow": {
406
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
235
407
  },
236
- "line-height": "1.6"
408
+ "wide": {
409
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
410
+ }
237
411
  },
238
- "on-background-dark": {
239
- "color": "#ffffff",
240
- "text-decoration": "underline",
412
+ "standalone": {
413
+ "text-underline-offset": "8px",
414
+ "text-decoration-thickness": "2px",
241
415
  "focus": {
242
- "color": "#ffffff",
243
- "text-decoration": "underline"
416
+ "text-decoration-thickness": "3px",
417
+ "text-underline-offset": "7px"
418
+ },
419
+ "line-height": "1.6",
420
+ "narrow": {
421
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
244
422
  },
423
+ "wide": {
424
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
425
+ }
426
+ },
427
+ "on-background-dark": {
428
+ "color": "#ffffff",
245
429
  "hover": {
246
- "color": "#ffffff",
247
- "text-decoration": "none"
430
+ "color": "#ffffff"
248
431
  },
249
432
  "visited": {
250
433
  "color": "#ffffff"
@@ -252,101 +435,192 @@
252
435
  },
253
436
  "on-background-light": {
254
437
  "color": "#000000",
255
- "text-decoration": "underline",
256
- "text-decoration-thickness": "2px",
257
- "text-underline-offset": "9px",
258
- "active": {
438
+ "hover": {
259
439
  "color": "#000000"
260
440
  },
261
- "font-size": {
262
- "narrow": {
263
- "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
264
- "filePath": "./src/brand/amsterdam/typography.tokens.json",
265
- "isSource": true,
266
- "original": {
267
- "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
268
- },
269
- "name": "amsterdamTypographyTextLevel6FontSizeNarrow",
270
- "attributes": {
271
- "category": "amsterdam",
272
- "type": "typography",
273
- "item": "text-level",
274
- "subitem": "6",
275
- "state": "font-size"
276
- },
277
- "path": [
278
- "amsterdam",
279
- "typography",
280
- "text-level",
281
- "6",
282
- "font-size",
283
- "narrow"
284
- ]
285
- },
286
- "wide": {
287
- "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
288
- "filePath": "./src/brand/amsterdam/typography.tokens.json",
289
- "isSource": true,
290
- "original": {
291
- "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
292
- },
293
- "name": "amsterdamTypographyTextLevel6FontSizeWide",
294
- "attributes": {
295
- "category": "amsterdam",
296
- "type": "typography",
297
- "item": "text-level",
298
- "subitem": "6",
299
- "state": "font-size"
300
- },
301
- "path": [
302
- "amsterdam",
303
- "typography",
304
- "text-level",
305
- "6",
306
- "font-size",
307
- "wide"
308
- ]
309
- }
441
+ "visited": {
442
+ "color": "#000000"
443
+ }
444
+ }
445
+ },
446
+ "ordered-list": {
447
+ "color": "#000000",
448
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
449
+ "font-weight": 400,
450
+ "gap": "0.75rem",
451
+ "line-height": "1.6",
452
+ "list-style-type": "decimal",
453
+ "narrow": {
454
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
455
+ },
456
+ "wide": {
457
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
458
+ },
459
+ "item": {
460
+ "margin-inline-start": "2.25rem",
461
+ "padding-inline-start": "0.25rem"
462
+ },
463
+ "ordered-list": {
464
+ "list-style-type": "lower-alpha",
465
+ "item": {
466
+ "margin-inline-start": "1.5rem",
467
+ "padding-inline-start": "0.25rem"
468
+ }
469
+ }
470
+ },
471
+ "page-grid": {
472
+ "column-count": {
473
+ "narrow": "4",
474
+ "wide": "12"
475
+ },
476
+ "column-gap": "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)",
477
+ "max-width": "1440px"
478
+ },
479
+ "page-heading": {
480
+ "color": "#000000",
481
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
482
+ "line-height": "1.1",
483
+ "narrow": {
484
+ "font-size": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)"
485
+ },
486
+ "wide": {
487
+ "font-size": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
488
+ },
489
+ "font-weight": 800,
490
+ "inverse-color": "#ffffff"
491
+ },
492
+ "page-menu": {
493
+ "column-gap": "2.5rem",
494
+ "row-gap": "0.5rem",
495
+ "item": {
496
+ "color": "#000000",
497
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
498
+ "font-weight": 400,
499
+ "gap": "0.5rem",
500
+ "line-height": "1.6",
501
+ "text-decoration": "none",
502
+ "narrow": {
503
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
310
504
  },
311
- "focus": {
312
- "color": "#000000",
313
- "text-decoration": "underline"
505
+ "wide": {
506
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
314
507
  },
315
508
  "hover": {
316
- "color": "#000000",
317
- "text-decoration": "none"
318
- },
319
- "visited": {
320
- "color": "#000000"
509
+ "color": "#00387A"
321
510
  }
322
511
  }
323
512
  },
324
513
  "paragraph": {
325
514
  "color": "#000000",
326
515
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
327
- "font-size": {
328
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
329
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
330
- },
331
516
  "font-weight": 400,
517
+ "inverse-color": "#ffffff",
332
518
  "line-height": "1.6",
519
+ "narrow": {
520
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
521
+ },
522
+ "wide": {
523
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
524
+ },
333
525
  "small": {
334
- "font-size": {
335
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
336
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
526
+ "line-height": "1.6",
527
+ "narrow": {
528
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
337
529
  },
338
- "line-height": "1.6"
530
+ "wide": {
531
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
532
+ }
339
533
  },
340
534
  "large": {
341
- "font-size": {
342
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
343
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
535
+ "line-height": "1.5",
536
+ "narrow": {
537
+ "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
538
+ },
539
+ "wide": {
540
+ "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
541
+ }
542
+ }
543
+ },
544
+ "top-task-link": {
545
+ "description": {
546
+ "color": "#000000",
547
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
548
+ "font-weight": 400,
549
+ "line-height": "1.6",
550
+ "narrow": {
551
+ "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
552
+ },
553
+ "wide": {
554
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
555
+ }
556
+ },
557
+ "label": {
558
+ "color": "#004699",
559
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
560
+ "font-weight": 800,
561
+ "hover": {
562
+ "color": "#00387A"
563
+ },
564
+ "line-height": "1.4",
565
+ "narrow": {
566
+ "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
344
567
  },
345
- "line-height": "1.5"
568
+ "wide": {
569
+ "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
570
+ }
571
+ },
572
+ "outline-offset": "2px"
573
+ },
574
+ "unordered-list": {
575
+ "color": "#000000",
576
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
577
+ "font-weight": 400,
578
+ "gap": "0.75rem",
579
+ "line-height": "1.6",
580
+ "list-style-type": "'\\2022'",
581
+ "narrow": {
582
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
583
+ },
584
+ "wide": {
585
+ "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
586
+ },
587
+ "item": {
588
+ "margin-inline-start": "1.625rem",
589
+ "padding-inline-start": "0.875rem"
590
+ },
591
+ "unordered-list": {
592
+ "list-style-type": "'\\2013'",
593
+ "item": {
594
+ "margin-inline-start": "0.875rem",
595
+ "padding-inline-start": "0.875rem"
596
+ }
346
597
  }
347
598
  }
348
599
  },
349
600
  "utrecht": {
601
+ "action": {
602
+ "activate": {
603
+ "cursor": "pointer"
604
+ },
605
+ "busy": {
606
+ "cursor": "wait"
607
+ },
608
+ "disabled": {
609
+ "cursor": "not-allowed"
610
+ },
611
+ "inert": {
612
+ "cursor": "default"
613
+ },
614
+ "navigate": {
615
+ "cursor": "pointer"
616
+ },
617
+ "submit": {
618
+ "cursor": "pointer"
619
+ }
620
+ },
621
+ "focus": {
622
+ "outline-offset": "2px"
623
+ },
350
624
  "button": {
351
625
  "background-color": "#004699",
352
626
  "border-color": {},
@@ -370,10 +644,10 @@
370
644
  "disabled": {
371
645
  "background-color": "#B4B4B4",
372
646
  "color": "#ffffff",
373
- "border-color": "transparent"
647
+ "border-color": {}
374
648
  },
375
649
  "hover": {
376
- "background-color": "#00387A"
650
+ "background-color": {}
377
651
  },
378
652
  "focus": {
379
653
  "scale": {}
@@ -394,7 +668,7 @@
394
668
  "color": {}
395
669
  },
396
670
  "focus": {
397
- "background-color": {},
671
+ "background-color": "#00387A",
398
672
  "border-color": {},
399
673
  "border-width": {}
400
674
  },
@@ -453,17 +727,17 @@
453
727
  "secondary-action": {
454
728
  "background-color": "#ffffff",
455
729
  "color": "#004699",
456
- "border-color": "#004699",
457
- "border-width": "2px",
730
+ "border-color": {},
731
+ "border-width": {},
458
732
  "hover": {
459
733
  "background-color": {},
460
734
  "color": "#00387A",
461
- "border-color": "#00387A"
735
+ "border-color": {}
462
736
  },
463
737
  "disabled": {
464
738
  "background-color": "#ffffff",
465
739
  "color": "#B4B4B4",
466
- "border-color": "#B4B4B4"
740
+ "border-color": {}
467
741
  },
468
742
  "danger": {
469
743
  "background-color": {},
@@ -520,17 +794,17 @@
520
794
  "subtle": {
521
795
  "background-color": "transparent",
522
796
  "border-color": {},
523
- "border-width": "2px",
797
+ "border-width": {},
524
798
  "color": "#004699",
525
799
  "font-weight": {},
526
800
  "hover": {
527
801
  "background-color": {},
528
- "color": {},
529
- "border-color": "#767676"
802
+ "color": "#00387A",
803
+ "border-color": {}
530
804
  },
531
805
  "focus": {
532
806
  "background-color": {},
533
- "color": {},
807
+ "color": "#00387A",
534
808
  "border-color": {}
535
809
  },
536
810
  "disabled": {