@rijkshuisstijl-community/design-tokens 1.0.0-alpha.16 → 1.0.0-alpha.161

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