@rijkshuisstijl-community/design-tokens 1.0.0-alpha.8 → 1.0.0-alpha.81

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 (45) hide show
  1. package/LICENSE.md +7 -282
  2. package/README.md +21 -3
  3. package/dist/_variables.scss +1171 -295
  4. package/dist/index.css +1171 -295
  5. package/dist/index.d.ts +1145 -270
  6. package/dist/index.js +1171 -295
  7. package/dist/index.json +1170 -294
  8. package/dist/index.tokens.json +1748 -597
  9. package/dist/root.css +1171 -295
  10. package/dist/tokens.d.ts +1657 -505
  11. package/dist/tokens.js +25788 -4614
  12. package/dist/variables.less +1171 -295
  13. package/figma/figma.tokens.json +6943 -0
  14. package/package.json +15 -12
  15. package/src/common/utrecht/focus.tokens.json +2 -2
  16. package/src/generated/figma.tokens.json +5508 -0
  17. package/token-transformer.mjs +49 -0
  18. package/src/brand/rhc/color.tokens.json +0 -103
  19. package/src/brand/rhc/font.tokens.json +0 -34
  20. package/src/components/basiselementen/document.tokens.json +0 -15
  21. package/src/components/rvo/button.tokens.json +0 -33
  22. package/src/components/rvo/checkbox.tokens.json +0 -32
  23. package/src/components/rvo/custom-radio-button.tokens.json +0 -24
  24. package/src/components/rvo/heading.tokens.json +0 -24
  25. package/src/components/rvo/logo.tokens.json +0 -13
  26. package/src/components/rvo/select.tokens.json +0 -15
  27. package/src/components/utrecht/breadcrumbs.tokens.json +0 -66
  28. package/src/components/utrecht/button.tokens.json +0 -120
  29. package/src/components/utrecht/custom-radio-button.tokens.json +0 -53
  30. package/src/components/utrecht/data-list.tokens.json +0 -91
  31. package/src/components/utrecht/document.tokens.json +0 -12
  32. package/src/components/utrecht/form-field.tokens.json +0 -21
  33. package/src/components/utrecht/form-fieldset.tokens.json +0 -27
  34. package/src/components/utrecht/form-input.tokens.json +0 -42
  35. package/src/components/utrecht/form-label.tokens.json +0 -23
  36. package/src/components/utrecht/heading-1.tokens.json +0 -13
  37. package/src/components/utrecht/heading-2.tokens.json +0 -13
  38. package/src/components/utrecht/heading-3.tokens.json +0 -13
  39. package/src/components/utrecht/heading-4.tokens.json +0 -13
  40. package/src/components/utrecht/heading-5.tokens.json +0 -13
  41. package/src/components/utrecht/heading-6.tokens.json +0 -13
  42. package/src/components/utrecht/link.tokens.json +0 -44
  43. package/src/components/utrecht/ordered-list.tokens.json +0 -19
  44. package/src/components/utrecht/paragraph.tokens.json +0 -23
  45. package/src/components/utrecht/unordered-list.tokens.json +0 -31
@@ -1,69 +1,4 @@
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"
49
- }
50
- },
51
- "font-weight": {
52
- "normal": "400",
53
- "bold": "700"
54
- },
55
- "root": {
56
- "font-size": "100%"
57
- },
58
- "document": {
59
- "background-color": "#ffffff",
60
- "color": "#000000",
61
- "font-family": "'RijksoverheidSansWebText'",
62
- "font-size": "18px",
63
- "font-weight": {},
64
- "line-height": "150%"
65
- }
66
- },
67
2
  "utrecht": {
68
3
  "action": {
69
4
  "activate": {
@@ -81,608 +16,1824 @@
81
16
  },
82
17
  "focus": {
83
18
  "background-color": {},
84
- "outline-color": "#000000",
85
- "outline-offset": "3px",
86
- "outline-style": "dashed",
19
+ "outline-color": "#000",
20
+ "outline-offset": "0.125rem",
21
+ "outline-style": "solid",
87
22
  "outline-width": "2px",
88
23
  "inverse": {
89
- "outline-color": "#ffffff"
24
+ "outline-color": "transparant"
90
25
  }
91
26
  },
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"
162
- },
163
- "disabled": {
164
- "border-color": "#e6e6e6",
165
- "background-color": "#e6e6e6",
166
- "color": "#cccccc"
167
- },
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
- "color": "#01689b",
192
- "active": {
193
- "background-color": "#01496D",
194
- "border-color": "#01496D",
195
- "color": "#ffffff"
196
- },
197
- "focus": {
198
- "color": "#01689b",
199
- "border-color": {},
200
- "border-width": {}
201
- },
202
- "disabled": {
203
- "background-color": "#ffffff",
204
- "border-color": "#cccccc",
205
- "color": "#cccccc"
206
- },
207
- "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": {
219
- "text-decoration": "underline"
220
- },
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
- }
232
- }
27
+ "icon": {
28
+ "color": "inherit",
29
+ "size": "24px",
30
+ "inset-block-start": 0
233
31
  },
234
- "breadcrumb": {
235
- "block-size": {},
236
- "font-family": {},
237
- "font-size": "0.875rem",
238
- "text-transform": {},
239
- "divider": {
240
- "inline-size": {}
241
- },
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%",
242
41
  "item": {
243
- "gap": "8px",
244
- "padding-block-start": "0",
245
- "padding-block-end": "0",
246
- "padding-inline-end": "0",
247
- "padding-inline-start": "0"
42
+ "padding-inline-start": "0.5rem",
43
+ "margin-block-end": "0.25rem",
44
+ "margin-block-start": "0.25rem"
248
45
  },
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"
257
- },
258
- "hover": {
259
- "color": "#01689b",
260
- "text-decoration": "underline",
261
- "text-decoration-thickness": "1px !important"
262
- },
263
- "text-decoration": "none"
46
+ "marker": {
47
+ "color": "#154273",
48
+ "border-color": "#154273"
264
49
  }
265
50
  },
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"
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"
276
70
  },
277
- "active": {
278
- "border-color": {},
279
- "border-width": {},
280
- "background-color": "#007bc7",
281
- "color": {}
71
+ "placeholder": {
72
+ "color": "#64748B"
282
73
  },
74
+ "border-block-end-width": "auto",
75
+ "border-width": "1px",
283
76
  "focus": {
284
- "border-color": {},
285
- "border-width": {},
286
- "background-color": {}
77
+ "border-width": "2px",
78
+ "background-color": "#fff",
79
+ "border-color": "#154273",
80
+ "color": "#154273"
287
81
  },
288
82
  "disabled": {
289
- "border-color": "#cccccc",
290
- "border-width": {},
291
- "background-color": "#ffffff",
292
- "color": {}
83
+ "background-color": "#CBD5E1",
84
+ "border-color": "#94A3B8",
85
+ "color": "#475569"
293
86
  },
294
- "checked": {
295
- "border-color": "#007bc7",
296
- "border-width": "3px",
297
- "background-color": "#007bc7",
298
- "color": "#007bc7",
299
- "active": {
300
- "border-color": {},
301
- "background-color": "#007bc7"
302
- }
87
+ "read-only": {
88
+ "background-color": "#F1F5F9",
89
+ "border-color": "transparent",
90
+ "color": "#154273"
303
91
  },
304
- "invalid": {
305
- "border-color": "#cccccc",
306
- "border-width": {},
307
- "background-color": {},
308
- "color": {},
309
- "active": {
310
- "border-color": {},
311
- "background-color": {}
312
- }
313
- }
314
- },
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": {}
92
+ "hover": {
93
+ "border-width": "1px",
94
+ "background-color": "#fff",
95
+ "border-color": "#738eab",
96
+ "color": "#154273"
356
97
  }
357
98
  },
358
- "document": {
359
- "background-color": "#ffffff",
360
- "color": "#000000",
361
- "font-family": "'RijksoverheidSansWebText'",
362
- "font-size": "18px",
363
- "font-weight": {},
364
- "line-height": "150%"
365
- },
366
- "form-field": {
367
- "description": {
368
- "margin-block-start": "0",
369
- "margin-block-end": "1ex"
370
- },
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",
371
108
  "invalid": {
372
- "border-inline-start-color": {},
373
- "border-inline-start-width": {},
374
- "padding-inline-start": {}
375
- },
376
- "label": {
377
- "margin-block-end": {}
378
- },
379
- "margin-block-end": "1ex",
380
- "margin-block-start": "1ex",
381
- "min-width": "100%"
382
- },
383
- "form-fieldset": {
384
- "margin-block-end": "1ex",
385
- "margin-block-start": "1ex",
386
- "section": {
387
- "background-color": "#ffffff",
388
- "color": {}
109
+ "background-color": "#f9dfdd",
110
+ "border-color": "#d52b1e",
111
+ "color": "#154273",
112
+ "border-width": "1px"
389
113
  },
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": {}
403
- }
404
- },
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
114
  "placeholder": {
420
- "color": {}
115
+ "color": "#64748B"
116
+ },
117
+ "focus": {
118
+ "background-color": "#fff",
119
+ "border-color": "#154273",
120
+ "color": "#154273",
121
+ "border-width": "2px"
421
122
  },
422
123
  "disabled": {
423
- "background-color": "#cccccc !important",
424
- "border-color": "#535353",
425
- "border-width": "0",
426
- "color": "#535353"
124
+ "background-color": "#CBD5E1",
125
+ "border-color": "#94A3B8",
126
+ "color": "#475569"
427
127
  },
428
- "focus": {
429
- "background-color": "#ffffff",
430
- "border-color": "#696969",
431
- "border-width": {}
128
+ "read-only": {
129
+ "background-color": "#F1F5F9",
130
+ "border-color": "transparent",
131
+ "color": "#154273"
432
132
  },
433
- "invalid": {
434
- "background-color": "#ffffff",
435
- "border-color": "#d51b1e",
133
+ "hover": {
134
+ "background-color": "#fff",
135
+ "border-color": "#738eab",
136
+ "color": "#154273",
436
137
  "border-width": "1px"
437
138
  },
438
- "read-only": {
439
- "border-color": "#535353",
440
- "color": "#535353"
441
- }
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"
442
146
  },
443
- "form-label": {
444
- "color": {},
445
- "font-weight": "700",
446
- "font-size": "18px",
447
- "checkbox": {
448
- "color": {},
449
- "font-weight": {}
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"
450
154
  },
451
- "checked": {
452
- "font-weight": {}
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"
453
162
  },
454
- "disabled": {
455
- "color": {}
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"
456
175
  },
457
- "radio": {
458
- "color": {},
459
- "font-weight": {}
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
+ }
460
213
  }
461
214
  },
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"
470
- },
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": {}
479
- },
480
- "heading-3": {
481
- "color": {},
482
- "font-family": {},
215
+ "skip-link": {
216
+ "font-weight": 700,
217
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
483
218
  "font-size": "1.25rem",
484
- "font-weight": "700",
485
- "line-height": "125%",
486
- "margin-block-end": "4px",
487
- "margin-block-start": {}
488
- },
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": {}
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"
497
250
  },
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": {}
251
+ "separator": {
252
+ "color": "#CBD5E1",
253
+ "block-size": "2px",
254
+ "margin-block-end": "0.75rem",
255
+ "margin-block-start": "0.75rem"
515
256
  },
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",
257
+ "select": {
258
+ "image-background-position": "right 0.5rem center",
523
259
  "icon": {
524
- "background-color": {}
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"
525
281
  },
526
282
  "hover": {
527
- "background-color": {},
528
- "color": "#01689b",
529
- "text-decoration-thickness": "1px",
530
- "font-weight": "700",
531
- "icon": {
532
- "background-color": {}
533
- },
534
- "text-decoration": "none"
283
+ "background-color": "#fff",
284
+ "border-color": "#738eab",
285
+ "color": "#154273",
286
+ "border-width": "1px"
535
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": {
536
302
  "active": {
537
- "background-color": {},
538
- "color": "#01689b",
539
- "font-weight": "700",
540
- "icon": {
541
- "background-color": {}
542
- },
543
- "text-decoration-thickness": "1px"
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"
544
317
  },
545
318
  "focus": {
546
- "background-color": {},
547
- "color": {},
548
- "font-weight": {},
549
- "icon": {
550
- "background-color": {}
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"
551
337
  },
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"
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"
563
356
  },
564
- "marker": {
565
- "color": {}
357
+ "hover": {
358
+ "background-color": "#fff",
359
+ "border-color": "#738eab",
360
+ "border-width": "1px"
566
361
  },
567
- "padding-inline-start": "0"
362
+ "border-radius": "999px",
363
+ "border-width": "1px"
568
364
  },
569
365
  "paragraph": {
570
- "color": {},
571
- "font-family": {},
572
- "font-size": "18px",
573
- "font-weight": {},
366
+ "color": "#154273",
367
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
368
+ "font-size": "1.25rem",
369
+ "font-weight": 400,
574
370
  "line-height": "150%",
575
- "margin-block-start": {},
576
- "margin-block-end": "16px",
371
+ "margin-block-end": 0,
372
+ "margin-block-start": 0,
577
373
  "lead": {
578
- "color": {},
579
- "font-size": "20px",
580
- "font-weight": {},
374
+ "color": "#154273",
375
+ "font-size": "1.5rem",
376
+ "font-weight": 400,
581
377
  "line-height": "150%"
582
378
  },
583
379
  "small": {
584
- "font-size": "16px",
380
+ "color": "#154273",
381
+ "font-size": "1.25rem",
382
+ "font-weight": 400,
585
383
  "line-height": "150%"
586
384
  }
587
385
  },
588
- "unordered-list": {
589
- "margin-block-start": "0",
590
- "margin-block-end": "16px",
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",
591
391
  "item": {
592
- "margin-block-start": "0.5ex",
593
- "margin-block-end": "0.5ex",
594
- "padding-inline-start": "0",
595
- "marker": "initial"
392
+ "padding-inline-start": 0,
393
+ "margin-block-end": "0.25rem",
394
+ "margin-block-start": "0.25rem"
596
395
  },
597
- "marker": {
598
- "color": {}
396
+ "color": "#154273",
397
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
398
+ "font-weight": 400,
399
+ "font-size": "1.25rem",
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"
599
409
  },
600
- "padding-inline-start": "20px",
601
- "list-style-type": "square"
602
- }
603
- },
604
- "rvo": {
605
- "checkbox": {
606
- "size": "24px",
607
410
  "icon": {
608
- "size": "16px",
609
- "color": "#ffffff"
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"
610
421
  },
611
- "background-color": "#ffffff",
612
- "border-width": "1px",
613
- "border-color": "#000000",
614
422
  "focus": {
615
- "border-color": {},
616
- "border-width": {},
617
- "background-color": {}
618
- },
619
- "checked": {
620
- "background-color": "#007bc7"
423
+ "background-color": "transparent",
424
+ "color": "#01689b",
425
+ "text-decoration": "None",
426
+ "text-decoration-thickness": "auto"
621
427
  },
622
428
  "hover": {
623
- "background-color": "#01689b",
624
- "border-color": "#007bc7"
429
+ "color": "#01496c",
430
+ "text-decoration": "None",
431
+ "text-decoration-thickness": "auto"
625
432
  },
626
- "disabled": {
627
- "border-color": "#cccccc",
628
- "border-width": {},
629
- "background-color": "#ffffff",
630
- "color": "#cccccc"
631
- }
632
- },
633
- "custom-radio-button": {
634
- "label": {
635
- "disabled": {
636
- "color": "#cccccc"
637
- }
433
+ "visited": {
434
+ "color": "#42145f"
638
435
  },
639
- "hover": {
640
- "border-color": "#007bc7"
436
+ "text-decoration": "underline",
437
+ "icon": {
438
+ "inset-block-start": "0.25rem",
439
+ "size": "24px"
641
440
  },
642
- "checked": {
643
- "border-color": "#007bc7",
644
- "background": "radial-gradient(circle, #ffffff 30%, #007bc7 30%)"
645
- }
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%"
646
448
  },
647
- "heading": {
648
- "1": {
649
- "line-height": "125%"
650
- },
651
- "2": {
652
- "line-height": {}
653
- },
654
- "3": {
655
- "line-height": {}
656
- },
657
- "4": {
658
- "line-height": {}
659
- },
660
- "5": {
661
- "line-height": {}
662
- },
663
- "6": {
664
- "line-height": {}
665
- }
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
666
457
  },
667
- "logo": {
668
- "font-family": "'RijksoverheidSerifWeb'",
669
- "font-size": "16px",
670
- "color": "#000000",
671
- "emblem": {
672
- "background-color": "#154273",
673
- "color": "#ffffff"
674
- }
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
675
466
  },
676
- "select": {
677
- "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"
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"
1054
+ }
1055
+ },
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"
1065
+ },
1066
+ "size": "24px",
1067
+ "active": {
1068
+ "color": "#007bc7",
1069
+ "background-color": "#fff",
1070
+ "border-color": "#007bc7"
1071
+ },
1072
+ "hover": {
1073
+ "color": "#154273",
1074
+ "background-color": "#66AFDD"
1075
+ },
1076
+ "focus": {
1077
+ "color": "#fff",
1078
+ "background-color": "#007bc7"
1079
+ }
1080
+ },
1081
+ "sidenav": {
1082
+ "display": "flex",
1083
+ "link": {
1084
+ "line-height": "150%",
1085
+ "icon": {
1086
+ "size": "24px",
1087
+ "margin-inline": "0.5rem"
1088
+ },
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"
1095
+ },
1096
+ "color": "#01689b",
1097
+ "active": {
1098
+ "color": "#42145f",
1099
+ "text-decoration": "underline"
1100
+ },
1101
+ "focus": {
1102
+ "border-radius": "5px",
1103
+ "border-width": "2px",
1104
+ "border-style": "solid",
1105
+ "border-color": "#154273",
1106
+ "background-color": "none",
1107
+ "color": "#01689b",
1108
+ "text-decoration": "None"
1109
+ },
1110
+ "hover": {
1111
+ "color": "#15496a",
1112
+ "text-decoration": "underline"
1113
+ },
1114
+ "padding-block-start": "0.75rem",
1115
+ "padding-block-end": "0.75rem",
1116
+ "text-decoration": "None",
1117
+ "column-gap": "0.5rem"
1118
+ }
1119
+ },
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"
1130
+ },
1131
+ "item": {
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"
1149
+ },
1150
+ "hover": {
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"
1162
+ },
1163
+ "column-gap": "1rem",
1164
+ "min-height": "48px",
1165
+ "padding-block": "0.75rem",
1166
+ "padding-inline": "1rem"
1167
+ }
1168
+ },
1169
+ "nav-bar": {
1170
+ "border-block-end-width": "1px",
1171
+ "max-inline-size": "1280px",
1172
+ "padding-inline": "1rem",
1173
+ "container": {
1174
+ "inline-size": "100%"
1175
+ },
1176
+ "content": {
1177
+ "column-gap": "1rem"
1178
+ },
1179
+ "icon": {
1180
+ "color": "#154273",
1181
+ "active": {
1182
+ "color": "#fff"
1183
+ },
1184
+ "size": "24px"
1185
+ },
1186
+ "link": {
1187
+ "active": {
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"
1240
+ }
1241
+ }
1242
+ },
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"
1264
+ },
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"
1272
+ },
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"
1288
+ },
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"
1294
+ },
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%"
1305
+ },
1306
+ "border-radius": "40px",
1307
+ "inline-size": "100%"
1308
+ },
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
1315
+ },
1316
+ "input": {
1317
+ "margin": {
1318
+ "block-start": "0.25rem"
1319
+ }
1320
+ }
1321
+ },
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
+ }
1333
+ },
1334
+ "content": {
1335
+ "max-inline-size": "1280px",
1336
+ "padding-inline-start": "1rem",
1337
+ "padding-inline-end": "1rem"
1338
+ },
1339
+ "border": {
1340
+ "block-start": {
1341
+ "width": "2px",
1342
+ "color": "#154273",
1343
+ "style": "solid"
1344
+ }
1345
+ },
1346
+ "padding": {
1347
+ "block-start": "2.5rem",
1348
+ "block-end": "2.5rem",
1349
+ "inline-start": "2.5rem"
1350
+ },
1351
+ "flex": {
1352
+ "direction": "row"
1353
+ }
1354
+ },
1355
+ "file-input": {
1356
+ "column-gap": "0.75rem",
1357
+ "item": {
1358
+ "border-style": "solid",
1359
+ "border-color": "#154273",
1360
+ "border-width": "1px",
1361
+ "border-radius": "5px",
1362
+ "padding-inline-start": "1rem",
1363
+ "padding-inline-end": "1rem",
1364
+ "padding-block-start": "0.75rem",
1365
+ "padding-block-end": "0.75rem",
1366
+ "column-gap": "0.25rem",
1367
+ "error": {
1368
+ "border-color": "#d52b1e"
1369
+ },
1370
+ "subtitle": {
1371
+ "color": "#64748B"
1372
+ }
1373
+ }
1374
+ },
1375
+ "dot-badge": {
1376
+ "border-radius": "999px",
1377
+ "color": "#d52b1e",
1378
+ "size": "12px"
1379
+ },
1380
+ "checkbox-group": {
1381
+ "padding-block-end": "0.5rem",
1382
+ "padding-block-start": "0.5rem",
1383
+ "row-gap": "1rem"
1384
+ },
1385
+ "card-as-link": {
1386
+ "background-color": "#fff",
1387
+ "border-color": "#CBD5E1",
1388
+ "border-radius": "5px",
1389
+ "border-width": "1px",
1390
+ "color": "#154273",
1391
+ "column-gap": "1rem",
1392
+ "inline-size": "328px",
1393
+ "icon": {
1394
+ "color": "#154273",
1395
+ "size": "24px"
1396
+ },
1397
+ "link": {
1398
+ "color": "#01689b",
1399
+ "text-decoration": "underline",
1400
+ "active": {
1401
+ "text-decoration": "none"
1402
+ },
1403
+ "hover": {
1404
+ "text-decoration": "none"
1405
+ },
1406
+ "focus": {
1407
+ "text-decoration": "none"
1408
+ }
1409
+ },
1410
+ "metadata": {
1411
+ "color": "#154273"
1412
+ },
1413
+ "padding-block-end": "1rem",
1414
+ "padding-block-start": "1rem",
1415
+ "padding-inline-end": "1rem",
1416
+ "padding-inline-start": "1rem",
1417
+ "row-gap": "0.75rem",
1418
+ "active": {
1419
+ "background-color": "#F1F5F9",
1420
+ "text-decoration": "underline"
1421
+ },
1422
+ "hover": {
1423
+ "background-color": "#F8FAFC",
1424
+ "text-decoration": "underline"
1425
+ },
1426
+ "focus": {
1427
+ "background-color": "#dce3ea",
1428
+ "text-decoration": "underline"
1429
+ },
1430
+ "full-bleed": {
1431
+ "background-color": "#000",
1432
+ "border-color": "transparent",
1433
+ "color": "#fff",
1434
+ "opacity": 0.5
1435
+ },
1436
+ "heading": {
1437
+ "padding-block-start": "0.5rem",
1438
+ "font-size": "1.5rem",
1439
+ "font-weight": 700
1440
+ },
1441
+ "horizontal": {
1442
+ "background-color": "#154273",
1443
+ "border-color": "transparent",
1444
+ "color": "#fff",
1445
+ "max-block-size": "96px",
1446
+ "padding-block-end": 0,
1447
+ "padding-block-start": 0,
1448
+ "padding-inline-end": "1rem",
1449
+ "padding-inline-start": "1rem",
1450
+ "heading": {
1451
+ "inline-size": "200px"
1452
+ }
1453
+ }
1454
+ },
1455
+ "accordion": {
1456
+ "button": {
1457
+ "font-family": "Fira Sans, Arial, Verdana, sans-serif",
1458
+ "font-size": "1.25rem",
1459
+ "font-weight": 400,
1460
+ "line-height": "150%",
1461
+ "icon": {
1462
+ "margin-block": "0.25rem"
1463
+ },
1464
+ "padding-block-end": "0.75rem",
1465
+ "padding-block-start": "0.75rem",
1466
+ "padding-inline-end": "1rem",
1467
+ "padding-inline-start": "1rem",
1468
+ "expanded": {
1469
+ "background-color": "#fff",
1470
+ "color": "#154273"
1471
+ }
1472
+ },
1473
+ "section": {
1474
+ "border-block-end-width": "1px",
1475
+ "border-width": 0,
1476
+ "border-color": "#94A3B8"
1477
+ },
1478
+ "header": {
1479
+ "margin": 0
1480
+ },
1481
+ "border-radius": "0px",
1482
+ "color": "#154273"
1483
+ },
1484
+ "keep": {
1485
+ "top-left": {
1486
+ "borderRadiusTopLeft": "48px",
1487
+ "borderRadiusTopRight": 0,
1488
+ "borderRadiusBottomRight": 0,
1489
+ "borderRadiusBottomLeft": 0
1490
+ },
1491
+ "top-right": {
1492
+ "borderRadiusTopRight": "48px",
1493
+ "borderRadiusTopLeft": 0,
1494
+ "borderRadiusBottomRight": 0,
1495
+ "borderRadiusBottomLeft": 0
1496
+ },
1497
+ "bottom-right": {
1498
+ "borderRadiusTopLeft": 0,
1499
+ "borderRadiusTopRight": 0,
1500
+ "borderRadiusBottomRight": "48px",
1501
+ "borderRadiusBottomLeft": 0
1502
+ },
1503
+ "bottom-left": {
1504
+ "borderRadiusTopLeft": 0,
1505
+ "borderRadiusTopRight": 0,
1506
+ "borderRadiusBottomRight": 0,
1507
+ "borderRadiusBottomLeft": "48px"
1508
+ }
1509
+ },
1510
+ "border-radius": {
1511
+ "sm": "2.5px",
1512
+ "md": "5px",
1513
+ "keep": "48px",
1514
+ "circle": "999px",
1515
+ "none": "0px"
1516
+ },
1517
+ "color": {
1518
+ "focus": {
1519
+ "outline": "#000"
1520
+ },
1521
+ "foreground": {
1522
+ "default": "#000",
1523
+ "lint": "#154273",
1524
+ "subdued": "#334155",
1525
+ "onEmphasis": "#fff",
1526
+ "link": "#01689b"
1527
+ },
1528
+ "border": {
1529
+ "default": "#64748B",
1530
+ "subdued": "#94A3B8",
1531
+ "strong": "#000"
1532
+ },
1533
+ "canvas": "#fff",
1534
+ "feedback": {
1535
+ "success": {
1536
+ "default": "#39870c",
1537
+ "subdued": "#e1eddb"
1538
+ },
1539
+ "info": {
1540
+ "default": "#007bc7",
1541
+ "subdued": "#d9ebf7"
1542
+ },
1543
+ "error": {
1544
+ "default": "#d52b1e",
1545
+ "subdued": "#f9dfdd"
1546
+ },
1547
+ "warning": {
1548
+ "default": "#ffb612",
1549
+ "subdued": "#fff4db"
1550
+ }
1551
+ },
1552
+ "accent": {
1553
+ "500": "#8fcae7"
1554
+ },
1555
+ "primary": {
1556
+ "50": "#dce3ea",
1557
+ "100": "#b8c6d5",
1558
+ "200": "#95a9c0",
1559
+ "300": "#738eab",
1560
+ "400": "#4f7196",
1561
+ "500": "#154273",
1562
+ "hover": "#162f50"
1563
+ },
1564
+ "grijs": {
1565
+ "50": "#F8FAFC",
1566
+ "100": "#F1F5F9",
1567
+ "200": "#E2E8F0",
1568
+ "300": "#CBD5E1",
1569
+ "400": "#94A3B8",
1570
+ "500": "#64748B",
1571
+ "600": "#475569",
1572
+ "700": "#334155",
1573
+ "800": "#1E293B",
1574
+ "900": "#0F172A"
1575
+ },
1576
+ "lichtblauw": {
1577
+ "50": "#eef7fb",
1578
+ "100": "#ddeff8",
1579
+ "200": "#CCE7F4",
1580
+ "300": "#BCDFF0",
1581
+ "400": "#ABD7ED",
1582
+ "500": "#8fcae7"
1583
+ },
1584
+ "violet": {
1585
+ "50": "#f2d9e7",
1586
+ "100": "#e5b3d0",
1587
+ "200": "#D88CB7",
1588
+ "300": "#CB66A0",
1589
+ "400": "#BE4088",
1590
+ "500": "#a90061"
1591
+ },
1592
+ "paars": {
1593
+ "50": "#e3dce7",
1594
+ "100": "#c6b9cf",
1595
+ "200": "#A995B7",
1596
+ "300": "#8D729F",
1597
+ "400": "#714f87",
1598
+ "500": "#42145f"
1599
+ },
1600
+ "hemelblauw": {
1601
+ "50": "#d9ebf7",
1602
+ "100": "#b3d7ee",
1603
+ "200": "#8CC3E6",
1604
+ "300": "#66AFDD",
1605
+ "400": "#409CD5",
1606
+ "500": "#007bc7"
1607
+ },
1608
+ "donkerblauw": {
1609
+ "50": "#d9e8f0",
1610
+ "100": "#b3d2e1",
1611
+ "200": "#8CBBD2",
1612
+ "300": "#66A4C3",
1613
+ "400": "#408EB4",
1614
+ "500": "#01689b"
1615
+ },
1616
+ "mintgroen": {
1617
+ "50": "#eaf8f4",
1618
+ "100": "#d6f2e9",
1619
+ "200": "#C1EBDE",
1620
+ "300": "#ACE4D3",
1621
+ "400": "#98DDC8",
1622
+ "500": "#76d2b6"
1623
+ },
1624
+ "mosgroen": {
1625
+ "50": "#ebebd9",
1626
+ "100": "#d6d7b3",
1627
+ "200": "#C1C38C",
1628
+ "300": "#ADAF66",
1629
+ "400": "#999C40",
1630
+ "500": "#777b00"
1631
+ },
1632
+ "groen": {
1633
+ "50": "#e1eddb",
1634
+ "100": "#c4dbb6",
1635
+ "200": "#A5C991",
1636
+ "300": "#88B76D",
1637
+ "400": "#6AA549",
1638
+ "500": "#39870c"
1639
+ },
1640
+ "donkergroen": {
1641
+ "50": "#dfe6e1",
1642
+ "100": "#becdc3",
1643
+ "200": "#9DB4A4",
1644
+ "300": "#7D9B87",
1645
+ "400": "#5D8269",
1646
+ "500": "#275937"
1647
+ },
1648
+ "bruin": {
1649
+ "50": "#efeada",
1650
+ "100": "#dfd4b6",
1651
+ "200": "#CFBF90",
1652
+ "300": "#BFA96C",
1653
+ "400": "#AF9447",
1654
+ "500": "#94710a"
1655
+ },
1656
+ "donkerbruin": {
1657
+ "50": "#e8e0df",
1658
+ "100": "#d1c2be",
1659
+ "200": "#BAA39D",
1660
+ "300": "#A3847D",
1661
+ "400": "#8D665D",
1662
+ "500": "#673327"
1663
+ },
1664
+ "geel": {
1665
+ "50": "#fefbdd",
1666
+ "100": "#fdf6bc",
1667
+ "200": "#FCF199",
1668
+ "300": "#FBED78",
1669
+ "400": "#FAE856",
1670
+ "500": "#f9e11e"
1671
+ },
1672
+ "donkergeel": {
1673
+ "50": "#fff4db",
1674
+ "100": "#ffe9b8",
1675
+ "200": "#FDDE94",
1676
+ "300": "#FDD370",
1677
+ "400": "#FDC84D",
1678
+ "500": "#ffb612"
1679
+ },
1680
+ "oranje": {
1681
+ "50": "#fbead9",
1682
+ "100": "#f6d4b3",
1683
+ "200": "#F1BE8C",
1684
+ "300": "#EDA966",
1685
+ "400": "#E89440",
1686
+ "500": "#e17000"
1687
+ },
1688
+ "rood": {
1689
+ "50": "#f9dfdd",
1690
+ "100": "#f2bfbc",
1691
+ "200": "#EC9F99",
1692
+ "300": "#E67F78",
1693
+ "400": "#DF6056",
1694
+ "500": "#d52b1e"
1695
+ },
1696
+ "roze": {
1697
+ "50": "#fdeff8",
1698
+ "100": "#fbdef0",
1699
+ "200": "#F8CEE8",
1700
+ "300": "#F6BDE1",
1701
+ "400": "#F4ADD9",
1702
+ "500": "#f092cd"
1703
+ },
1704
+ "robijnrood": {
1705
+ "50": "#f7d9e7",
1706
+ "100": "#efb3ce",
1707
+ "200": "#E78CB6",
1708
+ "300": "#DF669D",
1709
+ "400": "#D74085",
1710
+ "500": "#ca005d"
1711
+ },
1712
+ "lintblauw": {
1713
+ "50": "#dce3ea",
1714
+ "100": "#b8c6d5",
1715
+ "200": "#95a9c0",
1716
+ "300": "#738eab",
1717
+ "400": "#4f7196",
1718
+ "500": "#154273"
1719
+ },
1720
+ "wit": "#fff",
1721
+ "zwart": "#000",
1722
+ "none": "transparent"
1723
+ },
1724
+ "focus": {
1725
+ "outline-offset": "0.125rem",
1726
+ "outline-style": "solid",
1727
+ "outline-width": "2px"
1728
+ },
1729
+ "font-size": {
1730
+ "heading": {
1731
+ "level-1": "3.125rem",
1732
+ "level-2": "2.5rem",
1733
+ "level-3": "1.875rem",
1734
+ "level-4": "1.5rem",
1735
+ "level-5": "1.25rem"
1736
+ },
1737
+ "paragraph": {
1738
+ "intro": "1.5rem",
1739
+ "default": "1.25rem"
1740
+ },
1741
+ "xs": {
1742
+ "desktop": "1.25rem",
1743
+ "tablet": "1.125rem",
1744
+ "mobile": "1rem"
1745
+ },
1746
+ "sm": {
1747
+ "desktop": "1.5rem",
1748
+ "tablet": "1.35rem",
1749
+ "mobile": "1.2rem"
1750
+ },
1751
+ "md": {
1752
+ "desktop": "1.875rem",
1753
+ "tablet": "1.688rem",
1754
+ "mobile": "1.5rem"
1755
+ },
1756
+ "lg": {
1757
+ "desktop": "2.5rem",
1758
+ "tablet": "2.25rem",
1759
+ "mobile": "2rem"
1760
+ },
1761
+ "xl": {
1762
+ "desktop": "3.125rem",
1763
+ "tablet": "2.813rem",
1764
+ "mobile": "2.5rem"
1765
+ }
1766
+ },
1767
+ "line-height": {
1768
+ "paragraph": "150%",
1769
+ "sm": "125%",
1770
+ "md": "150%"
1771
+ },
1772
+ "size": {
1773
+ "target": "48px",
1774
+ "icon": {
1775
+ "functional": "24px"
1776
+ },
1777
+ "quarter-lint": "12px",
1778
+ "half-lint": "24px",
1779
+ "lint": "48px",
1780
+ "2-lint": "96px",
1781
+ "3-lint": "1440px"
1782
+ },
1783
+ "font-weight": {
1784
+ "extra-bold": 800,
1785
+ "bold": 700,
1786
+ "semi-bold": 550,
1787
+ "regular": 400,
1788
+ "chosen-regular": 400,
1789
+ "light": 300,
1790
+ "thin": 200
1791
+ },
1792
+ "font-family": {
1793
+ "primary": "Fira Sans, Arial, Verdana, sans-serif",
1794
+ "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
1795
+ },
1796
+ "border-width": {
1797
+ "default": "1px",
1798
+ "m": "2px",
1799
+ "none": "0px"
1800
+ },
1801
+ "space": {
1802
+ "0": 0,
1803
+ "25": "0.125rem",
1804
+ "50": "0.25rem",
1805
+ "100": "0.5rem",
1806
+ "150": "0.75rem",
1807
+ "200": "1rem",
1808
+ "300": "1.5rem",
1809
+ "400": "2rem",
1810
+ "500": "2.5rem",
1811
+ "600": "3rem",
1812
+ "700": "3.5rem"
1813
+ },
1814
+ "sub-nav-bar": {
1815
+ "background-color": "#f2f4f6",
1816
+ "column-gap": "0.5rem",
1817
+ "column-width": "375px",
1818
+ "padding-block-end": "2rem",
1819
+ "padding-block-start": "2rem",
1820
+ "inline-size": "100%",
1821
+ "content": {
1822
+ "padding-inline-end": "1rem",
1823
+ "padding-inline-start": "1rem",
1824
+ "max-inline-size": "1280px",
1825
+ "list": {
1826
+ "row-gap": "0.5rem"
1827
+ }
1828
+ }
1829
+ }
1830
+ },
1831
+ "todo": {
1832
+ "code-input": {
1833
+ "size": "48px"
1834
+ },
1835
+ "code-input-group": {
1836
+ "column-gap": "0.5rem"
686
1837
  }
687
1838
  }
688
1839
  }