@rijkshuisstijl-community/design-tokens 3.0.0 → 4.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 (104) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/_variables.scss +290 -221
  3. package/dist/index.css +290 -221
  4. package/dist/index.d.ts +280 -211
  5. package/dist/index.js +290 -221
  6. package/dist/index.json +290 -221
  7. package/dist/index.tokens.json +464 -318
  8. package/dist/koop/_variables.scss +1425 -0
  9. package/dist/koop/index.css +1428 -0
  10. package/dist/koop/index.d.ts +1426 -0
  11. package/dist/koop/index.js +1426 -0
  12. package/dist/koop/index.json +1423 -0
  13. package/dist/koop/index.tokens.json +2201 -0
  14. package/dist/koop/root.css +1428 -0
  15. package/dist/koop/tokens.d.ts +2224 -0
  16. package/dist/koop/tokens.js +33522 -0
  17. package/dist/root.css +290 -221
  18. package/dist/tokens.d.ts +409 -270
  19. package/dist/tokens.js +6775 -4888
  20. package/dist/uitvoerend-groen/_variables.scss +936 -848
  21. package/dist/uitvoerend-groen/index.css +936 -848
  22. package/dist/uitvoerend-groen/index.d.ts +978 -890
  23. package/dist/uitvoerend-groen/index.js +993 -905
  24. package/dist/uitvoerend-groen/index.json +962 -874
  25. package/dist/uitvoerend-groen/index.tokens.json +1836 -1680
  26. package/dist/uitvoerend-groen/root.css +936 -848
  27. package/dist/uitvoerend-groen/tokens.d.ts +1764 -1608
  28. package/dist/uitvoerend-groen/tokens.js +24764 -22418
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +936 -848
  30. package/dist/uitvoerend-hemelblauw/index.css +936 -848
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +978 -890
  32. package/dist/uitvoerend-hemelblauw/index.js +993 -905
  33. package/dist/uitvoerend-hemelblauw/index.json +962 -874
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +1835 -1679
  35. package/dist/uitvoerend-hemelblauw/root.css +936 -848
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +1764 -1608
  37. package/dist/uitvoerend-hemelblauw/tokens.js +24906 -22560
  38. package/dist/uitvoerend-mintgroen/_variables.scss +936 -848
  39. package/dist/uitvoerend-mintgroen/index.css +936 -848
  40. package/dist/uitvoerend-mintgroen/index.d.ts +978 -890
  41. package/dist/uitvoerend-mintgroen/index.js +993 -905
  42. package/dist/uitvoerend-mintgroen/index.json +962 -874
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +1836 -1680
  44. package/dist/uitvoerend-mintgroen/root.css +936 -848
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +1764 -1608
  46. package/dist/uitvoerend-mintgroen/tokens.js +24764 -22418
  47. package/dist/uitvoerend-oranje/_variables.scss +936 -848
  48. package/dist/uitvoerend-oranje/index.css +936 -848
  49. package/dist/uitvoerend-oranje/index.d.ts +978 -890
  50. package/dist/uitvoerend-oranje/index.js +993 -905
  51. package/dist/uitvoerend-oranje/index.json +962 -874
  52. package/dist/uitvoerend-oranje/index.tokens.json +1836 -1680
  53. package/dist/uitvoerend-oranje/root.css +936 -848
  54. package/dist/uitvoerend-oranje/tokens.d.ts +1764 -1608
  55. package/dist/uitvoerend-oranje/tokens.js +24764 -22418
  56. package/dist/uitvoerend-paars/_variables.scss +936 -848
  57. package/dist/uitvoerend-paars/index.css +936 -848
  58. package/dist/uitvoerend-paars/index.d.ts +978 -890
  59. package/dist/uitvoerend-paars/index.js +993 -905
  60. package/dist/uitvoerend-paars/index.json +962 -874
  61. package/dist/uitvoerend-paars/index.tokens.json +1836 -1680
  62. package/dist/uitvoerend-paars/root.css +936 -848
  63. package/dist/uitvoerend-paars/tokens.d.ts +1764 -1608
  64. package/dist/uitvoerend-paars/tokens.js +24764 -22418
  65. package/dist/uitvoerend-violet/_variables.scss +936 -848
  66. package/dist/uitvoerend-violet/index.css +936 -848
  67. package/dist/uitvoerend-violet/index.d.ts +978 -890
  68. package/dist/uitvoerend-violet/index.js +993 -905
  69. package/dist/uitvoerend-violet/index.json +962 -874
  70. package/dist/uitvoerend-violet/index.tokens.json +1836 -1680
  71. package/dist/uitvoerend-violet/root.css +936 -848
  72. package/dist/uitvoerend-violet/tokens.d.ts +1764 -1608
  73. package/dist/uitvoerend-violet/tokens.js +24764 -22418
  74. package/dist/uitvoerend-violet-oud/_variables.scss +936 -848
  75. package/dist/uitvoerend-violet-oud/index.css +936 -848
  76. package/dist/uitvoerend-violet-oud/index.d.ts +979 -891
  77. package/dist/uitvoerend-violet-oud/index.js +963 -875
  78. package/dist/uitvoerend-violet-oud/index.json +963 -875
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +1833 -1677
  80. package/dist/uitvoerend-violet-oud/root.css +936 -848
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +1381 -1225
  82. package/dist/uitvoerend-violet-oud/tokens.js +25102 -22756
  83. package/dist/wetgevend/_variables.scss +936 -848
  84. package/dist/wetgevend/index.css +936 -848
  85. package/dist/wetgevend/index.d.ts +978 -890
  86. package/dist/wetgevend/index.js +993 -905
  87. package/dist/wetgevend/index.json +962 -874
  88. package/dist/wetgevend/index.tokens.json +1636 -1480
  89. package/dist/wetgevend/root.css +936 -848
  90. package/dist/wetgevend/tokens.d.ts +1463 -1307
  91. package/dist/wetgevend/tokens.js +25526 -23180
  92. package/figma/figma.tokens.json +2154 -2247
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +1665 -1228
  95. package/src/generated/koop/tokens.json +6732 -0
  96. package/src/generated/themes.json +48640 -37872
  97. package/src/generated/uitvoerend-groen/tokens.json +5207 -4703
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +5212 -4708
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +5208 -4704
  100. package/src/generated/uitvoerend-oranje/tokens.json +5208 -4704
  101. package/src/generated/uitvoerend-paars/tokens.json +5200 -4696
  102. package/src/generated/uitvoerend-violet/tokens.json +5208 -4704
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +5200 -4696
  104. package/src/generated/wetgevend/tokens.json +5377 -4873
@@ -1,1051 +1,780 @@
1
1
  {
2
- "rhc": {
3
- "data-summary": {
2
+ "nl": {
3
+ "skip-link": {
4
+ "border-color": "transparent",
5
+ "border-width": "2px",
4
6
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
5
- "item-value": {
6
- "font-weight": 400,
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
7
+ "font-weight": 700,
8
+ "padding-block-end": "0.75rem",
9
+ "padding-block-start": "0.75rem",
10
+ "padding-inline-end": "1rem",
11
+ "padding-inline-start": "1rem",
12
+ "box-block-end-shadow": {
13
+ "blur-radius": "48px",
14
+ "color": "#0000001a",
15
+ "offset-x": 0,
16
+ "offset-y": "16px",
17
+ "spread-radius": 0
17
18
  },
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
19
+ "focus": {
20
+ "background-color": "#fff",
21
+ "border-color": "#154273",
22
+ "border-style": "solid",
23
+ "border-width": "2px",
24
+ "color": "#0F172A",
25
+ "text-decoration": "None"
30
26
  },
31
- "item": {
32
- "border-width": "1px",
33
- "border-color": "#CBD5E1",
34
- "border-block-end-style": "solid",
35
- "color": "#0F172A"
27
+ "focus-visible": {
28
+ "outline-color": "#000"
36
29
  },
37
- "font-size": "1.25rem",
30
+ "text-decoration": "underline",
31
+ "background-color": "#fff",
32
+ "color": "#01689b",
33
+ "padding-block": "0.75rem",
34
+ "padding-inline": "1rem",
35
+ "min-block-size": "48px",
36
+ "min-inline-size": "48px",
37
+ "text-decoration-thickness": "0.0625em",
38
+ "text-underline-offset": "0.125rem",
38
39
  "line-height": "150%",
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
50
- }
40
+ "font-size": "1.25rem"
51
41
  },
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
42
+ "link": {
43
+ "column-gap": "0.25rem",
44
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
45
+ "font-size": "1.25rem",
46
+ "font-weight": 400,
47
+ "line-height": "150%",
48
+ "icon": {
49
+ "inset-block-start": "0.25rem",
50
+ "size": "24px"
59
51
  },
60
- "top-right": {
61
- "borderRadiusTopRight": "48px",
62
- "borderRadiusTopLeft": 0,
63
- "borderRadiusBottomRight": 0,
64
- "borderRadiusBottomLeft": 0
52
+ "active": {
53
+ "text-decoration": "None",
54
+ "color": "#1a4972"
65
55
  },
66
- "bottom-right": {
67
- "borderRadiusTopLeft": 0,
68
- "borderRadiusTopRight": 0,
69
- "borderRadiusBottomRight": "48px",
70
- "borderRadiusBottomLeft": 0
56
+ "focus": {
57
+ "background-color": "transparent",
58
+ "color": "#01689b",
59
+ "text-decoration": "None",
60
+ "text-decoration-thickness": "auto"
71
61
  },
72
- "bottom-left": {
73
- "borderRadiusTopLeft": 0,
74
- "borderRadiusTopRight": 0,
75
- "borderRadiusBottomRight": 0,
76
- "borderRadiusBottomLeft": "48px"
62
+ "visited": {
63
+ "color": "#01689b"
64
+ },
65
+ "color": "#01689b",
66
+ "text-decoration-color": "inherit",
67
+ "text-decoration-line": "underline",
68
+ "text-decoration-thickness": "0.0625em",
69
+ "text-underline-offset": "0.125rem",
70
+ "current": {
71
+ "cursor": "default"
72
+ },
73
+ "disabled": {
74
+ "color": "#334155",
75
+ "cursor": "disabled"
76
+ },
77
+ "hover": {
78
+ "text-decoration-line": "underline",
79
+ "text-decoration-thickness": "auto",
80
+ "color": "#01496c"
77
81
  }
78
82
  },
79
- "rounded-corner": {
80
- "xs": {
81
- "border-radius": "24px"
83
+ "paragraph": {
84
+ "lead": {
85
+ "color": "#0F172A",
86
+ "font-size": "1.5rem",
87
+ "font-weight": 400,
88
+ "line-height": "150%",
89
+ "margin-block-end": "0rem",
90
+ "margin-block-start": "0rem"
82
91
  },
83
- "md": {
84
- "border-radius": "48px"
92
+ "color": "#0F172A",
93
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
94
+ "font-size": "1.25rem",
95
+ "font-weight": 400,
96
+ "line-height": "150%",
97
+ "margin-block-end": "0rem",
98
+ "margin-block-start": "0rem"
99
+ },
100
+ "heading": {
101
+ "level-1": {
102
+ "color": "#154273",
103
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
104
+ "font-size": "3.125rem",
105
+ "font-weight": 700,
106
+ "line-height": "125%",
107
+ "margin-block-end": "0rem",
108
+ "margin-block-start": "0rem"
85
109
  },
86
- "xl": {
87
- "border-radius": "96px"
110
+ "level-2": {
111
+ "color": "#154273",
112
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
113
+ "font-size": "2.5rem",
114
+ "font-weight": 700,
115
+ "line-height": "125%",
116
+ "margin-block-end": "0rem",
117
+ "margin-block-start": "0rem"
88
118
  },
89
- "border-width": "2px"
90
- },
91
- "sub-nav-bar": {
92
- "background-color": "#f2f4f6",
93
- "column-gap": "0.5rem",
94
- "column-width": "375px",
95
- "padding-block-end": "2rem",
96
- "padding-block-start": "2rem",
97
- "inline-size": "100%",
98
- "content": {
99
- "padding-inline-end": "1rem",
100
- "padding-inline-start": "1rem",
101
- "max-inline-size": "1280px",
102
- "list": {
103
- "row-gap": "0.5rem"
104
- }
119
+ "level-3": {
120
+ "color": "#154273",
121
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
122
+ "font-size": "1.875rem",
123
+ "font-weight": 700,
124
+ "line-height": "125%",
125
+ "margin-block-end": "0rem",
126
+ "margin-block-start": "0rem"
127
+ },
128
+ "level-4": {
129
+ "color": "#154273",
130
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
131
+ "font-size": "1.5rem",
132
+ "font-weight": 700,
133
+ "line-height": "150%",
134
+ "margin-block-end": "0rem",
135
+ "margin-block-start": "0rem"
136
+ },
137
+ "level-5": {
138
+ "color": "#154273",
139
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
140
+ "font-size": "1.25rem",
141
+ "font-weight": 700,
142
+ "line-height": "150%",
143
+ "margin-block-end": "0rem",
144
+ "margin-block-start": "0rem"
145
+ },
146
+ "level-6": {
147
+ "color": "#154273",
148
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
149
+ "font-size": "1.25rem",
150
+ "font-weight": 700,
151
+ "line-height": "150%",
152
+ "margin-block-end": "0rem",
153
+ "margin-block-start": "0rem"
105
154
  }
106
155
  },
107
- "toggletip": {
156
+ "number-badge": {
157
+ "font-size": "1.25rem",
158
+ "line-height": "125%",
159
+ "min-block-size": "24px",
160
+ "min-inline-size": "24px",
161
+ "font-weight": 700,
162
+ "border-width": "0px",
163
+ "border-radius": "999px",
164
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
165
+ "background-color": "#154273",
166
+ "border-color": "transparent",
108
167
  "color": "#fff",
109
- "background-color": "#007bc7",
168
+ "padding-inline": "0.5rem",
169
+ "padding-block": "0.125rem"
170
+ }
171
+ },
172
+ "utrecht": {
173
+ "skip-link": {
174
+ "focus": {
175
+ "text-decoration": "None",
176
+ "border-color": "#154273",
177
+ "border-width": "2px",
178
+ "border-style": "solid",
179
+ "background-color": "#fff",
180
+ "color": "#01689b"
181
+ },
110
182
  "border-color": "transparent",
111
- "border-radius": "5px",
112
- "border-width": "1px",
183
+ "box-block-end-shadow": {
184
+ "color": "#0000001a",
185
+ "blur-radius": "48px",
186
+ "offset-x": 0,
187
+ "offset-y": "16px",
188
+ "spread-radius": 0
189
+ },
190
+ "focus-visible": {
191
+ "outline-color": "#000",
192
+ "text-decoration": "underline"
193
+ },
194
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
195
+ "font-weight": 700,
196
+ "line-height": "150%",
197
+ "border-width": "2px",
198
+ "text-underline-offset": "0.125rem",
199
+ "font-size": "1.25rem",
200
+ "background-color": "#fff",
201
+ "color": "#01689b",
202
+ "min-block-size": "48px",
203
+ "min-inline-size": "48px",
204
+ "padding-block-end": "0.75rem",
205
+ "padding-block-start": "0.75rem",
206
+ "padding-inline-end": "1rem",
207
+ "padding-inline-start": "1rem",
208
+ "text-decoration": "underline"
209
+ },
210
+ "link-list": {
211
+ "item": {
212
+ "text-decoration": "None",
213
+ "column-gap": "0.5rem"
214
+ },
215
+ "margin-block-end": "0rem",
216
+ "margin-block-start": "0rem",
217
+ "row-gap": "0.5rem",
113
218
  "icon": {
219
+ "inset-block-start": "0.188rem",
114
220
  "size": "24px"
115
221
  },
116
- "size": "24px",
117
- "active": {
118
- "color": "#007bc7",
119
- "background-color": "#fff",
120
- "border-color": "#007bc7"
222
+ "link": {
223
+ "column-gap": "0.5rem",
224
+ "text-decoration": "None"
121
225
  },
122
- "hover": {
123
- "color": "#0F172A",
124
- "background-color": "#66AFDD"
226
+ "font-weight": 400
227
+ },
228
+ "link": {
229
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
230
+ "font-weight": 400,
231
+ "line-height": "150%",
232
+ "font-size": "1.25rem",
233
+ "active": {
234
+ "text-decoration": "None",
235
+ "color": "#163f5b"
125
236
  },
126
237
  "focus": {
127
- "color": "#fff",
128
- "background-color": "#007bc7"
129
- }
130
- },
131
- "sidenav": {
132
- "display": "flex",
133
- "link": {
134
- "line-height": "150%",
135
- "icon": {
136
- "size": "24px",
137
- "margin-inline": "0.5rem"
138
- },
139
- "font-size": "1.25rem",
140
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
141
- "font-weight": 400,
142
- "current": {
143
- "font-weight": 700,
144
- "color": "#0F172A"
145
- },
146
- "color": "#01689b",
147
- "active": {
148
- "color": "#42145f",
149
- "text-decoration": "underline"
150
- },
151
- "focus": {
152
- "border-radius": "5px",
153
- "border-width": "2px",
154
- "border-style": "solid",
155
- "border-color": "#154273",
156
- "background-color": "none",
157
- "color": "#01689b",
158
- "text-decoration": "None"
159
- },
160
- "hover": {
161
- "color": "#15496a",
162
- "text-decoration": "underline"
163
- },
164
- "padding-block-start": "0.75rem",
165
- "padding-block-end": "0.75rem",
166
238
  "text-decoration": "None",
167
- "column-gap": "0.5rem"
239
+ "text-decoration-thickness": "auto",
240
+ "background-color": "transparent",
241
+ "color": "#01689b"
242
+ },
243
+ "icon": {
244
+ "inset-block-start": "0.25rem",
245
+ "size": "24px"
246
+ },
247
+ "color": "#01689b",
248
+ "text-decoration-color": "inherit",
249
+ "column-gap": "0.25rem",
250
+ "text-decoration": "underline",
251
+ "text-decoration-thickness": "0.0625em",
252
+ "text-underline-offset": "0.125rem",
253
+ "hover": {
254
+ "color": "#15496a",
255
+ "text-decoration": "underline",
256
+ "text-decoration-thickness": "0.1875em"
257
+ },
258
+ "focus-visible": {
259
+ "text-decoration": "None",
260
+ "text-decoration-thickness": "0.0625em"
261
+ },
262
+ "visited": {
263
+ "color": "#01689b"
168
264
  }
169
265
  },
170
- "radio-group": {
266
+ "data-badge": {
267
+ "background-color": "#dce3ea",
268
+ "border-radius": "10px",
269
+ "color": "#154273",
270
+ "padding-block": "0.125rem",
271
+ "padding-inline": "0.75rem"
272
+ },
273
+ "button": {
274
+ "background-color": "#0F172A",
275
+ "border-color": "transparent",
276
+ "border-radius": "5px",
277
+ "border-width": "1px",
278
+ "color": "#fff",
279
+ "column-gap": "0.5rem",
280
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
281
+ "font-size": "1.25rem",
282
+ "font-weight": 700,
283
+ "line-height": "150%",
284
+ "min-block-size": "48px",
285
+ "min-inline-size": "48px",
171
286
  "padding-block-end": "0.5rem",
172
287
  "padding-block-start": "0.5rem",
173
- "row-gap": "1rem"
174
- },
175
- "navigation-list": {
288
+ "padding-inline-end": "1rem",
289
+ "padding-inline-start": "1rem",
176
290
  "icon": {
177
- "background-color": "#0F172A",
178
- "border-radius": "999px",
291
+ "size": "24px",
292
+ "gap": "0.5rem"
293
+ },
294
+ "pressed": {
295
+ "background-color": "#1E293B",
296
+ "border-color": "transparent",
179
297
  "color": "#fff"
180
298
  },
181
- "item": {
182
- "icon": {
183
- "padding-inline": "0.5rem",
184
- "padding-block": "0.5rem",
185
- "size": "24px"
299
+ "active": {
300
+ "background-color": "#1E293B",
301
+ "border-color": "transparent",
302
+ "color": "#fff"
303
+ },
304
+ "disabled": {
305
+ "background-color": "#E2E8F0",
306
+ "border-color": "transparent",
307
+ "color": "#94A3B8"
308
+ },
309
+ "hover": {
310
+ "background-color": "#475569",
311
+ "border-color": "transparent",
312
+ "color": "#fff"
313
+ },
314
+ "focus": {
315
+ "background-color": "#475569",
316
+ "border-color": "transparent",
317
+ "color": "#fff"
318
+ },
319
+ "primary-action": {
320
+ "background-color": "#154273",
321
+ "border-color": "transparent",
322
+ "color": "#fff",
323
+ "font-size": "1.25rem",
324
+ "font-weight": 700,
325
+ "line-height": "1.875rem",
326
+ "disabled": {
327
+ "background-color": "#b8c6d5",
328
+ "border-color": "transparent",
329
+ "color": "#4f7196"
186
330
  },
187
- "content": {
188
- "font-size": "1.25rem",
189
- "column-gap": "0.5rem",
190
- "row-gap": "0.25rem"
331
+ "hover": {
332
+ "background-color": "#162f50",
333
+ "border-color": "transparent",
334
+ "color": "#fff"
191
335
  },
192
- "label": {
193
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
194
- "font-size": "1.875rem",
195
- "font-weight": 700,
196
- "line-height": "150%"
336
+ "focus": {
337
+ "background-color": "#162f50",
338
+ "border-color": "transparent",
339
+ "color": "#fff"
340
+ },
341
+ "pressed": {
342
+ "border-color": "transparent",
343
+ "color": "#fff",
344
+ "background-color": "#162945"
197
345
  },
198
346
  "active": {
199
- "background-color": "#F1F5F9"
347
+ "border-color": "transparent",
348
+ "color": "#fff",
349
+ "background-color": "#0d2845"
350
+ }
351
+ },
352
+ "secondary-action": {
353
+ "background-color": "transparent",
354
+ "border-color": "#154273",
355
+ "color": "#154273",
356
+ "font-size": "1.25rem",
357
+ "font-weight": 700,
358
+ "line-height": "1.875rem",
359
+ "disabled": {
360
+ "background-color": "transparent",
361
+ "border-color": "#95a9c0",
362
+ "color": "#738eab"
200
363
  },
201
364
  "hover": {
202
- "background-color": "#F8FAFC"
365
+ "background-color": "#dce3ea",
366
+ "border-color": "#162f50",
367
+ "color": "#162f50"
203
368
  },
204
369
  "focus": {
205
- "background-color": "#dce3ea"
370
+ "background-color": "#dce3ea",
371
+ "border-color": "transparent",
372
+ "color": "#162f50"
206
373
  },
207
- "background-color": "#fff",
208
- "color": "#334155",
209
- "border-width": "1px",
210
- "border-color": "#CBD5E1",
211
- "heading": {
212
- "color": "#0F172A"
374
+ "pressed": {
375
+ "background-color": "#b8c6d5",
376
+ "border-color": "#162945",
377
+ "color": "#162945"
213
378
  },
214
- "column-gap": "1rem",
215
- "min-height": "48px",
216
- "padding-block": "0.75rem",
217
- "padding-inline": "1rem"
218
- }
219
- },
220
- "nav-bar": {
221
- "border-block-end-width": "1px",
222
- "max-inline-size": "1280px",
223
- "padding-inline": "1rem",
224
- "container": {
225
- "inline-size": "100%"
226
- },
227
- "content": {
228
- "column-gap": "1rem"
229
- },
230
- "icon": {
231
- "color": "#0F172A",
232
379
  "active": {
233
- "color": "#fff"
234
- },
235
- "size": "24px"
380
+ "background-color": "#95a9c0",
381
+ "color": "#162f50",
382
+ "border-color": "#162945"
383
+ }
236
384
  },
237
- "link": {
238
- "active": {
239
- "background-color": "#154273",
240
- "color": "#fff"
241
- },
242
- "background-color": "#fff",
385
+ "subtle": {
386
+ "background-color": "transparent",
387
+ "border-color": "transparent",
243
388
  "color": "#154273",
389
+ "font-size": "1.25rem",
390
+ "font-weight": 700,
391
+ "line-height": "1.875rem",
392
+ "disabled": {
393
+ "background-color": "transparent",
394
+ "border-color": "transparent",
395
+ "color": "#b8c6d5"
396
+ },
397
+ "hover": {
398
+ "background-color": "#dce3ea",
399
+ "border-color": "transparent",
400
+ "color": "#162f50"
401
+ },
244
402
  "focus": {
245
403
  "background-color": "#dce3ea",
246
- "color": "#154273"
404
+ "border-color": "transparent",
405
+ "color": "#162f50"
247
406
  },
248
- "hover": {
249
- "background-color": "#F8FAFC",
250
- "color": "#154273"
407
+ "pressed": {
408
+ "background-color": "#b8c6d5",
409
+ "border-color": "transparent",
410
+ "color": "#162945"
251
411
  },
252
- "padding-block-end": "1rem",
253
- "padding-block-start": "1rem",
254
- "padding-inline-end": "0.75rem",
255
- "padding-inline-start": "0.75rem",
256
- "column-gap": "0.5rem"
257
- },
258
- "heading": {
259
- "font-weight": 700
260
- },
261
- "background-color": "#fff",
262
- "color": "#154273",
263
- "border-color": "#4f7196"
412
+ "active": {
413
+ "background-color": "#95a9c0",
414
+ "border-color": "transparent",
415
+ "color": "#0d2845"
416
+ }
417
+ }
264
418
  },
265
- "message-list": {
266
- "item": {
267
- "background-color": "#fff",
268
- "border-color": "#CBD5E1",
269
- "border-width": "1px",
270
- "color": "#334155",
271
- "column-gap": "1rem",
419
+ "button-group": {
420
+ "margin-block-end": "0rem",
421
+ "margin-block-start": "0rem",
422
+ "background-color": "transparent",
423
+ "column-gap": "0.5rem",
424
+ "padding-block-end": "0px",
425
+ "padding-block-start": "0px",
426
+ "row-gap": "0.5rem"
427
+ },
428
+ "breadcrumb-nav": {
429
+ "divider": {
430
+ "color": "#334155",
431
+ "inset-block-start": 0,
432
+ "size": "24px"
433
+ },
434
+ "link": {
435
+ "padding-block-end": "0.75rem",
436
+ "padding-block-start": "0.75rem",
437
+ "padding-inline-end": "0rem",
438
+ "padding-inline-start": "0rem",
439
+ "current": {
440
+ "color": "#334155",
441
+ "font-weight": 400
442
+ },
272
443
  "icon": {
273
- "size": "24px",
274
- "color": "#0F172A"
444
+ "inset-block-start": 0,
445
+ "margin-inline": "0.25rem",
446
+ "size": "24px"
275
447
  },
276
- "min-height": "48px",
277
- "padding-block": "0.75rem",
278
- "padding-inline": "1rem",
279
- "content": {
280
- "font-size": "1.25rem",
281
- "column-gap": "0.5rem",
282
- "row-gap": "0.5rem"
448
+ "color": "#01689b",
449
+ "text-decoration": "underline",
450
+ "active": {
451
+ "color": "#163f5b",
452
+ "text-decoration": "underline"
283
453
  },
284
- "label": {
285
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
286
- "font-size": "1.25rem",
287
- "font-weight": 700,
288
- "line-height": "150%"
454
+ "disabled": {
455
+ "color": "#334155"
289
456
  },
290
- "heading": {
291
- "color": "#0F172A"
457
+ "focus": {
458
+ "background-color": "transparent",
459
+ "color": "#01689b",
460
+ "text-decoration": "None"
461
+ },
462
+ "hover": {
463
+ "text-decoration": "underline",
464
+ "color": "#01496c"
292
465
  }
293
- }
294
- },
295
- "logo": {
296
- "image": {
297
- "background-color": "#fff",
298
- "inline-size": "48px",
299
- "block-size": "96px",
300
- "color": "#154273"
301
- },
302
- "title": {
303
- "font-weight": 600,
304
- "line-height": "1.063rem",
305
- "font-size": "0.913rem",
306
- "padding-block-start": "3.125rem"
307
- },
308
- "subtitle": {
309
- "font-weight": 400,
310
- "line-height": "1rem",
311
- "font-size": "0.775rem"
312
466
  },
313
- "column-gap": "12px",
314
467
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
315
- "color": "#154273"
316
- },
317
- "link-list-card": {
318
- "background-color": "#fff",
319
- "padding-block-start": "1.5rem",
320
- "padding-block-end": "1.5rem",
321
- "row-gap": "1rem",
322
- "padding-inline-start": "1.5rem",
323
- "padding-inline-end": "1.5rem"
324
- },
325
- "link-list": {
326
- "text-decoration": "None"
327
- },
328
- "icon-only-button": {
329
- "padding-block-end": "0.75rem",
330
- "padding-block-start": "0.75rem",
331
- "padding-inline-end": "0.75rem",
332
- "padding-inline-start": "0.75rem"
333
- },
334
- "hero": {
335
- "heading": {
336
- "font-weight": 700,
337
- "line-height": "125%",
338
- "font-size": "1.875rem",
339
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif"
340
- },
341
- "sub-heading": {
342
- "font-weight": 400,
343
- "line-height": "150%",
344
- "font-size": "1.25rem",
345
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif"
346
- },
347
- "message": {
348
- "background-color": "#154273",
349
- "color": "#fff",
350
- "row-gap": "0.125rem",
351
- "padding-block-end": "1rem",
352
- "padding-inline-end": "1rem",
353
- "padding-inline-start": "1rem",
354
- "padding-block-start": "1rem",
355
- "border-radius": "20px",
356
- "inline-size": "90%"
357
- },
358
- "border-radius": "40px",
359
- "inline-size": "100%"
360
- },
361
- "form-field-radio-option": {
362
- "column-gap": "0.5rem",
363
- "font-weight": 400,
364
- "row-gap": "0.5rem",
365
- "label": {
366
- "margin-block-end": 0
468
+ "font-size": "1.25rem",
469
+ "line-height": "150%",
470
+ "min-block-size": "48px",
471
+ "item": {
472
+ "padding-block-end": "0.5rem",
473
+ "padding-block-start": "0.5rem",
474
+ "padding-inline-end": "0.5rem",
475
+ "padding-inline-start": "0.5rem",
476
+ "first": {
477
+ "padding-inline-start": "0rem"
478
+ }
367
479
  },
368
- "input": {
369
- "margin": {
370
- "block-start": "0.25rem"
480
+ "separator": {
481
+ "color": "#334155",
482
+ "icon": {
483
+ "size": "24px"
371
484
  }
372
485
  }
373
486
  },
374
- "form-field-checkbox-option": {
375
- "column-gap": "0.5rem",
376
- "margin-block-end": 0
377
- },
378
- "page-footer": {
379
- "column-gap": "1.5rem",
380
- "column-width": "200px",
381
- "column": {
382
- "title": {
383
- "margin-block-end": "0.75rem"
384
- }
385
- },
386
- "content": {
387
- "max-inline-size": "1280px",
388
- "padding-inline-start": "1rem",
487
+ "accordion": {
488
+ "panel": {
489
+ "border-color": "#94A3B8",
490
+ "border-width": 0,
491
+ "padding-block-end": "1.5rem",
492
+ "padding-block-start": "1rem",
389
493
  "padding-inline-end": "1rem",
390
- "column-gap": "2rem"
494
+ "padding-inline-start": "1rem"
391
495
  },
392
- "border-block-start-width": "2px",
393
- "border-block-start-color": "#738eab",
394
- "border-block-start-style": "solid",
395
- "outlined": {
496
+ "button": {
497
+ "gap": "0.5rem",
498
+ "icon": {
499
+ "size": "24px"
500
+ },
501
+ "hover": {
502
+ "background-color": "#F8FAFC",
503
+ "border-color": "#94A3B8",
504
+ "color": "#0F172A"
505
+ },
396
506
  "background-color": "#fff",
397
- "color": "#154273",
398
- "border-color": "#154273"
399
- },
400
- "padding-block-start": "2.5rem",
401
- "padding-block-end": "2.5rem",
402
- "padding-inline-start": "2.5rem",
403
- "padding-inline-end": "2.5rem",
404
- "flex": {
405
- "direction": "column"
507
+ "border-color": "#94A3B8",
508
+ "border-width": 0,
509
+ "color": "#0F172A",
510
+ "focus": {
511
+ "background-color": "#dce3ea",
512
+ "border-color": "#154273",
513
+ "color": "#0F172A"
514
+ },
515
+ "active": {
516
+ "background-color": "#F1F5F9",
517
+ "border-color": "#94A3B8",
518
+ "color": "#0F172A",
519
+ "row-gap": 0
520
+ }
406
521
  }
407
522
  },
408
- "file-input": {
409
- "column-gap": "0.75rem",
410
- "row-gap": "0.75rem",
411
- "feedback": {
412
- "color": "#475569",
413
- "font-size": "1rem"
523
+ "action": {
524
+ "activate": {
525
+ "cursor": "pointer"
526
+ },
527
+ "busy": {
528
+ "cursor": "wait"
529
+ },
530
+ "disabled": {
531
+ "cursor": "not-allowed"
532
+ },
533
+ "inert": {
534
+ "cursor": "default"
535
+ },
536
+ "navigate": {
537
+ "cursor": "pointer"
538
+ },
539
+ "submit": {
540
+ "cursor": "pointer"
414
541
  }
415
542
  },
416
- "file": {
417
- "border-style": "solid",
418
- "border-color": "#154273",
419
- "border-width": "1px",
420
- "border-radius": "5px",
421
- "padding-inline-start": "1rem",
422
- "padding-inline-end": "1rem",
423
- "padding-block-start": "0.75rem",
424
- "padding-block-end": "0.75rem",
425
- "column-gap": "0.25rem",
426
- "error": {
427
- "border-color": "#d52b1e"
543
+ "unordered-list": {
544
+ "color": "#0F172A",
545
+ "marker": {
546
+ "border-color": "#0F172A",
547
+ "color": "#0F172A"
428
548
  },
429
- "subtitle": {
430
- "color": "#64748B"
549
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
550
+ "font-weight": 400,
551
+ "font-size": "1.25rem",
552
+ "line-height": "150%",
553
+ "margin-block-end": "0.25rem",
554
+ "margin-block-start": "0.25rem",
555
+ "padding-inline-start": "1.5rem",
556
+ "item": {
557
+ "margin-block-end": "0.25rem",
558
+ "margin-block-start": "0.25rem",
559
+ "padding-inline-start": "0.5rem"
431
560
  }
432
561
  },
433
- "dot-badge": {
434
- "border-radius": "999px",
435
- "color": "#d52b1e",
436
- "size": "12px"
562
+ "ordered-list": {
563
+ "color": "#0F172A",
564
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
565
+ "font-weight": 400,
566
+ "margin-inline-start": "0.625rem",
567
+ "font-size": "1.25rem",
568
+ "line-height": "150%",
569
+ "margin-block-end": "0.25rem",
570
+ "margin-block-start": "0.25rem",
571
+ "padding-inline-start": "1.5rem",
572
+ "item": {
573
+ "margin-block-end": "0.25rem",
574
+ "margin-block-start": "0.25rem",
575
+ "padding-inline-start": "0.5rem"
576
+ }
437
577
  },
438
- "code-input": {
439
- "size": "48px"
578
+ "column-layout": {
579
+ "column-rule-color": "transparent",
580
+ "column-rule-width": "0px",
581
+ "column-width": "400px",
582
+ "gap": "0.75rem"
440
583
  },
441
- "code-input-group": {
442
- "column-gap": "0.5rem"
584
+ "blockquote": {
585
+ "background-color": "transparent",
586
+ "border-inline-start-width": 0,
587
+ "border-color": "transparent",
588
+ "border-radius": 0,
589
+ "border-width": 0,
590
+ "color": "#154273",
591
+ "font-size": "1.25rem",
592
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
593
+ "padding-block-end": "2rem",
594
+ "padding-block-start": "2rem",
595
+ "padding-inline-end": "2rem",
596
+ "padding-inline-start": "2rem",
597
+ "row-gap": "0.75rem",
598
+ "attribution": {
599
+ "color": "#154273",
600
+ "font-size": "1.25rem"
601
+ },
602
+ "content": {
603
+ "color": "#154273",
604
+ "font-size": "1.25rem",
605
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
606
+ "line-height": "150%",
607
+ "font-weight": 400
608
+ },
609
+ "caption": {
610
+ "font-size": "1.25rem",
611
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
612
+ "line-height": "150%",
613
+ "font-weight": 400,
614
+ "padding-block-start": "0.75rem",
615
+ "color": "#154273"
616
+ },
617
+ "margin-block-end": 0,
618
+ "margin-block-start": 0,
619
+ "margin-inline-end": 0,
620
+ "margin-inline-start": 0,
621
+ "border-block-start-width": 0,
622
+ "border-block-end-width": 0,
623
+ "border-inline-end-width": 0,
624
+ "border-start-start-radius": 0,
625
+ "border-start-end-radius": 0,
626
+ "border-end-start-radius": 0,
627
+ "border-end-end-radius": 0,
628
+ "blue-corner-border-variation": {
629
+ "border-color": "#154273",
630
+ "border-block-end-width": "2px",
631
+ "border-inline-end-width": "2px",
632
+ "border-end-end-radius": "3rem"
633
+ },
634
+ "pink-background-variation": {
635
+ "background-color": "#F6BDE1",
636
+ "border-end-start-radius": "3rem",
637
+ "padding": "2.5rem"
638
+ },
639
+ "pink-left-border-variation": {
640
+ "border-color": "#F6BDE1",
641
+ "border-inline-start-width": "0.75rem",
642
+ "padding-inline-start": "2.5rem",
643
+ "padding-inline-end": "2.5rem",
644
+ "padding-block-start": "1.5rem",
645
+ "padding-block-end": "1.5rem"
646
+ },
647
+ "pink-corner-border-variation": {
648
+ "border-color": "#F6BDE1",
649
+ "border-block-start-width": "0.25rem",
650
+ "border-inline-start-width": "0.25rem",
651
+ "border-start-start-radius": "3rem",
652
+ "padding": "2.5rem"
653
+ }
443
654
  },
444
- "checkbox-group": {
655
+ "icon": {
656
+ "color": "inherit",
657
+ "size": "24px",
658
+ "inset-block-start": "0rem"
659
+ },
660
+ "textbox": {
661
+ "border-radius": "2.5px",
662
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
663
+ "font-size": "1.25rem",
664
+ "font-weight": 400,
665
+ "line-height": "150%",
666
+ "max-inline-size": "400px",
445
667
  "padding-block-end": "0.5rem",
446
668
  "padding-block-start": "0.5rem",
447
- "row-gap": "1rem"
448
- },
449
- "card-as-link": {
669
+ "padding-inline-end": "0.75rem",
670
+ "padding-inline-start": "0.75rem",
450
671
  "background-color": "#fff",
451
- "border-color": "#CBD5E1",
452
- "border-radius": "5px",
453
- "border-width": "1px",
672
+ "border-color": "#154273",
454
673
  "color": "#0F172A",
455
- "column-gap": "1rem",
456
- "inline-size": "328px",
457
- "icon": {
458
- "color": "#154273",
459
- "size": "24px"
674
+ "invalid": {
675
+ "background-color": "#f9dfdd",
676
+ "border-color": "#d52b1e",
677
+ "color": "#0F172A",
678
+ "border-width": "1px"
460
679
  },
461
- "link": {
462
- "color": "#01689b",
463
- "text-decoration": "underline",
464
- "active": {
465
- "text-decoration": "none"
466
- },
467
- "hover": {
468
- "text-decoration": "none"
469
- },
470
- "focus": {
471
- "text-decoration": "none"
472
- }
680
+ "placeholder": {
681
+ "color": "#64748B"
473
682
  },
474
- "metadata": {
475
- "color": "#334155"
683
+ "border-block-end-width": "auto",
684
+ "border-width": "1px",
685
+ "focus": {
686
+ "border-width": "2px",
687
+ "background-color": "#fff",
688
+ "border-color": "#154273",
689
+ "color": "#0F172A"
476
690
  },
477
- "padding-block-end": "1rem",
478
- "padding-block-start": "1rem",
479
- "padding-inline-end": "1rem",
480
- "padding-inline-start": "1rem",
481
- "row-gap": "0.75rem",
482
- "active": {
691
+ "disabled": {
692
+ "background-color": "#CBD5E1",
693
+ "border-color": "#94A3B8",
694
+ "color": "#475569"
695
+ },
696
+ "read-only": {
483
697
  "background-color": "#F1F5F9",
484
- "text-decoration": "underline"
698
+ "border-color": "transparent",
699
+ "color": "#0F172A"
485
700
  },
486
701
  "hover": {
487
- "background-color": "#F8FAFC",
488
- "text-decoration": "underline"
702
+ "border-width": "1px",
703
+ "background-color": "#fff",
704
+ "border-color": "#738eab",
705
+ "color": "#0F172A"
706
+ }
707
+ },
708
+ "textarea": {
709
+ "max-inline-size": "400px",
710
+ "padding-block-end": "0.5rem",
711
+ "padding-block-start": "0.5rem",
712
+ "padding-inline-end": "0.75rem",
713
+ "padding-inline-start": "0.75rem",
714
+ "background-color": "#fff",
715
+ "border-color": "#154273",
716
+ "color": "#0F172A",
717
+ "invalid": {
718
+ "background-color": "#f9dfdd",
719
+ "border-color": "#d52b1e",
720
+ "color": "#0F172A",
721
+ "border-width": "1px"
722
+ },
723
+ "placeholder": {
724
+ "color": "#64748B"
489
725
  },
490
726
  "focus": {
491
- "background-color": "#dce3ea",
492
- "text-decoration": "underline"
727
+ "background-color": "#fff",
728
+ "border-color": "#154273",
729
+ "color": "#0F172A",
730
+ "border-width": "2px"
493
731
  },
494
- "full-bleed": {
495
- "background-color": "#000",
732
+ "disabled": {
733
+ "background-color": "#CBD5E1",
734
+ "border-color": "#94A3B8",
735
+ "color": "#475569"
736
+ },
737
+ "read-only": {
738
+ "background-color": "#F1F5F9",
496
739
  "border-color": "transparent",
497
- "color": "#fff",
498
- "opacity": 0.5
740
+ "color": "#0F172A"
499
741
  },
500
- "heading": {
501
- "color": "#154273",
502
- "padding-block-start": "0.5rem",
503
- "font-size": "1.5rem",
504
- "font-weight": 700
742
+ "hover": {
743
+ "background-color": "#fff",
744
+ "border-color": "#738eab",
745
+ "color": "#0F172A",
746
+ "border-width": "1px"
505
747
  },
506
- "horizontal": {
507
- "background-color": "#154273",
508
- "border-color": "transparent",
509
- "color": "#fff",
510
- "max-block-size": "96px",
511
- "padding-block-end": 0,
512
- "padding-block-start": 0,
513
- "padding-inline-end": "1rem",
514
- "padding-inline-start": "1rem",
515
- "heading": {
516
- "inline-size": "200px"
517
- }
518
- }
519
- },
520
- "border-radius": {
521
- "sm": "2.5px",
522
- "md": "5px",
523
- "circle": "999px",
524
- "none": "0px"
748
+ "border-radius": "2.5px",
749
+ "border-bottom-width": "1px",
750
+ "border-width": "1px",
751
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
752
+ "font-weight": 400,
753
+ "line-height": "150%",
754
+ "font-size": "1.25rem"
525
755
  },
526
- "color": {
527
- "focus": {
528
- "outline": "#000"
756
+ "table": {
757
+ "header-cell": {
758
+ "line-height": "150%",
759
+ "color": "#0F172A",
760
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
761
+ "font-weight": 700,
762
+ "font-size": "1.25rem"
529
763
  },
530
- "foreground": {
531
- "default": "#0F172A",
532
- "subdued": "#334155",
533
- "link": "#01689b",
534
- "on-dark-color": "#fff",
535
- "on-light-color": "#000",
536
- "onEmphasis": "#fff"
764
+ "caption": {
765
+ "line-height": "125%",
766
+ "margin-block-end": "1.5rem",
767
+ "color": "#0F172A",
768
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
769
+ "font-weight": 700,
770
+ "font-size": "1.875rem"
537
771
  },
538
- "border": {
539
- "default": "#64748B",
540
- "subdued": "#94A3B8",
541
- "strong": "#0F172A"
542
- },
543
- "canvas": "#fff",
544
- "feedback": {
545
- "success": {
546
- "default": "#39870c",
547
- "subdued": "#e1eddb"
548
- },
549
- "info": {
550
- "default": "#007bc7",
551
- "subdued": "#d9ebf7"
552
- },
553
- "error": {
554
- "default": "#d52b1e",
555
- "subdued": "#f9dfdd"
556
- },
557
- "warning": {
558
- "default": "#ffb612",
559
- "subdued": "#fff4db"
560
- }
561
- },
562
- "accent": {
563
- "500": "#8fcae7"
564
- },
565
- "accent-2": {
566
- "500": "#f092cd"
567
- },
568
- "primary": {
569
- "50": "#dce3ea",
570
- "100": "#b8c6d5",
571
- "200": "#95a9c0",
572
- "300": "#738eab",
573
- "400": "#4f7196",
574
- "500": "#154273",
575
- "hover": "#162f50"
576
- },
577
- "cool-grey": {
578
- "50": "#F8FAFC",
579
- "100": "#F1F5F9",
580
- "200": "#E2E8F0",
581
- "300": "#CBD5E1",
582
- "400": "#94A3B8",
583
- "500": "#64748B",
584
- "600": "#475569",
585
- "700": "#334155",
586
- "800": "#1E293B",
587
- "900": "#0F172A"
588
- },
589
- "lichtblauw": {
590
- "50": "#eef7fb",
591
- "100": "#ddeff8",
592
- "200": "#CCE7F4",
593
- "300": "#BCDFF0",
594
- "400": "#ABD7ED",
595
- "500": "#8fcae7"
596
- },
597
- "violet": {
598
- "50": "#f2d9e7",
599
- "100": "#e5b3d0",
600
- "200": "#D88CB7",
601
- "300": "#CB66A0",
602
- "400": "#BE4088",
603
- "500": "#a90061"
604
- },
605
- "paars": {
606
- "50": "#e3dce7",
607
- "100": "#c6b9cf",
608
- "200": "#A995B7",
609
- "300": "#8D729F",
610
- "400": "#714f87",
611
- "500": "#42145f"
612
- },
613
- "hemelblauw": {
614
- "50": "#d9ebf7",
615
- "100": "#b3d7ee",
616
- "200": "#8CC3E6",
617
- "300": "#66AFDD",
618
- "400": "#409CD5",
619
- "500": "#007bc7"
620
- },
621
- "donkerblauw": {
622
- "50": "#d9e8f0",
623
- "100": "#b3d2e1",
624
- "200": "#8CBBD2",
625
- "300": "#66A4C3",
626
- "400": "#408EB4",
627
- "500": "#01689b"
628
- },
629
- "mintgroen": {
630
- "50": "#eaf8f4",
631
- "100": "#d6f2e9",
632
- "200": "#C1EBDE",
633
- "300": "#ACE4D3",
634
- "400": "#98DDC8",
635
- "500": "#76d2b6"
636
- },
637
- "mosgroen": {
638
- "50": "#ebebd9",
639
- "100": "#d6d7b3",
640
- "200": "#C1C38C",
641
- "300": "#ADAF66",
642
- "400": "#999C40",
643
- "500": "#777b00"
644
- },
645
- "groen": {
646
- "50": "#e1eddb",
647
- "100": "#c4dbb6",
648
- "200": "#A5C991",
649
- "300": "#88B76D",
650
- "400": "#6AA549",
651
- "500": "#39870c"
652
- },
653
- "donkergroen": {
654
- "50": "#dfe6e1",
655
- "100": "#becdc3",
656
- "200": "#9DB4A4",
657
- "300": "#7D9B87",
658
- "400": "#5D8269",
659
- "500": "#275937"
660
- },
661
- "bruin": {
662
- "50": "#efeada",
663
- "100": "#dfd4b6",
664
- "200": "#CFBF90",
665
- "300": "#BFA96C",
666
- "400": "#AF9447",
667
- "500": "#94710a"
668
- },
669
- "donkerbruin": {
670
- "50": "#e8e0df",
671
- "100": "#d1c2be",
672
- "200": "#BAA39D",
673
- "300": "#A3847D",
674
- "400": "#8D665D",
675
- "500": "#673327"
676
- },
677
- "geel": {
678
- "50": "#fefbdd",
679
- "100": "#fdf6bc",
680
- "200": "#FCF199",
681
- "300": "#FBED78",
682
- "400": "#FAE856",
683
- "500": "#f9e11e"
684
- },
685
- "donkergeel": {
686
- "50": "#fff4db",
687
- "100": "#ffe9b8",
688
- "200": "#FDDE94",
689
- "300": "#FDD370",
690
- "400": "#FDC84D",
691
- "500": "#ffb612"
692
- },
693
- "oranje": {
694
- "50": "#fbead9",
695
- "100": "#f6d4b3",
696
- "200": "#F1BE8C",
697
- "300": "#EDA966",
698
- "400": "#E89440",
699
- "500": "#e17000"
700
- },
701
- "rood": {
702
- "50": "#f9dfdd",
703
- "100": "#f2bfbc",
704
- "200": "#EC9F99",
705
- "300": "#E67F78",
706
- "400": "#DF6056",
707
- "500": "#d52b1e"
708
- },
709
- "roze": {
710
- "50": "#fdeff8",
711
- "100": "#fbdef0",
712
- "200": "#F8CEE8",
713
- "300": "#F6BDE1",
714
- "400": "#F4ADD9",
715
- "500": "#f092cd"
716
- },
717
- "robijnrood": {
718
- "50": "#f7d9e7",
719
- "100": "#efb3ce",
720
- "200": "#E78CB6",
721
- "300": "#DF669D",
722
- "400": "#D74085",
723
- "500": "#ca005d"
724
- },
725
- "lintblauw": {
726
- "50": "#dce3ea",
727
- "100": "#b8c6d5",
728
- "200": "#95a9c0",
729
- "300": "#738eab",
730
- "400": "#4f7196",
731
- "500": "#154273"
732
- },
733
- "wit": "#fff",
734
- "zwart": "#000",
735
- "none": "transparent"
736
- },
737
- "focus": {
738
- "outline-offset": "0.125rem",
739
- "outline-style": "solid",
740
- "outline-width": "2px"
741
- },
742
- "font-size": {
743
- "heading": {
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"
749
- },
750
- "body": {
751
- "intro": "1.5rem",
752
- "default": "1.25rem"
753
- },
754
- "xs": {
755
- "desktop": "1.25rem",
756
- "tablet": "1.125rem",
757
- "mobile": "1rem"
758
- },
759
- "sm": {
760
- "desktop": "1.5rem",
761
- "tablet": "1.35rem",
762
- "mobile": "1.2rem"
763
- },
764
- "md": {
765
- "desktop": "1.875rem",
766
- "tablet": "1.688rem",
767
- "mobile": "1.5rem"
768
- },
769
- "lg": {
770
- "desktop": "2.5rem",
771
- "tablet": "2.25rem",
772
- "mobile": "2rem"
773
- },
774
- "xl": {
775
- "desktop": "3.125rem",
776
- "tablet": "2.813rem",
777
- "mobile": "2.5rem"
778
- }
779
- },
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
789
- },
790
- "line-height": {
791
- "body": "150%",
792
- "sm": "125%",
793
- "md": "150%"
794
- },
795
- "size": {
796
- "target": "48px",
797
- "icon": {
798
- "functional": "24px"
799
- },
800
- "quarter-lint": "12px",
801
- "half-lint": "24px",
802
- "lint": "48px",
803
- "2-lint": "96px",
804
- "3-lint": "1440px"
805
- },
806
- "font-family": {
807
- "primary": "'Fira Sans', Arial, Verdana, sans-serif",
808
- "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
809
- },
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"
827
- }
828
- },
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"
853
- },
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
860
- },
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"
868
- },
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": "#154273",
882
- "border-block-end-width": "2px",
883
- "border-inline-end-width": "2px",
884
- "border-end-end-radius": "3rem"
885
- },
886
- "pink-background-variation": {
887
- "background-color": "#F6BDE1",
888
- "border-end-start-radius": "3rem",
889
- "padding": "2.5rem"
890
- },
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"
898
- },
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
- }
906
- },
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"
925
- },
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": "#154273",
944
- "color": "#0F172A",
945
- "invalid": {
946
- "background-color": "#f9dfdd",
947
- "border-color": "#d52b1e",
948
- "color": "#0F172A",
949
- "border-width": "1px"
950
- },
951
- "placeholder": {
952
- "color": "#64748B"
953
- },
954
- "border-block-end-width": "auto",
955
- "border-width": "1px",
956
- "focus": {
957
- "border-width": "2px",
958
- "background-color": "#fff",
959
- "border-color": "#154273",
960
- "color": "#0F172A"
961
- },
962
- "disabled": {
963
- "background-color": "#CBD5E1",
964
- "border-color": "#94A3B8",
965
- "color": "#475569"
966
- },
967
- "read-only": {
968
- "background-color": "#F1F5F9",
969
- "border-color": "transparent",
970
- "color": "#0F172A"
971
- },
972
- "hover": {
973
- "border-width": "1px",
974
- "background-color": "#fff",
975
- "border-color": "#738eab",
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": "#154273",
987
- "color": "#0F172A",
988
- "invalid": {
989
- "background-color": "#f9dfdd",
990
- "border-color": "#d52b1e",
991
- "color": "#0F172A",
992
- "border-width": "1px"
993
- },
994
- "placeholder": {
995
- "color": "#64748B"
996
- },
997
- "focus": {
998
- "background-color": "#fff",
999
- "border-color": "#154273",
1000
- "color": "#0F172A",
1001
- "border-width": "2px"
1002
- },
1003
- "disabled": {
1004
- "background-color": "#CBD5E1",
1005
- "border-color": "#94A3B8",
1006
- "color": "#475569"
1007
- },
1008
- "read-only": {
1009
- "background-color": "#F1F5F9",
1010
- "border-color": "transparent",
1011
- "color": "#0F172A"
1012
- },
1013
- "hover": {
1014
- "background-color": "#fff",
1015
- "border-color": "#738eab",
1016
- "color": "#0F172A",
1017
- "border-width": "1px"
1018
- },
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"
1034
- },
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"
1042
- },
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%"
772
+ "cell": {
773
+ "padding-block-end": "0.75rem",
774
+ "padding-block-start": "0.75rem",
775
+ "padding-inline-end": "1rem",
776
+ "padding-inline-start": "1rem",
777
+ "line-height": "150%"
1049
778
  },
1050
779
  "data-cell": {
1051
780
  "color": "#0F172A",
@@ -1094,42 +823,6 @@
1094
823
  },
1095
824
  "font-size": "1.25rem"
1096
825
  },
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": "#154273",
1111
- "border-style": "solid",
1112
- "border-width": "2px",
1113
- "color": "#0F172A",
1114
- "text-decoration": "None"
1115
- },
1116
- "focus-visible": {
1117
- "outline-color": "#000"
1118
- },
1119
- "background-color": "#154273",
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"
1129
- },
1130
- "text-decoration": "underline",
1131
- "text-underline-offset": "0.125rem"
1132
- },
1133
826
  "separator": {
1134
827
  "color": "#CBD5E1",
1135
828
  "block-size": "2px",
@@ -1234,145 +927,97 @@
1234
927
  "border-color": "#94A3B8",
1235
928
  "color": "#475569"
1236
929
  },
1237
- "border-width": "1px"
1238
- },
1239
- "hover": {
1240
- "background-color": "#fff",
1241
- "border-color": "#738eab",
1242
- "border-width": "1px"
1243
- },
1244
- "border-radius": "999px",
1245
- "border-width": "1px"
1246
- },
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"
1253
- },
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",
1265
- "font-weight": 400,
1266
- "line-height": "150%"
1267
- }
1268
- },
1269
- "ordered-list": {
1270
- "padding-inline-start": "1.5rem",
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"
1278
- },
1279
- "color": "#0F172A",
1280
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1281
- "font-weight": 400,
1282
- "font-size": "1.25rem",
1283
- "line-height": "150%"
1284
- },
1285
- "link-list": {
1286
- "margin-block-start": 0,
1287
- "row-gap": "0.5rem",
1288
- "margin-block-end": 0,
1289
- "item": {
1290
- "column-gap": "0.5rem",
1291
- "text-decoration": "None"
1292
- },
1293
- "icon": {
1294
- "size": "24px",
1295
- "inset-block-start": "0.188rem"
1296
- }
1297
- },
1298
- "link": {
1299
- "color": "#01689b",
1300
- "text-decoration-color": "#01689b",
1301
- "active": {
1302
- "color": "#42145f",
1303
- "text-decoration": "None"
1304
- },
1305
- "focus": {
1306
- "background-color": "transparent",
1307
- "color": "#01689b",
1308
- "text-decoration": "None",
1309
- "text-decoration-thickness": "auto"
1310
- },
1311
- "hover": {
1312
- "color": "#01496c",
1313
- "text-decoration": "None",
1314
- "text-decoration-thickness": "auto"
1315
- },
1316
- "visited": {
1317
- "color": "#42145f"
930
+ "border-width": "1px"
1318
931
  },
1319
- "text-decoration": "underline",
1320
- "icon": {
1321
- "inset-block-start": "0.25rem",
1322
- "size": "24px"
932
+ "hover": {
933
+ "background-color": "#fff",
934
+ "border-color": "#738eab",
935
+ "border-width": "1px"
1323
936
  },
1324
- "column-gap": "0.25rem",
1325
- "text-decoration-thickness": "auto",
1326
- "text-underline-offset": "0.125rem",
937
+ "border-radius": "999px",
938
+ "border-width": "1px"
939
+ },
940
+ "pre-heading": {
941
+ "color": "#0F172A",
942
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
943
+ "font-weight": 700,
944
+ "line-height": "125%",
945
+ "font-size": "1rem"
946
+ },
947
+ "paragraph": {
948
+ "color": "#0F172A",
1327
949
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1328
- "font-weight": 400,
1329
950
  "font-size": "1.25rem",
1330
- "line-height": "150%"
951
+ "font-weight": 400,
952
+ "line-height": "150%",
953
+ "lead": {
954
+ "color": "#0F172A",
955
+ "font-size": "1.5rem",
956
+ "font-weight": 400,
957
+ "line-height": "150%"
958
+ },
959
+ "small": {
960
+ "font-size": "1.5rem",
961
+ "color": "#0F172A",
962
+ "font-weight": 400,
963
+ "line-height": "150%"
964
+ },
965
+ "margin-block-end": "0rem",
966
+ "margin-block-start": "0rem"
1331
967
  },
1332
968
  "heading-1": {
1333
969
  "color": "#154273",
1334
970
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
971
+ "font-size": "3.125rem",
1335
972
  "font-weight": 700,
1336
973
  "line-height": "125%",
1337
- "font-size": "3.125rem",
1338
- "margin-block-end": 0,
1339
- "margin-block-start": 0
974
+ "margin-block-end": "0rem",
975
+ "margin-block-start": "0rem"
1340
976
  },
1341
977
  "heading-2": {
1342
978
  "color": "#154273",
1343
979
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
980
+ "font-size": "2.5rem",
1344
981
  "font-weight": 700,
1345
982
  "line-height": "125%",
1346
- "font-size": "2.5rem",
1347
- "margin-block-end": 0,
1348
- "margin-block-start": 0
983
+ "margin-block-end": "0rem",
984
+ "margin-block-start": "0rem"
1349
985
  },
1350
986
  "heading-3": {
1351
987
  "color": "#154273",
1352
988
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
989
+ "font-size": "1.875rem",
1353
990
  "font-weight": 700,
1354
991
  "line-height": "125%",
1355
- "font-size": "1.875rem",
1356
- "margin-block-end": 0,
1357
- "margin-block-start": 0
992
+ "margin-block-end": "0rem",
993
+ "margin-block-start": "0rem"
1358
994
  },
1359
995
  "heading-4": {
1360
996
  "color": "#154273",
1361
997
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1362
- "font-weight": 700,
1363
- "line-height": "125%",
1364
998
  "font-size": "1.5rem",
1365
- "margin-block-end": 0,
1366
- "margin-block-start": 0
999
+ "font-weight": 700,
1000
+ "line-height": "150%",
1001
+ "margin-block-end": "0rem",
1002
+ "margin-block-start": "0rem"
1367
1003
  },
1368
1004
  "heading-5": {
1369
1005
  "color": "#154273",
1370
1006
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1007
+ "font-size": "1.25rem",
1371
1008
  "font-weight": 700,
1372
- "line-height": "125%",
1009
+ "line-height": "150%",
1010
+ "margin-block-end": "0rem",
1011
+ "margin-block-start": "0rem"
1012
+ },
1013
+ "heading-6": {
1014
+ "color": "#154273",
1015
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1373
1016
  "font-size": "1.25rem",
1374
- "margin-block-end": 0,
1375
- "margin-block-start": 0
1017
+ "font-weight": 700,
1018
+ "line-height": "150%",
1019
+ "margin-block-end": "0rem",
1020
+ "margin-block-start": "0rem"
1376
1021
  },
1377
1022
  "form-label": {
1378
1023
  "color": "#0F172A",
@@ -1413,7 +1058,7 @@
1413
1058
  "invalid": {
1414
1059
  "border-inline-start-color": "#d52b1e",
1415
1060
  "border-inline-start-width": "0px",
1416
- "padding-inline-start": 0
1061
+ "padding-inline-start": "0rem"
1417
1062
  },
1418
1063
  "label": {
1419
1064
  "margin-block-end": "0.5rem"
@@ -1467,7 +1112,7 @@
1467
1112
  "border-inline-start": {
1468
1113
  "color": "#d52b1e"
1469
1114
  },
1470
- "padding-inline-start": 0,
1115
+ "padding-inline-start": "0rem",
1471
1116
  "border-inline-start-width": "0px"
1472
1117
  }
1473
1118
  },
@@ -1566,480 +1211,991 @@
1566
1211
  "border-width": "2px"
1567
1212
  }
1568
1213
  },
1569
- "border-width": "1px",
1570
- "hover": {
1214
+ "border-width": "1px",
1215
+ "hover": {
1216
+ "border-width": "1px",
1217
+ "background-color": "#fff",
1218
+ "border-color": "#738eab"
1219
+ },
1220
+ "active": {
1221
+ "border-width": "1px",
1222
+ "background-color": "#fff",
1223
+ "border-color": "#4f7196"
1224
+ }
1225
+ },
1226
+ "article": {
1227
+ "max-inline-size": "75ch"
1228
+ },
1229
+ "alert": {
1230
+ "heading": {
1231
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1232
+ "font-weight": 700,
1233
+ "line-height": "150%",
1234
+ "font-size": "1.25rem"
1235
+ },
1236
+ "column-gap": "0.5rem",
1237
+ "border-width": "0px",
1238
+ "margin-block-end": "0.75rem",
1239
+ "margin-block-start": "0.75rem",
1240
+ "padding-block-end": "1rem",
1241
+ "padding-block-start": "1rem",
1242
+ "padding-inline-end": "1rem",
1243
+ "padding-inline-start": "1rem",
1244
+ "background-color": "#d9ebf7",
1245
+ "border-color": "transparent",
1246
+ "color": "#000",
1247
+ "info": {
1248
+ "background-color": "#d9ebf7",
1249
+ "border-color": "transparent",
1250
+ "color": "#000"
1251
+ },
1252
+ "error": {
1253
+ "background-color": "#f9dfdd",
1254
+ "border-color": "transparent",
1255
+ "color": "#000"
1256
+ },
1257
+ "ok": {
1258
+ "background-color": "#e1eddb",
1259
+ "border-color": "transparent",
1260
+ "color": "#000"
1261
+ },
1262
+ "warning": {
1263
+ "background-color": "#fff4db",
1264
+ "border-color": "transparent",
1265
+ "color": "#000"
1266
+ },
1267
+ "icon": {
1268
+ "inset-block-start": "3px",
1269
+ "info": {
1270
+ "color": "#007bc7"
1271
+ },
1272
+ "error": {
1273
+ "color": "#d52b1e"
1274
+ },
1275
+ "ok": {
1276
+ "color": "#39870c"
1277
+ },
1278
+ "warning": {
1279
+ "color": "#ffb612"
1280
+ },
1281
+ "size": "24px"
1282
+ },
1283
+ "message": {
1284
+ "line-height": "150%",
1285
+ "column-gap": "0.5rem"
1286
+ },
1287
+ "border-radius": "5px"
1288
+ },
1289
+ "document": {
1290
+ "background-color": "#fff",
1291
+ "color": "#0F172A",
1292
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1293
+ "font-size": "1.25rem",
1294
+ "line-height": "150%",
1295
+ "font-weight": 400
1296
+ },
1297
+ "rich-text": {
1298
+ "stranger": {
1299
+ "margin-block-end": "2rem"
1300
+ },
1301
+ "acquaintance": {
1302
+ "margin-block-end": "1rem"
1303
+ },
1304
+ "friend": {
1305
+ "margin-block-end": "0.5rem"
1306
+ },
1307
+ "best-friend": {
1308
+ "margin-block-end": "0.25rem"
1309
+ },
1310
+ "confidant": {
1311
+ "margin-block-end": "0rem"
1312
+ }
1313
+ },
1314
+ "pointer-target": {
1315
+ "min-size": "48px"
1316
+ },
1317
+ "focus": {
1318
+ "outline-color": "#000",
1319
+ "outline-offset": "0.125rem",
1320
+ "outline-style": "solid",
1321
+ "outline-width": "2px",
1322
+ "inverse": {
1323
+ "outline-color": "#fff"
1324
+ }
1325
+ }
1326
+ },
1327
+ "rhc": {
1328
+ "link-list": {
1329
+ "text-decoration": "None"
1330
+ },
1331
+ "data-badge-button": {
1332
+ "column-gap": "0.125rem",
1333
+ "hover": {
1334
+ "background-color": "#154273",
1335
+ "color": "#fff"
1336
+ }
1337
+ },
1338
+ "keep": {
1339
+ "_comment": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset common/rounded-corner.",
1340
+ "top-left": {
1341
+ "borderRadiusTopLeft": "48px",
1342
+ "borderRadiusTopRight": 0,
1343
+ "borderRadiusBottomRight": 0,
1344
+ "borderRadiusBottomLeft": 0
1345
+ },
1346
+ "top-right": {
1347
+ "borderRadiusTopRight": "48px",
1348
+ "borderRadiusTopLeft": 0,
1349
+ "borderRadiusBottomRight": 0,
1350
+ "borderRadiusBottomLeft": 0
1351
+ },
1352
+ "bottom-right": {
1353
+ "borderRadiusTopLeft": 0,
1354
+ "borderRadiusTopRight": 0,
1355
+ "borderRadiusBottomRight": "48px",
1356
+ "borderRadiusBottomLeft": 0
1357
+ },
1358
+ "bottom-left": {
1359
+ "borderRadiusTopLeft": 0,
1360
+ "borderRadiusTopRight": 0,
1361
+ "borderRadiusBottomRight": 0,
1362
+ "borderRadiusBottomLeft": "48px"
1363
+ }
1364
+ },
1365
+ "rounded-corner": {
1366
+ "xs": {
1367
+ "border-radius": "24px"
1368
+ },
1369
+ "md": {
1370
+ "border-radius": "48px"
1371
+ },
1372
+ "xl": {
1373
+ "border-radius": "96px"
1374
+ },
1375
+ "border-width": "2px"
1376
+ },
1377
+ "accordion": {
1378
+ "button": {
1379
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1380
+ "font-size": "1.25rem",
1381
+ "font-weight": 400,
1382
+ "line-height": "150%",
1383
+ "icon": {
1384
+ "margin-block": "0.25rem"
1385
+ },
1386
+ "padding-block-end": "0.75rem",
1387
+ "padding-block-start": "0.75rem",
1388
+ "padding-inline-end": "1rem",
1389
+ "padding-inline-start": "1rem",
1390
+ "expanded": {
1391
+ "background-color": "#fff",
1392
+ "color": "#0F172A"
1393
+ }
1394
+ },
1395
+ "section": {
1396
+ "border-block-end-width": "1px",
1397
+ "border-width": 0,
1398
+ "border-color": "#94A3B8"
1399
+ },
1400
+ "header": {
1401
+ "margin": 0
1402
+ },
1403
+ "border-radius": "0px",
1404
+ "color": "#0F172A"
1405
+ },
1406
+ "data-summary": {
1407
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1408
+ "item-value": {
1409
+ "font-weight": 400,
1410
+ "row": {
1411
+ "padding-block-end": "0.75rem",
1412
+ "padding-block-start": "0.75rem",
1413
+ "padding-inline-end": "0rem",
1414
+ "padding-inline-start": "0px"
1415
+ },
1416
+ "padding-block-end": "0.75rem",
1417
+ "padding-block-start": "0rem",
1418
+ "padding-inline-end": "0rem",
1419
+ "padding-inline-start": "0rem"
1420
+ },
1421
+ "item-key": {
1422
+ "font-weight": 700,
1423
+ "row": {
1424
+ "padding-block-end": "0.75rem",
1425
+ "padding-block-start": "0.75rem",
1426
+ "padding-inline-end": "1rem",
1427
+ "padding-inline-start": "0rem"
1428
+ },
1429
+ "padding-block-end": "0.25rem",
1430
+ "padding-block-start": "0.75rem",
1431
+ "padding-inline-end": "0rem",
1432
+ "padding-inline-start": "0rem"
1433
+ },
1434
+ "item": {
1571
1435
  "border-width": "1px",
1572
- "background-color": "#fff",
1573
- "border-color": "#738eab"
1436
+ "border-color": "#CBD5E1",
1437
+ "border-block-end-style": "solid",
1438
+ "color": "#0F172A"
1574
1439
  },
1575
- "active": {
1576
- "border-width": "1px",
1577
- "background-color": "#fff",
1578
- "border-color": "#4f7196"
1440
+ "font-size": "1.25rem",
1441
+ "line-height": "150%",
1442
+ "item-action": {
1443
+ "row": {
1444
+ "padding-block-end": "0.75rem",
1445
+ "padding-block-start": "0.75rem",
1446
+ "padding-inline-end": "0rem",
1447
+ "padding-inline-start": "1rem"
1448
+ },
1449
+ "padding-block-end": "0.75rem",
1450
+ "padding-block-start": "0.75rem",
1451
+ "padding-inline-end": "1rem",
1452
+ "padding-inline-start": "0rem"
1579
1453
  }
1580
1454
  },
1581
- "button-group": {
1582
- "background-color": "transparent",
1455
+ "sub-nav-bar": {
1456
+ "background-color": "#f2f4f6",
1583
1457
  "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"
1458
+ "column-width": "375px",
1459
+ "padding-block-end": "2rem",
1460
+ "padding-block-start": "2rem",
1461
+ "inline-size": "100%",
1462
+ "content": {
1463
+ "padding-inline-end": "1rem",
1464
+ "padding-inline-start": "1rem",
1465
+ "max-inline-size": "1280px",
1466
+ "list": {
1467
+ "row-gap": "0.5rem"
1468
+ }
1469
+ }
1589
1470
  },
1590
- "button": {
1591
- "background-color": "#0F172A",
1592
- "border-color": "transparent",
1471
+ "toggletip": {
1593
1472
  "color": "#fff",
1473
+ "background-color": "#007bc7",
1474
+ "border-color": "transparent",
1594
1475
  "border-radius": "5px",
1595
1476
  "border-width": "1px",
1596
1477
  "icon": {
1597
- "gap": "0.5rem",
1598
1478
  "size": "24px"
1599
1479
  },
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"
1480
+ "size": "24px",
1481
+ "active": {
1482
+ "color": "#007bc7",
1483
+ "background-color": "#fff",
1484
+ "border-color": "#007bc7"
1617
1485
  },
1618
1486
  "hover": {
1619
- "background-color": "#475569",
1620
- "border-color": "transparent",
1621
- "color": "#fff"
1487
+ "color": "#0F172A",
1488
+ "background-color": "#66AFDD"
1622
1489
  },
1623
- "active": {
1624
- "background-color": "#1E293B",
1625
- "border-color": "transparent",
1490
+ "focus": {
1491
+ "color": "#fff",
1492
+ "background-color": "#007bc7"
1493
+ }
1494
+ },
1495
+ "sidenav": {
1496
+ "display": "flex",
1497
+ "link": {
1498
+ "line-height": "150%",
1499
+ "icon": {
1500
+ "size": "24px",
1501
+ "margin-inline": "0.5rem"
1502
+ },
1503
+ "font-size": "1.25rem",
1504
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1505
+ "font-weight": 400,
1506
+ "current": {
1507
+ "font-weight": 700,
1508
+ "color": "#0F172A"
1509
+ },
1510
+ "color": "#01689b",
1511
+ "active": {
1512
+ "color": "#42145f",
1513
+ "text-decoration": "underline"
1514
+ },
1515
+ "focus": {
1516
+ "border-radius": "5px",
1517
+ "border-width": "2px",
1518
+ "border-style": "solid",
1519
+ "border-color": "#154273",
1520
+ "background-color": "none",
1521
+ "color": "#01689b",
1522
+ "text-decoration": "None"
1523
+ },
1524
+ "hover": {
1525
+ "color": "#15496a",
1526
+ "text-decoration": "underline"
1527
+ },
1528
+ "padding-block-start": "0.75rem",
1529
+ "padding-block-end": "0.75rem",
1530
+ "text-decoration": "None",
1531
+ "column-gap": "0.5rem"
1532
+ }
1533
+ },
1534
+ "radio-group": {
1535
+ "padding-block-end": "0.5rem",
1536
+ "padding-block-start": "0.5rem",
1537
+ "row-gap": "1rem"
1538
+ },
1539
+ "navigation-list": {
1540
+ "icon": {
1541
+ "background-color": "#0F172A",
1542
+ "border-radius": "999px",
1626
1543
  "color": "#fff"
1627
1544
  },
1628
- "min-block-size": "48px",
1629
- "min-inline-size": "48px",
1630
- "column-gap": "0.5rem",
1631
- "primary-action": {
1632
- "hover": {
1633
- "background-color": "#162f50",
1634
- "border-color": "transparent",
1635
- "color": "#fff"
1545
+ "item": {
1546
+ "icon": {
1547
+ "padding-inline": "0.5rem",
1548
+ "padding-block": "0.5rem",
1549
+ "size": "24px"
1636
1550
  },
1637
- "background-color": "#154273",
1638
- "border-color": "transparent",
1639
- "color": "#fff",
1640
- "disabled": {
1641
- "background-color": "#b8c6d5",
1642
- "border-color": "transparent",
1643
- "color": "#4f7196"
1551
+ "content": {
1552
+ "font-size": "1.25rem",
1553
+ "column-gap": "0.5rem",
1554
+ "row-gap": "0.25rem"
1644
1555
  },
1645
- "focus": {
1646
- "background-color": "#162f50",
1647
- "border-color": "transparent",
1648
- "color": "#fff"
1556
+ "label": {
1557
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1558
+ "font-size": "1.875rem",
1559
+ "font-weight": 700,
1560
+ "line-height": "150%"
1649
1561
  },
1650
- "font-weight": 700,
1651
1562
  "active": {
1652
- "background-color": "#0d2845",
1653
- "border-color": "transparent",
1654
- "color": "#fff"
1563
+ "background-color": "#F1F5F9"
1655
1564
  },
1656
- "font-size": "1.25rem",
1657
- "line-height": "1.875rem",
1658
- "pressed": {
1659
- "background-color": "#162945",
1660
- "border-color": "transparent",
1661
- "color": "#fff"
1662
- }
1663
- },
1664
- "secondary-action": {
1665
1565
  "hover": {
1666
- "background-color": "#dce3ea",
1667
- "border-color": "#162f50",
1668
- "color": "#162f50"
1669
- },
1670
- "background-color": "transparent",
1671
- "border-color": "#154273",
1672
- "color": "#154273",
1673
- "disabled": {
1674
- "background-color": "transparent",
1675
- "border-color": "#95a9c0",
1676
- "color": "#738eab"
1566
+ "background-color": "#F8FAFC"
1677
1567
  },
1678
1568
  "focus": {
1679
- "background-color": "#dce3ea",
1680
- "border-color": "transparent",
1681
- "color": "#162f50"
1569
+ "background-color": "#dce3ea"
1682
1570
  },
1683
- "font-weight": 700,
1684
- "active": {
1685
- "background-color": "#95a9c0",
1686
- "border-color": "#162945",
1687
- "color": "#162f50"
1571
+ "background-color": "#fff",
1572
+ "color": "#334155",
1573
+ "border-width": "1px",
1574
+ "border-color": "#CBD5E1",
1575
+ "heading": {
1576
+ "color": "#0F172A"
1688
1577
  },
1689
- "font-size": "1.25rem",
1690
- "line-height": "1.875rem",
1691
- "pressed": {
1692
- "background-color": "#b8c6d5",
1693
- "border-color": "#162945",
1694
- "color": "#162945"
1695
- }
1578
+ "column-gap": "1rem",
1579
+ "min-height": "48px",
1580
+ "padding-block": "0.75rem",
1581
+ "padding-inline": "1rem"
1582
+ }
1583
+ },
1584
+ "nav-bar": {
1585
+ "border-block-end-width": "1px",
1586
+ "max-inline-size": "1280px",
1587
+ "padding-inline": "1rem",
1588
+ "container": {
1589
+ "inline-size": "100%"
1696
1590
  },
1697
- "subtle": {
1698
- "font-size": "1.25rem",
1699
- "font-weight": 700,
1700
- "hover": {
1701
- "background-color": "#dce3ea",
1702
- "border-color": "transparent",
1703
- "color": "#162f50"
1591
+ "content": {
1592
+ "column-gap": "1rem"
1593
+ },
1594
+ "icon": {
1595
+ "color": "#0F172A",
1596
+ "active": {
1597
+ "color": "#fff"
1704
1598
  },
1705
- "background-color": "transparent",
1706
- "border-color": "transparent",
1707
- "color": "#154273",
1708
- "disabled": {
1709
- "background-color": "transparent",
1710
- "border-color": "transparent",
1711
- "color": "#b8c6d5"
1599
+ "size": "24px"
1600
+ },
1601
+ "link": {
1602
+ "active": {
1603
+ "background-color": "#154273",
1604
+ "color": "#fff"
1712
1605
  },
1606
+ "background-color": "#fff",
1607
+ "color": "#154273",
1713
1608
  "focus": {
1714
1609
  "background-color": "#dce3ea",
1715
- "border-color": "transparent",
1716
- "color": "#162f50"
1610
+ "color": "#154273"
1717
1611
  },
1718
- "active": {
1719
- "background-color": "#95a9c0",
1720
- "border-color": "transparent",
1721
- "color": "#0d2845"
1612
+ "hover": {
1613
+ "background-color": "#F8FAFC",
1614
+ "color": "#154273"
1722
1615
  },
1723
- "line-height": "1.875rem",
1724
- "pressed": {
1725
- "background-color": "#b8c6d5",
1726
- "border-color": "transparent",
1727
- "color": "#162945"
1728
- }
1616
+ "padding-block-end": "1rem",
1617
+ "padding-block-start": "1rem",
1618
+ "padding-inline-end": "0.75rem",
1619
+ "padding-inline-start": "0.75rem",
1620
+ "column-gap": "0.5rem"
1729
1621
  },
1730
- "pressed": {
1731
- "background-color": "#1E293B",
1732
- "border-color": "transparent",
1733
- "color": "#fff"
1734
- }
1622
+ "heading": {
1623
+ "font-weight": 700
1624
+ },
1625
+ "background-color": "#fff",
1626
+ "color": "#154273",
1627
+ "border-color": "#4f7196"
1735
1628
  },
1736
- "breadcrumb-nav": {
1737
- "line-height": 1.4,
1738
- "font-size": "1.25rem",
1739
- "link": {
1629
+ "message-list": {
1630
+ "item": {
1631
+ "background-color": "#fff",
1632
+ "border-color": "#CBD5E1",
1633
+ "border-width": "1px",
1634
+ "color": "#334155",
1635
+ "column-gap": "1rem",
1740
1636
  "icon": {
1741
1637
  "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,
1749
- "color": "#01689b",
1750
- "active": {
1751
- "color": "#42145f",
1752
- "text-decoration": "None"
1753
- },
1754
- "focus": {
1755
- "background-color": "transparent",
1756
- "color": "#01689b",
1757
- "text-decoration": "None"
1638
+ "color": "#0F172A"
1758
1639
  },
1759
- "hover": {
1760
- "color": "#01496c",
1761
- "text-decoration": "None"
1640
+ "min-height": "48px",
1641
+ "padding-block": "0.75rem",
1642
+ "padding-inline": "1rem",
1643
+ "content": {
1644
+ "font-size": "1.25rem",
1645
+ "column-gap": "0.5rem",
1646
+ "row-gap": "0.5rem"
1762
1647
  },
1763
- "current": {
1764
- "color": "#334155"
1648
+ "label": {
1649
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1650
+ "font-size": "1.25rem",
1651
+ "font-weight": 700,
1652
+ "line-height": "150%"
1765
1653
  },
1766
- "text-decoration": "underline"
1654
+ "heading": {
1655
+ "color": "#0F172A"
1656
+ }
1657
+ }
1658
+ },
1659
+ "logo": {
1660
+ "image": {
1661
+ "background-color": "#fff",
1662
+ "inline-size": "48px",
1663
+ "block-size": "96px",
1664
+ "color": "#154273"
1767
1665
  },
1768
- "divider": {
1769
- "size": "24px",
1770
- "color": "#334155",
1771
- "inset-block-start": 0
1666
+ "title": {
1667
+ "font-weight": 600,
1668
+ "line-height": "1.063rem",
1669
+ "font-size": "0.913rem",
1670
+ "padding-block-start": "3.125rem"
1671
+ },
1672
+ "subtitle": {
1673
+ "font-weight": 400,
1674
+ "line-height": "1rem",
1675
+ "font-size": "0.775rem"
1772
1676
  },
1773
- "margin-inline": "0.5rem",
1677
+ "column-gap": "12px",
1774
1678
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1775
- "font-weight": 400
1679
+ "color": "#154273"
1776
1680
  },
1777
- "article": {
1778
- "max-inline-size": "75ch"
1681
+ "link-list-card": {
1682
+ "background-color": "#fff",
1683
+ "padding-block-start": "1.5rem",
1684
+ "padding-block-end": "1.5rem",
1685
+ "row-gap": "1rem",
1686
+ "padding-inline-start": "1.5rem",
1687
+ "padding-inline-end": "1.5rem"
1779
1688
  },
1780
- "alert": {
1689
+ "icon-only-button": {
1690
+ "padding-block-end": "0.75rem",
1691
+ "padding-block-start": "0.75rem",
1692
+ "padding-inline-end": "0.75rem",
1693
+ "padding-inline-start": "0.75rem"
1694
+ },
1695
+ "hero": {
1781
1696
  "heading": {
1782
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1783
1697
  "font-weight": 700,
1698
+ "line-height": "125%",
1699
+ "font-size": "1.875rem",
1700
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif"
1701
+ },
1702
+ "sub-heading": {
1703
+ "font-weight": 400,
1784
1704
  "line-height": "150%",
1785
- "font-size": "1.25rem"
1705
+ "font-size": "1.25rem",
1706
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif"
1707
+ },
1708
+ "message": {
1709
+ "background-color": "#154273",
1710
+ "color": "#fff",
1711
+ "row-gap": "0.125rem",
1712
+ "padding-block-end": "1rem",
1713
+ "padding-inline-end": "1rem",
1714
+ "padding-inline-start": "1rem",
1715
+ "padding-block-start": "1rem",
1716
+ "border-radius": "20px",
1717
+ "inline-size": "90%"
1718
+ },
1719
+ "border-radius": "40px",
1720
+ "inline-size": "100%"
1721
+ },
1722
+ "form-field-radio-option": {
1723
+ "column-gap": "0.5rem",
1724
+ "font-weight": 400,
1725
+ "row-gap": "0.5rem",
1726
+ "label": {
1727
+ "margin-block-end": "0rem"
1728
+ },
1729
+ "input": {
1730
+ "margin": {
1731
+ "block-start": "0.25rem"
1732
+ }
1733
+ }
1734
+ },
1735
+ "form-field-checkbox-option": {
1736
+ "column-gap": "0.5rem",
1737
+ "margin-block-end": "0rem"
1738
+ },
1739
+ "page-footer": {
1740
+ "column-gap": "1.5rem",
1741
+ "column-width": "200px",
1742
+ "column": {
1743
+ "title": {
1744
+ "margin-block-end": "0.75rem"
1745
+ }
1746
+ },
1747
+ "content": {
1748
+ "max-inline-size": "1280px",
1749
+ "padding-inline-start": "1rem",
1750
+ "padding-inline-end": "1rem",
1751
+ "column-gap": "2rem"
1752
+ },
1753
+ "border-block-start-width": "2px",
1754
+ "border-block-start-color": "#738eab",
1755
+ "border-block-start-style": "solid",
1756
+ "outlined": {
1757
+ "background-color": "#fff",
1758
+ "color": "#154273",
1759
+ "border-color": "#154273"
1760
+ },
1761
+ "padding-block-start": "2.5rem",
1762
+ "padding-block-end": "2.5rem",
1763
+ "padding-inline-start": "2.5rem",
1764
+ "padding-inline-end": "2.5rem",
1765
+ "flex": {
1766
+ "direction": "column"
1767
+ }
1768
+ },
1769
+ "file-input": {
1770
+ "column-gap": "0.75rem",
1771
+ "row-gap": "0.75rem",
1772
+ "feedback": {
1773
+ "color": "#475569",
1774
+ "font-size": "1rem"
1775
+ }
1776
+ },
1777
+ "file": {
1778
+ "border-style": "solid",
1779
+ "border-color": "#154273",
1780
+ "border-width": "1px",
1781
+ "border-radius": "5px",
1782
+ "padding-inline-start": "1rem",
1783
+ "padding-inline-end": "1rem",
1784
+ "padding-block-start": "0.75rem",
1785
+ "padding-block-end": "0.75rem",
1786
+ "column-gap": "0.25rem",
1787
+ "error": {
1788
+ "border-color": "#d52b1e"
1789
+ },
1790
+ "subtitle": {
1791
+ "color": "#64748B"
1792
+ }
1793
+ },
1794
+ "dot-badge": {
1795
+ "border-radius": "999px",
1796
+ "color": "#d52b1e",
1797
+ "size": "12px"
1798
+ },
1799
+ "code-input": {
1800
+ "size": "48px"
1801
+ },
1802
+ "code-input-group": {
1803
+ "column-gap": "0.5rem"
1804
+ },
1805
+ "checkbox-group": {
1806
+ "padding-block-end": "0.5rem",
1807
+ "padding-block-start": "0.5rem",
1808
+ "row-gap": "1rem"
1809
+ },
1810
+ "card-as-link": {
1811
+ "background-color": "#fff",
1812
+ "border-color": "#CBD5E1",
1813
+ "border-radius": "5px",
1814
+ "border-width": "1px",
1815
+ "color": "#0F172A",
1816
+ "column-gap": "1rem",
1817
+ "inline-size": "328px",
1818
+ "icon": {
1819
+ "color": "#154273",
1820
+ "size": "24px"
1821
+ },
1822
+ "link": {
1823
+ "color": "#01689b",
1824
+ "text-decoration": "underline",
1825
+ "active": {
1826
+ "text-decoration": "none"
1827
+ },
1828
+ "hover": {
1829
+ "text-decoration": "none"
1830
+ },
1831
+ "focus": {
1832
+ "text-decoration": "none"
1833
+ }
1834
+ },
1835
+ "metadata": {
1836
+ "color": "#334155"
1786
1837
  },
1787
- "column-gap": "0.5rem",
1788
- "border-width": "0px",
1789
- "margin-block-end": "0.75rem",
1790
- "margin-block-start": "0.75rem",
1791
1838
  "padding-block-end": "1rem",
1792
1839
  "padding-block-start": "1rem",
1793
1840
  "padding-inline-end": "1rem",
1794
1841
  "padding-inline-start": "1rem",
1795
- "background-color": "#d9ebf7",
1796
- "border-color": "transparent",
1797
- "color": "#000",
1798
- "info": {
1799
- "background-color": "#d9ebf7",
1800
- "border-color": "transparent",
1801
- "color": "#000"
1842
+ "row-gap": "0.75rem",
1843
+ "active": {
1844
+ "background-color": "#F1F5F9",
1845
+ "text-decoration": "underline"
1802
1846
  },
1803
- "error": {
1804
- "background-color": "#f9dfdd",
1805
- "border-color": "transparent",
1806
- "color": "#000"
1847
+ "hover": {
1848
+ "background-color": "#F8FAFC",
1849
+ "text-decoration": "underline"
1807
1850
  },
1808
- "ok": {
1809
- "background-color": "#e1eddb",
1851
+ "focus": {
1852
+ "background-color": "#dce3ea",
1853
+ "text-decoration": "underline"
1854
+ },
1855
+ "full-bleed": {
1856
+ "background-color": "#000",
1810
1857
  "border-color": "transparent",
1811
- "color": "#000"
1858
+ "color": "#fff",
1859
+ "opacity": 0.5
1812
1860
  },
1813
- "warning": {
1814
- "background-color": "#fff4db",
1861
+ "heading": {
1862
+ "color": "#154273",
1863
+ "padding-block-start": "0.5rem",
1864
+ "font-size": "1.5rem",
1865
+ "font-weight": 700
1866
+ },
1867
+ "horizontal": {
1868
+ "background-color": "#154273",
1815
1869
  "border-color": "transparent",
1816
- "color": "#000"
1870
+ "color": "#fff",
1871
+ "max-block-size": "96px",
1872
+ "padding-block-end": 0,
1873
+ "padding-block-start": 0,
1874
+ "padding-inline-end": "1rem",
1875
+ "padding-inline-start": "1rem",
1876
+ "heading": {
1877
+ "inline-size": "200px"
1878
+ }
1879
+ }
1880
+ },
1881
+ "border-radius": {
1882
+ "sm": "2.5px",
1883
+ "md": "5px",
1884
+ "circle": "999px",
1885
+ "none": "0px"
1886
+ },
1887
+ "color": {
1888
+ "focus": {
1889
+ "outline": "#000"
1817
1890
  },
1818
- "icon": {
1819
- "inset-block-start": "3px",
1891
+ "foreground": {
1892
+ "default": "#0F172A",
1893
+ "subdued": "#334155",
1894
+ "link": "#01689b",
1895
+ "on-dark-color": "#fff",
1896
+ "on-light-color": "#000"
1897
+ },
1898
+ "border": {
1899
+ "default": "#64748B",
1900
+ "subdued": "#94A3B8",
1901
+ "strong": "#0F172A"
1902
+ },
1903
+ "canvas": "#fff",
1904
+ "feedback": {
1905
+ "success": {
1906
+ "default": "#39870c",
1907
+ "subdued": "#e1eddb"
1908
+ },
1820
1909
  "info": {
1821
- "color": "#007bc7"
1910
+ "default": "#007bc7",
1911
+ "subdued": "#d9ebf7"
1822
1912
  },
1823
1913
  "error": {
1824
- "color": "#d52b1e"
1825
- },
1826
- "ok": {
1827
- "color": "#39870c"
1914
+ "default": "#d52b1e",
1915
+ "subdued": "#f9dfdd"
1828
1916
  },
1829
1917
  "warning": {
1830
- "color": "#ffb612"
1831
- },
1832
- "size": "24px"
1918
+ "default": "#ffb612",
1919
+ "subdued": "#fff4db"
1920
+ }
1833
1921
  },
1834
- "message": {
1835
- "line-height": "150%",
1836
- "column-gap": "0.5rem"
1922
+ "accent": {
1923
+ "500": "#8fcae7"
1837
1924
  },
1838
- "border-radius": "5px"
1839
- },
1840
- "action": {
1841
- "activate": {
1842
- "cursor": "pointer"
1925
+ "accent-2": {
1926
+ "500": "#f092cd"
1843
1927
  },
1844
- "busy": {
1845
- "cursor": "wait"
1928
+ "primary": {
1929
+ "50": "#dce3ea",
1930
+ "100": "#b8c6d5",
1931
+ "200": "#95a9c0",
1932
+ "300": "#738eab",
1933
+ "400": "#4f7196",
1934
+ "500": "#154273",
1935
+ "hover": "#162f50"
1846
1936
  },
1847
- "disabled": {
1848
- "cursor": "not-allowed"
1937
+ "cool-grey": {
1938
+ "50": "#F8FAFC",
1939
+ "100": "#F1F5F9",
1940
+ "200": "#E2E8F0",
1941
+ "300": "#CBD5E1",
1942
+ "400": "#94A3B8",
1943
+ "500": "#64748B",
1944
+ "600": "#475569",
1945
+ "700": "#334155",
1946
+ "800": "#1E293B",
1947
+ "900": "#0F172A"
1849
1948
  },
1850
- "inert": {
1851
- "cursor": "default"
1949
+ "lichtblauw": {
1950
+ "50": "#eef7fb",
1951
+ "100": "#ddeff8",
1952
+ "200": "#CCE7F4",
1953
+ "300": "#BCDFF0",
1954
+ "400": "#ABD7ED",
1955
+ "500": "#8fcae7"
1852
1956
  },
1853
- "navigate": {
1854
- "cursor": "pointer"
1957
+ "violet": {
1958
+ "50": "#f2d9e7",
1959
+ "100": "#e5b3d0",
1960
+ "200": "#D88CB7",
1961
+ "300": "#CB66A0",
1962
+ "400": "#BE4088",
1963
+ "500": "#a90061"
1855
1964
  },
1856
- "submit": {
1857
- "cursor": "pointer"
1858
- }
1859
- },
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
1867
- },
1868
- "rich-text": {
1869
- "stranger": {
1870
- "margin-block-end": "2rem"
1965
+ "paars": {
1966
+ "50": "#e3dce7",
1967
+ "100": "#c6b9cf",
1968
+ "200": "#A995B7",
1969
+ "300": "#8D729F",
1970
+ "400": "#714f87",
1971
+ "500": "#42145f"
1972
+ },
1973
+ "hemelblauw": {
1974
+ "50": "#d9ebf7",
1975
+ "100": "#b3d7ee",
1976
+ "200": "#8CC3E6",
1977
+ "300": "#66AFDD",
1978
+ "400": "#409CD5",
1979
+ "500": "#007bc7"
1980
+ },
1981
+ "donkerblauw": {
1982
+ "50": "#d9e8f0",
1983
+ "100": "#b3d2e1",
1984
+ "200": "#8CBBD2",
1985
+ "300": "#66A4C3",
1986
+ "400": "#408EB4",
1987
+ "500": "#01689b"
1988
+ },
1989
+ "mintgroen": {
1990
+ "50": "#eaf8f4",
1991
+ "100": "#d6f2e9",
1992
+ "200": "#C1EBDE",
1993
+ "300": "#ACE4D3",
1994
+ "400": "#98DDC8",
1995
+ "500": "#76d2b6"
1996
+ },
1997
+ "mosgroen": {
1998
+ "50": "#ebebd9",
1999
+ "100": "#d6d7b3",
2000
+ "200": "#C1C38C",
2001
+ "300": "#ADAF66",
2002
+ "400": "#999C40",
2003
+ "500": "#777b00"
2004
+ },
2005
+ "groen": {
2006
+ "50": "#e1eddb",
2007
+ "100": "#c4dbb6",
2008
+ "200": "#A5C991",
2009
+ "300": "#88B76D",
2010
+ "400": "#6AA549",
2011
+ "500": "#39870c"
2012
+ },
2013
+ "donkergroen": {
2014
+ "50": "#dfe6e1",
2015
+ "100": "#becdc3",
2016
+ "200": "#9DB4A4",
2017
+ "300": "#7D9B87",
2018
+ "400": "#5D8269",
2019
+ "500": "#275937"
2020
+ },
2021
+ "bruin": {
2022
+ "50": "#efeada",
2023
+ "100": "#dfd4b6",
2024
+ "200": "#CFBF90",
2025
+ "300": "#BFA96C",
2026
+ "400": "#AF9447",
2027
+ "500": "#94710a"
2028
+ },
2029
+ "donkerbruin": {
2030
+ "50": "#e8e0df",
2031
+ "100": "#d1c2be",
2032
+ "200": "#BAA39D",
2033
+ "300": "#A3847D",
2034
+ "400": "#8D665D",
2035
+ "500": "#673327"
2036
+ },
2037
+ "geel": {
2038
+ "50": "#fefbdd",
2039
+ "100": "#fdf6bc",
2040
+ "200": "#FCF199",
2041
+ "300": "#FBED78",
2042
+ "400": "#FAE856",
2043
+ "500": "#f9e11e"
2044
+ },
2045
+ "donkergeel": {
2046
+ "50": "#fff4db",
2047
+ "100": "#ffe9b8",
2048
+ "200": "#FDDE94",
2049
+ "300": "#FDD370",
2050
+ "400": "#FDC84D",
2051
+ "500": "#ffb612"
2052
+ },
2053
+ "oranje": {
2054
+ "50": "#fbead9",
2055
+ "100": "#f6d4b3",
2056
+ "200": "#F1BE8C",
2057
+ "300": "#EDA966",
2058
+ "400": "#E89440",
2059
+ "500": "#e17000"
1871
2060
  },
1872
- "acquaintance": {
1873
- "margin-block-end": "1rem"
2061
+ "rood": {
2062
+ "50": "#f9dfdd",
2063
+ "100": "#f2bfbc",
2064
+ "200": "#EC9F99",
2065
+ "300": "#E67F78",
2066
+ "400": "#DF6056",
2067
+ "500": "#d52b1e"
1874
2068
  },
1875
- "friend": {
1876
- "margin-block-end": "0.5rem"
2069
+ "roze": {
2070
+ "50": "#fdeff8",
2071
+ "100": "#fbdef0",
2072
+ "200": "#F8CEE8",
2073
+ "300": "#F6BDE1",
2074
+ "400": "#F4ADD9",
2075
+ "500": "#f092cd"
1877
2076
  },
1878
- "best-friend": {
1879
- "margin-block-end": "0.25rem"
2077
+ "robijnrood": {
2078
+ "50": "#f7d9e7",
2079
+ "100": "#efb3ce",
2080
+ "200": "#E78CB6",
2081
+ "300": "#DF669D",
2082
+ "400": "#D74085",
2083
+ "500": "#ca005d"
1880
2084
  },
1881
- "confidant": {
1882
- "margin-block-end": 0
1883
- }
1884
- },
1885
- "pointer-target": {
1886
- "min-size": "48px"
2085
+ "lintblauw": {
2086
+ "50": "#dce3ea",
2087
+ "100": "#b8c6d5",
2088
+ "200": "#95a9c0",
2089
+ "300": "#738eab",
2090
+ "400": "#4f7196",
2091
+ "500": "#154273"
2092
+ },
2093
+ "wit": "#fff",
2094
+ "zwart": "#000",
2095
+ "none": "transparent"
1887
2096
  },
1888
2097
  "focus": {
1889
- "outline-color": "#000",
1890
2098
  "outline-offset": "0.125rem",
1891
2099
  "outline-style": "solid",
1892
- "outline-width": "2px",
1893
- "inverse": {
1894
- "outline-color": "#fff"
1895
- }
1896
- }
1897
- },
1898
- "nl": {
1899
- "skip-link": {
1900
- "font-weight": 700,
1901
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1902
- "font-size": "1.25rem",
1903
- "line-height": "150%",
1904
- "min-block-size": "48px",
1905
- "min-inline-size": "48px",
1906
- "padding-block-end": "0.75rem",
1907
- "padding-block-start": "0.75rem",
1908
- "padding-inline-end": "1rem",
1909
- "padding-inline-start": "1rem",
1910
- "focus": {
1911
- "background-color": "#fff",
1912
- "border-color": "#154273",
1913
- "border-style": "solid",
1914
- "border-width": "2px",
1915
- "color": "#0F172A",
1916
- "text-decoration": "None"
1917
- },
1918
- "focus-visible": {
1919
- "outline-color": "#000"
1920
- },
1921
- "background-color": "#154273",
1922
- "border-color": "transparent",
1923
- "color": "#fff",
1924
- "border-width": "2px",
1925
- "box-block-end-shadow": {
1926
- "offset-x": 0,
1927
- "offset-y": "16px",
1928
- "blur-radius": "48px",
1929
- "spread-radius": 0,
1930
- "color": "#0000001a"
1931
- },
1932
- "text-decoration": "underline",
1933
- "text-underline-offset": "0.125rem"
1934
- },
1935
- "paragraph": {
1936
- "color": "#0F172A",
1937
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1938
- "font-size": "1.25rem",
1939
- "font-weight": 400,
1940
- "line-height": "150%",
1941
- "margin-block-end": 0,
1942
- "margin-block-start": 0,
1943
- "lead": {
1944
- "color": "#0F172A",
1945
- "font-size": "1.5rem",
1946
- "font-weight": 400,
1947
- "line-height": "150%"
1948
- }
2100
+ "outline-width": "2px"
1949
2101
  },
1950
- "link": {
1951
- "color": "#01689b",
1952
- "text-decoration-color": "#01689b",
1953
- "active": {
1954
- "color": "#42145f",
1955
- "text-decoration": "None"
2102
+ "font-size": {
2103
+ "heading": {
2104
+ "level-1": "3.125rem",
2105
+ "level-2": "2.5rem",
2106
+ "level-3": "1.875rem",
2107
+ "level-4": "1.5rem",
2108
+ "level-5": "1.25rem"
1956
2109
  },
1957
- "focus": {
1958
- "background-color": "transparent",
1959
- "color": "#01689b",
1960
- "text-decoration": "None",
1961
- "text-decoration-thickness": "auto"
2110
+ "body": {
2111
+ "intro": "1.5rem",
2112
+ "default": "1.25rem"
1962
2113
  },
1963
- "hover": {
1964
- "color": "#01496c",
1965
- "text-decoration": "None",
1966
- "text-decoration-thickness": "auto"
2114
+ "xs": {
2115
+ "desktop": "1.25rem",
2116
+ "tablet": "1.125rem",
2117
+ "mobile": "1rem"
1967
2118
  },
1968
- "visited": {
1969
- "color": "#42145f"
2119
+ "sm": {
2120
+ "desktop": "1.5rem",
2121
+ "tablet": "1.35rem",
2122
+ "mobile": "1.2rem"
1970
2123
  },
1971
- "text-decoration": "underline",
1972
- "icon": {
1973
- "inset-block-start": "0.25rem",
1974
- "size": "24px"
2124
+ "md": {
2125
+ "desktop": "1.875rem",
2126
+ "tablet": "1.688rem",
2127
+ "mobile": "1.5rem"
1975
2128
  },
1976
- "column-gap": "0.25rem",
1977
- "text-decoration-thickness": "auto",
1978
- "text-underline-offset": "0.125rem",
1979
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1980
- "font-weight": 400,
1981
- "font-size": "1.25rem",
1982
- "line-height": "150%"
2129
+ "lg": {
2130
+ "desktop": "2.5rem",
2131
+ "tablet": "2.25rem",
2132
+ "mobile": "2rem"
2133
+ },
2134
+ "xl": {
2135
+ "desktop": "3.125rem",
2136
+ "tablet": "2.813rem",
2137
+ "mobile": "2.5rem"
2138
+ }
1983
2139
  },
1984
- "heading-level-1": {
1985
- "color": "#154273",
1986
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1987
- "font-weight": 700,
1988
- "line-height": "125%",
1989
- "font-size": "3.125rem",
1990
- "margin-block-end": 0,
1991
- "margin-block-start": 0
2140
+ "font-weight": {
2141
+ "default": 400,
2142
+ "strong": 700,
2143
+ "extra-bold": 800,
2144
+ "bold": 700,
2145
+ "semi-bold": 600,
2146
+ "regular": 400,
2147
+ "light": 300,
2148
+ "thin": 200
1992
2149
  },
1993
- "heading-level-2": {
1994
- "color": "#154273",
1995
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1996
- "font-weight": 700,
1997
- "line-height": "125%",
1998
- "font-size": "2.5rem",
1999
- "margin-block-end": 0,
2000
- "margin-block-start": 0
2150
+ "line-height": {
2151
+ "body": "150%",
2152
+ "sm": "125%",
2153
+ "md": "150%"
2001
2154
  },
2002
- "heading-level-3": {
2003
- "color": "#154273",
2004
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2005
- "font-weight": 700,
2006
- "line-height": "125%",
2007
- "font-size": "1.875rem",
2008
- "margin-block-end": 0,
2009
- "margin-block-start": 0
2155
+ "size": {
2156
+ "target": "48px",
2157
+ "icon": {
2158
+ "functional": "24px"
2159
+ },
2160
+ "quarter-lint": "12px",
2161
+ "half-lint": "24px",
2162
+ "lint": "48px",
2163
+ "2-lint": "96px",
2164
+ "3-lint": "1440px"
2010
2165
  },
2011
- "heading-level-4": {
2012
- "color": "#154273",
2013
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2014
- "font-weight": 700,
2015
- "line-height": "125%",
2016
- "font-size": "1.5rem",
2017
- "margin-block-end": 0,
2018
- "margin-block-start": 0
2166
+ "font-family": {
2167
+ "primary": "'Fira Sans', Arial, Verdana, sans-serif",
2168
+ "secondary": "RijksoverheidSerifWeb, 'Times New Roman', serif"
2019
2169
  },
2020
- "heading-level-5": {
2021
- "color": "#154273",
2022
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2023
- "font-weight": 700,
2024
- "line-height": "125%",
2025
- "font-size": "1.25rem",
2026
- "margin-block-end": 0,
2027
- "margin-block-start": 0
2170
+ "border-width": {
2171
+ "default": "1px",
2172
+ "m": "2px",
2173
+ "none": "0px"
2028
2174
  },
2029
- "number-badge": {
2030
- "font-size": "1.25rem",
2031
- "line-height": "125%",
2032
- "min-block-size": "24px",
2033
- "min-inline-size": "24px",
2034
- "font-weight": 700,
2035
- "border-width": "0px",
2036
- "border-radius": "999px",
2037
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
2038
- "background-color": "#154273",
2039
- "border-color": "transparent",
2040
- "color": "#fff",
2041
- "padding-inline": "0.5rem",
2042
- "padding-block": "0.125rem"
2175
+ "space": {
2176
+ "0": "0rem",
2177
+ "25": "0.125rem",
2178
+ "50": "0.25rem",
2179
+ "100": "0.5rem",
2180
+ "150": "0.75rem",
2181
+ "200": "1rem",
2182
+ "300": "1.5rem",
2183
+ "400": "2rem",
2184
+ "500": "2.5rem",
2185
+ "600": "3rem",
2186
+ "700": "3.5rem"
2187
+ }
2188
+ },
2189
+ "todo": {
2190
+ "link-list": {
2191
+ "link": {
2192
+ "hover": {
2193
+ "text-decoration": "underline"
2194
+ }
2195
+ }
2196
+ },
2197
+ "skip-link": {
2198
+ "font-weight": 700
2043
2199
  }
2044
2200
  }
2045
2201
  }