@rijkshuisstijl-community/design-tokens 1.0.0-alpha.122 → 1.0.0-alpha.124

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