@amsterdam/design-system-tokens 0.1.8 → 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 (35) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/_variables.scss +218 -154
  3. package/dist/index.css +218 -154
  4. package/dist/index.d.ts +200 -136
  5. package/dist/index.js +205 -141
  6. package/dist/index.json +204 -140
  7. package/dist/index.tokens.json +336 -269
  8. package/dist/root.css +218 -154
  9. package/dist/tokens.d.ts +324 -257
  10. package/dist/tokens.js +3343 -1864
  11. package/dist/variables.less +218 -154
  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 +6 -5
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +2 -2
  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/ordered-list.tokens.json +6 -5
  29. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  30. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  31. package/src/components/amsterdam/pagination.tokens.json +17 -18
  32. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  33. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  34. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  35. package/src/components/utrecht/button.tokens.json +1 -3
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)"
93
+ "5": {
94
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
95
+ "line-height": "1.5"
96
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)"
97
+ "6": {
98
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
99
+ "line-height": "1.6"
102
100
  },
103
- "wide": {
104
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
105
- },
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,12 +356,13 @@
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
368
  "dialog": {
@@ -342,12 +373,13 @@
342
373
  "color": "#000000",
343
374
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
344
375
  "font-weight": 800,
345
- "line-height": "1.5",
346
- "narrow": {
347
- "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
376
+ "spacious": {
377
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
378
+ "line-height": "1.5"
348
379
  },
349
- "wide": {
350
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
380
+ "compact": {
381
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
382
+ "line-height": "1.5"
351
383
  }
352
384
  },
353
385
  "backdrop": {
@@ -381,21 +413,22 @@
381
413
  "color": "#000000",
382
414
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
383
415
  "font-weight": 800,
384
- "line-height": "1.6",
385
- "narrow": {
386
- "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"
387
419
  },
388
- "wide": {
389
- "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"
390
423
  }
391
424
  },
392
425
  "grid": {
393
426
  "column-count": "4",
394
- "density-low": {
427
+ "spacious": {
395
428
  "gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
396
429
  "padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
397
430
  },
398
- "density-high": {
431
+ "compact": {
399
432
  "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
400
433
  "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
401
434
  },
@@ -407,46 +440,46 @@
407
440
  }
408
441
  },
409
442
  "heading": {
410
- "1": {
411
- "line-height": "1.2",
412
- "narrow": {
413
- "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)"
414
451
  },
415
- "wide": {
416
- "font-size": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)"
417
- }
418
- },
419
- "2": {
420
- "line-height": "1.3",
421
- "narrow": {
422
- "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)"
423
455
  },
424
- "wide": {
425
- "font-size": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)"
426
- }
427
- },
428
- "3": {
429
- "line-height": "1.4",
430
- "narrow": {
431
- "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)"
432
459
  },
433
- "wide": {
434
- "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)"
435
463
  }
436
464
  },
437
- "4": {
438
- "line-height": "1.4",
439
- "narrow": {
440
- "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)"
441
469
  },
442
- "wide": {
443
- "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
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)"
477
+ },
478
+ "level-4": {
479
+ "line-height": "1.4",
480
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
444
481
  }
445
- },
446
- "color": "#000000",
447
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
448
- "font-weight": 800,
449
- "inverse-color": "#ffffff"
482
+ }
450
483
  },
451
484
  "highlight": {
452
485
  "blue": {
@@ -475,93 +508,106 @@
475
508
  }
476
509
  },
477
510
  "icon": {
478
- "size-3": {
479
- "icon-size": {
480
- "narrow": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)",
481
- "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"
482
515
  },
483
- "container-multiplier": "1.4"
484
- },
485
- "size-4": {
486
- "icon-size": {
487
- "narrow": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)",
488
- "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"
489
519
  },
490
- "container-multiplier": "1.4"
491
- },
492
- "size-5": {
493
- "icon-size": {
494
- "narrow": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
495
- "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"
496
523
  },
497
- "container-multiplier": "1.5"
498
- },
499
- "size-6": {
500
- "icon-size": {
501
- "narrow": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
502
- "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"
503
527
  },
504
- "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
+ }
505
532
  },
506
- "size-7": {
507
- "icon-size": {
508
- "narrow": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
509
- "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"
537
+ },
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"
510
549
  },
511
- "container-multiplier": "1.6"
550
+ "size-7": {
551
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
552
+ "line-height": "1.6"
553
+ }
512
554
  }
513
555
  },
514
556
  "link": {
515
557
  "color": "#004699",
516
- "outline-offset": "2px",
517
558
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
518
559
  "font-weight": 400,
560
+ "outline-offset": "2px",
519
561
  "hover": {
520
562
  "color": "#102E62"
521
563
  },
522
564
  "inline": {
523
- "hover": {
524
- "text-decoration": "underline",
525
- "text-underline-offset": "3px"
526
- },
565
+ "text-decoration-line": "underline",
566
+ "text-decoration-thickness": "0.125rem",
567
+ "text-underline-offset": "0.375rem",
527
568
  "font-family": "inherit",
528
569
  "font-size": "inherit",
529
570
  "line-height": "inherit",
530
- "text-decoration": "none",
531
- "text-decoration-thickness": "2px",
571
+ "hover": {
572
+ "text-decoration-thickness": "0.1875rem",
573
+ "text-underline-offset": "0.3125rem"
574
+ },
532
575
  "visited": {
533
576
  "color": "#A00078"
534
577
  }
535
578
  },
536
579
  "in-list": {
537
580
  "gap": "0.5em",
581
+ "text-decoration-line": "none",
582
+ "text-decoration-thickness": "0.125rem",
583
+ "text-underline-offset": "0.375rem",
538
584
  "hover": {
539
- "text-decoration": "underline",
540
- "text-decoration-thickness": "2px",
541
- "text-underline-offset": "7px"
585
+ "text-decoration-line": "underline"
542
586
  },
543
- "text-decoration": "none",
544
- "line-height": "1.6",
545
- "narrow": {
546
- "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"
547
590
  },
548
- "wide": {
549
- "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"
550
594
  }
551
595
  },
552
596
  "standalone": {
553
- "text-underline-offset": "8px",
554
- "text-decoration-thickness": "2px",
597
+ "text-decoration-line": "underline",
598
+ "text-decoration-thickness": "0.125rem",
599
+ "text-underline-offset": "0.375rem",
555
600
  "hover": {
556
- "text-decoration-thickness": "3px",
557
- "text-underline-offset": "7px"
601
+ "text-decoration-thickness": "0.1875rem",
602
+ "text-underline-offset": "0.3125rem"
558
603
  },
559
- "line-height": "1.6",
560
- "narrow": {
561
- "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"
562
607
  },
563
- "wide": {
564
- "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"
565
611
  }
566
612
  },
567
613
  "on-background-dark": {
@@ -600,13 +646,14 @@
600
646
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
601
647
  "font-weight": 400,
602
648
  "gap": "0.75rem",
603
- "line-height": "1.6",
604
649
  "list-style-type": "decimal",
605
- "narrow": {
606
- "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"
607
653
  },
608
- "wide": {
609
- "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"
610
657
  },
611
658
  "item": {
612
659
  "margin-inline-start": "2.25rem",
@@ -623,35 +670,40 @@
623
670
  "page-heading": {
624
671
  "color": "#000000",
625
672
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
626
- "line-height": "1.1",
627
- "narrow": {
628
- "font-size": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
629
- },
630
- "wide": {
631
- "font-size": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)"
632
- },
633
673
  "font-weight": 800,
634
- "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
+ }
635
683
  },
636
684
  "page-menu": {
637
685
  "column-gap": "2.5rem",
638
686
  "row-gap": "0.5rem",
639
687
  "item": {
640
- "color": "#000000",
688
+ "color": "#004699",
641
689
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
642
690
  "font-weight": 400,
643
691
  "gap": "0.5rem",
644
- "line-height": "1.6",
645
- "text-decoration": "none",
646
- "narrow": {
647
- "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"
648
699
  },
649
- "wide": {
650
- "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"
651
703
  },
652
704
  "hover": {
653
- "color": "#000000",
654
- "text-decoration": "underline"
705
+ "color": "#102E62",
706
+ "text-decoration-line": "underline"
655
707
  }
656
708
  }
657
709
  },
@@ -659,21 +711,26 @@
659
711
  "color": "#004699",
660
712
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
661
713
  "font-weight": 400,
662
- "line-height": "1.6",
663
- "narrow": {
664
- "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"
665
717
  },
666
- "wide": {
667
- "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"
668
721
  },
669
722
  "button": {
723
+ "outline-offset": "2px",
724
+ "text-decoration-line": "none",
725
+ "text-decoration-thickness": "0.125rem",
726
+ "text-underline-offset": "0.375rem",
670
727
  "current": {
671
728
  "font-weight": 800
672
729
  },
673
730
  "hover": {
674
- "color": "#102E62"
675
- },
676
- "outline-offset": "2px"
731
+ "color": "#102E62",
732
+ "text-decoration-line": "underline"
733
+ }
677
734
  }
678
735
  },
679
736
  "paragraph": {
@@ -681,29 +738,32 @@
681
738
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
682
739
  "font-weight": 400,
683
740
  "inverse-color": "#ffffff",
684
- "line-height": "1.6",
685
- "narrow": {
686
- "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
687
- },
688
- "wide": {
689
- "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
690
- },
691
- "small": {
692
- "line-height": "1.6",
693
- "narrow": {
694
- "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"
695
745
  },
696
- "wide": {
697
- "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
746
+ "medium": {
747
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
748
+ "line-height": "1.6"
749
+ },
750
+ "large": {
751
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
752
+ "line-height": "1.5"
698
753
  }
699
754
  },
700
- "large": {
701
- "line-height": "1.5",
702
- "narrow": {
703
- "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"
759
+ },
760
+ "medium": {
761
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
762
+ "line-height": "1.6"
704
763
  },
705
- "wide": {
706
- "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
764
+ "large": {
765
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
766
+ "line-height": "1.5"
707
767
  }
708
768
  }
709
769
  },
@@ -740,27 +800,33 @@
740
800
  "color": "#000000",
741
801
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
742
802
  "font-weight": 400,
743
- "line-height": "1.6",
744
- "narrow": {
745
- "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"
746
806
  },
747
- "wide": {
748
- "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"
749
810
  }
750
811
  },
751
812
  "label": {
752
813
  "color": "#004699",
753
814
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
754
815
  "font-weight": 800,
816
+ "text-decoration-line": "none",
817
+ "text-decoration-thickness": "0.125rem",
818
+ "text-underline-offset": "0.375rem",
755
819
  "hover": {
756
- "color": "#102E62"
820
+ "color": "#102E62",
821
+ "text-decoration-line": "underline"
757
822
  },
758
- "line-height": "1.4",
759
- "narrow": {
760
- "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"
761
826
  },
762
- "wide": {
763
- "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"
764
830
  }
765
831
  },
766
832
  "outline-offset": "2px"
@@ -770,13 +836,14 @@
770
836
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
771
837
  "font-weight": 400,
772
838
  "gap": "0.75rem",
773
- "line-height": "1.6",
774
839
  "list-style-type": "'\\2022'",
775
- "narrow": {
776
- "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"
777
843
  },
778
- "wide": {
779
- "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"
780
847
  },
781
848
  "item": {
782
849
  "margin-inline-start": "1.625rem",
@@ -823,7 +890,7 @@
823
890
  "color": "#ffffff",
824
891
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
825
892
  "font-size": {},
826
- "line-height": "1.6",
893
+ "line-height": {},
827
894
  "padding-inline-start": "1rem",
828
895
  "padding-inline-end": "1rem",
829
896
  "padding-block-start": "0.5rem",