@rijkshuisstijl-community/design-tokens 1.0.0-alpha.99 → 1.0.1

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