@rijkshuisstijl-community/design-tokens 1.0.1 → 1.2.0

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