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