@rijkshuisstijl-community/design-tokens 2.0.0 → 3.0.0

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