@amsterdam/design-system-tokens 0.1.4 → 0.1.6

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 (16) hide show
  1. package/dist/_variables.scss +49 -18
  2. package/dist/index.css +49 -18
  3. package/dist/index.d.ts +32 -1
  4. package/dist/index.js +103 -72
  5. package/dist/index.json +102 -71
  6. package/dist/index.tokens.json +122 -71
  7. package/dist/root.css +49 -18
  8. package/dist/tokens.d.ts +53 -2
  9. package/dist/tokens.js +734 -89
  10. package/dist/variables.less +49 -18
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/proportion.tokens.json +11 -0
  13. package/src/brand/amsterdam/typography.tokens.json +28 -16
  14. package/src/components/amsterdam/alert.tokens.json +40 -0
  15. package/src/components/amsterdam/aspect-ratio.tokens.json +11 -0
  16. package/src/components/amsterdam/page-menu.tokens.json +2 -1
package/dist/index.tokens.json CHANGED
@@ -18,6 +18,13 @@
18
18
  "neutral-grey3": "#767676",
19
19
  "neutral-grey4": "#323232"
20
20
  },
21
+ "proportion": {
22
+ "extra-tall": "9 / 16",
23
+ "tall": "4 / 5",
24
+ "square": "1 / 1",
25
+ "wide": "5 / 4",
26
+ "extra-wide": "16 / 9"
27
+ },
21
28
  "typography": {
22
29
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
23
30
  "font-weight": {
@@ -27,73 +34,73 @@
27
34
  "text-level": {
28
35
  "0": {
29
36
  "narrow": {
30
- "font-size": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)"
37
+ "font-size": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
31
38
  },
32
39
  "wide": {
33
- "font-size": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
40
+ "font-size": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)"
34
41
  },
35
42
  "line-height": "1.1"
36
43
  },
37
44
  "1": {
38
45
  "narrow": {
39
- "font-size": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)"
46
+ "font-size": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
40
47
  },
41
48
  "wide": {
42
- "font-size": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
49
+ "font-size": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)"
43
50
  },
44
51
  "line-height": "1.2"
45
52
  },
46
53
  "2": {
47
54
  "narrow": {
48
- "font-size": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)"
55
+ "font-size": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)"
49
56
  },
50
57
  "wide": {
51
- "font-size": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
58
+ "font-size": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)"
52
59
  },
53
60
  "line-height": "1.3"
54
61
  },
55
62
  "3": {
56
63
  "narrow": {
57
- "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
64
+ "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
58
65
  },
59
66
  "wide": {
60
- "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
67
+ "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
61
68
  },
62
69
  "line-height": "1.4"
63
70
  },
64
71
  "4": {
65
72
  "narrow": {
66
- "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
73
+ "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
67
74
  },
68
75
  "wide": {
69
- "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
76
+ "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
70
77
  },
71
78
  "line-height": "1.4"
72
79
  },
73
80
  "5": {
74
81
  "narrow": {
75
- "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
82
+ "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
76
83
  },
77
84
  "wide": {
78
- "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
85
+ "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
79
86
  },
80
87
  "line-height": "1.5"
81
88
  },
82
89
  "6": {
83
90
  "narrow": {
84
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
91
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
85
92
  },
86
93
  "wide": {
87
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
94
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
88
95
  },
89
96
  "line-height": "1.6"
90
97
  },
91
98
  "7": {
92
99
  "narrow": {
93
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
100
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
94
101
  },
95
102
  "wide": {
96
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
103
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
97
104
  },
98
105
  "line-height": "1.6"
99
106
  }
@@ -125,16 +132,59 @@
125
132
  "font-weight": 800,
126
133
  "line-height": "1.5",
127
134
  "narrow": {
128
- "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
135
+ "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
129
136
  },
130
137
  "wide": {
131
- "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
138
+ "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
132
139
  },
133
140
  "hover": {
134
141
  "box-shadow": "inset 0 0 0 2px #767676"
135
142
  }
136
143
  }
137
144
  },
145
+ "alert": {
146
+ "background-color": "#FFE600",
147
+ "border": "4px solid #FFE600",
148
+ "gap": "1rem",
149
+ "padding-block-start": "1rem",
150
+ "padding-block-end": "1rem",
151
+ "padding-inline-start": "1.5rem",
152
+ "padding-inline-end": "1.5rem",
153
+ "title": {
154
+ "color": "#000000",
155
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
156
+ "font-weight": 800,
157
+ "line-height": "1.5",
158
+ "narrow": {
159
+ "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
160
+ },
161
+ "wide": {
162
+ "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
163
+ }
164
+ },
165
+ "error": {
166
+ "background-color": "#ffffff",
167
+ "border-color": "#EC0000"
168
+ },
169
+ "success": {
170
+ "background-color": "#ffffff",
171
+ "border-color": "#00A03C"
172
+ },
173
+ "close": {
174
+ "background-color": "transparent",
175
+ "fill": "#000000",
176
+ "hover": {
177
+ "fill": "#004699"
178
+ }
179
+ }
180
+ },
181
+ "aspect-ratio": {
182
+ "extra-tall": "9 / 16",
183
+ "tall": "4 / 5",
184
+ "square": "1 / 1",
185
+ "wide": "5 / 4",
186
+ "extra-wide": "16 / 9"
187
+ },
138
188
  "blockquote": {
139
189
  "color": "#000000",
140
190
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -142,10 +192,10 @@
142
192
  "inverse-color": "#ffffff",
143
193
  "line-height": "1.4",
144
194
  "narrow": {
145
- "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
195
+ "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
146
196
  },
147
197
  "wide": {
148
- "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
198
+ "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
149
199
  }
150
200
  },
151
201
  "breadcrumb": {
@@ -153,10 +203,10 @@
153
203
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
154
204
  "line-height": "1.6",
155
205
  "narrow": {
156
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
206
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
157
207
  },
158
208
  "wide": {
159
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
209
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
160
210
  },
161
211
  "item-link": {
162
212
  "outline-offset": "2px",
@@ -172,10 +222,10 @@
172
222
  },
173
223
  "button": {
174
224
  "narrow": {
175
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
225
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
176
226
  },
177
227
  "wide": {
178
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
228
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
179
229
  },
180
230
  "secondary": {
181
231
  "box-shadow": "inset 0 0 0 2px #004699",
@@ -252,10 +302,10 @@
252
302
  }
253
303
  },
254
304
  "narrow": {
255
- "size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
305
+ "size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
256
306
  },
257
307
  "wide": {
258
- "size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
308
+ "size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
259
309
  },
260
310
  "multiplier": "1.6"
261
311
  },
@@ -270,10 +320,10 @@
270
320
  "outline-offset": "2px",
271
321
  "line-height": "1.6",
272
322
  "narrow": {
273
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
323
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
274
324
  },
275
325
  "wide": {
276
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
326
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
277
327
  }
278
328
  },
279
329
  "footer": {
@@ -287,47 +337,47 @@
287
337
  "font-weight": 800,
288
338
  "line-height": "1.6",
289
339
  "narrow": {
290
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
340
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
291
341
  },
292
342
  "wide": {
293
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
343
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
294
344
  }
295
345
  },
296
346
  "heading": {
297
347
  "1": {
298
348
  "line-height": "1.2",
299
349
  "narrow": {
300
- "font-size": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)"
350
+ "font-size": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)"
301
351
  },
302
352
  "wide": {
303
- "font-size": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
353
+ "font-size": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)"
304
354
  }
305
355
  },
306
356
  "2": {
307
357
  "line-height": "1.3",
308
358
  "narrow": {
309
- "font-size": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)"
359
+ "font-size": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)"
310
360
  },
311
361
  "wide": {
312
- "font-size": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
362
+ "font-size": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)"
313
363
  }
314
364
  },
315
365
  "3": {
316
366
  "line-height": "1.4",
317
367
  "narrow": {
318
- "font-size": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)"
368
+ "font-size": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)"
319
369
  },
320
370
  "wide": {
321
- "font-size": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
371
+ "font-size": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
322
372
  }
323
373
  },
324
374
  "4": {
325
375
  "line-height": "1.4",
326
376
  "narrow": {
327
- "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
377
+ "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
328
378
  },
329
379
  "wide": {
330
- "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
380
+ "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
331
381
  }
332
382
  },
333
383
  "color": "#000000",
@@ -338,36 +388,36 @@
338
388
  "icon": {
339
389
  "size-3": {
340
390
  "icon-size": {
341
- "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
342
- "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
391
+ "narrow": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)",
392
+ "wide": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
343
393
  },
344
394
  "container-multiplier": "1.4"
345
395
  },
346
396
  "size-4": {
347
397
  "icon-size": {
348
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
349
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
398
+ "narrow": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)",
399
+ "wide": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
350
400
  },
351
401
  "container-multiplier": "1.4"
352
402
  },
353
403
  "size-5": {
354
404
  "icon-size": {
355
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
356
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
405
+ "narrow": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
406
+ "wide": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
357
407
  },
358
408
  "container-multiplier": "1.5"
359
409
  },
360
410
  "size-6": {
361
411
  "icon-size": {
362
- "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
363
- "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
412
+ "narrow": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
413
+ "wide": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
364
414
  },
365
415
  "container-multiplier": "1.6"
366
416
  },
367
417
  "size-7": {
368
418
  "icon-size": {
369
- "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
370
- "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
419
+ "narrow": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
420
+ "wide": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
371
421
  },
372
422
  "container-multiplier": "1.6"
373
423
  }
@@ -403,10 +453,10 @@
403
453
  "text-decoration": "none",
404
454
  "line-height": "1.6",
405
455
  "narrow": {
406
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
456
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
407
457
  },
408
458
  "wide": {
409
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
459
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
410
460
  }
411
461
  },
412
462
  "standalone": {
@@ -418,10 +468,10 @@
418
468
  },
419
469
  "line-height": "1.6",
420
470
  "narrow": {
421
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
471
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
422
472
  },
423
473
  "wide": {
424
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
474
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
425
475
  }
426
476
  },
427
477
  "on-background-dark": {
@@ -451,10 +501,10 @@
451
501
  "line-height": "1.6",
452
502
  "list-style-type": "decimal",
453
503
  "narrow": {
454
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
504
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
455
505
  },
456
506
  "wide": {
457
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
507
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
458
508
  },
459
509
  "item": {
460
510
  "margin-inline-start": "2.25rem",
@@ -481,10 +531,10 @@
481
531
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
482
532
  "line-height": "1.1",
483
533
  "narrow": {
484
- "font-size": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)"
534
+ "font-size": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)"
485
535
  },
486
536
  "wide": {
487
- "font-size": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
537
+ "font-size": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)"
488
538
  },
489
539
  "font-weight": 800,
490
540
  "inverse-color": "#ffffff"
@@ -500,13 +550,14 @@
500
550
  "line-height": "1.6",
501
551
  "text-decoration": "none",
502
552
  "narrow": {
503
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
553
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
504
554
  },
505
555
  "wide": {
506
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
556
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
507
557
  },
508
558
  "hover": {
509
- "color": "#00387A"
559
+ "color": "#000000",
560
+ "text-decoration": "underline"
510
561
  }
511
562
  }
512
563
  },
@@ -517,27 +568,27 @@
517
568
  "inverse-color": "#ffffff",
518
569
  "line-height": "1.6",
519
570
  "narrow": {
520
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
571
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
521
572
  },
522
573
  "wide": {
523
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
574
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
524
575
  },
525
576
  "small": {
526
577
  "line-height": "1.6",
527
578
  "narrow": {
528
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
579
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
529
580
  },
530
581
  "wide": {
531
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
582
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
532
583
  }
533
584
  },
534
585
  "large": {
535
586
  "line-height": "1.5",
536
587
  "narrow": {
537
- "font-size": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)"
588
+ "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
538
589
  },
539
590
  "wide": {
540
- "font-size": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
591
+ "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
541
592
  }
542
593
  }
543
594
  },
@@ -548,10 +599,10 @@
548
599
  "font-weight": 400,
549
600
  "line-height": "1.6",
550
601
  "narrow": {
551
- "font-size": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)"
602
+ "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
552
603
  },
553
604
  "wide": {
554
- "font-size": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
605
+ "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
555
606
  }
556
607
  },
557
608
  "label": {
@@ -563,10 +614,10 @@
563
614
  },
564
615
  "line-height": "1.4",
565
616
  "narrow": {
566
- "font-size": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)"
617
+ "font-size": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)"
567
618
  },
568
619
  "wide": {
569
- "font-size": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
620
+ "font-size": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
570
621
  }
571
622
  },
572
623
  "outline-offset": "2px"
@@ -579,10 +630,10 @@
579
630
  "line-height": "1.6",
580
631
  "list-style-type": "'\\2022'",
581
632
  "narrow": {
582
- "font-size": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
633
+ "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
583
634
  },
584
635
  "wide": {
585
- "font-size": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
636
+ "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
586
637
  },
587
638
  "item": {
588
639
  "margin-inline-start": "1.625rem",
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 08 Sep 2023 12:12:54 GMT
3
+ * Generated on Tue, 10 Oct 2023 11:59:09 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -20,6 +20,7 @@
20
20
  --amsterdam-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
21
21
  --amsterdam-unordered-list-list-style-type: '\2022';
22
22
  --amsterdam-unordered-list-gap: 0.75rem;
23
+ --amsterdam-page-menu-item-hover-text-decoration: underline;
23
24
  --amsterdam-page-menu-item-text-decoration: none;
24
25
  --amsterdam-page-menu-item-gap: 0.5rem;
25
26
  --amsterdam-page-menu-row-gap: 0.5rem;
@@ -51,6 +52,8 @@
51
52
  --amsterdam-link-inline-focus-text-underline-offset: 3px;
52
53
  --amsterdam-link-inline-focus-text-decoration: underline;
53
54
  --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
55
+ --amsterdam-alert-close-background-color: transparent;
56
+ --amsterdam-alert-gap: 1rem;
54
57
  --amsterdam-spacing-inset-xl: 2.5rem;
55
58
  --amsterdam-spacing-inset-lg: 1.5rem;
56
59
  --amsterdam-spacing-inset-md: 1rem;
@@ -60,32 +63,37 @@
60
63
  --amsterdam-border-width-md: 2px;
61
64
  --amsterdam-border-width-sm: 1px;
62
65
  --amsterdam-typography-text-level-7-line-height: 1.6;
63
- --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
64
- --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
66
+ --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
67
+ --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
65
68
  --amsterdam-typography-text-level-6-line-height: 1.6;
66
- --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
67
- --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
69
+ --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
70
+ --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
68
71
  --amsterdam-typography-text-level-5-line-height: 1.5;
69
- --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
70
- --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
72
+ --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
73
+ --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
71
74
  --amsterdam-typography-text-level-4-line-height: 1.4;
72
- --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
73
- --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
75
+ --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
76
+ --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
74
77
  --amsterdam-typography-text-level-3-line-height: 1.4;
75
- --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
76
- --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
78
+ --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
79
+ --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
77
80
  --amsterdam-typography-text-level-2-line-height: 1.3;
78
- --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
79
- --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
81
+ --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
82
+ --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
80
83
  --amsterdam-typography-text-level-1-line-height: 1.2;
81
- --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
82
- --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
84
+ --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
85
+ --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
83
86
  --amsterdam-typography-text-level-0-line-height: 1.1;
84
- --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
85
- --amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
87
+ --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
88
+ --amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem);
86
89
  --amsterdam-typography-font-weight-bold: 800;
87
90
  --amsterdam-typography-font-weight-normal: 400;
88
91
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
92
+ --amsterdam-proportion-extra-wide: 16 / 9;
93
+ --amsterdam-proportion-wide: 5 / 4;
94
+ --amsterdam-proportion-square: 1 / 1;
95
+ --amsterdam-proportion-tall: 4 / 5;
96
+ --amsterdam-proportion-extra-tall: 9 / 16;
89
97
  --amsterdam-color-neutral-grey4: #323232;
90
98
  --amsterdam-color-neutral-grey3: #767676;
91
99
  --amsterdam-color-neutral-grey2: #B4B4B4;
@@ -159,7 +167,7 @@
159
167
  --amsterdam-paragraph-font-weight: 400;
160
168
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
161
169
  --amsterdam-paragraph-color: var(--amsterdam-color-primary-black);
162
- --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-dark-blue);
170
+ --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-primary-black);
163
171
  --amsterdam-page-menu-item-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
164
172
  --amsterdam-page-menu-item-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
165
173
  --amsterdam-page-menu-item-line-height: var(--amsterdam-typography-text-level-7-line-height);
@@ -289,6 +297,29 @@
289
297
  --amsterdam-blockquote-font-weight: 800;
290
298
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
291
299
  --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
300
+ --amsterdam-aspect-ratio-extra-wide: var(--amsterdam-proportion-extra-wide);
301
+ --amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
302
+ --amsterdam-aspect-ratio-square: var(--amsterdam-proportion-square);
303
+ --amsterdam-aspect-ratio-tall: var(--amsterdam-proportion-tall);
304
+ --amsterdam-aspect-ratio-extra-tall: var(--amsterdam-proportion-extra-tall);
305
+ --amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
306
+ --amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
307
+ --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
308
+ --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
309
+ --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
310
+ --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
311
+ --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
312
+ --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
313
+ --amsterdam-alert-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
314
+ --amsterdam-alert-title-font-weight: 800;
315
+ --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
316
+ --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
317
+ --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
318
+ --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
319
+ --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
320
+ --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
321
+ --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
322
+ --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
292
323
  --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
293
324
  --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
294
325
  --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);