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