@rijkshuisstijl-community/design-tokens 1.2.0 → 2.0.0

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