@amsterdam/design-system-tokens 0.1.7 → 0.2.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 (37) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/_variables.scss +240 -152
  3. package/dist/index.css +240 -152
  4. package/dist/index.d.ts +222 -134
  5. package/dist/index.js +227 -139
  6. package/dist/index.json +226 -138
  7. package/dist/index.tokens.json +388 -271
  8. package/dist/root.css +240 -152
  9. package/dist/tokens.d.ts +372 -255
  10. package/dist/tokens.js +4043 -2036
  11. package/dist/variables.less +240 -152
  12. package/package.json +2 -2
  13. package/src/brand/amsterdam/typography.tokens.json +70 -84
  14. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  15. package/src/components/amsterdam/accordion.tokens.json +8 -7
  16. package/src/components/amsterdam/alert.tokens.json +6 -5
  17. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  18. package/src/components/amsterdam/breadcrumb.tokens.json +19 -34
  19. package/src/components/amsterdam/button.tokens.json +6 -4
  20. package/src/components/amsterdam/card.tokens.json +6 -2
  21. package/src/components/amsterdam/checkbox.tokens.json +7 -13
  22. package/src/components/amsterdam/dialog.tokens.json +48 -0
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +6 -6
  25. package/src/components/amsterdam/heading.tokens.json +44 -28
  26. package/src/components/amsterdam/icon.tokens.json +37 -28
  27. package/src/components/amsterdam/link.tokens.json +41 -33
  28. package/src/components/amsterdam/logo.tokens.json +10 -0
  29. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  30. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  31. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  32. package/src/components/amsterdam/pagination.tokens.json +17 -18
  33. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  34. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  35. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  36. package/src/components/utrecht/button.tokens.json +1 -3
  37. package/src/components/amsterdam/footer.tokens.json +0 -11
package/dist/index.tokens.json CHANGED
@@ -32,78 +32,76 @@
32
32
  "normal": 400,
33
33
  "bold": 800
34
34
  },
35
- "text-level": {
36
- "0": {
37
- "narrow": {
38
- "font-size": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
35
+ "spacious": {
36
+ "text-level": {
37
+ "0": {
38
+ "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
39
+ "line-height": "1.1"
39
40
  },
40
- "wide": {
41
- "font-size": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)"
41
+ "1": {
42
+ "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
43
+ "line-height": "1.2"
42
44
  },
43
- "line-height": "1.1"
44
- },
45
- "1": {
46
- "narrow": {
47
- "font-size": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
45
+ "2": {
46
+ "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
47
+ "line-height": "1.3"
48
48
  },
49
- "wide": {
50
- "font-size": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)"
49
+ "3": {
50
+ "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
51
+ "line-height": "1.4"
51
52
  },
52
- "line-height": "1.2"
53
- },
54
- "2": {
55
- "narrow": {
56
- "font-size": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)"
53
+ "4": {
54
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
55
+ "line-height": "1.4"
57
56
  },
58
- "wide": {
59
- "font-size": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)"
57
+ "5": {
58
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
59
+ "line-height": "1.5"
60
60
  },
61
- "line-height": "1.3"
62
- },
63
- "3": {
64
- "narrow": {
65
- "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
61
+ "6": {
62
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
63
+ "line-height": "1.6"
66
64
  },
67
- "wide": {
68
- "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
65
+ "7": {
66
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
67
+ "line-height": "1.6"
68
+ }
69
+ }
70
+ },
71
+ "compact": {
72
+ "text-level": {
73
+ "0": {
74
+ "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
75
+ "line-height": "1.1"
69
76
  },
70
- "line-height": "1.4"
71
- },
72
- "4": {
73
- "narrow": {
74
- "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
77
+ "1": {
78
+ "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)",
79
+ "line-height": "1.2"
75
80
  },
76
- "wide": {
77
- "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
81
+ "2": {
82
+ "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)",
83
+ "line-height": "1.3"
78
84
  },
79
- "line-height": "1.4"
80
- },
81
- "5": {
82
- "narrow": {
83
- "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
85
+ "3": {
86
+ "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
87
+ "line-height": "1.4"
84
88
  },
85
- "wide": {
86
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
89
+ "4": {
90
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
91
+ "line-height": "1.4"
87
92
  },
88
- "line-height": "1.5"
89
- },
90
- "6": {
91
- "narrow": {
92
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
93
- },
94
- "wide": {
95
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
96
- },
97
- "line-height": "1.6"
98
- },
99
- "7": {
100
- "narrow": {
101
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
93
+ "5": {
94
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
95
+ "line-height": "1.5"
102
96
  },
103
- "wide": {
104
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
97
+ "6": {
98
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
99
+ "line-height": "1.6"
105
100
  },
106
- "line-height": "1.6"
101
+ "7": {
102
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
103
+ "line-height": "1.6"
104
+ }
107
105
  }
108
106
  }
109
107
  },
@@ -115,6 +113,33 @@
115
113
  "focus": {
116
114
  "outline-offset": "2px"
117
115
  },
116
+ "link-appearance": {
117
+ "color": "#004699",
118
+ "text-decoration-thickness": "0.125rem",
119
+ "text-underline-offset": "0.375rem",
120
+ "hover": {
121
+ "color": "#102E62"
122
+ },
123
+ "on-background-dark": {
124
+ "color": "#ffffff"
125
+ },
126
+ "on-background-light": {
127
+ "color": "#000000"
128
+ },
129
+ "regular": {
130
+ "text-decoration-line": "underline",
131
+ "hover": {
132
+ "text-decoration-thickness": "0.1875rem",
133
+ "text-underline-offset": "0.3125rem"
134
+ }
135
+ },
136
+ "subtle": {
137
+ "text-decoration-line": "none",
138
+ "hover": {
139
+ "text-decoration-line": "underline"
140
+ }
141
+ }
142
+ },
118
143
  "spacing": {
119
144
  "inset": {
120
145
  "sm": "0.5rem",
@@ -131,15 +156,16 @@
131
156
  },
132
157
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
133
158
  "font-weight": 800,
134
- "line-height": "1.5",
135
- "narrow": {
136
- "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
137
- },
138
- "wide": {
139
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
140
- },
141
159
  "hover": {
142
160
  "box-shadow": "inset 0 0 0 2px #767676"
161
+ },
162
+ "spacious": {
163
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
164
+ "line-height": "1.5"
165
+ },
166
+ "compact": {
167
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
168
+ "line-height": "1.5"
143
169
  }
144
170
  }
145
171
  },
@@ -155,12 +181,13 @@
155
181
  "color": "#000000",
156
182
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
157
183
  "font-weight": 800,
158
- "line-height": "1.5",
159
- "narrow": {
160
- "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
184
+ "spacious": {
185
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
186
+ "line-height": "1.5"
161
187
  },
162
- "wide": {
163
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
188
+ "compact": {
189
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
190
+ "line-height": "1.5"
164
191
  }
165
192
  },
166
193
  "error": {
@@ -192,43 +219,49 @@
192
219
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
193
220
  "font-weight": 800,
194
221
  "inverse-color": "#ffffff",
195
- "line-height": "1.4",
196
- "narrow": {
197
- "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
222
+ "spacious": {
223
+ "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
224
+ "line-height": "1.4"
198
225
  },
199
- "wide": {
200
- "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
226
+ "compact": {
227
+ "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
228
+ "line-height": "1.4"
201
229
  }
202
230
  },
203
231
  "breadcrumb": {
204
- "color": "#004699",
205
232
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
206
233
  "font-weight": 400,
207
- "line-height": "1.6",
208
- "narrow": {
209
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
210
- },
211
- "wide": {
212
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
234
+ "separator": {
235
+ "background-color": "#004699"
213
236
  },
214
237
  "item-link": {
238
+ "color": "#004699",
215
239
  "outline-offset": "2px",
240
+ "text-decoration-line": "none",
241
+ "text-decoration-thickness": "0.125rem",
242
+ "text-underline-offset": "0.375rem",
216
243
  "hover": {
217
244
  "color": "#102E62",
218
- "box-shadow": "inset 0 -2px 0 0 #102E62"
219
- },
220
- "focus": {
221
- "color": "#102E62",
222
- "text-decoration": "underline"
245
+ "text-decoration-line": "underline"
223
246
  }
247
+ },
248
+ "spacious": {
249
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
250
+ "line-height": "1.6"
251
+ },
252
+ "compact": {
253
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
254
+ "line-height": "1.6"
224
255
  }
225
256
  },
226
257
  "button": {
227
- "narrow": {
228
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
258
+ "spacious": {
259
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
260
+ "line-height": "1.6"
229
261
  },
230
- "wide": {
231
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
262
+ "compact": {
263
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
264
+ "line-height": "1.6"
232
265
  },
233
266
  "secondary": {
234
267
  "box-shadow": "inset 0 0 0 2px #004699",
@@ -251,8 +284,12 @@
251
284
  "card": {
252
285
  "link": {
253
286
  "color": "#004699",
287
+ "text-decoration-line": "none",
288
+ "text-decoration-thickness": "0.125rem",
289
+ "text-underline-offset": "0.375rem",
254
290
  "hover": {
255
- "color": "#102E62"
291
+ "color": "#102E62",
292
+ "text-decoration-line": "underline"
256
293
  }
257
294
  },
258
295
  "outline-offset": "2px"
@@ -308,14 +345,7 @@
308
345
  "hover": {
309
346
  "background-color": "#102E62"
310
347
  }
311
- },
312
- "narrow": {
313
- "size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
314
- },
315
- "wide": {
316
- "size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
317
- },
318
- "multiplier": "1.6"
348
+ }
319
349
  },
320
350
  "disabled": {
321
351
  "color": "#767676"
@@ -326,40 +356,81 @@
326
356
  "color": "#102E62"
327
357
  },
328
358
  "outline-offset": "2px",
329
- "line-height": "1.6",
330
- "narrow": {
331
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
359
+ "spacious": {
360
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
361
+ "line-height": "1.6"
332
362
  },
333
- "wide": {
334
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
363
+ "compact": {
364
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
365
+ "line-height": "1.6"
335
366
  }
336
367
  },
337
- "footer": {
338
- "top": {
339
- "background-color": "#004699"
368
+ "dialog": {
369
+ "background-color": "#ffffff",
370
+ "border": "0",
371
+ "max-inline-size": "min(87.69vw, 45rem)",
372
+ "title": {
373
+ "color": "#000000",
374
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
375
+ "font-weight": 800,
376
+ "spacious": {
377
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
378
+ "line-height": "1.5"
379
+ },
380
+ "compact": {
381
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
382
+ "line-height": "1.5"
383
+ }
384
+ },
385
+ "backdrop": {
386
+ "background": "#0006"
387
+ },
388
+ "close": {
389
+ "background-color": "transparent",
390
+ "fill": "#000000",
391
+ "hover": {
392
+ "fill": "#004699"
393
+ }
394
+ },
395
+ "form": {
396
+ "gap": "1.5rem",
397
+ "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
398
+ "padding-inline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
399
+ "max-block-size": "75vh"
400
+ },
401
+ "article": {
402
+ "padding-inline-end": "1.5rem"
403
+ },
404
+ "header": {
405
+ "gap": "1rem"
406
+ },
407
+ "footer": {
408
+ "gap": "1rem",
409
+ "padding-block": "1.5rem 0"
340
410
  }
341
411
  },
342
412
  "form-label": {
343
413
  "color": "#000000",
344
414
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
345
415
  "font-weight": 800,
346
- "line-height": "1.6",
347
- "narrow": {
348
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
416
+ "spacious": {
417
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
418
+ "line-height": "1.6"
349
419
  },
350
- "wide": {
351
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
420
+ "compact": {
421
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
422
+ "line-height": "1.6"
352
423
  }
353
424
  },
354
425
  "grid": {
355
426
  "column-count": "4",
356
- "density-low": {
357
- "gap": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
358
- "padding-inline": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)"
427
+ "spacious": {
428
+ "gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
429
+ "padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
359
430
  },
360
- "density-high": {
361
- "gap": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
362
- "padding-inline": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"
431
+ "compact": {
432
+ "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
433
+ "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
363
434
  },
364
435
  "medium": {
365
436
  "column-count": "8"
@@ -369,46 +440,46 @@
369
440
  }
370
441
  },
371
442
  "heading": {
372
- "1": {
373
- "line-height": "1.2",
374
- "narrow": {
375
- "font-size": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
443
+ "color": "#000000",
444
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
445
+ "font-weight": 800,
446
+ "inverse-color": "#ffffff",
447
+ "spacious": {
448
+ "level-1": {
449
+ "line-height": "1.2",
450
+ "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)"
376
451
  },
377
- "wide": {
378
- "font-size": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)"
379
- }
380
- },
381
- "2": {
382
- "line-height": "1.3",
383
- "narrow": {
384
- "font-size": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)"
452
+ "level-2": {
453
+ "line-height": "1.3",
454
+ "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)"
385
455
  },
386
- "wide": {
387
- "font-size": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)"
388
- }
389
- },
390
- "3": {
391
- "line-height": "1.4",
392
- "narrow": {
393
- "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
456
+ "level-3": {
457
+ "line-height": "1.4",
458
+ "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)"
394
459
  },
395
- "wide": {
396
- "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
460
+ "level-4": {
461
+ "line-height": "1.4",
462
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)"
397
463
  }
398
464
  },
399
- "4": {
400
- "line-height": "1.4",
401
- "narrow": {
402
- "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
465
+ "compact": {
466
+ "level-1": {
467
+ "line-height": "1.2",
468
+ "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
469
+ },
470
+ "level-2": {
471
+ "line-height": "1.3",
472
+ "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
473
+ },
474
+ "level-3": {
475
+ "line-height": "1.4",
476
+ "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
403
477
  },
404
- "wide": {
405
- "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
478
+ "level-4": {
479
+ "line-height": "1.4",
480
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
406
481
  }
407
- },
408
- "color": "#000000",
409
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
410
- "font-weight": 800,
411
- "inverse-color": "#ffffff"
482
+ }
412
483
  },
413
484
  "highlight": {
414
485
  "blue": {
@@ -437,93 +508,106 @@
437
508
  }
438
509
  },
439
510
  "icon": {
440
- "size-3": {
441
- "icon-size": {
442
- "narrow": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)",
443
- "wide": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
511
+ "spacious": {
512
+ "size-3": {
513
+ "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
514
+ "line-height": "1.4"
444
515
  },
445
- "container-multiplier": "1.4"
446
- },
447
- "size-4": {
448
- "icon-size": {
449
- "narrow": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)",
450
- "wide": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
516
+ "size-4": {
517
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
518
+ "line-height": "1.4"
451
519
  },
452
- "container-multiplier": "1.4"
453
- },
454
- "size-5": {
455
- "icon-size": {
456
- "narrow": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
457
- "wide": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
520
+ "size-5": {
521
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
522
+ "line-height": "1.5"
458
523
  },
459
- "container-multiplier": "1.5"
460
- },
461
- "size-6": {
462
- "icon-size": {
463
- "narrow": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
464
- "wide": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
524
+ "size-6": {
525
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
526
+ "line-height": "1.6"
465
527
  },
466
- "container-multiplier": "1.6"
528
+ "size-7": {
529
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
530
+ "line-height": "1.6"
531
+ }
467
532
  },
468
- "size-7": {
469
- "icon-size": {
470
- "narrow": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
471
- "wide": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
533
+ "compact": {
534
+ "size-3": {
535
+ "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
536
+ "line-height": "1.4"
472
537
  },
473
- "container-multiplier": "1.6"
538
+ "size-4": {
539
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
540
+ "line-height": "1.4"
541
+ },
542
+ "size-5": {
543
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
544
+ "line-height": "1.5"
545
+ },
546
+ "size-6": {
547
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
548
+ "line-height": "1.6"
549
+ },
550
+ "size-7": {
551
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
552
+ "line-height": "1.6"
553
+ }
474
554
  }
475
555
  },
476
556
  "link": {
477
557
  "color": "#004699",
478
- "outline-offset": "2px",
479
558
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
480
559
  "font-weight": 400,
560
+ "outline-offset": "2px",
481
561
  "hover": {
482
562
  "color": "#102E62"
483
563
  },
484
564
  "inline": {
485
- "hover": {
486
- "text-decoration": "underline",
487
- "text-underline-offset": "3px"
488
- },
565
+ "text-decoration-line": "underline",
566
+ "text-decoration-thickness": "0.125rem",
567
+ "text-underline-offset": "0.375rem",
489
568
  "font-family": "inherit",
490
569
  "font-size": "inherit",
491
570
  "line-height": "inherit",
492
- "text-decoration": "none",
493
- "text-decoration-thickness": "2px",
571
+ "hover": {
572
+ "text-decoration-thickness": "0.1875rem",
573
+ "text-underline-offset": "0.3125rem"
574
+ },
494
575
  "visited": {
495
576
  "color": "#A00078"
496
577
  }
497
578
  },
498
579
  "in-list": {
499
580
  "gap": "0.5em",
581
+ "text-decoration-line": "none",
582
+ "text-decoration-thickness": "0.125rem",
583
+ "text-underline-offset": "0.375rem",
500
584
  "hover": {
501
- "text-decoration": "underline",
502
- "text-decoration-thickness": "2px",
503
- "text-underline-offset": "7px"
585
+ "text-decoration-line": "underline"
504
586
  },
505
- "text-decoration": "none",
506
- "line-height": "1.6",
507
- "narrow": {
508
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
587
+ "spacious": {
588
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
589
+ "line-height": "1.6"
509
590
  },
510
- "wide": {
511
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
591
+ "compact": {
592
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
593
+ "line-height": "1.6"
512
594
  }
513
595
  },
514
596
  "standalone": {
515
- "text-underline-offset": "8px",
516
- "text-decoration-thickness": "2px",
597
+ "text-decoration-line": "underline",
598
+ "text-decoration-thickness": "0.125rem",
599
+ "text-underline-offset": "0.375rem",
517
600
  "hover": {
518
- "text-decoration-thickness": "3px",
519
- "text-underline-offset": "7px"
601
+ "text-decoration-thickness": "0.1875rem",
602
+ "text-underline-offset": "0.3125rem"
520
603
  },
521
- "line-height": "1.6",
522
- "narrow": {
523
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
604
+ "spacious": {
605
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
606
+ "line-height": "1.6"
524
607
  },
525
- "wide": {
526
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
608
+ "compact": {
609
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
610
+ "line-height": "1.6"
527
611
  }
528
612
  },
529
613
  "on-background-dark": {
@@ -545,18 +629,31 @@
545
629
  }
546
630
  }
547
631
  },
632
+ "logo": {
633
+ "height": "2.5rem",
634
+ "emblem": {
635
+ "color": "#EC0000"
636
+ },
637
+ "title": {
638
+ "color": "#EC0000"
639
+ },
640
+ "subsite": {
641
+ "color": "#000000"
642
+ }
643
+ },
548
644
  "ordered-list": {
549
645
  "color": "#000000",
550
646
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
551
647
  "font-weight": 400,
552
648
  "gap": "0.75rem",
553
- "line-height": "1.6",
554
649
  "list-style-type": "decimal",
555
- "narrow": {
556
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
650
+ "spacious": {
651
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
652
+ "line-height": "1.6"
557
653
  },
558
- "wide": {
559
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
654
+ "compact": {
655
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
656
+ "line-height": "1.6"
560
657
  },
561
658
  "item": {
562
659
  "margin-inline-start": "2.25rem",
@@ -573,35 +670,40 @@
573
670
  "page-heading": {
574
671
  "color": "#000000",
575
672
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
576
- "line-height": "1.1",
577
- "narrow": {
578
- "font-size": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
579
- },
580
- "wide": {
581
- "font-size": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)"
582
- },
583
673
  "font-weight": 800,
584
- "inverse-color": "#ffffff"
674
+ "inverse-color": "#ffffff",
675
+ "spacious": {
676
+ "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
677
+ "line-height": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)"
678
+ },
679
+ "compact": {
680
+ "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
681
+ "line-height": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)"
682
+ }
585
683
  },
586
684
  "page-menu": {
587
685
  "column-gap": "2.5rem",
588
686
  "row-gap": "0.5rem",
589
687
  "item": {
590
- "color": "#000000",
688
+ "color": "#004699",
591
689
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
592
690
  "font-weight": 400,
593
691
  "gap": "0.5rem",
594
- "line-height": "1.6",
595
- "text-decoration": "none",
596
- "narrow": {
597
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
692
+ "outline-offset": "2px",
693
+ "text-decoration-line": "none",
694
+ "text-decoration-thickness": "0.125rem",
695
+ "text-underline-offset": "0.375rem",
696
+ "spacious": {
697
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
698
+ "line-height": "1.6"
598
699
  },
599
- "wide": {
600
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
700
+ "compact": {
701
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
702
+ "line-height": "1.6"
601
703
  },
602
704
  "hover": {
603
- "color": "#000000",
604
- "text-decoration": "underline"
705
+ "color": "#102E62",
706
+ "text-decoration-line": "underline"
605
707
  }
606
708
  }
607
709
  },
@@ -609,21 +711,26 @@
609
711
  "color": "#004699",
610
712
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
611
713
  "font-weight": 400,
612
- "line-height": "1.6",
613
- "narrow": {
614
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
714
+ "spacious": {
715
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
716
+ "line-height": "1.6"
615
717
  },
616
- "wide": {
617
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
718
+ "compact": {
719
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
720
+ "line-height": "1.6"
618
721
  },
619
722
  "button": {
723
+ "outline-offset": "2px",
724
+ "text-decoration-line": "none",
725
+ "text-decoration-thickness": "0.125rem",
726
+ "text-underline-offset": "0.375rem",
620
727
  "current": {
621
728
  "font-weight": 800
622
729
  },
623
730
  "hover": {
624
- "color": "#102E62"
625
- },
626
- "outline-offset": "2px"
731
+ "color": "#102E62",
732
+ "text-decoration-line": "underline"
733
+ }
627
734
  }
628
735
  },
629
736
  "paragraph": {
@@ -631,29 +738,32 @@
631
738
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
632
739
  "font-weight": 400,
633
740
  "inverse-color": "#ffffff",
634
- "line-height": "1.6",
635
- "narrow": {
636
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
637
- },
638
- "wide": {
639
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
640
- },
641
- "small": {
642
- "line-height": "1.6",
643
- "narrow": {
644
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
741
+ "spacious": {
742
+ "small": {
743
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
744
+ "line-height": "1.6"
745
+ },
746
+ "medium": {
747
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
748
+ "line-height": "1.6"
645
749
  },
646
- "wide": {
647
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
750
+ "large": {
751
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
752
+ "line-height": "1.5"
648
753
  }
649
754
  },
650
- "large": {
651
- "line-height": "1.5",
652
- "narrow": {
653
- "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
755
+ "compact": {
756
+ "small": {
757
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
758
+ "line-height": "1.6"
654
759
  },
655
- "wide": {
656
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
760
+ "medium": {
761
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
762
+ "line-height": "1.6"
763
+ },
764
+ "large": {
765
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
766
+ "line-height": "1.5"
657
767
  }
658
768
  }
659
769
  },
@@ -690,27 +800,33 @@
690
800
  "color": "#000000",
691
801
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
692
802
  "font-weight": 400,
693
- "line-height": "1.6",
694
- "narrow": {
695
- "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
803
+ "spacious": {
804
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
805
+ "line-height": "1.6"
696
806
  },
697
- "wide": {
698
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
807
+ "compact": {
808
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
809
+ "line-height": "1.6"
699
810
  }
700
811
  },
701
812
  "label": {
702
813
  "color": "#004699",
703
814
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
704
815
  "font-weight": 800,
816
+ "text-decoration-line": "none",
817
+ "text-decoration-thickness": "0.125rem",
818
+ "text-underline-offset": "0.375rem",
705
819
  "hover": {
706
- "color": "#102E62"
820
+ "color": "#102E62",
821
+ "text-decoration-line": "underline"
707
822
  },
708
- "line-height": "1.4",
709
- "narrow": {
710
- "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
823
+ "spacious": {
824
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
825
+ "line-height": "1.4"
711
826
  },
712
- "wide": {
713
- "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
827
+ "compact": {
828
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
829
+ "line-height": "1.4"
714
830
  }
715
831
  },
716
832
  "outline-offset": "2px"
@@ -720,13 +836,14 @@
720
836
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
721
837
  "font-weight": 400,
722
838
  "gap": "0.75rem",
723
- "line-height": "1.6",
724
839
  "list-style-type": "'\\2022'",
725
- "narrow": {
726
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
840
+ "spacious": {
841
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
842
+ "line-height": "1.6"
727
843
  },
728
- "wide": {
729
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
844
+ "compact": {
845
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
846
+ "line-height": "1.6"
730
847
  },
731
848
  "item": {
732
849
  "margin-inline-start": "1.625rem",
@@ -773,7 +890,7 @@
773
890
  "color": "#ffffff",
774
891
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
775
892
  "font-size": {},
776
- "line-height": "1.6",
893
+ "line-height": {},
777
894
  "padding-inline-start": "1rem",
778
895
  "padding-inline-end": "1rem",
779
896
  "padding-block-start": "0.5rem",