@amsterdam/design-system-tokens 0.4.0 → 0.5.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 (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build.js +99 -0
  3. package/dist/compact.css +16 -0
  4. package/dist/compact.d.ts +56 -0
  5. package/dist/compact.json +33 -0
  6. package/dist/compact.mjs +14 -0
  7. package/dist/compact.scss +13 -0
  8. package/dist/compact.theme.css +16 -0
  9. package/dist/index.css +102 -201
  10. package/dist/index.d.ts +1103 -580
  11. package/dist/index.json +1082 -567
  12. package/dist/{index.js → index.mjs} +92 -191
  13. package/dist/{_variables.scss → index.scss} +101 -200
  14. package/dist/{root.css → index.theme.css} +102 -201
  15. package/package.json +7 -10
  16. package/src/brand/amsterdam/typography.compact.tokens.json +29 -0
  17. package/src/brand/amsterdam/typography.tokens.json +28 -62
  18. package/src/common/amsterdam/hyphenation.tokens.json +9 -0
  19. package/src/components/amsterdam/accordion.tokens.json +4 -10
  20. package/src/components/amsterdam/alert.tokens.json +0 -13
  21. package/src/components/amsterdam/badge.tokens.json +2 -8
  22. package/src/components/amsterdam/blockquote.tokens.json +3 -9
  23. package/src/components/amsterdam/breadcrumb.tokens.json +2 -8
  24. package/src/components/amsterdam/button.tokens.json +2 -8
  25. package/src/components/amsterdam/checkbox.tokens.json +5 -11
  26. package/src/components/amsterdam/dialog.tokens.json +2 -8
  27. package/src/components/amsterdam/form-label.tokens.json +2 -8
  28. package/src/components/amsterdam/grid.compact.tokens.json +14 -0
  29. package/src/components/amsterdam/grid.tokens.json +6 -18
  30. package/src/components/amsterdam/header.tokens.json +1 -1
  31. package/src/components/amsterdam/heading.tokens.json +22 -50
  32. package/src/components/amsterdam/icon.tokens.json +14 -34
  33. package/src/components/amsterdam/link-list.tokens.json +10 -26
  34. package/src/components/amsterdam/link.tokens.json +2 -25
  35. package/src/components/amsterdam/mega-menu.tokens.json +2 -2
  36. package/src/components/amsterdam/ordered-list.tokens.json +2 -8
  37. package/src/components/amsterdam/page-heading.tokens.json +2 -8
  38. package/src/components/amsterdam/page-menu.tokens.json +2 -8
  39. package/src/components/amsterdam/pagination.tokens.json +2 -8
  40. package/src/components/amsterdam/paragraph.tokens.json +10 -26
  41. package/src/components/amsterdam/search-field.tokens.json +4 -10
  42. package/src/components/amsterdam/skip-link.tokens.json +2 -6
  43. package/src/components/amsterdam/table.tokens.json +2 -2
  44. package/src/components/amsterdam/text-input.tokens.json +2 -8
  45. package/src/components/amsterdam/top-task-link.tokens.json +4 -16
  46. package/src/components/amsterdam/unordered-list.tokens.json +2 -8
  47. package/dist/index.tokens.json +0 -1341
  48. package/dist/tokens.d.ts +0 -1364
  49. package/dist/tokens.js +0 -12927
  50. package/dist/variables.less +0 -571
  51. package/style-dictionary.config.json +0 -101
@@ -1,1341 +0,0 @@
1
- {
2
- "amsterdam": {
3
- "color": {
4
- "primary-black": "#000000",
5
- "primary-white": "#FFFFFF",
6
- "primary-blue": "#004699",
7
- "primary-red": "#EC0000",
8
- "dark-blue": "#102E62",
9
- "orange": "#FF9100",
10
- "yellow": "#FFE600",
11
- "green": "#BED200",
12
- "dark-green": "#00A03C",
13
- "blue": "#009DE6",
14
- "purple": "#A00078",
15
- "magenta": "#E50082",
16
- "neutral-grey1": "#E8E8E8",
17
- "neutral-grey2": "#BEBEBE",
18
- "neutral-grey3": "#767676"
19
- },
20
- "proportion": {
21
- "x-tall": "9 / 16",
22
- "tall": "4 / 5",
23
- "square": "1 / 1",
24
- "wide": "5 / 4",
25
- "x-wide": "16 / 9",
26
- "2x-wide": "32 / 9"
27
- },
28
- "typography": {
29
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
30
- "font-weight": {
31
- "normal": 400,
32
- "bold": 800
33
- },
34
- "spacious": {
35
- "text-level": {
36
- "0": {
37
- "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
38
- "line-height": "1.15"
39
- },
40
- "1": {
41
- "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
42
- "line-height": "1.2"
43
- },
44
- "2": {
45
- "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
46
- "line-height": "1.25"
47
- },
48
- "3": {
49
- "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
50
- "line-height": "1.3"
51
- },
52
- "4": {
53
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
54
- "line-height": "1.5"
55
- },
56
- "5": {
57
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
58
- "line-height": "1.6"
59
- },
60
- "6": {
61
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
62
- "line-height": "1.6"
63
- }
64
- }
65
- },
66
- "compact": {
67
- "text-level": {
68
- "0": {
69
- "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
70
- "line-height": "1.15"
71
- },
72
- "1": {
73
- "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)",
74
- "line-height": "1.2"
75
- },
76
- "2": {
77
- "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)",
78
- "line-height": "1.25"
79
- },
80
- "3": {
81
- "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
82
- "line-height": "1.3"
83
- },
84
- "4": {
85
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
86
- "line-height": "1.5"
87
- },
88
- "5": {
89
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
90
- "line-height": "1.6"
91
- },
92
- "6": {
93
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
94
- "line-height": "1.6"
95
- }
96
- }
97
- }
98
- },
99
- "border-width": {
100
- "sm": "1px",
101
- "md": "2px",
102
- "lg": "3px"
103
- },
104
- "focus": {
105
- "outline-offset": "2px"
106
- },
107
- "link-appearance": {
108
- "color": "#004699",
109
- "text-decoration-thickness": "0.125rem",
110
- "text-underline-offset": "0.375rem",
111
- "hover": {
112
- "color": "#102E62"
113
- },
114
- "on-background-dark": {
115
- "color": "#FFFFFF"
116
- },
117
- "on-background-light": {
118
- "color": "#000000"
119
- },
120
- "regular": {
121
- "text-decoration-line": "underline",
122
- "hover": {
123
- "text-decoration-thickness": "0.1875rem",
124
- "text-underline-offset": "0.3125rem"
125
- }
126
- },
127
- "subtle": {
128
- "text-decoration-line": "none",
129
- "hover": {
130
- "text-decoration-line": "underline"
131
- }
132
- }
133
- },
134
- "spacing": {
135
- "inset": {
136
- "sm": "0.5rem",
137
- "md": "1rem",
138
- "lg": "1.5rem",
139
- "xl": "2.5rem"
140
- }
141
- },
142
- "accordion": {
143
- "button": {
144
- "color": "#004699",
145
- "focus": {
146
- "outline-offset": "2px"
147
- },
148
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
149
- "font-weight": 800,
150
- "hover": {
151
- "box-shadow": "inset 0 0 0 2px #767676"
152
- },
153
- "spacious": {
154
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
155
- "line-height": "1.6"
156
- },
157
- "compact": {
158
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
159
- "line-height": "1.6"
160
- }
161
- }
162
- },
163
- "alert": {
164
- "border-width": "4px",
165
- "border-style": "solid",
166
- "gap": "1rem",
167
- "padding-block-start": "1rem",
168
- "padding-block-end": "1rem",
169
- "padding-inline-start": "1.5rem",
170
- "padding-inline-end": "1.5rem",
171
- "title": {
172
- "color": "#000000",
173
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
174
- "font-weight": 800,
175
- "spacious": {
176
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
177
- "line-height": "1.5"
178
- },
179
- "compact": {
180
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
181
- "line-height": "1.5"
182
- }
183
- },
184
- "error": {
185
- "border-color": "#EC0000"
186
- },
187
- "info": {
188
- "border-color": "#004699"
189
- },
190
- "success": {
191
- "border-color": "#00A03C"
192
- },
193
- "warning": {
194
- "border-color": "#FF9100"
195
- },
196
- "close": {
197
- "fill": "#000000",
198
- "hover": {
199
- "fill": "#004699"
200
- }
201
- }
202
- },
203
- "aspect-ratio": {
204
- "x-tall": "9 / 16",
205
- "tall": "4 / 5",
206
- "square": "1 / 1",
207
- "wide": "5 / 4",
208
- "x-wide": "16 / 9",
209
- "2x-wide": "32 / 9"
210
- },
211
- "badge": {
212
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
213
- "font-weight": 800,
214
- "padding-inline": "0.5rem",
215
- "spacious": {
216
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
217
- "line-height": "1.6"
218
- },
219
- "compact": {
220
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
221
- "line-height": "1.6"
222
- },
223
- "blue": {
224
- "background-color": "#009DE6",
225
- "color": "#000000"
226
- },
227
- "dark-blue": {
228
- "background-color": "#004699",
229
- "color": "#FFFFFF"
230
- },
231
- "dark-green": {
232
- "background-color": "#00A03C",
233
- "color": "#FFFFFF"
234
- },
235
- "green": {
236
- "background-color": "#BED200",
237
- "color": "#000000"
238
- },
239
- "magenta": {
240
- "background-color": "#E50082",
241
- "color": "#FFFFFF"
242
- },
243
- "orange": {
244
- "background-color": "#FF9100",
245
- "color": "#000000"
246
- },
247
- "purple": {
248
- "background-color": "#A00078",
249
- "color": "#FFFFFF"
250
- },
251
- "yellow": {
252
- "background-color": "#FFE600",
253
- "color": "#000000"
254
- }
255
- },
256
- "blockquote": {
257
- "color": "#000000",
258
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
259
- "font-weight": 800,
260
- "inverse-color": "#FFFFFF",
261
- "spacious": {
262
- "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
263
- "line-height": "1.3"
264
- },
265
- "compact": {
266
- "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
267
- "line-height": "1.3"
268
- }
269
- },
270
- "breadcrumb": {
271
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
272
- "font-weight": 400,
273
- "separator": {
274
- "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
275
- },
276
- "item-link": {
277
- "color": "#004699",
278
- "outline-offset": "2px",
279
- "text-decoration-line": "none",
280
- "text-decoration-thickness": "0.125rem",
281
- "text-underline-offset": "0.375rem",
282
- "hover": {
283
- "color": "#102E62",
284
- "text-decoration-line": "underline"
285
- }
286
- },
287
- "spacious": {
288
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
289
- "line-height": "1.6"
290
- },
291
- "compact": {
292
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
293
- "line-height": "1.6"
294
- }
295
- },
296
- "button": {
297
- "spacious": {
298
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
299
- "line-height": "1.6"
300
- },
301
- "compact": {
302
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
303
- "line-height": "1.6"
304
- },
305
- "secondary": {
306
- "box-shadow": "inset 0 0 0 2px #004699",
307
- "hover": {
308
- "box-shadow": "inset 0 0 0 3px #102E62"
309
- },
310
- "disabled": {
311
- "box-shadow": "inset 0 0 0 2px #BEBEBE"
312
- },
313
- "focus": {
314
- "box-shadow": "inset 0 0 0 2px #004699"
315
- }
316
- },
317
- "tertiary": {
318
- "hover": {
319
- "box-shadow": "inset 0 0 0 2px #102E62"
320
- }
321
- }
322
- },
323
- "card": {
324
- "link": {
325
- "color": "#004699",
326
- "text-decoration-line": "none",
327
- "text-decoration-thickness": "0.125rem",
328
- "text-underline-offset": "0.375rem",
329
- "hover": {
330
- "color": "#102E62",
331
- "text-decoration-line": "underline"
332
- }
333
- },
334
- "outline-offset": "2px"
335
- },
336
- "checkbox": {
337
- "color": "#000000",
338
- "checkmark": {
339
- "border-color": "#004699",
340
- "checked": {
341
- "background-color": "#004699",
342
- "hover": {
343
- "background-color": "#102E62"
344
- }
345
- },
346
- "disabled": {
347
- "border-color": "#767676",
348
- "checked": {
349
- "background-color": "#767676",
350
- "hover": {
351
- "background-color": "#767676"
352
- }
353
- },
354
- "indeterminate": {
355
- "background-color": "#767676",
356
- "hover": {
357
- "background-color": "#767676"
358
- }
359
- }
360
- },
361
- "hover": {
362
- "border-color": "#102E62"
363
- },
364
- "invalid": {
365
- "border-color": "#EC0000",
366
- "checked": {
367
- "background-color": "#EC0000",
368
- "hover": {
369
- "background-color": "#EC0000"
370
- }
371
- },
372
- "hover": {
373
- "border-color": "#EC0000"
374
- },
375
- "indeterminate": {
376
- "background-color": "#EC0000",
377
- "hover": {
378
- "background-color": "#EC0000"
379
- }
380
- }
381
- },
382
- "indeterminate": {
383
- "background-color": "#004699",
384
- "hover": {
385
- "background-color": "#102E62"
386
- }
387
- }
388
- },
389
- "disabled": {
390
- "color": "#767676"
391
- },
392
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
393
- "font-weight": 400,
394
- "hover": {
395
- "color": "#102E62"
396
- },
397
- "outline-offset": "2px",
398
- "spacious": {
399
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
400
- "line-height": "1.6"
401
- },
402
- "compact": {
403
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
404
- "line-height": "1.6"
405
- }
406
- },
407
- "dialog": {
408
- "background-color": "#FFFFFF",
409
- "border": "0",
410
- "max-inline-size": "min(87.69vw, 45rem)",
411
- "title": {
412
- "color": "#000000",
413
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
414
- "font-weight": 800,
415
- "spacious": {
416
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
417
- "line-height": "1.6"
418
- },
419
- "compact": {
420
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
421
- "line-height": "1.6"
422
- }
423
- },
424
- "backdrop": {
425
- "background": "#0006"
426
- },
427
- "form": {
428
- "gap": "1.5rem",
429
- "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
430
- "padding-inline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
431
- "max-block-size": "75vh"
432
- },
433
- "article": {
434
- "padding-inline-end": "1.5rem"
435
- },
436
- "header": {
437
- "gap": "1rem"
438
- },
439
- "footer": {
440
- "gap": "1rem",
441
- "padding-block": "1.5rem 0"
442
- }
443
- },
444
- "form-label": {
445
- "color": "#000000",
446
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
447
- "font-weight": 800,
448
- "spacious": {
449
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
450
- "line-height": "1.5"
451
- },
452
- "compact": {
453
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
454
- "line-height": "1.5"
455
- }
456
- },
457
- "grid": {
458
- "column-count": "4",
459
- "spacious": {
460
- "gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
461
- "padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
462
- },
463
- "compact": {
464
- "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
465
- "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
466
- },
467
- "medium": {
468
- "column-count": "8"
469
- },
470
- "wide": {
471
- "column-count": "12"
472
- }
473
- },
474
- "header": {
475
- "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
476
- },
477
- "heading": {
478
- "color": "#000000",
479
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
480
- "font-weight": 800,
481
- "inverse-color": "#FFFFFF",
482
- "spacious": {
483
- "level-1": {
484
- "line-height": "1.2",
485
- "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)"
486
- },
487
- "level-2": {
488
- "line-height": "1.25",
489
- "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)"
490
- },
491
- "level-3": {
492
- "line-height": "1.3",
493
- "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)"
494
- },
495
- "level-4": {
496
- "line-height": "1.5",
497
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)"
498
- },
499
- "level-5": {
500
- "line-height": "1.6",
501
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)"
502
- },
503
- "level-6": {
504
- "line-height": "1.6",
505
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
506
- }
507
- },
508
- "compact": {
509
- "level-1": {
510
- "line-height": "1.2",
511
- "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
512
- },
513
- "level-2": {
514
- "line-height": "1.25",
515
- "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
516
- },
517
- "level-3": {
518
- "line-height": "1.3",
519
- "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
520
- },
521
- "level-4": {
522
- "line-height": "1.5",
523
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
524
- },
525
- "level-5": {
526
- "line-height": "1.6",
527
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)"
528
- },
529
- "level-6": {
530
- "line-height": "1.6",
531
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)"
532
- }
533
- }
534
- },
535
- "icon-button": {
536
- "color": "#004699",
537
- "outline-offset": "2px",
538
- "hover": {
539
- "background-color": "rgba(0, 70, 153, 0.125)",
540
- "color": "#102E62"
541
- },
542
- "disabled": {
543
- "color": "#BEBEBE"
544
- },
545
- "on-background-light": {
546
- "color": "#000000",
547
- "hover": {
548
- "background-color": "rgba(0, 0, 0, 0.125)",
549
- "color": "#000000"
550
- },
551
- "disabled": {
552
- "color": "#BEBEBE"
553
- }
554
- },
555
- "on-background-dark": {
556
- "background-color": "#004699",
557
- "color": "#FFFFFF",
558
- "hover": {
559
- "background-color": "#102E62",
560
- "color": "#FFFFFF"
561
- },
562
- "disabled": {
563
- "color": "#FFFFFF",
564
- "background-color": "#BEBEBE"
565
- }
566
- }
567
- },
568
- "icon": {
569
- "spacious": {
570
- "size-3": {
571
- "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
572
- "line-height": "1.3"
573
- },
574
- "size-4": {
575
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
576
- "line-height": "1.5"
577
- },
578
- "size-5": {
579
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
580
- "line-height": "1.6"
581
- },
582
- "size-6": {
583
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
584
- "line-height": "1.6"
585
- }
586
- },
587
- "compact": {
588
- "size-3": {
589
- "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
590
- "line-height": "1.3"
591
- },
592
- "size-4": {
593
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
594
- "line-height": "1.5"
595
- },
596
- "size-5": {
597
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
598
- "line-height": "1.6"
599
- },
600
- "size-6": {
601
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
602
- "line-height": "1.6"
603
- }
604
- }
605
- },
606
- "link-list": {
607
- "gap": "0.5em",
608
- "link": {
609
- "color": "#004699",
610
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
611
- "font-weight": 400,
612
- "gap": "0.5em",
613
- "outline-offset": "2px",
614
- "text-decoration-line": "none",
615
- "text-decoration-thickness": "0.125rem",
616
- "text-underline-offset": "0.375rem",
617
- "spacious": {
618
- "small": {
619
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
620
- "line-height": "1.6"
621
- },
622
- "medium": {
623
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
624
- "line-height": "1.6"
625
- },
626
- "large": {
627
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
628
- "line-height": "1.5"
629
- }
630
- },
631
- "compact": {
632
- "small": {
633
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
634
- "line-height": "1.6"
635
- },
636
- "medium": {
637
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
638
- "line-height": "1.6"
639
- },
640
- "large": {
641
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
642
- "line-height": "1.5"
643
- }
644
- },
645
- "hover": {
646
- "color": "#102E62",
647
- "text-decoration-line": "underline"
648
- },
649
- "on-background-dark": {
650
- "color": "#FFFFFF",
651
- "hover": {
652
- "color": "#FFFFFF"
653
- }
654
- },
655
- "on-background-light": {
656
- "color": "#000000",
657
- "hover": {
658
- "color": "#000000"
659
- }
660
- }
661
- }
662
- },
663
- "link": {
664
- "color": "#004699",
665
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
666
- "font-weight": 400,
667
- "outline-offset": "2px",
668
- "hover": {
669
- "color": "#102E62"
670
- },
671
- "inline": {
672
- "text-decoration-line": "underline",
673
- "text-decoration-thickness": "0.125rem",
674
- "text-underline-offset": "0.375rem",
675
- "font-family": "inherit",
676
- "font-size": "inherit",
677
- "line-height": "inherit",
678
- "hover": {
679
- "text-decoration-thickness": "0.1875rem",
680
- "text-underline-offset": "0.3125rem"
681
- },
682
- "visited": {
683
- "color": "#A00078"
684
- }
685
- },
686
- "in-list": {
687
- "gap": "0.5em",
688
- "text-decoration-line": "none",
689
- "text-decoration-thickness": "0.125rem",
690
- "text-underline-offset": "0.375rem",
691
- "hover": {
692
- "text-decoration-line": "underline"
693
- },
694
- "spacious": {
695
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
696
- "line-height": "1.6"
697
- },
698
- "compact": {
699
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
700
- "line-height": "1.6"
701
- }
702
- },
703
- "standalone": {
704
- "text-decoration-line": "underline",
705
- "text-decoration-thickness": "0.125rem",
706
- "text-underline-offset": "0.375rem",
707
- "hover": {
708
- "text-decoration-thickness": "0.1875rem",
709
- "text-underline-offset": "0.3125rem"
710
- },
711
- "spacious": {
712
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
713
- "line-height": "1.6"
714
- },
715
- "compact": {
716
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
717
- "line-height": "1.6"
718
- }
719
- },
720
- "on-background-dark": {
721
- "color": "#FFFFFF",
722
- "hover": {
723
- "color": "#FFFFFF"
724
- },
725
- "visited": {
726
- "color": "#FFFFFF"
727
- }
728
- },
729
- "on-background-light": {
730
- "color": "#000000",
731
- "hover": {
732
- "color": "#000000"
733
- },
734
- "visited": {
735
- "color": "#000000"
736
- }
737
- }
738
- },
739
- "logo": {
740
- "height": "2.5rem",
741
- "emblem": {
742
- "color": "#EC0000"
743
- },
744
- "title": {
745
- "color": "#EC0000"
746
- },
747
- "subsite": {
748
- "color": "#000000"
749
- }
750
- },
751
- "mark": {
752
- "background-color": "var(--amsterdam-color-yellow)"
753
- },
754
- "mega-menu": {
755
- "list-category": {
756
- "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
757
- "column-width": "20rem",
758
- "padding-block-start": "1rem",
759
- "padding-block-end": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
760
- }
761
- },
762
- "ordered-list": {
763
- "color": "#000000",
764
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
765
- "font-weight": 400,
766
- "gap": "0.75rem",
767
- "list-style-type": "decimal",
768
- "spacious": {
769
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
770
- "line-height": "1.6"
771
- },
772
- "compact": {
773
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
774
- "line-height": "1.6"
775
- },
776
- "item": {
777
- "margin-inline-start": "2.25rem",
778
- "padding-inline-start": "0.25rem"
779
- },
780
- "ordered-list": {
781
- "list-style-type": "lower-alpha",
782
- "item": {
783
- "margin-inline-start": "1.5rem",
784
- "padding-inline-start": "0.25rem"
785
- }
786
- }
787
- },
788
- "page-heading": {
789
- "color": "#000000",
790
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
791
- "font-weight": 800,
792
- "inverse-color": "#FFFFFF",
793
- "spacious": {
794
- "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
795
- "line-height": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)"
796
- },
797
- "compact": {
798
- "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
799
- "line-height": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)"
800
- }
801
- },
802
- "page-menu": {
803
- "column-gap": "2.5rem",
804
- "row-gap": "0.5rem",
805
- "item": {
806
- "color": "#004699",
807
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
808
- "font-weight": 400,
809
- "gap": "0.5rem",
810
- "outline-offset": "2px",
811
- "text-decoration-line": "none",
812
- "text-decoration-thickness": "0.125rem",
813
- "text-underline-offset": "0.375rem",
814
- "spacious": {
815
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
816
- "line-height": "1.6"
817
- },
818
- "compact": {
819
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
820
- "line-height": "1.6"
821
- },
822
- "hover": {
823
- "color": "#102E62",
824
- "text-decoration-line": "underline"
825
- }
826
- }
827
- },
828
- "pagination": {
829
- "color": "#004699",
830
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
831
- "font-weight": 400,
832
- "spacious": {
833
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
834
- "line-height": "1.6"
835
- },
836
- "compact": {
837
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
838
- "line-height": "1.6"
839
- },
840
- "button": {
841
- "outline-offset": "2px",
842
- "text-decoration-line": "none",
843
- "text-decoration-thickness": "0.125rem",
844
- "text-underline-offset": "0.375rem",
845
- "current": {
846
- "font-weight": 800
847
- },
848
- "hover": {
849
- "color": "#102E62",
850
- "text-decoration-line": "underline"
851
- }
852
- }
853
- },
854
- "paragraph": {
855
- "color": "#000000",
856
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
857
- "font-weight": 400,
858
- "inverse-color": "#FFFFFF",
859
- "spacious": {
860
- "small": {
861
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
862
- "line-height": "1.6"
863
- },
864
- "medium": {
865
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
866
- "line-height": "1.6"
867
- },
868
- "large": {
869
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
870
- "line-height": "1.5"
871
- }
872
- },
873
- "compact": {
874
- "small": {
875
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
876
- "line-height": "1.6"
877
- },
878
- "medium": {
879
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
880
- "line-height": "1.6"
881
- },
882
- "large": {
883
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
884
- "line-height": "1.5"
885
- }
886
- }
887
- },
888
- "screen": {
889
- "wide": {
890
- "max-width": "100rem"
891
- },
892
- "x-wide": {
893
- "max-width": "132rem"
894
- }
895
- },
896
- "search-field": {
897
- "button": {
898
- "background-color": "#004699",
899
- "color": "#FFFFFF",
900
- "outline-offset": "2px",
901
- "hover": {
902
- "background-color": "#102E62"
903
- }
904
- },
905
- "input": {
906
- "box-shadow": "inset 0 0 0 1px #000000",
907
- "color": "#000000",
908
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
909
- "font-weight": 400,
910
- "outline-offset": "2px",
911
- "cancel-button": {
912
- "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
913
- "color": "#004699",
914
- "height": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
915
- "width": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
916
- },
917
- "hover": {
918
- "box-shadow": "inset 0 0 0 2px #000000"
919
- },
920
- "placeholder": {
921
- "color": "#767676"
922
- },
923
- "compact": {
924
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
925
- "line-height": "1.6"
926
- },
927
- "spacious": {
928
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
929
- "line-height": "1.6"
930
- }
931
- }
932
- },
933
- "skip-link": {
934
- "background-color": "#004699",
935
- "color": "#FFFFFF",
936
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
937
- "font-weight": 400,
938
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
939
- "line-height": "1.6",
940
- "outline-offset": "2px",
941
- "compact": {
942
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
943
- "line-height": "1.6"
944
- },
945
- "hover": {
946
- "background-color": "#102E62"
947
- }
948
- },
949
- "spotlight": {
950
- "blue": {
951
- "background-color": "#009DE6"
952
- },
953
- "dark-blue": {
954
- "background-color": "#004699"
955
- },
956
- "dark-green": {
957
- "background-color": "#00A03C"
958
- },
959
- "green": {
960
- "background-color": "#BED200"
961
- },
962
- "magenta": {
963
- "background-color": "#E50082"
964
- },
965
- "orange": {
966
- "background-color": "#FF9100"
967
- },
968
- "purple": {
969
- "background-color": "#A00078"
970
- },
971
- "yellow": {
972
- "background-color": "#FFE600"
973
- }
974
- },
975
- "switch": {
976
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
977
- "background-color": "#767676",
978
- "width": "3.5rem",
979
- "thumb": {
980
- "background-color": "#FFFFFF",
981
- "width": "1.75rem",
982
- "height": "1.75rem",
983
- "hover": {
984
- "color": "#102E62"
985
- }
986
- },
987
- "checked": {
988
- "background-color": "#004699"
989
- },
990
- "outline-offset": "2px",
991
- "disabled": {
992
- "background-color": "#BEBEBE"
993
- }
994
- },
995
- "table": {
996
- "color": "#000000",
997
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
998
- "font-weight": 400,
999
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1000
- "line-height": "1.6",
1001
- "caption": {
1002
- "font-weight": 800
1003
- },
1004
- "cell": {
1005
- "border-bottom": "1px solid #E8E8E8"
1006
- },
1007
- "header-cell": {
1008
- "font-weight": 800
1009
- }
1010
- },
1011
- "text-input": {
1012
- "box-shadow": "inset 0 0 0 1px #000000",
1013
- "color": "#000000",
1014
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
1015
- "font-weight": 400,
1016
- "outline-offset": "2px",
1017
- "disabled": {
1018
- "background-color": "#FFFFFF",
1019
- "box-shadow": "inset 0 0 0 1px #BEBEBE",
1020
- "color": "#BEBEBE"
1021
- },
1022
- "hover": {
1023
- "box-shadow": "inset 0 0 0 2px #000000"
1024
- },
1025
- "invalid": {
1026
- "box-shadow": "inset 0 0 0 1px #EC0000",
1027
- "hover": {
1028
- "box-shadow": "inset 0 0 0 2px #EC0000"
1029
- }
1030
- },
1031
- "placeholder": {
1032
- "color": "#767676"
1033
- },
1034
- "compact": {
1035
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
1036
- "line-height": "1.6"
1037
- },
1038
- "spacious": {
1039
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
1040
- "line-height": "1.6"
1041
- }
1042
- },
1043
- "top-task-link": {
1044
- "description": {
1045
- "color": "#000000",
1046
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
1047
- "font-weight": 400,
1048
- "spacious": {
1049
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
1050
- "line-height": "1.6"
1051
- },
1052
- "compact": {
1053
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
1054
- "line-height": "1.6"
1055
- }
1056
- },
1057
- "label": {
1058
- "color": "#004699",
1059
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
1060
- "font-weight": 800,
1061
- "text-decoration-line": "none",
1062
- "text-decoration-thickness": "0.125rem",
1063
- "text-underline-offset": "0.375rem",
1064
- "hover": {
1065
- "color": "#102E62",
1066
- "text-decoration-line": "underline"
1067
- },
1068
- "spacious": {
1069
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
1070
- "line-height": "1.5"
1071
- },
1072
- "compact": {
1073
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
1074
- "line-height": "1.5"
1075
- }
1076
- },
1077
- "outline-offset": "2px"
1078
- },
1079
- "unordered-list": {
1080
- "color": "#000000",
1081
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
1082
- "font-weight": 400,
1083
- "gap": "0.75rem",
1084
- "list-style-type": "'\\2022'",
1085
- "spacious": {
1086
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1087
- "line-height": "1.6"
1088
- },
1089
- "compact": {
1090
- "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
1091
- "line-height": "1.6"
1092
- },
1093
- "item": {
1094
- "margin-inline-start": "1.625rem",
1095
- "padding-inline-start": "0.875rem"
1096
- },
1097
- "unordered-list": {
1098
- "list-style-type": "'\\2013'",
1099
- "item": {
1100
- "margin-inline-start": "0.875rem",
1101
- "padding-inline-start": "0.875rem"
1102
- }
1103
- }
1104
- }
1105
- },
1106
- "utrecht": {
1107
- "action": {
1108
- "activate": {
1109
- "cursor": "pointer"
1110
- },
1111
- "busy": {
1112
- "cursor": "wait"
1113
- },
1114
- "disabled": {
1115
- "cursor": "not-allowed"
1116
- },
1117
- "inert": {
1118
- "cursor": "default"
1119
- },
1120
- "navigate": {
1121
- "cursor": "pointer"
1122
- },
1123
- "submit": {
1124
- "cursor": "pointer"
1125
- }
1126
- },
1127
- "focus": {
1128
- "outline-offset": "2px"
1129
- },
1130
- "button": {
1131
- "background-color": "#004699",
1132
- "border-color": {},
1133
- "border-radius": {},
1134
- "border-width": {},
1135
- "color": "#FFFFFF",
1136
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
1137
- "font-size": {},
1138
- "line-height": {},
1139
- "padding-inline-start": "1rem",
1140
- "padding-inline-end": "1rem",
1141
- "padding-block-start": "0.5rem",
1142
- "padding-block-end": "0.5rem",
1143
- "margin-inline-start": {},
1144
- "margin-inline-end": {},
1145
- "margin-block-start": {},
1146
- "margin-block-end": {},
1147
- "icon": {
1148
- "gap": {}
1149
- },
1150
- "disabled": {
1151
- "background-color": "#BEBEBE",
1152
- "color": "#FFFFFF",
1153
- "border-color": {}
1154
- },
1155
- "hover": {
1156
- "background-color": {}
1157
- },
1158
- "focus": {
1159
- "scale": {}
1160
- },
1161
- "primary-action": {
1162
- "background-color": "#004699",
1163
- "border-color": {},
1164
- "border-width": {},
1165
- "color": "#FFFFFF",
1166
- "disabled": {
1167
- "background-color": "#BEBEBE",
1168
- "color": {},
1169
- "border-color": {}
1170
- },
1171
- "hover": {
1172
- "background-color": "#102E62",
1173
- "border-color": {},
1174
- "color": {}
1175
- },
1176
- "focus": {
1177
- "background-color": {},
1178
- "border-color": {},
1179
- "border-width": {}
1180
- },
1181
- "ready": {
1182
- "background-color": {},
1183
- "border-color": {},
1184
- "color": {},
1185
- "disabled": {
1186
- "border-color": {}
1187
- },
1188
- "hover": {
1189
- "background-color": {},
1190
- "border-color": {},
1191
- "color": {}
1192
- },
1193
- "focus": {
1194
- "background-color": {},
1195
- "border-color": {}
1196
- }
1197
- },
1198
- "warning": {
1199
- "background-color": {},
1200
- "border-color": {},
1201
- "color": {},
1202
- "disabled": {
1203
- "border-color": {}
1204
- },
1205
- "hover": {
1206
- "background-color": {},
1207
- "border-color": {},
1208
- "color": {}
1209
- },
1210
- "focus": {
1211
- "background-color": {},
1212
- "border-color": {}
1213
- }
1214
- },
1215
- "danger": {
1216
- "background-color": {},
1217
- "border-color": {},
1218
- "color": {},
1219
- "disabled": {
1220
- "border-color": {}
1221
- },
1222
- "hover": {
1223
- "background-color": {},
1224
- "border-color": {},
1225
- "color": {}
1226
- },
1227
- "focus": {
1228
- "background-color": {},
1229
- "border-color": {}
1230
- }
1231
- }
1232
- },
1233
- "secondary-action": {
1234
- "background-color": "#FFFFFF",
1235
- "color": "#004699",
1236
- "border-color": {},
1237
- "border-width": {},
1238
- "hover": {
1239
- "background-color": {},
1240
- "color": "#102E62",
1241
- "border-color": {}
1242
- },
1243
- "disabled": {
1244
- "background-color": "#FFFFFF",
1245
- "color": "#BEBEBE",
1246
- "border-color": {}
1247
- },
1248
- "danger": {
1249
- "background-color": {},
1250
- "border-color": {},
1251
- "color": {},
1252
- "disabled": {
1253
- "border-color": {}
1254
- },
1255
- "hover": {
1256
- "background-color": {},
1257
- "border-color": {},
1258
- "color": {}
1259
- },
1260
- "focus": {
1261
- "background-color": {},
1262
- "border-color": {}
1263
- }
1264
- },
1265
- "warning": {
1266
- "background-color": {},
1267
- "border-color": {},
1268
- "color": {},
1269
- "disabled": {
1270
- "border-color": {}
1271
- },
1272
- "hover": {
1273
- "background-color": {},
1274
- "border-color": {},
1275
- "color": {}
1276
- },
1277
- "focus": {
1278
- "background-color": {},
1279
- "border-color": {}
1280
- }
1281
- },
1282
- "ready": {
1283
- "background-color": {},
1284
- "border-color": {},
1285
- "color": {},
1286
- "disabled": {
1287
- "border-color": {}
1288
- },
1289
- "hover": {
1290
- "background-color": {},
1291
- "border-color": {},
1292
- "color": {}
1293
- },
1294
- "focus": {
1295
- "background-color": {},
1296
- "border-color": {}
1297
- }
1298
- }
1299
- },
1300
- "subtle": {
1301
- "background-color": "transparent",
1302
- "border-color": {},
1303
- "border-width": {},
1304
- "color": "#004699",
1305
- "font-weight": {},
1306
- "hover": {
1307
- "background-color": {},
1308
- "color": "#102E62",
1309
- "border-color": {}
1310
- },
1311
- "focus": {
1312
- "background-color": {},
1313
- "color": "#102E62",
1314
- "border-color": {}
1315
- },
1316
- "disabled": {
1317
- "background-color": "transparent",
1318
- "color": "#BEBEBE"
1319
- },
1320
- "danger": {
1321
- "color": {},
1322
- "hover": {
1323
- "color": {}
1324
- },
1325
- "focus": {
1326
- "color": {}
1327
- }
1328
- },
1329
- "ready": {
1330
- "color": {},
1331
- "hover": {
1332
- "color": {}
1333
- },
1334
- "focus": {
1335
- "color": {}
1336
- }
1337
- }
1338
- }
1339
- }
1340
- }
1341
- }