@rijkshuisstijl-community/design-tokens 1.0.0-alpha.9 → 1.0.0-alpha.91

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