@rijkshuisstijl-community/design-tokens 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/_variables.scss +351 -260
  3. package/dist/index.css +351 -260
  4. package/dist/index.d.ts +350 -259
  5. package/dist/index.js +351 -260
  6. package/dist/index.json +350 -259
  7. package/dist/index.tokens.json +507 -354
  8. package/dist/koop/_variables.scss +607 -516
  9. package/dist/koop/index.css +607 -516
  10. package/dist/koop/index.d.ts +701 -610
  11. package/dist/koop/index.js +703 -612
  12. package/dist/koop/index.json +703 -612
  13. package/dist/koop/index.tokens.json +915 -762
  14. package/dist/koop/root.css +607 -516
  15. package/dist/koop/tokens.d.ts +886 -733
  16. package/dist/koop/tokens.js +16374 -14153
  17. package/dist/root.css +351 -260
  18. package/dist/tokens.d.ts +475 -322
  19. package/dist/tokens.js +18021 -15800
  20. package/dist/uitvoerend-groen/_variables.scss +607 -516
  21. package/dist/uitvoerend-groen/index.css +607 -516
  22. package/dist/uitvoerend-groen/index.d.ts +680 -589
  23. package/dist/uitvoerend-groen/index.js +698 -607
  24. package/dist/uitvoerend-groen/index.json +698 -607
  25. package/dist/uitvoerend-groen/index.tokens.json +931 -778
  26. package/dist/uitvoerend-groen/root.css +607 -516
  27. package/dist/uitvoerend-groen/tokens.d.ts +907 -754
  28. package/dist/uitvoerend-groen/tokens.js +17815 -15594
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +607 -516
  30. package/dist/uitvoerend-hemelblauw/index.css +607 -516
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +680 -589
  32. package/dist/uitvoerend-hemelblauw/index.js +698 -607
  33. package/dist/uitvoerend-hemelblauw/index.json +698 -607
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +931 -778
  35. package/dist/uitvoerend-hemelblauw/root.css +607 -516
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +907 -754
  37. package/dist/uitvoerend-hemelblauw/tokens.js +17819 -15598
  38. package/dist/uitvoerend-mintgroen/_variables.scss +607 -516
  39. package/dist/uitvoerend-mintgroen/index.css +607 -516
  40. package/dist/uitvoerend-mintgroen/index.d.ts +680 -589
  41. package/dist/uitvoerend-mintgroen/index.js +698 -607
  42. package/dist/uitvoerend-mintgroen/index.json +698 -607
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +931 -778
  44. package/dist/uitvoerend-mintgroen/root.css +607 -516
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +907 -754
  46. package/dist/uitvoerend-mintgroen/tokens.js +17815 -15594
  47. package/dist/uitvoerend-oranje/_variables.scss +607 -516
  48. package/dist/uitvoerend-oranje/index.css +607 -516
  49. package/dist/uitvoerend-oranje/index.d.ts +680 -589
  50. package/dist/uitvoerend-oranje/index.js +698 -607
  51. package/dist/uitvoerend-oranje/index.json +698 -607
  52. package/dist/uitvoerend-oranje/index.tokens.json +933 -780
  53. package/dist/uitvoerend-oranje/root.css +607 -516
  54. package/dist/uitvoerend-oranje/tokens.d.ts +908 -755
  55. package/dist/uitvoerend-oranje/tokens.js +17794 -15573
  56. package/dist/uitvoerend-paars/_variables.scss +607 -516
  57. package/dist/uitvoerend-paars/index.css +607 -516
  58. package/dist/uitvoerend-paars/index.d.ts +680 -589
  59. package/dist/uitvoerend-paars/index.js +698 -607
  60. package/dist/uitvoerend-paars/index.json +698 -607
  61. package/dist/uitvoerend-paars/index.tokens.json +931 -778
  62. package/dist/uitvoerend-paars/root.css +607 -516
  63. package/dist/uitvoerend-paars/tokens.d.ts +907 -754
  64. package/dist/uitvoerend-paars/tokens.js +17815 -15594
  65. package/dist/uitvoerend-violet/_variables.scss +607 -516
  66. package/dist/uitvoerend-violet/index.css +607 -516
  67. package/dist/uitvoerend-violet/index.d.ts +680 -589
  68. package/dist/uitvoerend-violet/index.js +698 -607
  69. package/dist/uitvoerend-violet/index.json +698 -607
  70. package/dist/uitvoerend-violet/index.tokens.json +931 -778
  71. package/dist/uitvoerend-violet/root.css +607 -516
  72. package/dist/uitvoerend-violet/tokens.d.ts +907 -754
  73. package/dist/uitvoerend-violet/tokens.js +17815 -15594
  74. package/dist/uitvoerend-violet-oud/_variables.scss +608 -517
  75. package/dist/uitvoerend-violet-oud/index.css +608 -517
  76. package/dist/uitvoerend-violet-oud/index.d.ts +681 -590
  77. package/dist/uitvoerend-violet-oud/index.js +699 -608
  78. package/dist/uitvoerend-violet-oud/index.json +699 -608
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +925 -772
  80. package/dist/uitvoerend-violet-oud/root.css +608 -517
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +898 -745
  82. package/dist/uitvoerend-violet-oud/tokens.js +17299 -15078
  83. package/dist/wetgevend/_variables.scss +606 -515
  84. package/dist/wetgevend/index.css +606 -515
  85. package/dist/wetgevend/index.d.ts +679 -588
  86. package/dist/wetgevend/index.js +682 -591
  87. package/dist/wetgevend/index.json +682 -591
  88. package/dist/wetgevend/index.tokens.json +934 -781
  89. package/dist/wetgevend/root.css +606 -515
  90. package/dist/wetgevend/tokens.d.ts +887 -734
  91. package/dist/wetgevend/tokens.js +16235 -14014
  92. package/figma/figma.tokens.json +2138 -1495
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +1876 -1437
  95. package/src/generated/koop/tokens.json +3394 -2955
  96. package/src/generated/themes.json +35654 -31703
  97. package/src/generated/uitvoerend-groen/tokens.json +3469 -3030
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +3466 -3027
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +3469 -3030
  100. package/src/generated/uitvoerend-oranje/tokens.json +3469 -3030
  101. package/src/generated/uitvoerend-paars/tokens.json +3469 -3030
  102. package/src/generated/uitvoerend-violet/tokens.json +3469 -3030
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +3482 -3043
  104. package/src/generated/wetgevend/tokens.json +3527 -3088
@@ -1,175 +1,603 @@
1
1
  {
2
- "nl": {
3
- "skip-link": {
4
- "border-color": "transparent",
5
- "border-width": "2px",
6
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
7
- "font-weight": 700,
8
- "padding-block-end": "0.75rem",
9
- "padding-block-start": "0.75rem",
10
- "padding-inline-end": "1rem",
11
- "padding-inline-start": "1rem",
12
- "box-block-end-shadow": {
13
- "blur-radius": "48px",
14
- "color": "#0000001a",
15
- "offset-x": 0,
16
- "offset-y": "16px",
17
- "spread-radius": 0
2
+ "utrecht": {
3
+ "textbox": {
4
+ "hover": {
5
+ "background-color": "#fff",
6
+ "border-color": "#738eab",
7
+ "border-width": "1px",
8
+ "color": "#0F172A"
18
9
  },
19
10
  "focus": {
20
- "background-color": "#fff",
21
- "border-color": "#39870c",
22
- "border-style": "solid",
23
11
  "border-width": "2px",
24
- "color": "#0F172A",
25
- "text-decoration": "None"
26
- },
27
- "focus-visible": {
28
- "outline-color": "#000"
12
+ "background-color": "#fff",
13
+ "border-color": "#154273",
14
+ "color": "#0F172A"
29
15
  },
30
- "text-decoration": "underline",
31
16
  "background-color": "#fff",
32
- "color": "#01689b",
33
- "padding-block": "0.75rem",
34
- "padding-inline": "1rem",
35
- "min-block-size": "48px",
36
- "min-inline-size": "48px",
37
- "text-decoration-thickness": "0.0625em",
38
- "text-underline-offset": "0.125rem",
39
- "line-height": "150%",
40
- "font-size": "1.25rem"
41
- },
42
- "link": {
43
- "column-gap": "0.25rem",
17
+ "border-block-end-width": "auto",
18
+ "border-color": "#154273",
19
+ "border-radius": "2.5px",
20
+ "border-width": "1px",
21
+ "color": "#0F172A",
44
22
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
45
23
  "font-size": "1.25rem",
46
24
  "font-weight": 400,
47
25
  "line-height": "150%",
48
- "icon": {
49
- "inset-block-start": "0.25rem",
50
- "size": "24px"
51
- },
52
- "active": {
53
- "text-decoration": "None",
54
- "color": "#1a4972"
55
- },
56
- "focus": {
57
- "background-color": "transparent",
58
- "color": "#01689b",
59
- "text-decoration": "None",
60
- "text-decoration-thickness": "auto"
26
+ "max-inline-size": "400px",
27
+ "min-block-size": "48px",
28
+ "padding-block-end": "0.5rem",
29
+ "padding-block-start": "0.5rem",
30
+ "padding-inline-end": "0.75rem",
31
+ "padding-inline-start": "0.75rem",
32
+ "invalid": {
33
+ "background-color": "#f9dfdd",
34
+ "border-block-end-width": "1px",
35
+ "border-color": "#d52b1e",
36
+ "border-width": "1px",
37
+ "color": "#0F172A"
61
38
  },
62
- "visited": {
63
- "color": "#01689b"
39
+ "placeholder": {
40
+ "color": "#64748B"
64
41
  },
65
- "color": "#01689b",
66
- "text-decoration-color": "inherit",
67
- "text-decoration-line": "underline",
68
- "text-decoration-thickness": "0.0625em",
69
- "text-underline-offset": "0.125rem",
70
- "current": {
71
- "cursor": "default"
42
+ "read-only": {
43
+ "background-color": "#F1F5F9",
44
+ "border-color": "transparent",
45
+ "color": "#0F172A"
72
46
  },
73
47
  "disabled": {
74
- "color": "#334155",
75
- "cursor": "disabled"
76
- },
77
- "hover": {
78
- "text-decoration-line": "underline",
79
- "text-decoration-thickness": "auto",
80
- "color": "#01496c"
48
+ "background-color": "#CBD5E1",
49
+ "border-color": "#94A3B8",
50
+ "color": "#475569"
81
51
  }
82
52
  },
83
- "paragraph": {
84
- "lead": {
53
+ "select": {
54
+ "border-bottom-width": "auto",
55
+ "border-radius": "2.5px",
56
+ "border-width": "1px",
57
+ "image-background-position": "right 0.5rem center",
58
+ "max-inline-size": "400px",
59
+ "padding-block-end": "0.5rem",
60
+ "padding-block-start": "0.5rem",
61
+ "padding-inline-end": "0.75rem",
62
+ "padding-inline-start": "0.75rem",
63
+ "icon": {
64
+ "size": "24px"
65
+ },
66
+ "invalid": {
67
+ "border-width": "1px",
85
68
  "color": "#0F172A",
86
- "font-size": "1.5rem",
87
- "font-weight": 400,
88
- "line-height": "150%",
89
- "margin-block-end": "0rem",
90
- "margin-block-start": "0rem"
69
+ "background-color": "#f9dfdd",
70
+ "border-block-end-width": "1px",
71
+ "border-color": "#d52b1e"
72
+ },
73
+ "hover": {
74
+ "border-width": "1px",
75
+ "background-color": "#fff",
76
+ "border-color": "#88B76D",
77
+ "color": "#0F172A"
78
+ },
79
+ "focus": {
80
+ "border-width": "2px",
81
+ "background-color": "#fff",
82
+ "border-color": "#39870c",
83
+ "color": "#0F172A"
91
84
  },
85
+ "background-color": "#fff",
86
+ "border-block-end-width": "1px",
87
+ "border-color": "#39870c",
92
88
  "color": "#0F172A",
93
89
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
94
90
  "font-size": "1.25rem",
95
91
  "font-weight": 400,
96
92
  "line-height": "150%",
97
- "margin-block-end": "0rem",
98
- "margin-block-start": "0rem"
93
+ "min-block-size": "48px",
94
+ "disabled": {
95
+ "background-color": "#CBD5E1",
96
+ "border-color": "#94A3B8",
97
+ "color": "#475569"
98
+ }
99
99
  },
100
- "heading": {
101
- "level-1": {
102
- "color": "#154273",
103
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
104
- "font-size": "3.125rem",
105
- "font-weight": 700,
106
- "line-height": "125%",
107
- "margin-block-end": "0rem",
108
- "margin-block-start": "0rem"
100
+ "radio-button": {
101
+ "border-radius": "999px",
102
+ "dot": {
103
+ "size": "12px"
109
104
  },
110
- "level-2": {
111
- "color": "#154273",
112
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
113
- "font-size": "2.5rem",
114
- "font-weight": 700,
115
- "line-height": "125%",
116
- "margin-block-end": "0rem",
117
- "margin-block-start": "0rem"
105
+ "checked": {
106
+ "disabled": {
107
+ "background-color": "#CBD5E1",
108
+ "border-color": "#94A3B8",
109
+ "color": "#475569"
110
+ },
111
+ "background-color": "#154273",
112
+ "border-color": "transparent",
113
+ "border-width": "1px",
114
+ "color": "#fff",
115
+ "active": {
116
+ "background-color": "#4f7196",
117
+ "border-color": "transparent",
118
+ "border-width": "1px",
119
+ "color": "#fff"
120
+ },
121
+ "hover": {
122
+ "background-color": "#738eab",
123
+ "border-color": "transparent",
124
+ "border-width": "1px",
125
+ "color": "#fff"
126
+ },
127
+ "focus": {
128
+ "background-color": "#fff",
129
+ "border-color": "#154273",
130
+ "border-width": "2px",
131
+ "color": "#154273"
132
+ }
118
133
  },
119
- "level-3": {
120
- "color": "#154273",
121
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
122
- "font-size": "1.875rem",
123
- "font-weight": 700,
124
- "line-height": "125%",
125
- "margin-block-end": "0rem",
126
- "margin-block-start": "0rem"
134
+ "background-color": "#fff",
135
+ "border-color": "#154273",
136
+ "color": "#154273",
137
+ "border-width": "1px",
138
+ "size": "24px",
139
+ "icon": {
140
+ "size": "12px"
127
141
  },
128
- "level-4": {
142
+ "invalid": {
143
+ "background-color": "#f9dfdd",
144
+ "border-color": "#d52b1e",
145
+ "color": "#d52b1e",
146
+ "border-width": "1px"
147
+ },
148
+ "active": {
149
+ "background-color": "#fff",
150
+ "border-color": "#4f7196",
151
+ "color": "#4f7196",
152
+ "border-width": "1px"
153
+ },
154
+ "disabled": {
155
+ "background-color": "#CBD5E1",
156
+ "border-color": "#94A3B8",
157
+ "color": "#94A3B8"
158
+ },
159
+ "hover": {
160
+ "background-color": "#fff",
161
+ "border-color": "#738eab",
162
+ "color": "#738eab",
163
+ "border-width": "1px"
164
+ },
165
+ "focus": {
166
+ "background-color": "#fff",
167
+ "border-color": "#154273",
129
168
  "color": "#154273",
130
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
131
- "font-size": "1.5rem",
132
- "font-weight": 700,
133
- "line-height": "150%",
134
- "margin-block-end": "0rem",
135
- "margin-block-start": "0rem"
169
+ "border-width": "2px"
170
+ }
171
+ },
172
+ "form-field": {
173
+ "label": {
174
+ "margin-block-end": "0.5rem"
175
+ },
176
+ "margin-block-end": "0.5rem",
177
+ "margin-block-start": "0.5rem",
178
+ "invalid": {
179
+ "border-inline-start-color": "#d52b1e",
180
+ "border-inline-start-width": "0px",
181
+ "padding-inline-start": "0rem"
182
+ }
183
+ },
184
+ "checkbox": {
185
+ "indeterminate": {
186
+ "active": {
187
+ "background-color": "#6AA549",
188
+ "border-color": "transparent",
189
+ "color": "#fff",
190
+ "border-width": "1px"
191
+ },
192
+ "disabled": {
193
+ "background-color": "#CBD5E1",
194
+ "border-color": "#94A3B8",
195
+ "color": "#475569"
196
+ },
197
+ "hover": {
198
+ "background-color": "#88B76D",
199
+ "border-color": "transparent",
200
+ "color": "#fff",
201
+ "border-width": "1px"
202
+ },
203
+ "focus": {
204
+ "background-color": "#fff",
205
+ "border-color": "#39870c",
206
+ "color": "#39870c",
207
+ "border-width": "2px"
208
+ },
209
+ "background-color": "#154273",
210
+ "border-color": "transparent",
211
+ "border-width": "1px",
212
+ "color": "#fff"
213
+ },
214
+ "checked": {
215
+ "active": {
216
+ "background-color": "#6AA549",
217
+ "border-color": "transparent",
218
+ "color": "#fff",
219
+ "border-width": "1px"
220
+ },
221
+ "disabled": {
222
+ "background-color": "#CBD5E1",
223
+ "border-color": "#94A3B8",
224
+ "color": "#475569"
225
+ },
226
+ "hover": {
227
+ "background-color": "#88B76D",
228
+ "border-color": "transparent",
229
+ "color": "#fff",
230
+ "border-width": "1px"
231
+ },
232
+ "focus": {
233
+ "background-color": "#fff",
234
+ "border-color": "#39870c",
235
+ "color": "#39870c",
236
+ "border-width": "2px"
237
+ },
238
+ "background-color": "#154273",
239
+ "border-color": "transparent",
240
+ "border-width": "1px",
241
+ "color": "#fff"
242
+ },
243
+ "background-color": "#fff",
244
+ "border-color": "#154273",
245
+ "border-radius": "2.5px",
246
+ "border-width": "1px",
247
+ "size": "24px",
248
+ "icon": {
249
+ "size": "24px"
250
+ },
251
+ "invalid": {
252
+ "background-color": "#f9dfdd",
253
+ "border-color": "#d52b1e",
254
+ "border-width": "1px"
255
+ },
256
+ "active": {
257
+ "background-color": "#fff",
258
+ "border-color": "#4f7196",
259
+ "border-width": "1px"
260
+ },
261
+ "disabled": {
262
+ "background-color": "#CBD5E1",
263
+ "border-color": "#94A3B8"
264
+ },
265
+ "hover": {
266
+ "background-color": "#fff",
267
+ "border-color": "#738eab",
268
+ "border-width": "1px"
269
+ },
270
+ "focus": {
271
+ "background-color": "#fff",
272
+ "border-color": "#154273",
273
+ "border-width": "2px"
274
+ }
275
+ },
276
+ "textarea": {
277
+ "border-bottom-width": "1px",
278
+ "hover": {
279
+ "background-color": "#fff",
280
+ "border-color": "#88B76D",
281
+ "border-width": "1px",
282
+ "color": "#0F172A"
283
+ },
284
+ "focus": {
285
+ "border-width": "2px",
286
+ "background-color": "#fff",
287
+ "border-color": "#154273",
288
+ "color": "#0F172A"
289
+ },
290
+ "background-color": "#fff",
291
+ "border-block-end-width": "1px",
292
+ "border-color": "#154273",
293
+ "border-radius": "2.5px",
294
+ "border-width": "1px",
295
+ "color": "#0F172A",
296
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
297
+ "font-size": "1.25rem",
298
+ "font-weight": 400,
299
+ "line-height": "150%",
300
+ "max-inline-size": "400px",
301
+ "min-block-size": "48px",
302
+ "padding-block-end": "0.5rem",
303
+ "padding-block-start": "0.5rem",
304
+ "padding-inline-end": "0.75rem",
305
+ "padding-inline-start": "0.75rem",
306
+ "invalid": {
307
+ "background-color": "#f9dfdd",
308
+ "border-block-end-width": "1px",
309
+ "border-color": "#d52b1e",
310
+ "border-width": "1px",
311
+ "color": "#0F172A"
312
+ },
313
+ "placeholder": {
314
+ "color": "#64748B"
315
+ },
316
+ "read-only": {
317
+ "background-color": "#F1F5F9",
318
+ "border-color": "transparent",
319
+ "color": "#0F172A"
320
+ },
321
+ "disabled": {
322
+ "background-color": "#CBD5E1",
323
+ "border-color": "#94A3B8",
324
+ "color": "#475569"
325
+ }
326
+ },
327
+ "form-field-error-message": {
328
+ "icon": {
329
+ "margin-inline-end": "0.5rem",
330
+ "size": "24px"
331
+ },
332
+ "background-color": "transparent",
333
+ "color": "#d52b1e",
334
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
335
+ "font-size": "1.25rem",
336
+ "font-weight": 400,
337
+ "line-height": "normal",
338
+ "margin-block-end": "0.5rem",
339
+ "margin-block-start": "0rem",
340
+ "padding-block-end": "0.5rem",
341
+ "padding-block-start": "0rem",
342
+ "padding-inline-end": "0rem",
343
+ "padding-inline-start": "0rem"
344
+ },
345
+ "form-field-description": {
346
+ "padding-block-end": "0.5rem",
347
+ "color": "#334155",
348
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
349
+ "font-size": "1.25rem",
350
+ "line-height": "150%",
351
+ "margin-block-end": "0.5rem",
352
+ "margin-block-start": "-0.5rem"
353
+ },
354
+ "form-label": {
355
+ "color": "#0F172A",
356
+ "font-size": "1.25rem",
357
+ "font-weight": 700,
358
+ "checkbox": {
359
+ "color": "#0F172A",
360
+ "font-weight": 400
361
+ },
362
+ "radio": {
363
+ "color": "#0F172A",
364
+ "font-weight": 400
365
+ },
366
+ "checked": {
367
+ "font-weight": 400
368
+ },
369
+ "disabled": {
370
+ "color": "#94A3B8"
371
+ }
372
+ },
373
+ "number-badge": {
374
+ "line-height": "125%",
375
+ "background-color": "#39870c",
376
+ "border-color": "transparent",
377
+ "border-radius": "999px",
378
+ "border-width": "0px",
379
+ "color": "#fff",
380
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
381
+ "font-size": "1.25rem",
382
+ "font-weight": 700,
383
+ "min-block-size": "24px",
384
+ "min-inline-size": "24px",
385
+ "padding-block": "0.125rem",
386
+ "padding-inline": "0.5rem"
387
+ },
388
+ "figure": {
389
+ "caption": {
390
+ "border-color": "#CBD5E1",
391
+ "border-width": "4px",
392
+ "padding-block-end": "0.5rem",
393
+ "padding-block-start": "0.5rem",
394
+ "padding-inline-start": "1rem",
395
+ "color": "#0F172A",
396
+ "font-size": "1.25rem",
397
+ "line-height": "150%"
398
+ },
399
+ "img": {
400
+ "border-end-end-radius": 0,
401
+ "border-end-start-radius": 0,
402
+ "border-start-end-radius": 0,
403
+ "border-start-start-radius": 0
404
+ }
405
+ },
406
+ "blockquote": {
407
+ "border-block-end-width": 0,
408
+ "border-block-start-width": 0,
409
+ "border-end-end-radius": 0,
410
+ "border-end-start-radius": 0,
411
+ "border-inline-end-width": 0,
412
+ "border-start-end-radius": 0,
413
+ "border-start-start-radius": 0,
414
+ "margin-block-end": 0,
415
+ "margin-block-start": 0,
416
+ "margin-inline-end": 0,
417
+ "margin-inline-start": 0,
418
+ "blue-corner-border-variation": {
419
+ "border-block-end-width": "2px",
420
+ "border-color": "#39870c",
421
+ "border-end-end-radius": "3rem",
422
+ "border-inline-end-width": "2px"
423
+ },
424
+ "caption": {
425
+ "color": "#154273",
426
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
427
+ "font-size": "1.25rem",
428
+ "font-weight": 400,
429
+ "line-height": "150%",
430
+ "padding-block-start": "0.75rem"
431
+ },
432
+ "content": {
433
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
434
+ "font-weight": 400,
435
+ "line-height": "150%",
436
+ "color": "#154273",
437
+ "font-size": "1.25rem"
438
+ },
439
+ "pink-background-variation": {
440
+ "background-color": "#F6BDE1",
441
+ "border-end-start-radius": "3rem",
442
+ "padding": "2.5rem"
443
+ },
444
+ "pink-corner-border-variation": {
445
+ "border-block-start-width": "0.25rem",
446
+ "border-color": "#F6BDE1",
447
+ "border-inline-start-width": "0.25rem",
448
+ "border-start-start-radius": "3rem",
449
+ "padding": "2.5rem"
450
+ },
451
+ "pink-left-border-variation": {
452
+ "border-color": "#F6BDE1",
453
+ "border-inline-start-width": "0.75rem",
454
+ "padding-block-end": "1.5rem",
455
+ "padding-block-start": "1.5rem",
456
+ "padding-inline-end": "2.5rem",
457
+ "padding-inline-start": "2.5rem"
458
+ },
459
+ "background-color": "transparent",
460
+ "border-inline-start-width": "0px",
461
+ "border-color": "transparent",
462
+ "border-radius": "0px",
463
+ "border-width": "0px",
464
+ "color": "#154273",
465
+ "font-size": "1.25rem",
466
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
467
+ "padding-block-end": "2rem",
468
+ "padding-block-start": "2rem",
469
+ "padding-inline-end": "2rem",
470
+ "padding-inline-start": "2rem",
471
+ "row-gap": "0.75rem",
472
+ "attribution": {
473
+ "color": "#154273",
474
+ "font-size": "1.25rem"
475
+ }
476
+ },
477
+ "alert": {
478
+ "heading": {
479
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
480
+ "font-size": "1.25rem",
481
+ "font-weight": 700,
482
+ "line-height": "150%"
483
+ },
484
+ "message": {
485
+ "column-gap": "0.5rem",
486
+ "line-height": "150%",
487
+ "row-gap": "0rem"
488
+ },
489
+ "background-color": "#d9ebf7",
490
+ "border-color": "transparent",
491
+ "border-radius": "5px",
492
+ "border-width": "0px",
493
+ "color": "#000",
494
+ "column-gap": "0.5rem",
495
+ "margin-block-end": "0.75rem",
496
+ "margin-block-start": "0.75rem",
497
+ "padding-block-end": "1rem",
498
+ "padding-block-start": "1rem",
499
+ "padding-inline-end": "1rem",
500
+ "padding-inline-start": "1rem",
501
+ "content": {
502
+ "row-gap": "0.5rem"
503
+ },
504
+ "error": {
505
+ "background-color": "#f9dfdd",
506
+ "border-color": "transparent",
507
+ "color": "#000"
508
+ },
509
+ "info": {
510
+ "background-color": "#d9ebf7",
511
+ "border-color": "transparent",
512
+ "color": "#000"
513
+ },
514
+ "ok": {
515
+ "background-color": "#e1eddb",
516
+ "border-color": "transparent",
517
+ "color": "#000"
518
+ },
519
+ "warning": {
520
+ "background-color": "#fff4db",
521
+ "border-color": "transparent",
522
+ "color": "#000"
523
+ },
524
+ "icon": {
525
+ "color": "#007bc7",
526
+ "inset-block-start": "3px",
527
+ "size": "24px",
528
+ "error": {
529
+ "color": "#d52b1e"
530
+ },
531
+ "info": {
532
+ "color": "#007bc7"
533
+ },
534
+ "ok": {
535
+ "color": "#39870c"
536
+ },
537
+ "warning": {
538
+ "color": "#ffb612"
539
+ }
540
+ }
541
+ },
542
+ "accordion": {
543
+ "button": {
544
+ "active": {
545
+ "row-gap": 0,
546
+ "background-color": "#F1F5F9",
547
+ "border-color": "transparent",
548
+ "color": "#0F172A"
549
+ },
550
+ "focus": {
551
+ "background-color": "#e1eddb",
552
+ "border-color": "#39870c",
553
+ "color": "#0F172A"
554
+ },
555
+ "background-color": "#fff",
556
+ "border-color": "transparent",
557
+ "border-radius": "0px",
558
+ "border-width": "1px",
559
+ "color": "#0F172A",
560
+ "gap": "0.5rem",
561
+ "padding-block-end": "0.75rem",
562
+ "padding-block-start": "0.75rem",
563
+ "padding-inline-end": "1rem",
564
+ "padding-inline-start": "1rem",
565
+ "icon": {
566
+ "size": "24px"
567
+ },
568
+ "hover": {
569
+ "background-color": "#F8FAFC",
570
+ "border-color": "transparent",
571
+ "color": "#0F172A"
572
+ },
573
+ "focus-visible": {
574
+ "background-color": "#e1eddb",
575
+ "border-color": "transparent",
576
+ "border-width": "1px",
577
+ "color": "#0F172A"
578
+ }
136
579
  },
137
- "level-5": {
138
- "color": "#154273",
139
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
140
- "font-size": "1.25rem",
141
- "font-weight": 700,
142
- "line-height": "150%",
143
- "margin-block-end": "0rem",
144
- "margin-block-start": "0rem"
580
+ "margin-block-end": "0rem",
581
+ "margin-block-start": "0rem",
582
+ "row-gap": "0rem",
583
+ "panel": {
584
+ "border-color": "transparent",
585
+ "border-width": "1px",
586
+ "padding-block-end": "1.5rem",
587
+ "padding-block-start": "1rem",
588
+ "padding-inline-end": "1rem",
589
+ "padding-inline-start": "1rem"
145
590
  },
146
- "level-6": {
147
- "color": "#154273",
148
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
149
- "font-size": "1.25rem",
150
- "font-weight": 700,
151
- "line-height": "150%",
591
+ "section": {
592
+ "border-color": "#94A3B8",
593
+ "hover": {
594
+ "border-color": "#94A3B8"
595
+ },
596
+ "border-width": "1px",
152
597
  "margin-block-end": "0rem",
153
598
  "margin-block-start": "0rem"
154
599
  }
155
600
  },
156
- "number-badge": {
157
- "font-size": "1.25rem",
158
- "line-height": "125%",
159
- "min-block-size": "24px",
160
- "min-inline-size": "24px",
161
- "font-weight": 700,
162
- "border-width": "0px",
163
- "border-radius": "999px",
164
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
165
- "background-color": "#39870c",
166
- "border-color": "transparent",
167
- "color": "#fff",
168
- "padding-inline": "0.5rem",
169
- "padding-block": "0.125rem"
170
- }
171
- },
172
- "utrecht": {
173
601
  "skip-link": {
174
602
  "focus": {
175
603
  "text-decoration": "None",
@@ -271,10 +699,6 @@
271
699
  "padding-inline": "0.75rem"
272
700
  },
273
701
  "button": {
274
- "icon": {
275
- "gap": "0.5rem",
276
- "size": "24px"
277
- },
278
702
  "background-color": "#0F172A",
279
703
  "border-color": "transparent",
280
704
  "border-radius": "5px",
@@ -291,6 +715,9 @@
291
715
  "padding-block-start": "0.5rem",
292
716
  "padding-inline-end": "1rem",
293
717
  "padding-inline-start": "1rem",
718
+ "icon": {
719
+ "size": "24px"
720
+ },
294
721
  "pressed": {
295
722
  "background-color": "#1E293B",
296
723
  "border-color": "transparent",
@@ -484,274 +911,71 @@
484
911
  }
485
912
  }
486
913
  },
487
- "accordion": {
488
- "panel": {
489
- "border-color": "#94A3B8",
490
- "border-width": 0,
491
- "padding-block-end": "1.5rem",
492
- "padding-block-start": "1rem",
493
- "padding-inline-end": "1rem",
494
- "padding-inline-start": "1rem"
495
- },
496
- "button": {
497
- "gap": "0.5rem",
498
- "icon": {
499
- "size": "24px"
500
- },
501
- "hover": {
502
- "background-color": "#F8FAFC",
503
- "border-color": "#94A3B8",
504
- "color": "#0F172A"
505
- },
506
- "background-color": "#fff",
507
- "border-color": "#94A3B8",
508
- "border-width": 0,
509
- "color": "#0F172A",
510
- "focus": {
511
- "background-color": "#e1eddb",
512
- "border-color": "#39870c",
513
- "color": "#0F172A"
514
- },
515
- "active": {
516
- "background-color": "#F1F5F9",
517
- "border-color": "#94A3B8",
518
- "color": "#0F172A",
519
- "row-gap": 0
520
- }
521
- }
522
- },
523
914
  "action": {
524
915
  "activate": {
525
916
  "cursor": "pointer"
526
917
  },
527
- "busy": {
528
- "cursor": "wait"
529
- },
530
- "disabled": {
531
- "cursor": "not-allowed"
532
- },
533
- "inert": {
534
- "cursor": "default"
535
- },
536
- "navigate": {
537
- "cursor": "pointer"
538
- },
539
- "submit": {
540
- "cursor": "pointer"
541
- }
542
- },
543
- "unordered-list": {
544
- "color": "#0F172A",
545
- "marker": {
546
- "border-color": "#0F172A",
547
- "color": "#0F172A"
548
- },
549
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
550
- "font-weight": 400,
551
- "font-size": "1.25rem",
552
- "line-height": "150%",
553
- "margin-block-end": "0.25rem",
554
- "margin-block-start": "0.25rem",
555
- "padding-inline-start": "1.5rem",
556
- "item": {
557
- "margin-block-end": "0.25rem",
558
- "margin-block-start": "0.25rem",
559
- "padding-inline-start": "0.5rem"
560
- }
561
- },
562
- "ordered-list": {
563
- "color": "#0F172A",
564
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
565
- "font-weight": 400,
566
- "margin-inline-start": "0.625rem",
567
- "font-size": "1.25rem",
568
- "line-height": "150%",
569
- "margin-block-end": "0.25rem",
570
- "margin-block-start": "0.25rem",
571
- "padding-inline-start": "1.5rem",
572
- "item": {
573
- "margin-block-end": "0.25rem",
574
- "margin-block-start": "0.25rem",
575
- "padding-inline-start": "0.5rem"
576
- }
577
- },
578
- "column-layout": {
579
- "column-rule-color": "transparent",
580
- "column-rule-width": "0px",
581
- "column-width": "400px",
582
- "gap": "0.75rem"
583
- },
584
- "blockquote": {
585
- "background-color": "transparent",
586
- "border-inline-start-width": 0,
587
- "border-color": "transparent",
588
- "border-radius": 0,
589
- "border-width": 0,
590
- "color": "#154273",
591
- "font-size": "1.25rem",
592
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
593
- "padding-block-end": "2rem",
594
- "padding-block-start": "2rem",
595
- "padding-inline-end": "2rem",
596
- "padding-inline-start": "2rem",
597
- "row-gap": "0.75rem",
598
- "attribution": {
599
- "color": "#154273",
600
- "font-size": "1.25rem"
601
- },
602
- "content": {
603
- "color": "#154273",
604
- "font-size": "1.25rem",
605
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
606
- "line-height": "150%",
607
- "font-weight": 400
608
- },
609
- "caption": {
610
- "font-size": "1.25rem",
611
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
612
- "line-height": "150%",
613
- "font-weight": 400,
614
- "padding-block-start": "0.75rem",
615
- "color": "#154273"
616
- },
617
- "margin-block-end": 0,
618
- "margin-block-start": 0,
619
- "margin-inline-end": 0,
620
- "margin-inline-start": 0,
621
- "border-block-start-width": 0,
622
- "border-block-end-width": 0,
623
- "border-inline-end-width": 0,
624
- "border-start-start-radius": 0,
625
- "border-start-end-radius": 0,
626
- "border-end-start-radius": 0,
627
- "border-end-end-radius": 0,
628
- "blue-corner-border-variation": {
629
- "border-color": "#39870c",
630
- "border-block-end-width": "2px",
631
- "border-inline-end-width": "2px",
632
- "border-end-end-radius": "3rem"
633
- },
634
- "pink-background-variation": {
635
- "background-color": "#F6BDE1",
636
- "border-end-start-radius": "3rem",
637
- "padding": "2.5rem"
638
- },
639
- "pink-left-border-variation": {
640
- "border-color": "#F6BDE1",
641
- "border-inline-start-width": "0.75rem",
642
- "padding-inline-start": "2.5rem",
643
- "padding-inline-end": "2.5rem",
644
- "padding-block-start": "1.5rem",
645
- "padding-block-end": "1.5rem"
646
- },
647
- "pink-corner-border-variation": {
648
- "border-color": "#F6BDE1",
649
- "border-block-start-width": "0.25rem",
650
- "border-inline-start-width": "0.25rem",
651
- "border-start-start-radius": "3rem",
652
- "padding": "2.5rem"
653
- }
654
- },
655
- "icon": {
656
- "color": "inherit",
657
- "size": "24px",
658
- "inset-block-start": "0rem"
659
- },
660
- "textbox": {
661
- "border-radius": "2.5px",
662
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
663
- "font-size": "1.25rem",
664
- "font-weight": 400,
665
- "line-height": "150%",
666
- "max-inline-size": "400px",
667
- "padding-block-end": "0.5rem",
668
- "padding-block-start": "0.5rem",
669
- "padding-inline-end": "0.75rem",
670
- "padding-inline-start": "0.75rem",
671
- "background-color": "#fff",
672
- "border-color": "#39870c",
673
- "color": "#0F172A",
674
- "invalid": {
675
- "background-color": "#f9dfdd",
676
- "border-color": "#d52b1e",
677
- "color": "#0F172A",
678
- "border-width": "1px"
679
- },
680
- "placeholder": {
681
- "color": "#64748B"
682
- },
683
- "border-block-end-width": "auto",
684
- "border-width": "1px",
685
- "focus": {
686
- "border-width": "2px",
687
- "background-color": "#fff",
688
- "border-color": "#39870c",
689
- "color": "#0F172A"
918
+ "busy": {
919
+ "cursor": "wait"
690
920
  },
691
921
  "disabled": {
692
- "background-color": "#CBD5E1",
693
- "border-color": "#94A3B8",
694
- "color": "#475569"
922
+ "cursor": "not-allowed"
695
923
  },
696
- "read-only": {
697
- "background-color": "#F1F5F9",
698
- "border-color": "transparent",
699
- "color": "#0F172A"
924
+ "inert": {
925
+ "cursor": "default"
700
926
  },
701
- "hover": {
702
- "border-width": "1px",
703
- "background-color": "#fff",
704
- "border-color": "#88B76D",
705
- "color": "#0F172A"
927
+ "navigate": {
928
+ "cursor": "pointer"
929
+ },
930
+ "submit": {
931
+ "cursor": "pointer"
706
932
  }
707
933
  },
708
- "textarea": {
709
- "max-inline-size": "400px",
710
- "padding-block-end": "0.5rem",
711
- "padding-block-start": "0.5rem",
712
- "padding-inline-end": "0.75rem",
713
- "padding-inline-start": "0.75rem",
714
- "background-color": "#fff",
715
- "border-color": "#39870c",
934
+ "unordered-list": {
716
935
  "color": "#0F172A",
717
- "invalid": {
718
- "background-color": "#f9dfdd",
719
- "border-color": "#d52b1e",
720
- "color": "#0F172A",
721
- "border-width": "1px"
722
- },
723
- "placeholder": {
724
- "color": "#64748B"
725
- },
726
- "focus": {
727
- "background-color": "#fff",
728
- "border-color": "#39870c",
729
- "color": "#0F172A",
730
- "border-width": "2px"
731
- },
732
- "disabled": {
733
- "background-color": "#CBD5E1",
734
- "border-color": "#94A3B8",
735
- "color": "#475569"
736
- },
737
- "read-only": {
738
- "background-color": "#F1F5F9",
739
- "border-color": "transparent",
936
+ "marker": {
937
+ "border-color": "#0F172A",
740
938
  "color": "#0F172A"
741
939
  },
742
- "hover": {
743
- "background-color": "#fff",
744
- "border-color": "#88B76D",
745
- "color": "#0F172A",
746
- "border-width": "1px"
747
- },
748
- "border-radius": "2.5px",
749
- "border-bottom-width": "1px",
750
- "border-width": "1px",
751
940
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
752
941
  "font-weight": 400,
942
+ "font-size": "1.25rem",
753
943
  "line-height": "150%",
754
- "font-size": "1.25rem"
944
+ "margin-block-end": "0.25rem",
945
+ "margin-block-start": "0.25rem",
946
+ "padding-inline-start": "1.5rem",
947
+ "item": {
948
+ "margin-block-end": "0.25rem",
949
+ "margin-block-start": "0.25rem",
950
+ "padding-inline-start": "0.5rem"
951
+ }
952
+ },
953
+ "ordered-list": {
954
+ "color": "#0F172A",
955
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
956
+ "font-weight": 400,
957
+ "margin-inline-start": "0.625rem",
958
+ "font-size": "1.25rem",
959
+ "line-height": "150%",
960
+ "margin-block-end": "0.25rem",
961
+ "margin-block-start": "0.25rem",
962
+ "padding-inline-start": "1.5rem",
963
+ "item": {
964
+ "margin-block-end": "0.25rem",
965
+ "margin-block-start": "0.25rem",
966
+ "padding-inline-start": "0.5rem"
967
+ }
968
+ },
969
+ "column-layout": {
970
+ "column-rule-color": "transparent",
971
+ "column-rule-width": "0px",
972
+ "column-width": "400px",
973
+ "gap": "0.75rem"
974
+ },
975
+ "icon": {
976
+ "color": "inherit",
977
+ "size": "24px",
978
+ "inset-block-start": "0rem"
755
979
  },
756
980
  "table": {
757
981
  "header-cell": {
@@ -824,119 +1048,11 @@
824
1048
  "font-size": "1.25rem"
825
1049
  },
826
1050
  "separator": {
827
- "color": "#CBD5E1",
828
1051
  "block-size": "2px",
1052
+ "color": "#CBD5E1",
829
1053
  "margin-block-end": "0.75rem",
830
1054
  "margin-block-start": "0.75rem"
831
1055
  },
832
- "select": {
833
- "image-background-position": "right 0.5rem center",
834
- "icon": {
835
- "size": "24px"
836
- },
837
- "background-color": "#fff",
838
- "border-color": "#39870c",
839
- "color": "#0F172A",
840
- "invalid": {
841
- "background-color": "#f9dfdd",
842
- "border-color": "#d52b1e",
843
- "color": "#0F172A",
844
- "border-width": "1px"
845
- },
846
- "focus": {
847
- "background-color": "#fff",
848
- "border-color": "#39870c",
849
- "color": "#0F172A",
850
- "border-width": "2px"
851
- },
852
- "disabled": {
853
- "background-color": "#CBD5E1",
854
- "border-color": "#94A3B8",
855
- "color": "#475569"
856
- },
857
- "hover": {
858
- "background-color": "#fff",
859
- "border-color": "#88B76D",
860
- "color": "#0F172A",
861
- "border-width": "1px"
862
- },
863
- "padding-block-end": "0.5rem",
864
- "padding-block-start": "0.5rem",
865
- "padding-inline-end": "0.75rem",
866
- "padding-inline-start": "0.75rem",
867
- "border-radius": "2.5px",
868
- "border-bottom-width": "auto",
869
- "border-width": "1px",
870
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
871
- "font-weight": 400,
872
- "line-height": "150%",
873
- "font-size": "1.25rem",
874
- "max-inline-size": "400px"
875
- },
876
- "radio-button": {
877
- "active": {
878
- "border-width": "1px",
879
- "background-color": "#fff",
880
- "border-color": "#6AA549"
881
- },
882
- "size": "24px",
883
- "dot": {
884
- "size": "12px"
885
- },
886
- "background-color": "#fff",
887
- "border-color": "#39870c",
888
- "invalid": {
889
- "background-color": "#f9dfdd",
890
- "border-color": "#d52b1e",
891
- "border-width": "1px"
892
- },
893
- "focus": {
894
- "background-color": "#fff",
895
- "border-color": "#39870c",
896
- "border-width": "2px"
897
- },
898
- "disabled": {
899
- "background-color": "#CBD5E1",
900
- "border-color": "#94A3B8",
901
- "color": "#475569"
902
- },
903
- "checked": {
904
- "background-color": "#39870c",
905
- "border-color": "transparent",
906
- "color": "#fff",
907
- "hover": {
908
- "background-color": "#88B76D",
909
- "border-color": "transparent",
910
- "color": "#fff",
911
- "border-width": "1px"
912
- },
913
- "active": {
914
- "background-color": "#6AA549",
915
- "border-color": "transparent",
916
- "color": "#fff",
917
- "border-width": "1px"
918
- },
919
- "focus": {
920
- "background-color": "#fff",
921
- "border-color": "#39870c",
922
- "color": "#39870c",
923
- "border-width": "2px"
924
- },
925
- "disabled": {
926
- "background-color": "#CBD5E1",
927
- "border-color": "#94A3B8",
928
- "color": "#475569"
929
- },
930
- "border-width": "1px"
931
- },
932
- "hover": {
933
- "background-color": "#fff",
934
- "border-color": "#88B76D",
935
- "border-width": "1px"
936
- },
937
- "border-radius": "999px",
938
- "border-width": "1px"
939
- },
940
1056
  "pre-heading": {
941
1057
  "color": "#0F172A",
942
1058
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
@@ -1013,59 +1129,11 @@
1013
1129
  "heading-6": {
1014
1130
  "color": "#154273",
1015
1131
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1016
- "font-size": "1.25rem",
1017
- "font-weight": 700,
1018
- "line-height": "150%",
1019
- "margin-block-end": "0rem",
1020
- "margin-block-start": "0rem"
1021
- },
1022
- "form-label": {
1023
- "color": "#0F172A",
1024
- "font-size": "1.25rem",
1025
- "font-weight": 700
1026
- },
1027
- "form-field-label": {
1028
- "color": "#0F172A",
1029
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1030
- "font-size": "1.25rem",
1031
- "font-weight": 700,
1032
- "line-height": "150%"
1033
- },
1034
- "form-field-error-message": {
1035
- "icon": {
1036
- "size": "24px",
1037
- "margin-inline-end": "0.5rem"
1038
- },
1039
- "color": "#d52b1e",
1040
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1041
- "font-size": "1.25rem",
1042
- "font-weight": 400,
1043
- "margin-block-end": "0.5rem",
1044
- "padding-block-end": "0.5rem"
1045
- },
1046
- "form-field-description": {
1047
- "color": "#334155",
1048
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1049
- "font-size": "1.25rem",
1050
- "line-height": "150%",
1051
- "margin-block-start": "-0.5rem",
1052
- "margin-block-end": "0.5rem",
1053
- "padding-block-end": "0.5rem"
1054
- },
1055
- "form-field": {
1056
- "margin-block-start": "0.5rem",
1057
- "margin-block-end": "0.5rem",
1058
- "invalid": {
1059
- "border-inline-start-color": "#d52b1e",
1060
- "border-inline-start-width": "0px",
1061
- "padding-inline-start": "0rem"
1062
- },
1063
- "label": {
1064
- "margin-block-end": "0.5rem"
1065
- },
1066
- "error-message": {
1067
- "line-height": "normal"
1068
- }
1132
+ "font-size": "1.25rem",
1133
+ "font-weight": 700,
1134
+ "line-height": "150%",
1135
+ "margin-block-end": "0rem",
1136
+ "margin-block-start": "0rem"
1069
1137
  },
1070
1138
  "page-footer": {
1071
1139
  "background-color": "#39870c",
@@ -1075,24 +1143,6 @@
1075
1143
  "padding-inline-start": "80px",
1076
1144
  "padding-inline-end": "80px"
1077
1145
  },
1078
- "figure": {
1079
- "caption": {
1080
- "border-color": "#CBD5E1",
1081
- "border-width": "4px",
1082
- "color": "#39870c",
1083
- "padding-block-end": "0.5rem",
1084
- "padding-block-start": "0.5rem",
1085
- "padding-inline-start": "1rem",
1086
- "line-height": "150%",
1087
- "font-size": "1.25rem"
1088
- },
1089
- "img": {
1090
- "border-end-end-radius": 0,
1091
- "border-end-start-radius": 0,
1092
- "border-start-end-radius": 0,
1093
- "border-start-start-radius": 0
1094
- }
1095
- },
1096
1146
  "form-fieldset": {
1097
1147
  "legend": {
1098
1148
  "color": "#0F172A",
@@ -1116,227 +1166,332 @@
1116
1166
  "border-inline-start-width": "0px"
1117
1167
  }
1118
1168
  },
1119
- "number-badge": {
1120
- "font-size": "1.25rem",
1121
- "line-height": "125%",
1122
- "min-block-size": "24px",
1123
- "min-inline-size": "24px",
1124
- "font-weight": 700,
1125
- "border-width": "0px",
1126
- "border-radius": "999px",
1169
+ "article": {
1170
+ "max-inline-size": "75ch"
1171
+ },
1172
+ "document": {
1173
+ "background-color": "#fff",
1174
+ "color": "#0F172A",
1127
1175
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1128
- "background-color": "#39870c",
1129
- "border-color": "transparent",
1130
- "color": "#fff",
1131
- "padding-inline": "0.5rem",
1132
- "padding-block": "0.125rem"
1176
+ "font-size": "1.25rem",
1177
+ "line-height": "150%",
1178
+ "font-weight": 400
1133
1179
  },
1134
- "checkbox": {
1135
- "border-radius": "2.5px",
1136
- "size": "24px",
1137
- "icon": {
1138
- "size": "24px"
1180
+ "rich-text": {
1181
+ "stranger": {
1182
+ "margin-block-end": "2rem"
1139
1183
  },
1140
- "background-color": "#fff",
1141
- "border-color": "#39870c",
1142
- "invalid": {
1143
- "background-color": "#f9dfdd",
1144
- "border-color": "#d52b1e",
1145
- "border-width": "1px"
1184
+ "acquaintance": {
1185
+ "margin-block-end": "1rem"
1146
1186
  },
1147
- "focus": {
1148
- "background-color": "#fff",
1149
- "border-color": "#39870c",
1150
- "border-width": "2px"
1187
+ "friend": {
1188
+ "margin-block-end": "0.5rem"
1151
1189
  },
1152
- "disabled": {
1153
- "background-color": "#CBD5E1",
1154
- "border-color": "#94A3B8"
1190
+ "best-friend": {
1191
+ "margin-block-end": "0.25rem"
1155
1192
  },
1156
- "checked": {
1157
- "background-color": "#39870c",
1158
- "border-color": "transparent",
1159
- "color": "#fff",
1160
- "border-width": "1px",
1193
+ "confidant": {
1194
+ "margin-block-end": "0rem"
1195
+ }
1196
+ },
1197
+ "pointer-target": {
1198
+ "min-size": "48px"
1199
+ },
1200
+ "focus": {
1201
+ "outline-color": "#000",
1202
+ "outline-offset": "0.125rem",
1203
+ "outline-style": "solid",
1204
+ "outline-width": "2px",
1205
+ "inverse": {
1206
+ "outline-color": "#fff"
1207
+ }
1208
+ }
1209
+ },
1210
+ "todo": {
1211
+ "checkbox": {
1212
+ "indeterminate": {
1213
+ "active": {
1214
+ "background-color": "#4f7196",
1215
+ "border-color": "transparent",
1216
+ "border-width": "1px",
1217
+ "color": "#fff"
1218
+ },
1161
1219
  "disabled": {
1162
1220
  "background-color": "#CBD5E1",
1163
1221
  "border-color": "#94A3B8",
1164
1222
  "color": "#475569"
1165
1223
  },
1166
- "focus": {
1167
- "border-width": "2px",
1168
- "background-color": "#fff",
1169
- "border-color": "#39870c",
1170
- "color": "#39870c"
1171
- },
1172
1224
  "hover": {
1173
- "border-width": "1px",
1174
- "background-color": "#88B76D",
1225
+ "background-color": "#738eab",
1175
1226
  "border-color": "transparent",
1227
+ "border-width": "1px",
1176
1228
  "color": "#fff"
1177
1229
  },
1230
+ "focus-visible": {
1231
+ "background-color": "#fff",
1232
+ "border-color": "#154273",
1233
+ "border-width": "2px",
1234
+ "color": "#154273"
1235
+ }
1236
+ },
1237
+ "checked": {
1178
1238
  "active": {
1179
- "border-width": "1px",
1180
- "background-color": "#6AA549",
1239
+ "background-color": "#4f7196",
1181
1240
  "border-color": "transparent",
1241
+ "border-width": "1px",
1182
1242
  "color": "#fff"
1183
- }
1184
- },
1185
- "indeterminate": {
1186
- "background-color": "#39870c",
1187
- "border-color": "transparent",
1188
- "color": "#fff",
1189
- "border-width": "1px",
1243
+ },
1190
1244
  "disabled": {
1191
1245
  "background-color": "#CBD5E1",
1192
1246
  "border-color": "#94A3B8",
1193
1247
  "color": "#475569"
1194
1248
  },
1195
- "active": {
1196
- "background-color": "#6AA549",
1197
- "border-color": "transparent",
1198
- "color": "#fff",
1199
- "border-width": "1px"
1200
- },
1201
1249
  "hover": {
1202
- "background-color": "#88B76D",
1250
+ "background-color": "#738eab",
1203
1251
  "border-color": "transparent",
1204
- "color": "#fff",
1205
- "border-width": "1px"
1252
+ "border-width": "1px",
1253
+ "color": "#fff"
1206
1254
  },
1207
- "focus": {
1255
+ "focus-visible": {
1208
1256
  "background-color": "#fff",
1209
- "border-color": "#39870c",
1210
- "color": "#39870c",
1211
- "border-width": "2px"
1257
+ "border-color": "#154273",
1258
+ "border-width": "2px",
1259
+ "color": "#154273"
1212
1260
  }
1213
- },
1214
- "border-width": "1px",
1261
+ }
1262
+ },
1263
+ "radio-button": {
1264
+ "checked": {
1265
+ "disabled": {
1266
+ "background-color": "#CBD5E1",
1267
+ "border-color": "#94A3B8",
1268
+ "color": "#475569"
1269
+ }
1270
+ }
1271
+ },
1272
+ "textbox": {
1215
1273
  "hover": {
1216
- "border-width": "1px",
1217
1274
  "background-color": "#fff",
1218
- "border-color": "#88B76D"
1219
- },
1220
- "active": {
1221
- "border-width": "1px",
1275
+ "border-color": "#738eab",
1276
+ "color": "#0F172A"
1277
+ }
1278
+ },
1279
+ "form-field-label": {
1280
+ "color": "#0F172A",
1281
+ "column-gap": "0.5rem",
1282
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1283
+ "font-size": "1.25rem",
1284
+ "font-weight": 700,
1285
+ "line-height": "150%"
1286
+ },
1287
+ "textarea": {
1288
+ "hover": {
1222
1289
  "background-color": "#fff",
1223
- "border-color": "#6AA549"
1290
+ "border-color": "#738eab",
1291
+ "color": "#0F172A"
1224
1292
  }
1225
1293
  },
1226
- "article": {
1227
- "max-inline-size": "75ch"
1294
+ "form-field-error-message": {
1295
+ "column-gap": "0.5rem",
1296
+ "icon": {
1297
+ "size": "24px"
1298
+ }
1299
+ },
1300
+ "figure": {
1301
+ "row-gap": "0.5rem"
1302
+ },
1303
+ "accordion": {
1304
+ "button": {
1305
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1306
+ "font-size": "1.25rem",
1307
+ "font-weight": 400,
1308
+ "line-height": "150%"
1309
+ }
1310
+ },
1311
+ "link-list": {
1312
+ "link": {
1313
+ "hover": {
1314
+ "text-decoration": "underline"
1315
+ }
1316
+ }
1317
+ },
1318
+ "skip-link": {
1319
+ "font-weight": 700
1320
+ }
1321
+ },
1322
+ "nl": {
1323
+ "number-badge": {
1324
+ "line-height": "125%",
1325
+ "background-color": "#39870c",
1326
+ "border-color": "transparent",
1327
+ "border-radius": "999px",
1328
+ "border-width": "0px",
1329
+ "color": "#fff",
1330
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1331
+ "font-size": "1.25rem",
1332
+ "font-weight": 700,
1333
+ "min-block-size": "24px",
1334
+ "min-inline-size": "24px",
1335
+ "padding-block": "0.125rem",
1336
+ "padding-inline": "0.5rem"
1337
+ },
1338
+ "skip-link": {
1339
+ "border-color": "transparent",
1340
+ "border-width": "2px",
1341
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1342
+ "font-weight": 700,
1343
+ "padding-block-end": "0.75rem",
1344
+ "padding-block-start": "0.75rem",
1345
+ "padding-inline-end": "1rem",
1346
+ "padding-inline-start": "1rem",
1347
+ "box-block-end-shadow": {
1348
+ "blur-radius": "48px",
1349
+ "color": "#0000001a",
1350
+ "offset-x": 0,
1351
+ "offset-y": "16px",
1352
+ "spread-radius": 0
1353
+ },
1354
+ "focus": {
1355
+ "background-color": "#fff",
1356
+ "border-color": "#39870c",
1357
+ "border-style": "solid",
1358
+ "border-width": "2px",
1359
+ "color": "#0F172A",
1360
+ "text-decoration": "None"
1361
+ },
1362
+ "focus-visible": {
1363
+ "outline-color": "#000"
1364
+ },
1365
+ "text-decoration": "underline",
1366
+ "background-color": "#fff",
1367
+ "color": "#01689b",
1368
+ "padding-block": "0.75rem",
1369
+ "padding-inline": "1rem",
1370
+ "min-block-size": "48px",
1371
+ "min-inline-size": "48px",
1372
+ "text-decoration-thickness": "0.0625em",
1373
+ "text-underline-offset": "0.125rem",
1374
+ "line-height": "150%",
1375
+ "font-size": "1.25rem"
1228
1376
  },
1229
- "alert": {
1230
- "heading": {
1231
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1232
- "font-weight": 700,
1233
- "line-height": "150%",
1234
- "font-size": "1.25rem"
1377
+ "link": {
1378
+ "column-gap": "0.25rem",
1379
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1380
+ "font-size": "1.25rem",
1381
+ "font-weight": 400,
1382
+ "line-height": "150%",
1383
+ "icon": {
1384
+ "inset-block-start": "0.25rem",
1385
+ "size": "24px"
1235
1386
  },
1236
- "column-gap": "0.5rem",
1237
- "border-width": "0px",
1238
- "margin-block-end": "0.75rem",
1239
- "margin-block-start": "0.75rem",
1240
- "padding-block-end": "1rem",
1241
- "padding-block-start": "1rem",
1242
- "padding-inline-end": "1rem",
1243
- "padding-inline-start": "1rem",
1244
- "background-color": "#d9ebf7",
1245
- "border-color": "transparent",
1246
- "color": "#000",
1247
- "info": {
1248
- "background-color": "#d9ebf7",
1249
- "border-color": "transparent",
1250
- "color": "#000"
1387
+ "active": {
1388
+ "text-decoration": "None",
1389
+ "color": "#1a4972"
1251
1390
  },
1252
- "error": {
1253
- "background-color": "#f9dfdd",
1254
- "border-color": "transparent",
1255
- "color": "#000"
1391
+ "focus": {
1392
+ "background-color": "transparent",
1393
+ "color": "#01689b",
1394
+ "text-decoration": "None",
1395
+ "text-decoration-thickness": "auto"
1256
1396
  },
1257
- "ok": {
1258
- "background-color": "#e1eddb",
1259
- "border-color": "transparent",
1260
- "color": "#000"
1397
+ "visited": {
1398
+ "color": "#01689b"
1261
1399
  },
1262
- "warning": {
1263
- "background-color": "#fff4db",
1264
- "border-color": "transparent",
1265
- "color": "#000"
1400
+ "color": "#01689b",
1401
+ "text-decoration-color": "inherit",
1402
+ "text-decoration-line": "underline",
1403
+ "text-decoration-thickness": "0.0625em",
1404
+ "text-underline-offset": "0.125rem",
1405
+ "current": {
1406
+ "cursor": "default"
1266
1407
  },
1267
- "icon": {
1268
- "inset-block-start": "3px",
1269
- "info": {
1270
- "color": "#007bc7"
1271
- },
1272
- "error": {
1273
- "color": "#d52b1e"
1274
- },
1275
- "ok": {
1276
- "color": "#39870c"
1277
- },
1278
- "warning": {
1279
- "color": "#ffb612"
1280
- },
1281
- "size": "24px"
1408
+ "disabled": {
1409
+ "color": "#334155",
1410
+ "cursor": "disabled"
1282
1411
  },
1283
- "message": {
1412
+ "hover": {
1413
+ "text-decoration-line": "underline",
1414
+ "text-decoration-thickness": "auto",
1415
+ "color": "#01496c"
1416
+ }
1417
+ },
1418
+ "paragraph": {
1419
+ "lead": {
1420
+ "color": "#0F172A",
1421
+ "font-size": "1.5rem",
1422
+ "font-weight": 400,
1284
1423
  "line-height": "150%",
1285
- "column-gap": "0.5rem"
1424
+ "margin-block-end": "0rem",
1425
+ "margin-block-start": "0rem"
1286
1426
  },
1287
- "border-radius": "5px"
1288
- },
1289
- "document": {
1290
- "background-color": "#fff",
1291
1427
  "color": "#0F172A",
1292
1428
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1293
1429
  "font-size": "1.25rem",
1430
+ "font-weight": 400,
1294
1431
  "line-height": "150%",
1295
- "font-weight": 400
1432
+ "margin-block-end": "0rem",
1433
+ "margin-block-start": "0rem"
1296
1434
  },
1297
- "rich-text": {
1298
- "stranger": {
1299
- "margin-block-end": "2rem"
1435
+ "heading": {
1436
+ "level-1": {
1437
+ "color": "#154273",
1438
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1439
+ "font-size": "3.125rem",
1440
+ "font-weight": 700,
1441
+ "line-height": "125%",
1442
+ "margin-block-end": "0rem",
1443
+ "margin-block-start": "0rem"
1300
1444
  },
1301
- "acquaintance": {
1302
- "margin-block-end": "1rem"
1445
+ "level-2": {
1446
+ "color": "#154273",
1447
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1448
+ "font-size": "2.5rem",
1449
+ "font-weight": 700,
1450
+ "line-height": "125%",
1451
+ "margin-block-end": "0rem",
1452
+ "margin-block-start": "0rem"
1303
1453
  },
1304
- "friend": {
1305
- "margin-block-end": "0.5rem"
1454
+ "level-3": {
1455
+ "color": "#154273",
1456
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1457
+ "font-size": "1.875rem",
1458
+ "font-weight": 700,
1459
+ "line-height": "125%",
1460
+ "margin-block-end": "0rem",
1461
+ "margin-block-start": "0rem"
1306
1462
  },
1307
- "best-friend": {
1308
- "margin-block-end": "0.25rem"
1463
+ "level-4": {
1464
+ "color": "#154273",
1465
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1466
+ "font-size": "1.5rem",
1467
+ "font-weight": 700,
1468
+ "line-height": "150%",
1469
+ "margin-block-end": "0rem",
1470
+ "margin-block-start": "0rem"
1309
1471
  },
1310
- "confidant": {
1311
- "margin-block-end": "0rem"
1312
- }
1313
- },
1314
- "pointer-target": {
1315
- "min-size": "48px"
1316
- },
1317
- "focus": {
1318
- "outline-color": "#000",
1319
- "outline-offset": "0.125rem",
1320
- "outline-style": "solid",
1321
- "outline-width": "2px",
1322
- "inverse": {
1323
- "outline-color": "#fff"
1472
+ "level-5": {
1473
+ "color": "#154273",
1474
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1475
+ "font-size": "1.25rem",
1476
+ "font-weight": 700,
1477
+ "line-height": "150%",
1478
+ "margin-block-end": "0rem",
1479
+ "margin-block-start": "0rem"
1480
+ },
1481
+ "level-6": {
1482
+ "color": "#154273",
1483
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1484
+ "font-size": "1.25rem",
1485
+ "font-weight": 700,
1486
+ "line-height": "150%",
1487
+ "margin-block-end": "0rem",
1488
+ "margin-block-start": "0rem"
1324
1489
  }
1325
1490
  }
1326
1491
  },
1327
1492
  "rhc": {
1328
- "link-list": {
1329
- "text-decoration": "None"
1330
- },
1331
- "data-badge-button": {
1332
- "column-gap": "0.125rem",
1333
- "hover": {
1334
- "background-color": "#39870c",
1335
- "color": "#fff"
1336
- }
1337
- },
1338
1493
  "keep": {
1339
- "_comment": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset common/rounded-corner.",
1494
+ "_comment": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.",
1340
1495
  "top-left": {
1341
1496
  "borderRadiusTopLeft": "48px",
1342
1497
  "borderRadiusTopRight": 0,
@@ -1362,27 +1517,18 @@
1362
1517
  "borderRadiusBottomLeft": "48px"
1363
1518
  }
1364
1519
  },
1365
- "rounded-corner": {
1366
- "xs": {
1367
- "border-radius": "24px"
1368
- },
1369
- "md": {
1370
- "border-radius": "48px"
1520
+ "accordion": {
1521
+ "border-radius": "0px",
1522
+ "color": "#0F172A",
1523
+ "header": {
1524
+ "margin": 0
1371
1525
  },
1372
- "xl": {
1373
- "border-radius": "96px"
1526
+ "section": {
1527
+ "border-block-end-width": "1px",
1528
+ "border-color": "#94A3B8",
1529
+ "border-width": "1px"
1374
1530
  },
1375
- "border-width": "2px"
1376
- },
1377
- "accordion": {
1378
1531
  "button": {
1379
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1380
- "font-size": "1.25rem",
1381
- "font-weight": 400,
1382
- "line-height": "150%",
1383
- "icon": {
1384
- "margin-block": "0.25rem"
1385
- },
1386
1532
  "padding-block-end": "0.75rem",
1387
1533
  "padding-block-start": "0.75rem",
1388
1534
  "padding-inline-end": "1rem",
@@ -1390,18 +1536,37 @@
1390
1536
  "expanded": {
1391
1537
  "background-color": "#fff",
1392
1538
  "color": "#0F172A"
1393
- }
1539
+ },
1540
+ "icon": {
1541
+ "margin-block": "0.25rem"
1542
+ },
1543
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1544
+ "font-weight": 400,
1545
+ "font-size": "1.25rem",
1546
+ "line-height": "150%"
1547
+ }
1548
+ },
1549
+ "link-list": {
1550
+ "text-decoration": "None"
1551
+ },
1552
+ "data-badge-button": {
1553
+ "column-gap": "0.125rem",
1554
+ "hover": {
1555
+ "background-color": "#39870c",
1556
+ "color": "#fff"
1557
+ }
1558
+ },
1559
+ "rounded-corner": {
1560
+ "xs": {
1561
+ "border-radius": "24px"
1394
1562
  },
1395
- "section": {
1396
- "border-block-end-width": "1px",
1397
- "border-width": 0,
1398
- "border-color": "#94A3B8"
1563
+ "md": {
1564
+ "border-radius": "48px"
1399
1565
  },
1400
- "header": {
1401
- "margin": 0
1566
+ "xl": {
1567
+ "border-radius": "96px"
1402
1568
  },
1403
- "border-radius": "0px",
1404
- "color": "#0F172A"
1569
+ "border-width": "2px"
1405
1570
  },
1406
1571
  "data-summary": {
1407
1572
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
@@ -2185,17 +2350,5 @@
2185
2350
  "600": "3rem",
2186
2351
  "700": "3.5rem"
2187
2352
  }
2188
- },
2189
- "todo": {
2190
- "link-list": {
2191
- "link": {
2192
- "hover": {
2193
- "text-decoration": "underline"
2194
- }
2195
- }
2196
- },
2197
- "skip-link": {
2198
- "font-weight": 700
2199
- }
2200
2353
  }
2201
2354
  }