@amsterdam/design-system-tokens 0.1.3 → 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 +188 -93
  2. package/dist/index.css +188 -93
  3. package/dist/index.d.ts +183 -80
  4. package/dist/index.js +178 -83
  5. package/dist/index.json +177 -82
  6. package/dist/index.tokens.json +416 -183
  7. package/dist/root.css +188 -93
  8. package/dist/tokens.d.ts +411 -129
  9. package/dist/tokens.js +4089 -1901
  10. package/dist/variables.less +188 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +40 -24
  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 +6 -4
  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 +25 -11
  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.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
59
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
65
+ "narrow": {
66
+ "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
67
+ },
68
+ "wide": {
69
+ "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
60
70
  },
61
71
  "line-height": "1.4"
62
72
  },
63
73
  "5": {
64
- "font-size": {
65
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
66
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
74
+ "narrow": {
75
+ "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
76
+ },
77
+ "wide": {
78
+ "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
67
79
  },
68
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
  }
@@ -106,70 +122,218 @@
106
122
  "outline-offset": "2px"
107
123
  },
108
124
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
109
- "font-size": {
110
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
111
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
112
- },
113
125
  "font-weight": 800,
114
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
+ },
115
133
  "hover": {
116
134
  "box-shadow": "inset 0 0 0 2px #767676"
117
135
  }
118
136
  }
119
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
+ },
120
173
  "button": {
121
- "font-size": {
122
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
123
- "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)"
124
179
  },
125
180
  "secondary": {
181
+ "box-shadow": "inset 0 0 0 2px #004699",
126
182
  "hover": {
127
- "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"
128
199
  }
129
200
  }
130
201
  },
131
- "form-label": {
202
+ "checkbox": {
132
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
+ },
133
265
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
134
- "font-size": {
135
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
136
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
266
+ "font-weight": 400,
267
+ "hover": {
268
+ "color": "#00387A"
137
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)"
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",
138
287
  "font-weight": 800,
139
- "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
+ }
140
295
  },
141
296
  "heading": {
142
297
  "1": {
143
- "font-size": {
144
- "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
145
- "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)"
146
301
  },
147
- "line-height": "1.2"
302
+ "wide": {
303
+ "font-size": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
304
+ }
148
305
  },
149
306
  "2": {
150
- "font-size": {
151
- "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
152
- "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)"
153
310
  },
154
- "line-height": "1.3"
311
+ "wide": {
312
+ "font-size": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
313
+ }
155
314
  },
156
315
  "3": {
157
- "font-size": {
158
- "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
159
- "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)"
160
319
  },
161
- "line-height": "1.4"
320
+ "wide": {
321
+ "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
322
+ }
162
323
  },
163
324
  "4": {
164
- "font-size": {
165
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
166
- "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)"
167
328
  },
168
- "line-height": "1.4"
329
+ "wide": {
330
+ "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
331
+ }
169
332
  },
170
333
  "color": "#000000",
171
334
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
172
- "font-weight": 800
335
+ "font-weight": 800,
336
+ "inverse-color": "#ffffff"
173
337
  },
174
338
  "icon": {
175
339
  "size-3": {
@@ -211,58 +375,59 @@
211
375
  "link": {
212
376
  "color": "#004699",
213
377
  "outline-offset": "2px",
214
- "text-decoration": "none",
215
- "text-underline-offset": "9px",
216
- "text-decoration-thickness": "2px",
217
378
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
218
- "font-size": {
219
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
220
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
221
- },
222
379
  "font-weight": 400,
223
380
  "focus": {
224
- "color": "#00387A",
225
- "text-decoration": "underline"
226
- },
227
- "hover": {
228
- "color": "#00387A",
229
- "text-decoration": "underline",
230
- "text-decoration-thickness": "2px"
231
- },
232
- "line-height": "1.6",
233
- "visited": {
234
- "color": "#004699"
235
- },
236
- "standalone-bold": {
237
- "font-weight": 800
381
+ "color": "#00387A"
238
382
  },
239
383
  "inline": {
240
- "text-underline-offset": "3px",
384
+ "focus": {
385
+ "text-decoration": "underline",
386
+ "text-underline-offset": "3px"
387
+ },
241
388
  "font-family": "inherit",
242
389
  "font-size": "inherit",
390
+ "line-height": "inherit",
391
+ "text-decoration": "none",
243
392
  "visited": {
244
393
  "color": "#A00078"
245
394
  }
246
395
  },
247
396
  "in-list": {
248
397
  "gap": "0.5em",
249
- "text-underline-offset": "0.3em",
250
- "font-size": {
251
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
252
- "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)"
253
407
  },
254
- "line-height": "1.6"
408
+ "wide": {
409
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
410
+ }
255
411
  },
256
- "on-background-dark": {
257
- "color": "#ffffff",
258
- "text-decoration": "underline",
412
+ "standalone": {
413
+ "text-underline-offset": "8px",
414
+ "text-decoration-thickness": "2px",
259
415
  "focus": {
260
- "color": "#ffffff",
261
- "text-decoration": "underline"
416
+ "text-decoration-thickness": "3px",
417
+ "text-underline-offset": "7px"
262
418
  },
419
+ "line-height": "1.6",
420
+ "narrow": {
421
+ "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
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",
263
429
  "hover": {
264
- "color": "#ffffff",
265
- "text-decoration": "none"
430
+ "color": "#ffffff"
266
431
  },
267
432
  "visited": {
268
433
  "color": "#ffffff"
@@ -270,124 +435,192 @@
270
435
  },
271
436
  "on-background-light": {
272
437
  "color": "#000000",
273
- "text-decoration": "underline",
274
- "text-decoration-thickness": "2px",
275
- "text-underline-offset": "9px",
276
- "active": {
438
+ "hover": {
277
439
  "color": "#000000"
278
440
  },
279
- "font-size": {
280
- "narrow": {
281
- "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
282
- "filePath": "./src/brand/amsterdam/typography.tokens.json",
283
- "isSource": true,
284
- "original": {
285
- "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
286
- },
287
- "name": "amsterdamTypographyTextLevel6FontSizeNarrow",
288
- "attributes": {
289
- "category": "amsterdam",
290
- "type": "typography",
291
- "item": "text-level",
292
- "subitem": "6",
293
- "state": "font-size"
294
- },
295
- "path": [
296
- "amsterdam",
297
- "typography",
298
- "text-level",
299
- "6",
300
- "font-size",
301
- "narrow"
302
- ]
303
- },
304
- "wide": {
305
- "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
306
- "filePath": "./src/brand/amsterdam/typography.tokens.json",
307
- "isSource": true,
308
- "original": {
309
- "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
310
- },
311
- "name": "amsterdamTypographyTextLevel6FontSizeWide",
312
- "attributes": {
313
- "category": "amsterdam",
314
- "type": "typography",
315
- "item": "text-level",
316
- "subitem": "6",
317
- "state": "font-size"
318
- },
319
- "path": [
320
- "amsterdam",
321
- "typography",
322
- "text-level",
323
- "6",
324
- "font-size",
325
- "wide"
326
- ]
327
- }
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)"
328
504
  },
329
- "focus": {
330
- "color": "#000000",
331
- "text-decoration": "underline"
505
+ "wide": {
506
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
332
507
  },
333
508
  "hover": {
334
- "color": "#000000",
335
- "text-decoration": "none"
336
- },
337
- "visited": {
338
- "color": "#000000"
509
+ "color": "#00387A"
339
510
  }
340
511
  }
341
512
  },
342
513
  "paragraph": {
343
514
  "color": "#000000",
344
515
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
345
- "font-size": {
346
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
347
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
348
- },
349
516
  "font-weight": 400,
517
+ "inverse-color": "#ffffff",
350
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
+ },
351
525
  "small": {
352
- "font-size": {
353
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
354
- "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)"
355
529
  },
356
- "line-height": "1.6"
530
+ "wide": {
531
+ "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
532
+ }
357
533
  },
358
534
  "large": {
359
- "font-size": {
360
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
361
- "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)"
362
538
  },
363
- "line-height": "1.5"
539
+ "wide": {
540
+ "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
541
+ }
364
542
  }
365
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)"
567
+ },
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
+ },
366
574
  "unordered-list": {
367
575
  "color": "#000000",
368
576
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
369
- "font-size": {
370
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
371
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
372
- },
373
577
  "font-weight": 400,
374
- "gap": "0.5rem",
578
+ "gap": "0.75rem",
375
579
  "line-height": "1.6",
376
- "list-style": "square",
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
+ },
377
587
  "item": {
378
- "padding-inline": "3px 0"
588
+ "margin-inline-start": "1.625rem",
589
+ "padding-inline-start": "0.875rem"
379
590
  },
380
591
  "unordered-list": {
381
- "padding-block": "4px 0",
382
- "padding-inline": "14px 0",
383
- "list-style-type": "'–'",
592
+ "list-style-type": "'\\2013'",
384
593
  "item": {
385
- "padding-inline": "11px 0"
594
+ "margin-inline-start": "0.875rem",
595
+ "padding-inline-start": "0.875rem"
386
596
  }
387
597
  }
388
598
  }
389
599
  },
390
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
+ },
391
624
  "button": {
392
625
  "background-color": "#004699",
393
626
  "border-color": {},
@@ -411,10 +644,10 @@
411
644
  "disabled": {
412
645
  "background-color": "#B4B4B4",
413
646
  "color": "#ffffff",
414
- "border-color": "transparent"
647
+ "border-color": {}
415
648
  },
416
649
  "hover": {
417
- "background-color": "#00387A"
650
+ "background-color": {}
418
651
  },
419
652
  "focus": {
420
653
  "scale": {}
@@ -435,7 +668,7 @@
435
668
  "color": {}
436
669
  },
437
670
  "focus": {
438
- "background-color": {},
671
+ "background-color": "#00387A",
439
672
  "border-color": {},
440
673
  "border-width": {}
441
674
  },
@@ -494,17 +727,17 @@
494
727
  "secondary-action": {
495
728
  "background-color": "#ffffff",
496
729
  "color": "#004699",
497
- "border-color": "#004699",
498
- "border-width": "2px",
730
+ "border-color": {},
731
+ "border-width": {},
499
732
  "hover": {
500
733
  "background-color": {},
501
734
  "color": "#00387A",
502
- "border-color": "#00387A"
735
+ "border-color": {}
503
736
  },
504
737
  "disabled": {
505
738
  "background-color": "#ffffff",
506
739
  "color": "#B4B4B4",
507
- "border-color": "#B4B4B4"
740
+ "border-color": {}
508
741
  },
509
742
  "danger": {
510
743
  "background-color": {},
@@ -561,17 +794,17 @@
561
794
  "subtle": {
562
795
  "background-color": "transparent",
563
796
  "border-color": {},
564
- "border-width": "2px",
797
+ "border-width": {},
565
798
  "color": "#004699",
566
799
  "font-weight": {},
567
800
  "hover": {
568
801
  "background-color": {},
569
- "color": {},
570
- "border-color": "#767676"
802
+ "color": "#00387A",
803
+ "border-color": {}
571
804
  },
572
805
  "focus": {
573
806
  "background-color": {},
574
- "color": {},
807
+ "color": "#00387A",
575
808
  "border-color": {}
576
809
  },
577
810
  "disabled": {