@rijkshuisstijl-community/design-tokens 1.0.0-alpha.122 → 1.0.0-alpha.124

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 (57) hide show
  1. package/build.mjs +129 -0
  2. package/dist/_variables.scss +497 -501
  3. package/dist/index.css +497 -501
  4. package/dist/index.d.ts +698 -703
  5. package/dist/index.js +698 -702
  6. package/dist/index.json +698 -702
  7. package/dist/index.tokens.json +1607 -1622
  8. package/dist/root.css +497 -501
  9. package/dist/tokens.d.ts +1539 -1554
  10. package/dist/tokens.js +22067 -22164
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +1194 -0
  12. package/dist/uitvoerend-mintgroen-focus/index.css +1197 -0
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +1195 -0
  14. package/dist/uitvoerend-mintgroen-focus/index.js +1195 -0
  15. package/dist/uitvoerend-mintgroen-focus/index.json +1192 -0
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1878 -0
  17. package/dist/uitvoerend-mintgroen-focus/root.css +1197 -0
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1901 -0
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +28015 -0
  20. package/dist/uitvoerend-violet/_variables.scss +1187 -0
  21. package/dist/uitvoerend-violet/index.css +1190 -0
  22. package/dist/uitvoerend-violet/index.d.ts +1188 -0
  23. package/dist/uitvoerend-violet/index.js +1188 -0
  24. package/dist/uitvoerend-violet/index.json +1185 -0
  25. package/dist/uitvoerend-violet/index.tokens.json +1835 -0
  26. package/dist/uitvoerend-violet/root.css +1190 -0
  27. package/dist/uitvoerend-violet/tokens.d.ts +1858 -0
  28. package/dist/uitvoerend-violet/tokens.js +27814 -0
  29. package/dist/uitvoerend-violet-oud/_variables.scss +1187 -0
  30. package/dist/uitvoerend-violet-oud/index.css +1190 -0
  31. package/dist/uitvoerend-violet-oud/index.d.ts +1188 -0
  32. package/dist/uitvoerend-violet-oud/index.js +1188 -0
  33. package/dist/uitvoerend-violet-oud/index.json +1185 -0
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +1835 -0
  35. package/dist/uitvoerend-violet-oud/root.css +1190 -0
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +1858 -0
  37. package/dist/uitvoerend-violet-oud/tokens.js +27814 -0
  38. package/dist/wetgevend/_variables.scss +1187 -0
  39. package/dist/wetgevend/index.css +1190 -0
  40. package/dist/wetgevend/index.d.ts +1188 -0
  41. package/dist/wetgevend/index.js +1188 -0
  42. package/dist/wetgevend/index.json +1185 -0
  43. package/dist/wetgevend/index.tokens.json +1835 -0
  44. package/dist/wetgevend/root.css +1190 -0
  45. package/dist/wetgevend/tokens.d.ts +1858 -0
  46. package/dist/{tokens.json → wetgevend/tokens.js} +21898 -22097
  47. package/figma/figma.tokens.json +628 -4
  48. package/package.json +3 -4
  49. package/src/generated/themes.json +22266 -0
  50. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +5610 -0
  51. package/src/generated/uitvoerend-violet/tokens.json +5546 -0
  52. package/src/generated/uitvoerend-violet-oud/tokens.json +5546 -0
  53. package/src/generated/wetgevend/tokens.json +5546 -0
  54. package/token-transformer.mjs +77 -41
  55. package/dist/variables.less +0 -1196
  56. package/style-dictionary.config.json +0 -105
  57. /package/src/generated/{figma.tokens.json → base.tokens.json} +0 -0
@@ -0,0 +1,1878 @@
1
+ {
2
+ "rhc": {
3
+ "color": {
4
+ "primary": {
5
+ "50": "#eaf8f4",
6
+ "100": "#d6f2e9",
7
+ "200": "#C1EBDE",
8
+ "300": "#ACE4D3",
9
+ "400": "#98DDC8",
10
+ "500": "#76d2b6",
11
+ "hover": "#528e7c"
12
+ },
13
+ "focus": {
14
+ "outline": "#76d2b6"
15
+ },
16
+ "foreground": {
17
+ "default": "#000",
18
+ "lint": "#154273",
19
+ "subdued": "#334155",
20
+ "onEmphasis": "#fff",
21
+ "link": "#01689b"
22
+ },
23
+ "border": {
24
+ "default": "#64748B",
25
+ "subdued": "#94A3B8",
26
+ "strong": "#000"
27
+ },
28
+ "canvas": "#fff",
29
+ "feedback": {
30
+ "success": {
31
+ "default": "#39870c",
32
+ "subdued": "#e1eddb"
33
+ },
34
+ "info": {
35
+ "default": "#007bc7",
36
+ "subdued": "#d9ebf7"
37
+ },
38
+ "error": {
39
+ "default": "#d52b1e",
40
+ "subdued": "#f9dfdd"
41
+ },
42
+ "warning": {
43
+ "default": "#ffb612",
44
+ "subdued": "#fff4db"
45
+ }
46
+ },
47
+ "accent": {
48
+ "500": "#8fcae7"
49
+ },
50
+ "grijs": {
51
+ "50": "#F8FAFC",
52
+ "100": "#F1F5F9",
53
+ "200": "#E2E8F0",
54
+ "300": "#CBD5E1",
55
+ "400": "#94A3B8",
56
+ "500": "#64748B",
57
+ "600": "#475569",
58
+ "700": "#334155",
59
+ "800": "#1E293B",
60
+ "900": "#0F172A"
61
+ },
62
+ "lichtblauw": {
63
+ "50": "#eef7fb",
64
+ "100": "#ddeff8",
65
+ "200": "#CCE7F4",
66
+ "300": "#BCDFF0",
67
+ "400": "#ABD7ED",
68
+ "500": "#8fcae7"
69
+ },
70
+ "violet": {
71
+ "50": "#f2d9e7",
72
+ "100": "#e5b3d0",
73
+ "200": "#D88CB7",
74
+ "300": "#CB66A0",
75
+ "400": "#BE4088",
76
+ "500": "#a90061"
77
+ },
78
+ "paars": {
79
+ "50": "#e3dce7",
80
+ "100": "#c6b9cf",
81
+ "200": "#A995B7",
82
+ "300": "#8D729F",
83
+ "400": "#714f87",
84
+ "500": "#42145f"
85
+ },
86
+ "hemelblauw": {
87
+ "50": "#d9ebf7",
88
+ "100": "#b3d7ee",
89
+ "200": "#8CC3E6",
90
+ "300": "#66AFDD",
91
+ "400": "#409CD5",
92
+ "500": "#007bc7"
93
+ },
94
+ "donkerblauw": {
95
+ "50": "#d9e8f0",
96
+ "100": "#b3d2e1",
97
+ "200": "#8CBBD2",
98
+ "300": "#66A4C3",
99
+ "400": "#408EB4",
100
+ "500": "#01689b"
101
+ },
102
+ "mintgroen": {
103
+ "50": "#eaf8f4",
104
+ "100": "#d6f2e9",
105
+ "200": "#C1EBDE",
106
+ "300": "#ACE4D3",
107
+ "400": "#98DDC8",
108
+ "500": "#76d2b6"
109
+ },
110
+ "mosgroen": {
111
+ "50": "#ebebd9",
112
+ "100": "#d6d7b3",
113
+ "200": "#C1C38C",
114
+ "300": "#ADAF66",
115
+ "400": "#999C40",
116
+ "500": "#777b00"
117
+ },
118
+ "groen": {
119
+ "50": "#e1eddb",
120
+ "100": "#c4dbb6",
121
+ "200": "#A5C991",
122
+ "300": "#88B76D",
123
+ "400": "#6AA549",
124
+ "500": "#39870c"
125
+ },
126
+ "donkergroen": {
127
+ "50": "#dfe6e1",
128
+ "100": "#becdc3",
129
+ "200": "#9DB4A4",
130
+ "300": "#7D9B87",
131
+ "400": "#5D8269",
132
+ "500": "#275937"
133
+ },
134
+ "bruin": {
135
+ "50": "#efeada",
136
+ "100": "#dfd4b6",
137
+ "200": "#CFBF90",
138
+ "300": "#BFA96C",
139
+ "400": "#AF9447",
140
+ "500": "#94710a"
141
+ },
142
+ "donkerbruin": {
143
+ "50": "#e8e0df",
144
+ "100": "#d1c2be",
145
+ "200": "#BAA39D",
146
+ "300": "#A3847D",
147
+ "400": "#8D665D",
148
+ "500": "#673327"
149
+ },
150
+ "geel": {
151
+ "50": "#fefbdd",
152
+ "100": "#fdf6bc",
153
+ "200": "#FCF199",
154
+ "300": "#FBED78",
155
+ "400": "#FAE856",
156
+ "500": "#f9e11e"
157
+ },
158
+ "donkergeel": {
159
+ "50": "#fff4db",
160
+ "100": "#ffe9b8",
161
+ "200": "#FDDE94",
162
+ "300": "#FDD370",
163
+ "400": "#FDC84D",
164
+ "500": "#ffb612"
165
+ },
166
+ "oranje": {
167
+ "50": "#fbead9",
168
+ "100": "#f6d4b3",
169
+ "200": "#F1BE8C",
170
+ "300": "#EDA966",
171
+ "400": "#E89440",
172
+ "500": "#e17000"
173
+ },
174
+ "rood": {
175
+ "50": "#f9dfdd",
176
+ "100": "#f2bfbc",
177
+ "200": "#EC9F99",
178
+ "300": "#E67F78",
179
+ "400": "#DF6056",
180
+ "500": "#d52b1e"
181
+ },
182
+ "roze": {
183
+ "50": "#fdeff8",
184
+ "100": "#fbdef0",
185
+ "200": "#F8CEE8",
186
+ "300": "#F6BDE1",
187
+ "400": "#F4ADD9",
188
+ "500": "#f092cd"
189
+ },
190
+ "robijnrood": {
191
+ "50": "#f7d9e7",
192
+ "100": "#efb3ce",
193
+ "200": "#E78CB6",
194
+ "300": "#DF669D",
195
+ "400": "#D74085",
196
+ "500": "#ca005d"
197
+ },
198
+ "lintblauw": {
199
+ "50": "#dce3ea",
200
+ "100": "#b8c6d5",
201
+ "200": "#95a9c0",
202
+ "300": "#738eab",
203
+ "400": "#4f7196",
204
+ "500": "#154273"
205
+ },
206
+ "wit": "#fff",
207
+ "zwart": "#000",
208
+ "none": "transparent"
209
+ },
210
+ "sub-nav-bar": {
211
+ "background-color": "#f2f4f6",
212
+ "column-gap": "0.5rem",
213
+ "column-width": "375px",
214
+ "padding-block-end": "2rem",
215
+ "padding-block-start": "2rem",
216
+ "inline-size": "100%",
217
+ "content": {
218
+ "padding-inline-end": "1rem",
219
+ "padding-inline-start": "1rem",
220
+ "max-inline-size": "1280px",
221
+ "list": {
222
+ "row-gap": "0.5rem"
223
+ }
224
+ }
225
+ },
226
+ "toggletip": {
227
+ "color": "#fff",
228
+ "background-color": "#007bc7",
229
+ "border-color": "transparent",
230
+ "border-radius": "5px",
231
+ "border-width": "1px",
232
+ "icon": {
233
+ "size": "24px"
234
+ },
235
+ "size": "24px",
236
+ "active": {
237
+ "color": "#007bc7",
238
+ "background-color": "#fff",
239
+ "border-color": "#007bc7"
240
+ },
241
+ "hover": {
242
+ "color": "#154273",
243
+ "background-color": "#66AFDD"
244
+ },
245
+ "focus": {
246
+ "color": "#fff",
247
+ "background-color": "#007bc7"
248
+ }
249
+ },
250
+ "sidenav": {
251
+ "display": "flex",
252
+ "link": {
253
+ "line-height": "150%",
254
+ "icon": {
255
+ "size": "24px",
256
+ "margin-inline": "0.5rem"
257
+ },
258
+ "font-size": "1.25rem",
259
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
260
+ "font-weight": 400,
261
+ "current": {
262
+ "font-weight": 700,
263
+ "color": "#154273"
264
+ },
265
+ "color": "#01689b",
266
+ "active": {
267
+ "color": "#42145f",
268
+ "text-decoration": "underline"
269
+ },
270
+ "focus": {
271
+ "border-radius": "5px",
272
+ "border-width": "2px",
273
+ "border-style": "solid",
274
+ "border-color": "#154273",
275
+ "background-color": "none",
276
+ "color": "#01689b",
277
+ "text-decoration": "None"
278
+ },
279
+ "hover": {
280
+ "color": "#15496a",
281
+ "text-decoration": "underline"
282
+ },
283
+ "padding-block-start": "0.75rem",
284
+ "padding-block-end": "0.75rem",
285
+ "text-decoration": "None",
286
+ "column-gap": "0.5rem"
287
+ }
288
+ },
289
+ "radio-group": {
290
+ "padding-block-end": "0.5rem",
291
+ "padding-block-start": "0.5rem",
292
+ "row-gap": "1rem"
293
+ },
294
+ "navigation-list": {
295
+ "icon": {
296
+ "background-color": "#154273",
297
+ "border-radius": "999px",
298
+ "color": "#fff"
299
+ },
300
+ "item": {
301
+ "icon": {
302
+ "padding-inline": "0.5rem",
303
+ "padding-block": "0.5rem",
304
+ "size": "24px"
305
+ },
306
+ "content": {
307
+ "column-gap": "0.5rem",
308
+ "row-gap": "0.25rem"
309
+ },
310
+ "label": {
311
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
312
+ "font-size": "1.875rem",
313
+ "font-weight": 700,
314
+ "line-height": "150%"
315
+ },
316
+ "active": {
317
+ "background-color": "#F1F5F9"
318
+ },
319
+ "hover": {
320
+ "background-color": "#F8FAFC"
321
+ },
322
+ "focus": {
323
+ "background-color": "#dce3ea"
324
+ },
325
+ "background-color": "#fff",
326
+ "color": "#334155",
327
+ "border-width": "1px",
328
+ "border-color": "#CBD5E1",
329
+ "heading": {
330
+ "color": "#154273"
331
+ },
332
+ "column-gap": "1rem",
333
+ "min-height": "48px",
334
+ "padding-block": "0.75rem",
335
+ "padding-inline": "1rem"
336
+ }
337
+ },
338
+ "nav-bar": {
339
+ "border-block-end-width": "1px",
340
+ "max-inline-size": "1280px",
341
+ "padding-inline": "1rem",
342
+ "container": {
343
+ "inline-size": "100%"
344
+ },
345
+ "content": {
346
+ "column-gap": "1rem"
347
+ },
348
+ "icon": {
349
+ "color": "#154273",
350
+ "active": {
351
+ "color": "#fff"
352
+ },
353
+ "size": "24px"
354
+ },
355
+ "link": {
356
+ "active": {
357
+ "background-color": "#154273",
358
+ "color": "#fff"
359
+ },
360
+ "background-color": "#fff",
361
+ "color": "#154273",
362
+ "focus": {
363
+ "background-color": "#dce3ea",
364
+ "color": "#154273"
365
+ },
366
+ "hover": {
367
+ "background-color": "#F8FAFC",
368
+ "color": "#154273"
369
+ },
370
+ "padding-block-end": "1rem",
371
+ "padding-block-start": "1rem",
372
+ "padding-inline-end": "0.75rem",
373
+ "padding-inline-start": "0.75rem",
374
+ "column-gap": "0.5rem"
375
+ },
376
+ "heading": {
377
+ "font-weight": 700
378
+ },
379
+ "background-color": "#fff",
380
+ "color": "#154273",
381
+ "border-color": "#64748B"
382
+ },
383
+ "message-list": {
384
+ "item": {
385
+ "background-color": "#fff",
386
+ "border-color": "#CBD5E1",
387
+ "border-width": "1px",
388
+ "color": "#334155",
389
+ "column-gap": "1rem",
390
+ "icon": {
391
+ "size": "24px",
392
+ "color": "#154273"
393
+ },
394
+ "min-height": "48px",
395
+ "padding-block": "0.75rem",
396
+ "padding-inline": "1rem",
397
+ "content": {
398
+ "column-gap": "0.5rem",
399
+ "row-gap": "0.5rem"
400
+ },
401
+ "label": {
402
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
403
+ "font-size": "1.25rem",
404
+ "font-weight": 700,
405
+ "line-height": "150%"
406
+ },
407
+ "heading": {
408
+ "color": "#154273"
409
+ }
410
+ }
411
+ },
412
+ "logo": {
413
+ "image": {
414
+ "background-color": "#fff",
415
+ "inline-size": "48px",
416
+ "block-size": "96px",
417
+ "color": "#154273"
418
+ },
419
+ "title": {
420
+ "font-weight": 600,
421
+ "line-height": "1.063rem",
422
+ "font-size": "0.913rem",
423
+ "padding-block-start": "3.125rem"
424
+ },
425
+ "subtitle": {
426
+ "font-weight": 400,
427
+ "line-height": "1rem",
428
+ "font-size": "0.775rem"
429
+ },
430
+ "column-gap": "12px",
431
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
432
+ "color": "#154273"
433
+ },
434
+ "link-list-card": {
435
+ "background-color": "#fff",
436
+ "padding-block-start": "1.5rem",
437
+ "padding-block-end": "1.5rem",
438
+ "row-gap": "1rem",
439
+ "padding-inline-start": "1.5rem",
440
+ "padding-inline-end": "1.5rem"
441
+ },
442
+ "link-list": {
443
+ "text-decoration": "None"
444
+ },
445
+ "icon-only-button": {
446
+ "padding-block-end": "0.75rem",
447
+ "padding-block-start": "0.75rem",
448
+ "padding-inline-end": "0.75rem",
449
+ "padding-inline-start": "0.75rem"
450
+ },
451
+ "hero": {
452
+ "heading": {
453
+ "font-weight": 700,
454
+ "line-height": "125%",
455
+ "font-size": "1.875rem",
456
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif"
457
+ },
458
+ "sub-heading": {
459
+ "font-weight": 400,
460
+ "line-height": "150%",
461
+ "font-size": "1.25rem",
462
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif"
463
+ },
464
+ "message": {
465
+ "background-color": "#154273",
466
+ "color": "#fff",
467
+ "row-gap": "0.125rem",
468
+ "padding-block-end": "1rem",
469
+ "padding-inline-end": "1rem",
470
+ "padding-inline-start": "1rem",
471
+ "padding-block-start": "1rem",
472
+ "border-radius": "20px",
473
+ "inline-size": "90%"
474
+ },
475
+ "border-radius": "40px",
476
+ "inline-size": "100%"
477
+ },
478
+ "form-field-radio-option": {
479
+ "column-gap": "0.5rem",
480
+ "font-weight": 400,
481
+ "row-gap": "0.5rem",
482
+ "label": {
483
+ "margin-block-end": 0
484
+ },
485
+ "input": {
486
+ "margin": {
487
+ "block-start": "0.25rem"
488
+ }
489
+ }
490
+ },
491
+ "form-field-checkbox-option": {
492
+ "column-gap": "0.5rem",
493
+ "margin-block-end": 0
494
+ },
495
+ "page-footer": {
496
+ "column-gap": "1.5rem",
497
+ "column-width": "200px",
498
+ "column": {
499
+ "title": {
500
+ "margin-block-end": "0.75rem"
501
+ }
502
+ },
503
+ "content": {
504
+ "max-inline-size": "1280px",
505
+ "padding-inline-start": "1rem",
506
+ "padding-inline-end": "1rem"
507
+ },
508
+ "border": {
509
+ "block-start": {
510
+ "width": "2px",
511
+ "color": "#76d2b6",
512
+ "style": "solid"
513
+ }
514
+ },
515
+ "padding": {
516
+ "block-start": "2.5rem",
517
+ "block-end": "2.5rem",
518
+ "inline-start": "2.5rem"
519
+ },
520
+ "flex": {
521
+ "direction": "row"
522
+ }
523
+ },
524
+ "file-input": {
525
+ "column-gap": "0.75rem",
526
+ "row-gap": "0.75rem",
527
+ "feedback": {
528
+ "color": "#475569",
529
+ "font-size": "1rem"
530
+ }
531
+ },
532
+ "file": {
533
+ "border-style": "solid",
534
+ "border-color": "#154273",
535
+ "border-width": "1px",
536
+ "border-radius": "5px",
537
+ "padding-inline-start": "1rem",
538
+ "padding-inline-end": "1rem",
539
+ "padding-block-start": "0.75rem",
540
+ "padding-block-end": "0.75rem",
541
+ "column-gap": "0.25rem",
542
+ "error": {
543
+ "border-color": "#d52b1e"
544
+ },
545
+ "subtitle": {
546
+ "color": "#64748B"
547
+ }
548
+ },
549
+ "dot-badge": {
550
+ "border-radius": "999px",
551
+ "color": "#d52b1e",
552
+ "size": "12px"
553
+ },
554
+ "code-input": {
555
+ "size": "48px"
556
+ },
557
+ "code-input-group": {
558
+ "column-gap": "0.5rem"
559
+ },
560
+ "checkbox-group": {
561
+ "padding-block-end": "0.5rem",
562
+ "padding-block-start": "0.5rem",
563
+ "row-gap": "1rem"
564
+ },
565
+ "card-as-link": {
566
+ "background-color": "#fff",
567
+ "border-color": "#CBD5E1",
568
+ "border-radius": "5px",
569
+ "border-width": "1px",
570
+ "color": "#154273",
571
+ "column-gap": "1rem",
572
+ "inline-size": "328px",
573
+ "icon": {
574
+ "color": "#154273",
575
+ "size": "24px"
576
+ },
577
+ "link": {
578
+ "color": "#01689b",
579
+ "text-decoration": "underline",
580
+ "active": {
581
+ "text-decoration": "none"
582
+ },
583
+ "hover": {
584
+ "text-decoration": "none"
585
+ },
586
+ "focus": {
587
+ "text-decoration": "none"
588
+ }
589
+ },
590
+ "metadata": {
591
+ "color": "#154273"
592
+ },
593
+ "padding-block-end": "1rem",
594
+ "padding-block-start": "1rem",
595
+ "padding-inline-end": "1rem",
596
+ "padding-inline-start": "1rem",
597
+ "row-gap": "0.75rem",
598
+ "active": {
599
+ "background-color": "#F1F5F9",
600
+ "text-decoration": "underline"
601
+ },
602
+ "hover": {
603
+ "background-color": "#F8FAFC",
604
+ "text-decoration": "underline"
605
+ },
606
+ "focus": {
607
+ "background-color": "#dce3ea",
608
+ "text-decoration": "underline"
609
+ },
610
+ "full-bleed": {
611
+ "background-color": "#000",
612
+ "border-color": "transparent",
613
+ "color": "#fff",
614
+ "opacity": 0.5
615
+ },
616
+ "heading": {
617
+ "padding-block-start": "0.5rem",
618
+ "font-size": "1.5rem",
619
+ "font-weight": 700
620
+ },
621
+ "horizontal": {
622
+ "background-color": "#154273",
623
+ "border-color": "transparent",
624
+ "color": "#fff",
625
+ "max-block-size": "96px",
626
+ "padding-block-end": 0,
627
+ "padding-block-start": 0,
628
+ "padding-inline-end": "1rem",
629
+ "padding-inline-start": "1rem",
630
+ "heading": {
631
+ "inline-size": "200px"
632
+ }
633
+ }
634
+ },
635
+ "accordion": {
636
+ "button": {
637
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
638
+ "font-size": "1.25rem",
639
+ "font-weight": 400,
640
+ "line-height": "150%",
641
+ "icon": {
642
+ "margin-block": "0.25rem"
643
+ },
644
+ "padding-block-end": "0.75rem",
645
+ "padding-block-start": "0.75rem",
646
+ "padding-inline-end": "1rem",
647
+ "padding-inline-start": "1rem",
648
+ "expanded": {
649
+ "background-color": "#fff",
650
+ "color": "#154273"
651
+ }
652
+ },
653
+ "section": {
654
+ "border-block-end-width": "1px",
655
+ "border-width": 0,
656
+ "border-color": "#94A3B8"
657
+ },
658
+ "header": {
659
+ "margin": 0
660
+ },
661
+ "border-radius": "0px",
662
+ "color": "#154273"
663
+ },
664
+ "keep": {
665
+ "top-left": {
666
+ "borderRadiusTopLeft": "48px",
667
+ "borderRadiusTopRight": 0,
668
+ "borderRadiusBottomRight": 0,
669
+ "borderRadiusBottomLeft": 0
670
+ },
671
+ "top-right": {
672
+ "borderRadiusTopRight": "48px",
673
+ "borderRadiusTopLeft": 0,
674
+ "borderRadiusBottomRight": 0,
675
+ "borderRadiusBottomLeft": 0
676
+ },
677
+ "bottom-right": {
678
+ "borderRadiusTopLeft": 0,
679
+ "borderRadiusTopRight": 0,
680
+ "borderRadiusBottomRight": "48px",
681
+ "borderRadiusBottomLeft": 0
682
+ },
683
+ "bottom-left": {
684
+ "borderRadiusTopLeft": 0,
685
+ "borderRadiusTopRight": 0,
686
+ "borderRadiusBottomRight": 0,
687
+ "borderRadiusBottomLeft": "48px"
688
+ }
689
+ },
690
+ "border-radius": {
691
+ "sm": "2.5px",
692
+ "md": "5px",
693
+ "keep": "48px",
694
+ "circle": "999px",
695
+ "none": "0px"
696
+ },
697
+ "focus": {
698
+ "outline-offset": "0.125rem",
699
+ "outline-style": "solid",
700
+ "outline-width": "2px"
701
+ },
702
+ "font-size": {
703
+ "heading": {
704
+ "level-1": "3.125rem",
705
+ "level-2": "2.5rem",
706
+ "level-3": "1.875rem",
707
+ "level-4": "1.5rem",
708
+ "level-5": "1.25rem"
709
+ },
710
+ "paragraph": {
711
+ "intro": "1.5rem",
712
+ "default": "1.25rem",
713
+ "small": "1.125rem"
714
+ },
715
+ "xs": {
716
+ "desktop": "1.25rem",
717
+ "tablet": "1.125rem",
718
+ "mobile": "1rem"
719
+ },
720
+ "sm": {
721
+ "desktop": "1.5rem",
722
+ "tablet": "1.35rem",
723
+ "mobile": "1.2rem"
724
+ },
725
+ "md": {
726
+ "desktop": "1.875rem",
727
+ "tablet": "1.688rem",
728
+ "mobile": "1.5rem"
729
+ },
730
+ "lg": {
731
+ "desktop": "2.5rem",
732
+ "tablet": "2.25rem",
733
+ "mobile": "2rem"
734
+ },
735
+ "xl": {
736
+ "desktop": "3.125rem",
737
+ "tablet": "2.813rem",
738
+ "mobile": "2.5rem"
739
+ }
740
+ },
741
+ "line-height": {
742
+ "paragraph": "150%",
743
+ "sm": "125%",
744
+ "md": "150%"
745
+ },
746
+ "size": {
747
+ "target": "48px",
748
+ "icon": {
749
+ "functional": "24px"
750
+ },
751
+ "quarter-lint": "12px",
752
+ "half-lint": "24px",
753
+ "lint": "48px",
754
+ "2-lint": "96px",
755
+ "3-lint": "1440px"
756
+ },
757
+ "font-weight": {
758
+ "extra-bold": 800,
759
+ "bold": 700,
760
+ "semi-bold": 550,
761
+ "regular": 400,
762
+ "chosen-regular": 400,
763
+ "light": 300,
764
+ "thin": 200
765
+ },
766
+ "font-family": {
767
+ "primary": "Fira Sans, Arial, Verdana, sans-serif",
768
+ "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
769
+ },
770
+ "border-width": {
771
+ "default": "1px",
772
+ "m": "2px",
773
+ "none": "0px"
774
+ },
775
+ "space": {
776
+ "0": 0,
777
+ "25": "0.125rem",
778
+ "50": "0.25rem",
779
+ "100": "0.5rem",
780
+ "150": "0.75rem",
781
+ "200": "1rem",
782
+ "300": "1.5rem",
783
+ "400": "2rem",
784
+ "500": "2.5rem",
785
+ "600": "3rem",
786
+ "700": "3.5rem"
787
+ }
788
+ },
789
+ "utrecht": {
790
+ "accordion": {
791
+ "button": {
792
+ "focus": {
793
+ "background-color": "#FDD370",
794
+ "border-color": "#154273",
795
+ "color": "#154273"
796
+ },
797
+ "gap": "0.5rem",
798
+ "icon": {
799
+ "size": "24px"
800
+ },
801
+ "hover": {
802
+ "background-color": "#F8FAFC",
803
+ "border-color": "#94A3B8",
804
+ "color": "#154273"
805
+ },
806
+ "background-color": "#fff",
807
+ "border-color": "#94A3B8",
808
+ "border-width": 0,
809
+ "color": "#154273",
810
+ "active": {
811
+ "background-color": "#F1F5F9",
812
+ "border-color": "#94A3B8",
813
+ "color": "#154273",
814
+ "row-gap": 0
815
+ }
816
+ },
817
+ "panel": {
818
+ "border-color": "#94A3B8",
819
+ "border-width": 0,
820
+ "padding-block-end": "1.5rem",
821
+ "padding-block-start": "1rem",
822
+ "padding-inline-end": "1rem",
823
+ "padding-inline-start": "1rem"
824
+ }
825
+ },
826
+ "button": {
827
+ "primary-action": {
828
+ "focus": {
829
+ "background-color": "#FDD370",
830
+ "border-color": "transparent",
831
+ "color": "#fff"
832
+ },
833
+ "hover": {
834
+ "background-color": "#528e7c",
835
+ "border-color": "transparent",
836
+ "color": "#fff"
837
+ },
838
+ "background-color": "#76d2b6",
839
+ "border-color": "transparent",
840
+ "color": "#fff",
841
+ "disabled": {
842
+ "background-color": "#d6f2e9",
843
+ "border-color": "#C1EBDE",
844
+ "color": "#98DDC8"
845
+ },
846
+ "font-weight": 700,
847
+ "active": {
848
+ "background-color": "#477e6d",
849
+ "border-color": "transparent",
850
+ "color": "#fff"
851
+ },
852
+ "font-size": "1.25rem",
853
+ "line-height": "1.875rem"
854
+ },
855
+ "secondary-action": {
856
+ "focus": {
857
+ "background-color": "#FDD370",
858
+ "border-color": "transparent",
859
+ "color": "#76d2b6"
860
+ },
861
+ "hover": {
862
+ "background-color": "#d6f2e9",
863
+ "border-color": "transparent",
864
+ "color": "#76d2b6"
865
+ },
866
+ "background-color": "transparent",
867
+ "border-color": "#76d2b6",
868
+ "color": "#76d2b6",
869
+ "disabled": {
870
+ "background-color": "transparent",
871
+ "border-color": "#ACE4D3",
872
+ "color": "#ACE4D3"
873
+ },
874
+ "font-weight": 700,
875
+ "active": {
876
+ "background-color": "#C1EBDE",
877
+ "border-color": "#76d2b6",
878
+ "color": "#76d2b6"
879
+ },
880
+ "font-size": "1.25rem",
881
+ "line-height": "1.875rem"
882
+ },
883
+ "subtle": {
884
+ "focus": {
885
+ "background-color": "#FDD370",
886
+ "border-color": "transparent",
887
+ "color": "#76d2b6"
888
+ },
889
+ "font-size": "1.25rem",
890
+ "font-weight": 700,
891
+ "hover": {
892
+ "background-color": "transparent",
893
+ "border-color": "transparent",
894
+ "color": "#528e7c"
895
+ },
896
+ "background-color": "transparent",
897
+ "border-color": "transparent",
898
+ "color": "#76d2b6",
899
+ "disabled": {
900
+ "background-color": "transparent",
901
+ "border-color": "transparent",
902
+ "color": "#d6f2e9"
903
+ },
904
+ "active": {
905
+ "background-color": "transparent",
906
+ "border-color": "transparent",
907
+ "color": "#477e6d"
908
+ },
909
+ "line-height": "1.875rem"
910
+ },
911
+ "background-color": "transparent",
912
+ "border-color": "#334155",
913
+ "color": "#334155",
914
+ "border-radius": "5px",
915
+ "border-width": "1px",
916
+ "icon": {
917
+ "gap": "0.5rem",
918
+ "size": "24px"
919
+ },
920
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
921
+ "font-size": "1.25rem",
922
+ "font-weight": 700,
923
+ "line-height": "150%",
924
+ "padding-block-end": "0.5rem",
925
+ "padding-block-start": "0.5rem",
926
+ "padding-inline-end": "1rem",
927
+ "padding-inline-start": "1rem",
928
+ "disabled": {
929
+ "background-color": "#F8FAFC",
930
+ "border-color": "transparent",
931
+ "color": "#64748B"
932
+ },
933
+ "focus": {
934
+ "background-color": "#FDDE94",
935
+ "border-color": "transparent",
936
+ "color": "#1E293B"
937
+ },
938
+ "hover": {
939
+ "background-color": "#F8FAFC",
940
+ "border-color": "#1E293B",
941
+ "color": "#1E293B"
942
+ },
943
+ "active": {
944
+ "background-color": "#CBD5E1",
945
+ "border-color": "#0F172A",
946
+ "color": "#0F172A"
947
+ },
948
+ "min-block-size": "48px",
949
+ "min-inline-size": "48px",
950
+ "column-gap": "0.5rem"
951
+ },
952
+ "checkbox": {
953
+ "focus": {
954
+ "background-color": "#FDD370",
955
+ "border-color": "#154273",
956
+ "border-width": "2px"
957
+ },
958
+ "checked": {
959
+ "focus": {
960
+ "background-color": "#FDD370",
961
+ "border-width": "2px",
962
+ "border-color": "#154273",
963
+ "color": "#154273"
964
+ },
965
+ "background-color": "#154273",
966
+ "border-color": "transparent",
967
+ "color": "#fff",
968
+ "border-width": "1px",
969
+ "disabled": {
970
+ "background-color": "#CBD5E1",
971
+ "border-color": "#94A3B8",
972
+ "color": "#475569"
973
+ },
974
+ "hover": {
975
+ "border-width": "1px",
976
+ "background-color": "#738eab",
977
+ "border-color": "transparent",
978
+ "color": "#fff"
979
+ },
980
+ "active": {
981
+ "border-width": "1px",
982
+ "background-color": "#4f7196",
983
+ "border-color": "transparent",
984
+ "color": "#fff"
985
+ }
986
+ },
987
+ "border-radius": "2.5px",
988
+ "size": "24px",
989
+ "icon": {
990
+ "size": "24px"
991
+ },
992
+ "background-color": "#fff",
993
+ "border-color": "#154273",
994
+ "invalid": {
995
+ "background-color": "#f9dfdd",
996
+ "border-color": "#d52b1e",
997
+ "border-width": "1px"
998
+ },
999
+ "disabled": {
1000
+ "background-color": "#CBD5E1",
1001
+ "border-color": "#94A3B8"
1002
+ },
1003
+ "indeterminate": {
1004
+ "background-color": "#154273",
1005
+ "border-color": "transparent",
1006
+ "color": "#fff",
1007
+ "border-width": "1px",
1008
+ "disabled": {
1009
+ "background-color": "#CBD5E1",
1010
+ "border-color": "#94A3B8",
1011
+ "color": "#475569"
1012
+ },
1013
+ "active": {
1014
+ "background-color": "#4f7196",
1015
+ "border-color": "transparent",
1016
+ "color": "#fff",
1017
+ "border-width": "1px"
1018
+ },
1019
+ "hover": {
1020
+ "background-color": "#738eab",
1021
+ "border-color": "transparent",
1022
+ "color": "#fff",
1023
+ "border-width": "1px"
1024
+ },
1025
+ "focus": {
1026
+ "background-color": "#fff",
1027
+ "border-color": "#154273",
1028
+ "color": "#154273",
1029
+ "border-width": "2px"
1030
+ }
1031
+ },
1032
+ "border-width": "1px",
1033
+ "hover": {
1034
+ "border-width": "1px",
1035
+ "background-color": "#fff",
1036
+ "border-color": "#738eab"
1037
+ },
1038
+ "active": {
1039
+ "border-width": "1px",
1040
+ "background-color": "#fff",
1041
+ "border-color": "#4f7196"
1042
+ }
1043
+ },
1044
+ "radio": {
1045
+ "focus": {
1046
+ "background-color": "#FDD370"
1047
+ },
1048
+ "checked": {
1049
+ "focus": {
1050
+ "background-color": "#FDD370"
1051
+ }
1052
+ }
1053
+ },
1054
+ "link": {
1055
+ "focus": {
1056
+ "background-color": "#FDD370",
1057
+ "color": "#01689b",
1058
+ "text-decoration": "None",
1059
+ "text-decoration-thickness": "auto"
1060
+ },
1061
+ "color": "#01689b",
1062
+ "text-decoration-color": "#01689b",
1063
+ "active": {
1064
+ "color": "#42145f",
1065
+ "text-decoration": "None"
1066
+ },
1067
+ "hover": {
1068
+ "color": "#01496c",
1069
+ "text-decoration": "None",
1070
+ "text-decoration-thickness": "auto"
1071
+ },
1072
+ "visited": {
1073
+ "color": "#42145f"
1074
+ },
1075
+ "text-decoration": "underline",
1076
+ "icon": {
1077
+ "inset-block-start": "0.25rem",
1078
+ "size": "24px"
1079
+ },
1080
+ "column-gap": "0.25rem",
1081
+ "text-decoration-thickness": "auto",
1082
+ "text-underline-offset": "0.125rem",
1083
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1084
+ "font-weight": 400,
1085
+ "font-size": "1.25rem",
1086
+ "line-height": "150%"
1087
+ },
1088
+ "select": {
1089
+ "focus": {
1090
+ "background-color": "#FDD370",
1091
+ "border-color": "#154273",
1092
+ "color": "#154273",
1093
+ "border-width": "2px"
1094
+ },
1095
+ "image-background-position": "right 0.5rem center",
1096
+ "icon": {
1097
+ "size": "24px"
1098
+ },
1099
+ "background-color": "#fff",
1100
+ "border-color": "#154273",
1101
+ "color": "#154273",
1102
+ "invalid": {
1103
+ "background-color": "#f9dfdd",
1104
+ "border-color": "#d52b1e",
1105
+ "color": "#154273",
1106
+ "border-width": "1px"
1107
+ },
1108
+ "disabled": {
1109
+ "background-color": "#CBD5E1",
1110
+ "border-color": "#94A3B8",
1111
+ "color": "#475569"
1112
+ },
1113
+ "hover": {
1114
+ "background-color": "#fff",
1115
+ "border-color": "#738eab",
1116
+ "color": "#154273",
1117
+ "border-width": "1px"
1118
+ },
1119
+ "padding-block-end": "0.5rem",
1120
+ "padding-block-start": "0.5rem",
1121
+ "padding-inline-end": "0.75rem",
1122
+ "padding-inline-start": "0.75rem",
1123
+ "border-radius": "2.5px",
1124
+ "border-bottom-width": "auto",
1125
+ "border-width": "1px",
1126
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1127
+ "font-weight": 400,
1128
+ "line-height": "150%",
1129
+ "font-size": "1.25rem",
1130
+ "max-inline-size": "400px"
1131
+ },
1132
+ "textarea": {
1133
+ "focus": {
1134
+ "background-color": "#FDD370",
1135
+ "border-color": "#154273",
1136
+ "color": "#154273",
1137
+ "border-width": "2px"
1138
+ },
1139
+ "max-inline-size": "400px",
1140
+ "padding-block-end": "0.5rem",
1141
+ "padding-block-start": "0.5rem",
1142
+ "padding-inline-end": "0.75rem",
1143
+ "padding-inline-start": "0.75rem",
1144
+ "background-color": "#fff",
1145
+ "border-color": "#154273",
1146
+ "color": "#154273",
1147
+ "invalid": {
1148
+ "background-color": "#f9dfdd",
1149
+ "border-color": "#d52b1e",
1150
+ "color": "#154273",
1151
+ "border-width": "1px"
1152
+ },
1153
+ "placeholder": {
1154
+ "color": "#64748B"
1155
+ },
1156
+ "disabled": {
1157
+ "background-color": "#CBD5E1",
1158
+ "border-color": "#94A3B8",
1159
+ "color": "#475569"
1160
+ },
1161
+ "read-only": {
1162
+ "background-color": "#F1F5F9",
1163
+ "border-color": "transparent",
1164
+ "color": "#154273"
1165
+ },
1166
+ "hover": {
1167
+ "background-color": "#fff",
1168
+ "border-color": "#738eab",
1169
+ "color": "#154273",
1170
+ "border-width": "1px"
1171
+ },
1172
+ "border-radius": "2.5px",
1173
+ "border-bottom-width": "1px",
1174
+ "border-width": "1px",
1175
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1176
+ "font-weight": 400,
1177
+ "line-height": "150%",
1178
+ "font-size": "1.25rem"
1179
+ },
1180
+ "textbox": {
1181
+ "focus": {
1182
+ "background-color": "#FDD370",
1183
+ "border-width": "2px",
1184
+ "border-color": "#154273",
1185
+ "color": "#154273"
1186
+ },
1187
+ "border-radius": "2.5px",
1188
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1189
+ "font-size": "1.25rem",
1190
+ "font-weight": 400,
1191
+ "line-height": "150%",
1192
+ "max-inline-size": "400px",
1193
+ "padding-block-end": "0.5rem",
1194
+ "padding-block-start": "0.5rem",
1195
+ "padding-inline-end": "0.75rem",
1196
+ "padding-inline-start": "0.75rem",
1197
+ "background-color": "#fff",
1198
+ "border-color": "#154273",
1199
+ "color": "#154273",
1200
+ "invalid": {
1201
+ "background-color": "#f9dfdd",
1202
+ "border-color": "#d52b1e",
1203
+ "color": "#154273",
1204
+ "border-width": "1px"
1205
+ },
1206
+ "placeholder": {
1207
+ "color": "#64748B"
1208
+ },
1209
+ "border-block-end-width": "auto",
1210
+ "border-width": "1px",
1211
+ "disabled": {
1212
+ "background-color": "#CBD5E1",
1213
+ "border-color": "#94A3B8",
1214
+ "color": "#475569"
1215
+ },
1216
+ "read-only": {
1217
+ "background-color": "#F1F5F9",
1218
+ "border-color": "transparent",
1219
+ "color": "#154273"
1220
+ },
1221
+ "hover": {
1222
+ "border-width": "1px",
1223
+ "background-color": "#fff",
1224
+ "border-color": "#738eab",
1225
+ "color": "#154273"
1226
+ }
1227
+ },
1228
+ "counter-badge": {
1229
+ "background-color": "#FDD370"
1230
+ },
1231
+ "skip-link": {
1232
+ "focus": {
1233
+ "background-color": "#FDD370",
1234
+ "border-color": "#154273",
1235
+ "border-style": "solid",
1236
+ "border-width": "2px",
1237
+ "color": "#154273",
1238
+ "text-decoration": "None"
1239
+ },
1240
+ "font-weight": 700,
1241
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1242
+ "font-size": "1.25rem",
1243
+ "line-height": "150%",
1244
+ "min-block-size": "48px",
1245
+ "min-inline-size": "48px",
1246
+ "padding-block-end": "0.75rem",
1247
+ "padding-block-start": "0.75rem",
1248
+ "padding-inline-end": "1rem",
1249
+ "padding-inline-start": "1rem",
1250
+ "focus-visible": {
1251
+ "outline-color": "#000"
1252
+ },
1253
+ "background-color": "#154273",
1254
+ "border-color": "transparent",
1255
+ "color": "#fff",
1256
+ "border-width": "2px",
1257
+ "box-block-end-shadow": {
1258
+ "offset-x": 0,
1259
+ "offset-y": "16px",
1260
+ "blur-radius": "48px",
1261
+ "spread-radius": 0,
1262
+ "color": "#0000001a"
1263
+ },
1264
+ "text-decoration": "underline",
1265
+ "text-underline-offset": "0.125rem"
1266
+ },
1267
+ "icon": {
1268
+ "color": "inherit",
1269
+ "size": "24px",
1270
+ "inset-block-start": 0
1271
+ },
1272
+ "unordered-list": {
1273
+ "padding-inline-start": "1.5rem",
1274
+ "margin-block-end": "0.25rem",
1275
+ "margin-block-start": "0.25rem",
1276
+ "color": "#154273",
1277
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1278
+ "font-weight": 400,
1279
+ "font-size": "1.25rem",
1280
+ "line-height": "150%",
1281
+ "item": {
1282
+ "padding-inline-start": "0.5rem",
1283
+ "margin-block-end": "0.25rem",
1284
+ "margin-block-start": "0.25rem"
1285
+ },
1286
+ "marker": {
1287
+ "color": "#154273",
1288
+ "border-color": "#154273"
1289
+ }
1290
+ },
1291
+ "table": {
1292
+ "header-cell": {
1293
+ "line-height": "150%",
1294
+ "color": "#154273",
1295
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1296
+ "font-weight": 700,
1297
+ "font-size": "1.25rem"
1298
+ },
1299
+ "caption": {
1300
+ "line-height": "125%",
1301
+ "margin-block-end": "1.5rem",
1302
+ "color": "#154273",
1303
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1304
+ "font-weight": 700,
1305
+ "font-size": "1.875rem"
1306
+ },
1307
+ "cell": {
1308
+ "padding-block-end": "0.75rem",
1309
+ "padding-block-start": "0.75rem",
1310
+ "padding-inline-end": "1rem",
1311
+ "padding-inline-start": "1rem",
1312
+ "line-height": "150%"
1313
+ },
1314
+ "data-cell": {
1315
+ "color": "#154273",
1316
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1317
+ "font-weight": 400,
1318
+ "line-height": "150%",
1319
+ "font-size": "1.25rem"
1320
+ },
1321
+ "header": {
1322
+ "border-block-end-width": "2px",
1323
+ "border-block-end-color": "#CBD5E1",
1324
+ "background-color": "transparent"
1325
+ },
1326
+ "footer": {
1327
+ "border-block-end-width": "1px",
1328
+ "border-block-end-color": "#CBD5E1",
1329
+ "background-color": "transparent"
1330
+ },
1331
+ "row": {
1332
+ "border-block-end-width": "1px",
1333
+ "border-block-end-color": "#CBD5E1",
1334
+ "background-color": "transparent"
1335
+ },
1336
+ "footer-cell": {
1337
+ "font-weight": 700,
1338
+ "font-size": "1.25rem",
1339
+ "color": "#154273",
1340
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1341
+ "line-height": "150%"
1342
+ },
1343
+ "container": {
1344
+ "box-inline-end-shadow": {
1345
+ "x": 0,
1346
+ "y": "16px",
1347
+ "blur": "48px",
1348
+ "spread": 0,
1349
+ "color": "#0000001a"
1350
+ },
1351
+ "box-inline-start-shadow": {
1352
+ "x": 0,
1353
+ "y": "16px",
1354
+ "blur": "48px",
1355
+ "spread": 0,
1356
+ "color": "#0000001a"
1357
+ }
1358
+ },
1359
+ "font-size": "1.25rem"
1360
+ },
1361
+ "separator": {
1362
+ "color": "#CBD5E1",
1363
+ "block-size": "2px",
1364
+ "margin-block-end": "0.75rem",
1365
+ "margin-block-start": "0.75rem"
1366
+ },
1367
+ "radio-button": {
1368
+ "active": {
1369
+ "border-width": "1px",
1370
+ "background-color": "#fff",
1371
+ "border-color": "#4f7196"
1372
+ },
1373
+ "size": "24px",
1374
+ "dot": {
1375
+ "size": "12px"
1376
+ },
1377
+ "background-color": "#fff",
1378
+ "border-color": "#154273",
1379
+ "invalid": {
1380
+ "background-color": "#f9dfdd",
1381
+ "border-color": "#d52b1e",
1382
+ "border-width": "1px"
1383
+ },
1384
+ "focus": {
1385
+ "background-color": "#fff",
1386
+ "border-color": "#154273",
1387
+ "border-width": "2px"
1388
+ },
1389
+ "disabled": {
1390
+ "background-color": "#CBD5E1",
1391
+ "border-color": "#94A3B8",
1392
+ "color": "#475569"
1393
+ },
1394
+ "checked": {
1395
+ "background-color": "#154273",
1396
+ "border-color": "transparent",
1397
+ "color": "#fff",
1398
+ "hover": {
1399
+ "background-color": "#738eab",
1400
+ "border-color": "transparent",
1401
+ "color": "#fff",
1402
+ "border-width": "1px"
1403
+ },
1404
+ "active": {
1405
+ "background-color": "#4f7196",
1406
+ "border-color": "transparent",
1407
+ "color": "#fff",
1408
+ "border-width": "1px"
1409
+ },
1410
+ "focus": {
1411
+ "background-color": "#fff",
1412
+ "border-color": "#154273",
1413
+ "color": "#154273",
1414
+ "border-width": "2px"
1415
+ },
1416
+ "disabled": {
1417
+ "background-color": "#CBD5E1",
1418
+ "border-color": "#94A3B8",
1419
+ "color": "#475569"
1420
+ },
1421
+ "border-width": "1px"
1422
+ },
1423
+ "hover": {
1424
+ "background-color": "#fff",
1425
+ "border-color": "#738eab",
1426
+ "border-width": "1px"
1427
+ },
1428
+ "border-radius": "999px",
1429
+ "border-width": "1px"
1430
+ },
1431
+ "paragraph": {
1432
+ "color": "#154273",
1433
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1434
+ "font-size": "1.25rem",
1435
+ "font-weight": 400,
1436
+ "line-height": "150%",
1437
+ "margin-block-end": 0,
1438
+ "margin-block-start": 0,
1439
+ "lead": {
1440
+ "color": "#154273",
1441
+ "font-size": "1.5rem",
1442
+ "font-weight": 400,
1443
+ "line-height": "150%"
1444
+ },
1445
+ "small": {
1446
+ "color": "#154273",
1447
+ "font-size": "1.125rem",
1448
+ "font-weight": 400,
1449
+ "line-height": "150%"
1450
+ }
1451
+ },
1452
+ "ordered-list": {
1453
+ "padding-inline-start": "1.5rem",
1454
+ "margin-block-end": "0.25rem",
1455
+ "margin-block-start": "0.25rem",
1456
+ "margin-inline-start": "0.625rem",
1457
+ "item": {
1458
+ "padding-inline-start": 0,
1459
+ "margin-block-end": "0.25rem",
1460
+ "margin-block-start": "0.25rem"
1461
+ },
1462
+ "color": "#154273",
1463
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1464
+ "font-weight": 400,
1465
+ "font-size": "1.25rem",
1466
+ "line-height": "150%"
1467
+ },
1468
+ "link-list": {
1469
+ "margin-block-start": 0,
1470
+ "row-gap": "0.5rem",
1471
+ "margin-block-end": 0,
1472
+ "item": {
1473
+ "column-gap": "0.5rem",
1474
+ "text-decoration": "None"
1475
+ },
1476
+ "icon": {
1477
+ "size": "24px",
1478
+ "inset-block-start": "0.188rem"
1479
+ }
1480
+ },
1481
+ "heading-1": {
1482
+ "color": "#154273",
1483
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1484
+ "font-weight": 700,
1485
+ "line-height": "125%",
1486
+ "font-size": "3.125rem",
1487
+ "margin-block-end": 0,
1488
+ "margin-block-start": 0
1489
+ },
1490
+ "heading-2": {
1491
+ "color": "#154273",
1492
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1493
+ "font-weight": 700,
1494
+ "line-height": "125%",
1495
+ "font-size": "2.5rem",
1496
+ "margin-block-end": 0,
1497
+ "margin-block-start": 0
1498
+ },
1499
+ "heading-3": {
1500
+ "color": "#154273",
1501
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1502
+ "font-weight": 700,
1503
+ "line-height": "125%",
1504
+ "font-size": "1.875rem",
1505
+ "margin-block-end": 0,
1506
+ "margin-block-start": 0
1507
+ },
1508
+ "heading-4": {
1509
+ "color": "#154273",
1510
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1511
+ "font-weight": 700,
1512
+ "line-height": "125%",
1513
+ "font-size": "1.5rem",
1514
+ "margin-block-end": 0,
1515
+ "margin-block-start": 0
1516
+ },
1517
+ "heading-5": {
1518
+ "color": "#154273",
1519
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1520
+ "font-weight": 700,
1521
+ "line-height": "125%",
1522
+ "font-size": "1.25rem",
1523
+ "margin-block-end": 0,
1524
+ "margin-block-start": 0
1525
+ },
1526
+ "form-label": {
1527
+ "color": "#154273",
1528
+ "font-size": "1.25rem",
1529
+ "font-weight": 700
1530
+ },
1531
+ "form-field-label": {
1532
+ "color": "#154273",
1533
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1534
+ "font-size": "1.25rem",
1535
+ "font-weight": 700,
1536
+ "line-height": "150%"
1537
+ },
1538
+ "form-field-error-message": {
1539
+ "icon": {
1540
+ "size": "24px",
1541
+ "margin-inline-end": "0.5rem"
1542
+ },
1543
+ "color": "#d52b1e",
1544
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1545
+ "font-size": "1.25rem",
1546
+ "font-weight": 400,
1547
+ "margin-block-end": "0.5rem",
1548
+ "padding-block-end": "0.5rem"
1549
+ },
1550
+ "form-field-description": {
1551
+ "color": "#334155",
1552
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1553
+ "font-size": "1.25rem",
1554
+ "line-height": "150%",
1555
+ "margin-block-start": "-0.5rem",
1556
+ "margin-block-end": "0.5rem",
1557
+ "padding-block-end": "0.5rem"
1558
+ },
1559
+ "form-field": {
1560
+ "margin-block-start": "0.5rem",
1561
+ "margin-block-end": "0.5rem",
1562
+ "invalid": {
1563
+ "border-inline-start-color": "#d52b1e",
1564
+ "border-inline-start-width": "0px",
1565
+ "padding-inline-start": 0
1566
+ },
1567
+ "label": {
1568
+ "margin-block-end": "0.5rem"
1569
+ },
1570
+ "error-message": {
1571
+ "line-height": "normal"
1572
+ }
1573
+ },
1574
+ "page-footer": {
1575
+ "background-color": "#154273",
1576
+ "color": "#fff",
1577
+ "padding-block-start": "3rem",
1578
+ "padding-block-end": "3rem",
1579
+ "padding-inline-start": "80px",
1580
+ "padding-inline-end": "80px"
1581
+ },
1582
+ "figure": {
1583
+ "caption": {
1584
+ "border-color": "#CBD5E1",
1585
+ "border-width": "4px",
1586
+ "color": "#76d2b6",
1587
+ "padding-block-end": "0.5rem",
1588
+ "padding-block-start": "0.5rem",
1589
+ "padding-inline-start": "1rem",
1590
+ "line-height": "150%",
1591
+ "font-size": "1.25rem"
1592
+ },
1593
+ "img": {
1594
+ "border-end-end-radius": 0,
1595
+ "border-end-start-radius": 0,
1596
+ "border-start-end-radius": 0,
1597
+ "border-start-start-radius": 0
1598
+ }
1599
+ },
1600
+ "form-fieldset": {
1601
+ "legend": {
1602
+ "color": "#154273",
1603
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1604
+ "font-size": "1.25rem",
1605
+ "font-weight": 700,
1606
+ "line-height": "150%",
1607
+ "disabled": {
1608
+ "color": "#334155"
1609
+ }
1610
+ },
1611
+ "section": {
1612
+ "background-color": "transparent",
1613
+ "color": "#154273"
1614
+ },
1615
+ "invalid": {
1616
+ "border-inline-start": {
1617
+ "color": "#d52b1e"
1618
+ },
1619
+ "padding-inline-start": 0,
1620
+ "border-inline-start-width": "0px"
1621
+ }
1622
+ },
1623
+ "badge-counter": {
1624
+ "font-size": "1.25rem",
1625
+ "line-height": "150%",
1626
+ "min-block-size": "24px",
1627
+ "min-inline-size": "24px",
1628
+ "font-weight": 700,
1629
+ "border-width": "0px",
1630
+ "border-radius": "999px",
1631
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1632
+ "background-color": "#154273",
1633
+ "border-color": "transparent",
1634
+ "color": "#fff",
1635
+ "padding-inline": "0.5rem",
1636
+ "padding-block": "0.5rem"
1637
+ },
1638
+ "button-group": {
1639
+ "background-color": "transparent",
1640
+ "column-gap": "0.5rem",
1641
+ "margin-block-end": "0px",
1642
+ "margin-block-start": "0px",
1643
+ "padding-block-end": "0px",
1644
+ "padding-block-start": "0px",
1645
+ "row-gap": "0.5rem"
1646
+ },
1647
+ "breadcrumb-nav": {
1648
+ "line-height": 1.4,
1649
+ "font-size": "1.25rem",
1650
+ "link": {
1651
+ "icon": {
1652
+ "size": "24px",
1653
+ "margin-inline": "0.25rem",
1654
+ "inset-block-start": 0
1655
+ },
1656
+ "padding-block-end": "0.75rem",
1657
+ "padding-block-start": "0.75rem",
1658
+ "padding-inline-end": 0,
1659
+ "padding-inline-start": 0,
1660
+ "color": "#01689b",
1661
+ "active": {
1662
+ "color": "#42145f",
1663
+ "text-decoration": "None"
1664
+ },
1665
+ "focus": {
1666
+ "background-color": "transparent",
1667
+ "color": "#01689b",
1668
+ "text-decoration": "None"
1669
+ },
1670
+ "hover": {
1671
+ "color": "#01496c",
1672
+ "text-decoration": "None"
1673
+ },
1674
+ "current": {
1675
+ "color": "#334155"
1676
+ },
1677
+ "text-decoration": "underline"
1678
+ },
1679
+ "divider": {
1680
+ "size": "24px",
1681
+ "color": "#334155",
1682
+ "inset-block-start": 0
1683
+ },
1684
+ "margin-inline": "0.5rem",
1685
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1686
+ "font-weight": 400
1687
+ },
1688
+ "blockquote": {
1689
+ "attribution": {
1690
+ "font-size": "1.25rem",
1691
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1692
+ "line-height": 1.25,
1693
+ "font-weight": 400,
1694
+ "padding-block-start": "0.75rem",
1695
+ "color": "#334155"
1696
+ },
1697
+ "content": {
1698
+ "font-family": "RijksoverheidSerifWeb, 'Times New Roman', serif",
1699
+ "line-height": "150%",
1700
+ "font-weight": 400,
1701
+ "font-size": "1.5rem",
1702
+ "color": "#154273"
1703
+ },
1704
+ "padding-block-end": "2rem",
1705
+ "padding-block-start": "2rem",
1706
+ "padding-inline-end": "2rem",
1707
+ "padding-inline-start": "2rem",
1708
+ "row-gap": "0.75rem",
1709
+ "background-color": "transparent",
1710
+ "border-color": "#76d2b6",
1711
+ "border-block-start-width": 0,
1712
+ "border-block-end-width": 0,
1713
+ "border-inline-start-width": 0,
1714
+ "border-inline-end-width": 0,
1715
+ "border-start-start-radius": 0,
1716
+ "border-start-end-radius": 0,
1717
+ "border-end-start-radius": 0,
1718
+ "border-end-end-radius": 0,
1719
+ "border-width": "2px",
1720
+ "blue-corner-border-variation": {
1721
+ "border-color": "#76d2b6",
1722
+ "border-block-end-width": "2px",
1723
+ "border-inline-end-width": "2px",
1724
+ "border-end-end-radius": "3rem"
1725
+ },
1726
+ "pink-background-variation": {
1727
+ "background-color": "#F6BDE1",
1728
+ "border-end-start-radius": "3rem",
1729
+ "padding": "2.5rem"
1730
+ },
1731
+ "pink-left-border-variation": {
1732
+ "border-color": "#F6BDE1",
1733
+ "border-inline-start-width": "0.75rem",
1734
+ "padding-inline-start": "2.5rem",
1735
+ "padding-inline-end": "2.5rem",
1736
+ "padding-block-start": "1.5rem",
1737
+ "padding-block-end": "1.5rem"
1738
+ },
1739
+ "pink-corner-border-variation": {
1740
+ "border-color": "#F6BDE1",
1741
+ "border-block-start-width": "0.25rem",
1742
+ "border-inline-start-width": "0.25rem",
1743
+ "border-start-start-radius": "3rem",
1744
+ "padding": "2.5rem"
1745
+ }
1746
+ },
1747
+ "article": {
1748
+ "max-inline-size": "75ch"
1749
+ },
1750
+ "alert": {
1751
+ "heading": {
1752
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1753
+ "font-weight": 700,
1754
+ "line-height": "150%",
1755
+ "font-size": "1.25rem"
1756
+ },
1757
+ "column-gap": "0.5rem",
1758
+ "border-width": "0px",
1759
+ "margin-block-end": "0.75rem",
1760
+ "margin-block-start": "0.75rem",
1761
+ "padding-block-end": "1rem",
1762
+ "padding-block-start": "1rem",
1763
+ "padding-inline-end": "1rem",
1764
+ "padding-inline-start": "1rem",
1765
+ "background-color": "#d9ebf7",
1766
+ "border-color": "transparent",
1767
+ "color": "#154273",
1768
+ "info": {
1769
+ "background-color": "#d9ebf7",
1770
+ "border-color": "transparent",
1771
+ "color": "#154273"
1772
+ },
1773
+ "error": {
1774
+ "background-color": "#f9dfdd",
1775
+ "border-color": "transparent",
1776
+ "color": "#154273"
1777
+ },
1778
+ "ok": {
1779
+ "background-color": "#e1eddb",
1780
+ "border-color": "transparent",
1781
+ "color": "#154273"
1782
+ },
1783
+ "warning": {
1784
+ "background-color": "#fff4db",
1785
+ "border-color": "transparent",
1786
+ "color": "#154273"
1787
+ },
1788
+ "icon": {
1789
+ "inset-block-start": "3px",
1790
+ "info": {
1791
+ "color": "#007bc7"
1792
+ },
1793
+ "error": {
1794
+ "color": "#d52b1e"
1795
+ },
1796
+ "ok": {
1797
+ "color": "#39870c"
1798
+ },
1799
+ "warning": {
1800
+ "color": "#ffb612"
1801
+ },
1802
+ "size": "24px"
1803
+ },
1804
+ "message": {
1805
+ "line-height": "150%",
1806
+ "column-gap": "0.5rem"
1807
+ },
1808
+ "border-radius": "5px"
1809
+ },
1810
+ "document": {
1811
+ "background-color": "#fff",
1812
+ "color": "#000",
1813
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1814
+ "font-size": "1.25rem",
1815
+ "line-height": "150%",
1816
+ "font-weight": 400
1817
+ },
1818
+ "rich-text": {
1819
+ "stranger": {
1820
+ "margin-block-end": "2rem"
1821
+ },
1822
+ "acquaintance": {
1823
+ "margin-block-end": "1rem"
1824
+ },
1825
+ "friend": {
1826
+ "margin-block-end": "0.5rem"
1827
+ },
1828
+ "best-friend": {
1829
+ "margin-block-end": "0.25rem"
1830
+ },
1831
+ "confidant": {
1832
+ "margin-block-end": 0
1833
+ }
1834
+ },
1835
+ "pointer-target": {
1836
+ "min-size": "48px"
1837
+ },
1838
+ "focus": {
1839
+ "outline-color": "#76d2b6",
1840
+ "outline-offset": "0.125rem",
1841
+ "outline-style": "solid",
1842
+ "outline-width": "2px",
1843
+ "inverse": {
1844
+ "outline-color": "transparant"
1845
+ }
1846
+ }
1847
+ },
1848
+ "overwrite": {
1849
+ "focus": {
1850
+ "background": "#FDD370"
1851
+ }
1852
+ },
1853
+ "todo": {
1854
+ "nav-bar": {
1855
+ "link": {
1856
+ "focus": {
1857
+ "background-color": "#FDD370"
1858
+ }
1859
+ }
1860
+ },
1861
+ "pagination": {
1862
+ "page-link": {
1863
+ "focus": {
1864
+ "background-color": "#FDD370"
1865
+ }
1866
+ }
1867
+ }
1868
+ },
1869
+ "denhaag": {
1870
+ "sidenav": {
1871
+ "link": {
1872
+ "focus": {
1873
+ "background-color": "#FDD370"
1874
+ }
1875
+ }
1876
+ }
1877
+ }
1878
+ }