@amsterdam/design-system-tokens 0.1.3 → 0.1.5

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 +189 -93
  2. package/dist/index.css +189 -93
  3. package/dist/index.d.ts +184 -80
  4. package/dist/index.js +189 -93
  5. package/dist/index.json +188 -92
  6. package/dist/index.tokens.json +426 -192
  7. package/dist/root.css +189 -93
  8. package/dist/tokens.d.ts +412 -129
  9. package/dist/tokens.js +4121 -1910
  10. package/dist/variables.less +189 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +52 -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 +26 -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, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
31
+ },
32
+ "wide": {
33
+ "font-size": "clamp(4rem, calc(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, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
40
+ },
41
+ "wide": {
42
+ "font-size": "clamp(3rem, calc(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, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)"
49
+ },
50
+ "wide": {
51
+ "font-size": "clamp(2.25rem, calc(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, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
58
+ },
59
+ "wide": {
60
+ "font-size": "clamp(1.8125rem, calc(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, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
67
+ },
68
+ "wide": {
69
+ "font-size": "clamp(1.4375rem, calc(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, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
76
+ },
77
+ "wide": {
78
+ "font-size": "clamp(1.625rem, calc(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, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
85
+ },
86
+ "wide": {
87
+ "font-size": "clamp(1.3125rem, calc(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, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
94
+ },
95
+ "wide": {
96
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
81
97
  },
82
98
  "line-height": "1.6"
83
99
  }
@@ -106,104 +122,252 @@
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, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
129
+ },
130
+ "wide": {
131
+ "font-size": "clamp(1.625rem, calc(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, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
146
+ },
147
+ "wide": {
148
+ "font-size": "clamp(1.8125rem, calc(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, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
157
+ },
158
+ "wide": {
159
+ "font-size": "clamp(1.0625rem, calc(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, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
176
+ },
177
+ "wide": {
178
+ "font-size": "clamp(1.3125rem, calc(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",
182
+ "hover": {
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": {
126
194
  "hover": {
127
- "box-shadow": "0 0 0 1px #00387A"
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, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
256
+ },
257
+ "wide": {
258
+ "size": "clamp(1.3125rem, calc(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"
269
+ },
270
+ "outline-offset": "2px",
271
+ "line-height": "1.6",
272
+ "narrow": {
273
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
137
274
  },
275
+ "wide": {
276
+ "font-size": "clamp(1.3125rem, calc(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, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
291
+ },
292
+ "wide": {
293
+ "font-size": "clamp(1.0625rem, calc(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, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
146
301
  },
147
- "line-height": "1.2"
302
+ "wide": {
303
+ "font-size": "clamp(3rem, calc(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, calc(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, calc(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, calc(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, calc(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, calc(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, calc(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": {
176
340
  "icon-size": {
177
- "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
178
- "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
341
+ "narrow": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)",
342
+ "wide": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
179
343
  },
180
344
  "container-multiplier": "1.4"
181
345
  },
182
346
  "size-4": {
183
347
  "icon-size": {
184
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
185
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
348
+ "narrow": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)",
349
+ "wide": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
186
350
  },
187
351
  "container-multiplier": "1.4"
188
352
  },
189
353
  "size-5": {
190
354
  "icon-size": {
191
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
192
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
355
+ "narrow": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
356
+ "wide": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
193
357
  },
194
358
  "container-multiplier": "1.5"
195
359
  },
196
360
  "size-6": {
197
361
  "icon-size": {
198
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
199
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
362
+ "narrow": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
363
+ "wide": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
200
364
  },
201
365
  "container-multiplier": "1.6"
202
366
  },
203
367
  "size-7": {
204
368
  "icon-size": {
205
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
206
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
369
+ "narrow": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
370
+ "wide": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
207
371
  },
208
372
  "container-multiplier": "1.6"
209
373
  }
@@ -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, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
253
407
  },
254
- "line-height": "1.6"
408
+ "wide": {
409
+ "font-size": "clamp(1.0625rem, calc(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, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
422
+ },
423
+ "wide": {
424
+ "font-size": "clamp(1.3125rem, calc(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,193 @@
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, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
455
+ },
456
+ "wide": {
457
+ "font-size": "clamp(1.3125rem, calc(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, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
485
+ },
486
+ "wide": {
487
+ "font-size": "clamp(4rem, calc(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, calc(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, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
332
507
  },
333
508
  "hover": {
334
509
  "color": "#000000",
335
- "text-decoration": "none"
336
- },
337
- "visited": {
338
- "color": "#000000"
510
+ "text-decoration": "underline"
339
511
  }
340
512
  }
341
513
  },
342
514
  "paragraph": {
343
515
  "color": "#000000",
344
516
  "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
517
  "font-weight": 400,
518
+ "inverse-color": "#ffffff",
350
519
  "line-height": "1.6",
520
+ "narrow": {
521
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
522
+ },
523
+ "wide": {
524
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
525
+ },
351
526
  "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)"
527
+ "line-height": "1.6",
528
+ "narrow": {
529
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
355
530
  },
356
- "line-height": "1.6"
531
+ "wide": {
532
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
533
+ }
357
534
  },
358
535
  "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)"
536
+ "line-height": "1.5",
537
+ "narrow": {
538
+ "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
362
539
  },
363
- "line-height": "1.5"
540
+ "wide": {
541
+ "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
542
+ }
364
543
  }
365
544
  },
545
+ "top-task-link": {
546
+ "description": {
547
+ "color": "#000000",
548
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
549
+ "font-weight": 400,
550
+ "line-height": "1.6",
551
+ "narrow": {
552
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
553
+ },
554
+ "wide": {
555
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
556
+ }
557
+ },
558
+ "label": {
559
+ "color": "#004699",
560
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
561
+ "font-weight": 800,
562
+ "hover": {
563
+ "color": "#00387A"
564
+ },
565
+ "line-height": "1.4",
566
+ "narrow": {
567
+ "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
568
+ },
569
+ "wide": {
570
+ "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
571
+ }
572
+ },
573
+ "outline-offset": "2px"
574
+ },
366
575
  "unordered-list": {
367
576
  "color": "#000000",
368
577
  "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
578
  "font-weight": 400,
374
- "gap": "0.5rem",
579
+ "gap": "0.75rem",
375
580
  "line-height": "1.6",
376
- "list-style": "square",
581
+ "list-style-type": "'\\2022'",
582
+ "narrow": {
583
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
584
+ },
585
+ "wide": {
586
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
587
+ },
377
588
  "item": {
378
- "padding-inline": "3px 0"
589
+ "margin-inline-start": "1.625rem",
590
+ "padding-inline-start": "0.875rem"
379
591
  },
380
592
  "unordered-list": {
381
- "padding-block": "4px 0",
382
- "padding-inline": "14px 0",
383
- "list-style-type": "'–'",
593
+ "list-style-type": "'\\2013'",
384
594
  "item": {
385
- "padding-inline": "11px 0"
595
+ "margin-inline-start": "0.875rem",
596
+ "padding-inline-start": "0.875rem"
386
597
  }
387
598
  }
388
599
  }
389
600
  },
390
601
  "utrecht": {
602
+ "action": {
603
+ "activate": {
604
+ "cursor": "pointer"
605
+ },
606
+ "busy": {
607
+ "cursor": "wait"
608
+ },
609
+ "disabled": {
610
+ "cursor": "not-allowed"
611
+ },
612
+ "inert": {
613
+ "cursor": "default"
614
+ },
615
+ "navigate": {
616
+ "cursor": "pointer"
617
+ },
618
+ "submit": {
619
+ "cursor": "pointer"
620
+ }
621
+ },
622
+ "focus": {
623
+ "outline-offset": "2px"
624
+ },
391
625
  "button": {
392
626
  "background-color": "#004699",
393
627
  "border-color": {},
@@ -411,10 +645,10 @@
411
645
  "disabled": {
412
646
  "background-color": "#B4B4B4",
413
647
  "color": "#ffffff",
414
- "border-color": "transparent"
648
+ "border-color": {}
415
649
  },
416
650
  "hover": {
417
- "background-color": "#00387A"
651
+ "background-color": {}
418
652
  },
419
653
  "focus": {
420
654
  "scale": {}
@@ -435,7 +669,7 @@
435
669
  "color": {}
436
670
  },
437
671
  "focus": {
438
- "background-color": {},
672
+ "background-color": "#00387A",
439
673
  "border-color": {},
440
674
  "border-width": {}
441
675
  },
@@ -494,17 +728,17 @@
494
728
  "secondary-action": {
495
729
  "background-color": "#ffffff",
496
730
  "color": "#004699",
497
- "border-color": "#004699",
498
- "border-width": "2px",
731
+ "border-color": {},
732
+ "border-width": {},
499
733
  "hover": {
500
734
  "background-color": {},
501
735
  "color": "#00387A",
502
- "border-color": "#00387A"
736
+ "border-color": {}
503
737
  },
504
738
  "disabled": {
505
739
  "background-color": "#ffffff",
506
740
  "color": "#B4B4B4",
507
- "border-color": "#B4B4B4"
741
+ "border-color": {}
508
742
  },
509
743
  "danger": {
510
744
  "background-color": {},
@@ -561,17 +795,17 @@
561
795
  "subtle": {
562
796
  "background-color": "transparent",
563
797
  "border-color": {},
564
- "border-width": "2px",
798
+ "border-width": {},
565
799
  "color": "#004699",
566
800
  "font-weight": {},
567
801
  "hover": {
568
802
  "background-color": {},
569
- "color": {},
570
- "border-color": "#767676"
803
+ "color": "#00387A",
804
+ "border-color": {}
571
805
  },
572
806
  "focus": {
573
807
  "background-color": {},
574
- "color": {},
808
+ "color": "#00387A",
575
809
  "border-color": {}
576
810
  },
577
811
  "disabled": {