@utrecht/component-library-css 1.0.0-alpha.19 → 1.0.0-alpha.192

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.
@@ -5,146 +5,62 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Tue, 20 Jul 2021 16:30:39 GMT
8
+ * Generated on Mon, 11 Apr 2022 13:44:32 GMT
9
9
  */
10
10
  :root {
11
+ --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
11
12
  --utrecht-topnav-link-focus-text-decoration: none;
12
13
  --utrecht-topnav-link-focus-border-type: dotted;
13
- --utrecht-form-input-block-size: 42px;
14
+ --utrecht-search-bar-hover-transform: 1;
15
+ --utrecht-search-bar-hover-background-color: hsl(359, 65%, 58%);
16
+ --utrecht-search-bar-button-text-transform: uppercase;
17
+ --utrecht-search-bar-button-letter-spacing: .05em;
18
+ --utrecht-search-bar-textbox-background-size: 1em;
19
+ --utrecht-search-bar-textbox-background-position-y: 50%;
20
+ --utrecht-search-bar-textbox-background-position-x: .5em;
14
21
  --utrecht-badge-counter-padding-inline: 1ex;
15
22
  --utrecht-badge-counter-padding-block: 1ex;
16
23
  --utrecht-badge-counter-border-radius: 3ex;
17
- --utrecht-space-column-5xl: 80px;
18
- /* 500% / Extra Large 5 */
19
- --utrecht-space-column-4xl: 64px;
20
- /* 400% / Extra Large 4 */
21
- --utrecht-space-column-3xl: 48px;
22
- /* 300% / Extra Large 3 */
23
- --utrecht-space-column-2xl: 32px;
24
- /* 200% / Extra Large 2 */
25
- --utrecht-space-column-xl: 28px;
26
- /* 175% / Extra Large */
27
- --utrecht-space-column-lg: 24px;
28
- /* 150% / Large */
29
- --utrecht-space-column-md: 16px;
30
- /* 100% / Medium */
31
- --utrecht-space-column-sm: 12px;
32
- /* 75% / Small */
33
- --utrecht-space-column-xs: 8px;
34
- /* 50% / Extra Small */
35
- --utrecht-space-column-2xs: 4px;
36
- /* 25% / Extra Small 2 */
37
- --utrecht-space-column-3xs: 2px;
38
- /* 12.5% / Extra Small 3 */
39
- --utrecht-space-column-4xs: 1px;
40
- /* 6.25% / Extra Small 4 */
41
- --utrecht-space-row-5xl: 80px;
42
- /* 500% / Extra Large 5 */
43
- --utrecht-space-row-4xl: 64px;
44
- /* 400% / Extra Large 4 */
45
- --utrecht-space-row-3xl: 48px;
46
- /* 300% / Extra Large 3 */
47
- --utrecht-space-row-2xl: 32px;
48
- /* 200% / Extra Large 2 */
49
- --utrecht-space-row-xl: 28px;
50
- /* 175% / Extra Large */
51
- --utrecht-space-row-lg: 24px;
52
- /* 150% / Large */
53
- --utrecht-space-row-md: 16px;
54
- /* 100% / Medium */
55
- --utrecht-space-row-sm: 12px;
56
- /* 75% / Small */
57
- --utrecht-space-row-xs: 8px;
58
- /* 50% / Extra Small */
59
- --utrecht-space-row-2xs: 4px;
60
- /* 25% / Extra Small 2 */
61
- --utrecht-space-row-3xs: 2px;
62
- /* 12.5% / Extra Small 3 */
63
- --utrecht-space-row-4xs: 1px;
64
- /* 6.25% / Extra Small 4 */
65
- --utrecht-space-text-3xl: 3ch;
66
- /* 300% / Extra Large 3 */
67
- --utrecht-space-text-2xl: 2ch;
68
- /* 200% / Extra Large 2 */
69
- --utrecht-space-text-xl: 1.75ch;
70
- /* 175% / Extra Large */
71
- --utrecht-space-text-lg: 1.5ch;
72
- /* 150% / Large */
73
- --utrecht-space-text-md: 1ch;
74
- /* 100% / Medium */
75
- --utrecht-space-text-sm: 0.75ch;
76
- /* 75% / Small */
77
- --utrecht-space-text-xs: 0.5ch;
78
- /* 50% / Extra Small */
79
- --utrecht-space-text-2xs: 0.25ch;
80
- /* 25% / Extra Small 2 */
81
- --utrecht-space-text-3xs: 0.125ch;
82
- /* 12.5% / Extra Small 3 */
83
- --utrecht-space-inline-3xl: 48px;
84
- /* 300% / Extra Large 3 */
85
- --utrecht-space-inline-2xl: 32px;
86
- /* 200% / Extra Large 2 */
87
- --utrecht-space-inline-xl: 28px;
88
- /* 175% / Extra Large */
89
- --utrecht-space-inline-lg: 24px;
90
- /* 150% / Large */
91
- --utrecht-space-inline-md: 16px;
92
- /* 100% / Medium */
93
- --utrecht-space-inline-sm: 12px;
94
- /* 75% / Small */
95
- --utrecht-space-inline-xs: 8px;
96
- /* 50% / Extra Small */
97
- --utrecht-space-inline-2xs: 4px;
98
- /* 25% / Extra Small 2 */
99
- --utrecht-space-inline-3xs: 2px;
100
- /* 12.5% / Extra Small 3 */
101
- --utrecht-space-block-5xl: 80px;
102
- /* 500% / Extra Large 5 */
103
- --utrecht-space-block-4xl: 64px;
104
- /* 400% / Extra Large 4 */
105
- --utrecht-space-block-3xl: 48px;
106
- /* 300% / Extra Large 3 */
107
- --utrecht-space-block-2xl: 32px;
108
- /* 200% / Extra Large 2 */
109
- --utrecht-space-block-xl: 28px;
110
- /* 175% / Extra Large */
111
- --utrecht-space-block-lg: 24px;
112
- /* 150% / Large */
113
- --utrecht-space-block-md: 16px;
114
- /* 100% / Medium */
115
- --utrecht-space-block-sm: 12px;
116
- /* 75% / Small */
117
- --utrecht-space-block-xs: 8px;
118
- /* 50% / Extra Small */
119
- --utrecht-space-block-2xs: 4px;
120
- /* 25% / Extra Small 2 */
121
- --utrecht-space-block-3xs: 2px;
122
- /* 12.5% / Extra Small 3 */
123
24
  --utrecht-border-style-dotted: dotted;
124
25
  --utrecht-border-style-solid: solid;
125
26
  --utrecht-border-width-md: 2px;
126
27
  --utrecht-border-width-sm: 1px;
28
+ --utrecht-typography-text-transform-uppercase: uppercase;
29
+ --utrecht-typography-line-height-lg: 2;
30
+ --utrecht-typography-line-height-md: 1.5;
31
+ --utrecht-typography-line-height-sm: 1.25;
32
+ --utrecht-typography-line-height-xs: 1;
33
+ --utrecht-typography-letter-spacing-lg: 3px;
34
+ --utrecht-typography-letter-spacing-md: 1px;
35
+ --utrecht-typography-letter-spacing-sm: 0.8px;
36
+ --utrecht-typography-letter-spacing-normal: normal;
37
+ --utrecht-typography-font-style-inherit: inherit;
38
+ --utrecht-typography-font-style-normal: normal;
127
39
  --utrecht-typography-weight-scale-normal-font-weight: normal;
128
40
  --utrecht-typography-weight-scale-bold-font-weight: bold;
129
- --utrecht-typography-scale-3xl-font-size: 2rem;
130
- /* 36px */
131
- --utrecht-typography-scale-2xl-font-size: 1.5rem;
41
+ --utrecht-typography-scale-4xl-font-size: 2rem;
42
+ /* 32px */
43
+ --utrecht-typography-scale-3xl-font-size: 1.5rem;
132
44
  /* 24px */
133
- --utrecht-typography-scale-xl-font-size: 1.4rem;
134
- /* 22,4px */
135
- --utrecht-typography-scale-lg-font-size: 1.25rem;
45
+ --utrecht-typography-scale-2xl-font-size: 1.375rem;
46
+ /* 22px */
47
+ --utrecht-typography-scale-xl-font-size: 1.25rem;
136
48
  /* 20px */
49
+ --utrecht-typography-scale-lg-font-size: 1.125rem;
50
+ /* 18px */
137
51
  --utrecht-typography-scale-md-font-size: 1rem;
138
52
  /* 16px */
139
- --utrecht-typography-scale-sm-font-size: 0.9rem;
140
- /* 14,4px */
141
- --utrecht-typography-scale-xs-font-size: 0.7rem;
142
- /* 11,2px */
53
+ --utrecht-typography-scale-sm-font-size: 0.875rem;
54
+ /* 14px */
55
+ --utrecht-typography-scale-xs-font-size: 0.75rem;
56
+ /* 12px */
143
57
  --utrecht-typography-scale-2xs-font-size: 0.5rem;
144
58
  /* 8px */
145
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
59
+ --utrecht-typography-sans-serif-fallback-font-family: "Arial", sans-serif;
60
+ --utrecht-typography-sans-serif-font-family: "Lucida Grande";
146
61
  --utrecht-color-black: hsl(0 0% 0%);
147
62
  --utrecht-color-white: hsl(0 0% 100%);
63
+ --utrecht-color-invalid: #990000;
148
64
  --utrecht-color-green-90: hsl(90 30% 90%);
149
65
  /* Achtergrond licht groen */
150
66
  --utrecht-color-green-80: hsl(90 30% 80%);
@@ -161,16 +77,22 @@
161
77
  /* basis geel #ffcc00 */
162
78
  --utrecht-color-yellow-40: hsl(48 100% 40%);
163
79
  /* donker geel */
80
+ --utrecht-color-grey-95: hsl(0 0% 95%);
81
+ /* grijs variant voor achtergrond accordion #f2f2f2 */
164
82
  --utrecht-color-grey-90: hsl(0 0% 90%);
165
- /* grijs variant voor achtergrond templates #f2f2f2 */
83
+ /* grijs variant voor achtergrond templates #e6e6e6 */
166
84
  --utrecht-color-grey-80: hsl(0 0% 80%);
167
85
  /* grijs variant voor achtergrond content #e5e5e5 */
168
86
  --utrecht-color-grey-40: hsl(0 0% 40%);
169
87
  /* basis grijs #727272 */
170
88
  --utrecht-color-grey-30: hsl(0 0% 30%);
171
89
  /* border grijs #888 */
90
+ --utrecht-color-grey-20: hsl(0 0% 20%);
91
+ /* experimenteel / beperkt gebruiken */
172
92
  --utrecht-color-grey-15: hsl(0 0% 15%);
173
93
  /* experimenteel / beperkt gebruiken */
94
+ --utrecht-color-grey-10: hsl(0 0% 10%);
95
+ /* experimenteel / beperkt gebruiken */
174
96
  --utrecht-color-blue-90: hsl(211 60% 90%);
175
97
  /* ijsblauw variant achtergrond, spotlight en uitgelicht */
176
98
  --utrecht-color-blue-80: hsl(211 60% 80%);
@@ -182,9 +104,11 @@
182
104
  --utrecht-color-blue-35: hsl(211 60% 35%);
183
105
  /* basis link en knoppen CTA donkerblauw */
184
106
  --utrecht-color-blue-30: hsl(211 60% 30%);
185
- /* basis link en knoppen CTA donkerblauw */
107
+ /* Deze kleur gebruiken we niet */
186
108
  --utrecht-color-blue-20: hsl(211 60% 20%);
187
109
  /* basis donkerblauw (OS focus) */
110
+ --utrecht-color-red-95: hsl(0 100% 95%);
111
+ /* Achtergrond rode kleur */
188
112
  --utrecht-color-red-40: hsl(0 100% 40%);
189
113
  /* basis rood #cc0000 */
190
114
  --utrecht-color-red-30: hsl(0 100% 30%);
@@ -195,13 +119,14 @@
195
119
  --utrecht-unordered-list-item-margin-block-start: 0.5rem;
196
120
  --utrecht-unordered-list-margin-block-end: 1rem;
197
121
  --utrecht-unordered-list-margin-block-start: 0;
198
- --utrecht-textbox-padding-inline-start: 12px;
199
- --utrecht-textbox-padding-inline-end: 12px;
200
- --utrecht-textbox-padding-block-start: 8px;
201
- --utrecht-textbox-padding-block-end: 8px;
202
- --utrecht-textbox-max-width: 28em;
203
- --utrecht-textbox-border-radius: 0;
122
+ --utrecht-toptask-link-icon-size: 1.7rem;
123
+ --utrecht-toptask-link-hover-transform-scale: 1.02;
124
+ --utrecht-toptask-link-min-inline-size: 15rem;
125
+ --utrecht-toptask-link-min-block-size: 8.25rem;
126
+ --utrecht-toptask-link-line-height: 1.2;
127
+ --utrecht-toptask-link-font-size: 1rem;
204
128
  --utrecht-textbox-border-bottom-width: 3px;
129
+ --utrecht-textarea-border-bottom-width: 3px;
205
130
  --utrecht-table-cell-padding-inline-start: 0.4em;
206
131
  --utrecht-table-cell-padding-inline-end: 0;
207
132
  --utrecht-table-cell-padding-block-start: 0.5em;
@@ -209,55 +134,227 @@
209
134
  --utrecht-table-caption-margin-block-end: 1em;
210
135
  --utrecht-table-caption-text-align: start;
211
136
  --utrecht-table-caption-font-size: 1.125em;
212
- --utrecht-separator-width: 8px;
213
- --utrecht-paragraph-line-height: 1.4;
137
+ --utrecht-separator-block-size: 8px;
138
+ --utrecht-select-border-block-end-width: 3px;
139
+ --utrecht-pre-heading-text-transform: uppercase;
140
+ --utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
141
+ --utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
142
+ --utrecht-pagination-relative-link-text-transform: uppercase;
143
+ --utrecht-pagination-relative-link-text-decoration: none;
144
+ --utrecht-pagination-relative-link-padding-block-start: 0.5em;
145
+ --utrecht-pagination-relative-link-padding-block-end: 0.5em;
146
+ --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
147
+ --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
148
+ --utrecht-pagination-relative-link-border-width: 2px;
149
+ --utrecht-pagination-page-link-border-color: transparent;
150
+ --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
151
+ --utrecht-pagination-page-link-text-decoration: none;
152
+ --utrecht-pagination-page-link-padding-block-start: 0.5em;
153
+ --utrecht-pagination-page-link-padding-block-end: 0.5em;
154
+ --utrecht-pagination-page-link-padding-inline-start: 0.5em;
155
+ --utrecht-pagination-page-link-padding-inline-end: 0.5em;
156
+ --utrecht-pagination-page-link-border-width: 2px;
157
+ --utrecht-pagination-page-link-background-color: transparent;
158
+ --utrecht-pagination-margin-block-end: 1em;
159
+ --utrecht-pagination-margin-block-start: 0;
160
+ --utrecht-pagination-font-size: 14px;
161
+ --utrecht-page-padding-inline-start: 2em;
162
+ --utrecht-page-padding-block-end: 1em;
163
+ --utrecht-page-padding-inline-end: 2.4em;
164
+ --utrecht-page-padding-block-start: 1.8em;
165
+ --utrecht-page-max-inline-size: 1184px;
166
+ --utrecht-page-margin-inline-end: 2em;
167
+ --utrecht-page-margin-inline-start: 2em;
168
+ --utrecht-page-header-padding-block-start: 1.8em;
169
+ --utrecht-page-header-padding-inline-start: 2em;
170
+ --utrecht-page-header-padding-inline-end: 2.4em;
171
+ --utrecht-page-header-padding-block-end: 1em;
214
172
  --utrecht-page-footer-padding-block-start: 1.8em;
215
173
  --utrecht-page-footer-padding-block-end: 1.8em;
216
174
  --utrecht-page-footer-padding-inline-start: 1em;
217
175
  --utrecht-page-footer-padding-inline-end: 1em;
176
+ --utrecht-page-content-padding-block-end: 2em;
177
+ --utrecht-page-content-padding-block-start: 2em;
178
+ --utrecht-ordered-list-item-padding-inline-start: 0;
179
+ --utrecht-ordered-list-item-margin-block-end: 0.25em;
180
+ --utrecht-ordered-list-item-margin-block-start: 0.25em;
181
+ --utrecht-ordered-list-padding-inline-start: 28.8px;
182
+ --utrecht-ordered-list-margin-block-end: 1em;
183
+ --utrecht-ordered-list-margin-block-start: 0;
218
184
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
219
- --utrecht-mapcontrolbutton-border-radius: 0;
185
+ --utrecht-mapcontrolbutton-border-radius: 2px;
220
186
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
221
187
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
188
+ --utrecht-logo-max-width: 110.57px;
189
+ --utrecht-logo-max-height: 58.97px;
190
+ --utrecht-link-hover-text-decoration-thickness: 3px;
222
191
  --utrecht-link-hover-text-decoration: underline;
223
192
  --utrecht-link-focus-text-decoration: none;
193
+ --utrecht-link-text-underline-offset: 3px;
224
194
  --utrecht-link-text-decoration: underline;
225
- --utrecht-heading-6-text-transform: uppercase;
226
- --utrecht-heading-6-letter-spacing: 0.72px;
227
- --utrecht-heading-6-margin-block-start: 1rem;
228
- --utrecht-heading-6-margin-block-end: 0.2rem;
229
- --utrecht-heading-6-line-height: 1.333;
230
- --utrecht-heading-6-font-size: 0.9rem;
231
- --utrecht-heading-5-text-transform: uppercase;
232
- --utrecht-heading-5-letter-spacing: 0.72px;
195
+ --utrecht-link-list-marker-inline-size: 16px;
233
196
  --utrecht-heading-5-margin-block-start: 1rem;
234
197
  --utrecht-heading-5-margin-block-end: 0.2rem;
235
- --utrecht-heading-5-line-height: 1.333;
236
- --utrecht-heading-5-font-size: 0.9rem;
237
198
  --utrecht-heading-4-margin-block-start: 1.2rem;
238
199
  --utrecht-heading-4-margin-block-end: 0.3rem;
239
- --utrecht-heading-4-line-height: 1.25;
240
- --utrecht-heading-4-font-size: 1.125rem;
241
200
  --utrecht-heading-3-margin-block-start: 1rem;
242
201
  --utrecht-heading-3-margin-block-end: 0.2rem;
243
- --utrecht-heading-3-line-height: 1.2;
244
- --utrecht-heading-3-font-size: 1.25rem;
245
202
  --utrecht-heading-2-margin-block-start: 1.5rem;
246
203
  --utrecht-heading-2-margin-block-end: 0.3rem;
247
- --utrecht-heading-2-line-height: 1.2;
248
- --utrecht-heading-2-font-size: 1.25rem;
249
204
  --utrecht-heading-1-margin-block-start: 0.67rem;
250
205
  --utrecht-heading-1-margin-block-end: 0.67rem;
251
- --utrecht-heading-1-line-height: 1.4;
252
- --utrecht-heading-1-font-size: 1.5rem;
206
+ --utrecht-form-toggle-width: 48px;
207
+ --utrecht-form-toggle-padding-inline-start: 0;
208
+ --utrecht-form-toggle-padding-inline-end: 0;
209
+ --utrecht-form-toggle-padding-block-start: 0;
210
+ --utrecht-form-toggle-padding-block-end: 0;
211
+ --utrecht-form-toggle-height: 24px;
212
+ --utrecht-form-toggle-border-style: solid;
213
+ --utrecht-form-toggle-focus-border-width: 2px;
214
+ --utrecht-form-toggle-focus-border-style: dotted;
215
+ --utrecht-form-toggle-thumb-disabled-box-shadow: 0;
216
+ --utrecht-form-toggle-thumb-min-inline-size: 18px;
217
+ --utrecht-form-toggle-thumb-margin-inline-end: .25em;
218
+ --utrecht-form-toggle-thumb-margin-inline-start: .25em;
219
+ --utrecht-form-toggle-track-border-radius: 10em;
220
+ --utrecht-form-toggle-border-width: 2px;
221
+ --utrecht-form-toggle-border-radius: 0;
222
+ --utrecht-form-toggle-border-color: transparent;
223
+ --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
253
224
  --utrecht-form-label-font-size: 1em;
254
- --utrecht-focus-background-color: transparant.value;
225
+ --utrecht-form-input-block-size: 42px;
226
+ --utrecht-form-input-padding-inline-start: 12px;
227
+ --utrecht-form-input-padding-inline-end: 12px;
228
+ --utrecht-form-input-padding-block-start: 8px;
229
+ --utrecht-form-input-padding-block-end: 8px;
230
+ --utrecht-form-input-max-inline-size: 28em;
231
+ --utrecht-form-input-border-radius: 0;
232
+ --utrecht-form-fieldset-legend-text-transform: uppercase;
233
+ --utrecht-form-fieldset-legend-line-height: 1.4;
234
+ --utrecht-form-fieldset-legend-font-size: 1rem;
255
235
  --utrecht-document-line-height: 1.4;
256
- --utrecht-button-focus-transform-scale: 1.02;
236
+ --utrecht-custom-checkbox-focus-border-width: 3px;
237
+ --utrecht-custom-checkbox-icon-size: 16px;
238
+ --utrecht-custom-checkbox-size: 24px;
239
+ --utrecht-custom-checkbox-border-width: 1px;
240
+ --utrecht-custom-checkbox-border-radius: 0;
241
+ --utrecht-space-column-5xl: 64px;
242
+ /* Extra Large 5 */
243
+ --utrecht-space-column-4xl: 48px;
244
+ /* Extra Large 4 */
245
+ --utrecht-space-column-3xl: 32px;
246
+ /* Extra Large 3 */
247
+ --utrecht-space-column-2xl: 28px;
248
+ /* Extra Large 2 */
249
+ --utrecht-space-column-xl: 24px;
250
+ /* Extra Large */
251
+ --utrecht-space-column-lg: 20px;
252
+ /* Large */
253
+ --utrecht-space-column-md: 16px;
254
+ /* Medium */
255
+ --utrecht-space-column-sm: 12px;
256
+ /* Small */
257
+ --utrecht-space-column-xs: 8px;
258
+ /* Extra Small */
259
+ --utrecht-space-column-2xs: 4px;
260
+ /* Extra Small 2 */
261
+ --utrecht-space-column-3xs: 2px;
262
+ /* Extra Small 3 */
263
+ --utrecht-space-column-4xs: 1px;
264
+ /* Extra Small 4 */
265
+ --utrecht-space-row-5xl: 64px;
266
+ /* Extra Large 5 */
267
+ --utrecht-space-row-4xl: 48px;
268
+ /* Extra Large 4 */
269
+ --utrecht-space-row-3xl: 32px;
270
+ /* Extra Large 3 */
271
+ --utrecht-space-row-2xl: 28px;
272
+ /* Extra Large 2 */
273
+ --utrecht-space-row-xl: 24px;
274
+ /* Extra Large */
275
+ --utrecht-space-row-lg: 20px;
276
+ /* Large */
277
+ --utrecht-space-row-md: 16px;
278
+ /* Medium */
279
+ --utrecht-space-row-sm: 12px;
280
+ /* Small */
281
+ --utrecht-space-row-xs: 8px;
282
+ /* Extra Small */
283
+ --utrecht-space-row-2xs: 4px;
284
+ /* Extra Small 2 */
285
+ --utrecht-space-row-3xs: 2px;
286
+ /* Extra Small 3 */
287
+ --utrecht-space-row-4xs: 1px;
288
+ /* Extra Small 4 */
289
+ --utrecht-space-text-3xl: 3ch;
290
+ /* Extra Large 3 */
291
+ --utrecht-space-text-2xl: 2ch;
292
+ /* Extra Large 2 */
293
+ --utrecht-space-text-xl: 1.75ch;
294
+ /* Extra Large */
295
+ --utrecht-space-text-lg: 1.5ch;
296
+ /* Large */
297
+ --utrecht-space-text-md: 1ch;
298
+ /* Medium */
299
+ --utrecht-space-text-sm: 0.75ch;
300
+ /* Small */
301
+ --utrecht-space-text-xs: 0.5ch;
302
+ /* Extra Small */
303
+ --utrecht-space-text-2xs: 0.25ch;
304
+ /* Extra Small 2 */
305
+ --utrecht-space-text-3xs: 0.125ch;
306
+ /* Extra Small 3 */
307
+ --utrecht-space-inline-4xl: 48px;
308
+ /* Extra Large 4 */
309
+ --utrecht-space-inline-3xl: 32px;
310
+ /* Extra Large 3 */
311
+ --utrecht-space-inline-2xl: 28px;
312
+ /* Extra Large 2 */
313
+ --utrecht-space-inline-xl: 24px;
314
+ /* Extra Large */
315
+ --utrecht-space-inline-lg: 20px;
316
+ /* Large */
317
+ --utrecht-space-inline-md: 16px;
318
+ /* Medium */
319
+ --utrecht-space-inline-sm: 12px;
320
+ /* Small */
321
+ --utrecht-space-inline-xs: 8px;
322
+ /* Extra Small */
323
+ --utrecht-space-inline-2xs: 4px;
324
+ /* Extra Small 2 */
325
+ --utrecht-space-inline-3xs: 2px;
326
+ /* Extra Small 3 */
327
+ --utrecht-space-block-4xs: 1px;
328
+ --utrecht-space-block-4xl: 64px;
329
+ /* Extra Large 4 */
330
+ --utrecht-space-block-3xl: 48px;
331
+ /* Extra Large 3 */
332
+ --utrecht-space-block-2xl: 32px;
333
+ /* Extra Large 2 */
334
+ --utrecht-space-block-xl: 24px;
335
+ /* Extra Large */
336
+ --utrecht-space-block-lg: 20px;
337
+ /* Large */
338
+ --utrecht-space-block-md: 16px;
339
+ /* Medium */
340
+ --utrecht-space-block-sm: 12px;
341
+ /* Small */
342
+ --utrecht-space-block-xs: 8px;
343
+ /* Extra Small */
344
+ --utrecht-space-block-2xs: 4px;
345
+ /* Extra Small 2 */
346
+ --utrecht-space-block-3xs: 2px;
347
+ /* Extra Small 3 */
348
+ --utrecht-action-submit-cursor: pointer;
349
+ --utrecht-action-disabled-cursor: not-allowed;
350
+ --utrecht-action-busy-cursor: wait;
257
351
  --utrecht-button-border-radius: 0;
352
+ --utrecht-button-focus-transform-scale: 1.02;
258
353
  --utrecht-button-margin-inline-end: 0;
259
354
  --utrecht-button-margin-inline-start: 0;
260
355
  --utrecht-button-border-width: 0;
356
+ --utrecht-breadcrumb-divider-inline-size: 1px;
357
+ --utrecht-breadcrumb-block-size: 34px;
261
358
  --utrecht-blockquote-content-font-size: 1.125rem;
262
359
  --utrecht-blockquote-attribution-font-size: 0.75rem;
263
360
  --utrecht-blockquote-margin-inline-block-end: 1.6em;
@@ -270,101 +367,176 @@
270
367
  --utrecht-badge-status-letter-spacing: 0.15ch;
271
368
  --utrecht-badge-data-text-transform: uppercase;
272
369
  --utrecht-badge-data-letter-spacing: 0.15ch;
370
+ --utrecht-backdrop-opacity: 0.8;
273
371
  --utrecht-article-max-inline-size: 780px;
274
- --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
275
- --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
276
- --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
277
- --utrecht-topnav-link-color: var(--utrecht-color-white);
372
+ --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
278
373
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
279
374
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
280
375
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
281
376
  --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
282
377
  --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
283
- --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
378
+ --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
379
+ --utrecht-topnav-link-color: var(--utrecht-color-white);
380
+ --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
381
+ --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
382
+ --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
383
+ --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
284
384
  --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
385
+ --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
386
+ --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
285
387
  --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
286
388
  --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
287
389
  --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
288
390
  --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
289
- --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
290
- --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
291
- --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
292
- --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
391
+ --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
392
+ --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
393
+ --utrecht-search-bar-button-color: var(--utrecht-color-white);
394
+ --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
395
+ --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
396
+ --utrecht-search-bar-textbox-padding-inline-start: var(--utrecht-space-inline-3xl);
397
+ --utrecht-search-bar-textbox-border-color: var(--utrecht-color-red-40);
293
398
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
294
- --utrecht-form-input-focus-border-color: var(--utrecht-color-grey-80);
295
- --utrecht-form-input-placeholder-color: var(--utrecht-color-grey-40);
296
- --utrecht-form-input-font-family: var(--utrecht-typography-sans-serif-font-family);
297
- --utrecht-form-input-border-color: var(--utrecht-color-grey-30);
298
- --utrecht-form-input-color: var(--utrecht-color-black);
399
+ --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
400
+ --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
401
+ --utrecht-badge-counter-font-style: var(--utrecht-typography-font-style-normal);
299
402
  --utrecht-badge-counter-color: var(--utrecht-color-white);
300
403
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40);
301
- --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
302
- --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
303
- --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
304
- --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
305
- --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
306
- --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
307
- --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
308
- --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
309
- --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
310
- --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
311
- --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
312
- --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
313
404
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
314
- --utrecht-textbox-font-size: var(--utrecht-typography-scale-md-font-size);
315
- --utrecht-textbox-border-width: var(--utrecht-border-width-sm);
316
- --utrecht-textarea-padding-inline-start: var(--utrecht-textbox-padding-inline-start);
317
- --utrecht-textarea-padding-inline-end: var(--utrecht-textbox-padding-inline-end);
318
- --utrecht-textarea-padding-block-start: var(--utrecht-textbox-padding-block-start);
319
- --utrecht-textarea-padding-block-end: var(--utrecht-textbox-padding-block-end);
320
- --utrecht-textarea-max-width: var(--utrecht-textbox-max-width);
321
- --utrecht-textarea-border-radius: var(--utrecht-textbox-border-radius);
322
- --utrecht-textarea-border-bottom-width: var(--utrecht-textbox-border-bottom-width);
405
+ --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
406
+ --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
407
+ --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
408
+ --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
409
+ --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
410
+ --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
323
411
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
324
412
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
325
413
  --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
326
414
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
327
- --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
328
- --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
415
+ --utrecht-surface-color: var(--utrecht-color-grey-10);
416
+ --utrecht-surface-background-color: var(--utrecht-color-grey-95);
329
417
  --utrecht-separator-color: var(--utrecht-color-grey-90);
418
+ --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
419
+ --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
420
+ --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
421
+ --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
330
422
  --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-lg-font-size);
331
- --utrecht-paragraph-margin-block-start: var(--utrecht-space-row-md);
423
+ --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
332
424
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
333
425
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
426
+ --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
427
+ --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
428
+ --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
429
+ --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
430
+ --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
431
+ --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
432
+ --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
433
+ --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
434
+ --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
435
+ --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
436
+ --utrecht-pagination-page-link-hover-background-color: var(--utrecht-color-blue-35);
437
+ --utrecht-pagination-page-link-current-color: var(--utrecht-color-white);
438
+ --utrecht-pagination-page-link-current-border-color: var(--utrecht-color-blue-35);
439
+ --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
440
+ --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
441
+ --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
442
+ --utrecht-page-color: var(--utrecht-color-black);
443
+ --utrecht-page-background-color: var(--utrecht-color-white);
334
444
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, hsl(5 54% 59%) 50%);
335
445
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
336
446
  --utrecht-page-footer-color: var(--utrecht-color-white);
337
- --utrecht-mapcontrolbutton-focus-background-color: var(--utrecht-focus-background-color);
338
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
447
+ --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
448
+ --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
449
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
450
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
339
451
  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
452
+ --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
453
+ --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
340
454
  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
341
455
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
342
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
343
456
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
344
- --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
345
- --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
346
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
347
- --utrecht-mapcontrolbutton-height: var(--utrecht-space-block-2xl);
348
- --utrecht-mapcontrolbutton-width: var(--utrecht-space-block-2xl);
457
+ --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
349
458
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
350
459
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
351
460
  --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
352
461
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
353
462
  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
354
463
  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
464
+ --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
465
+ --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
355
466
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
356
467
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
357
- --utrecht-link-color: var(--utrecht-color-blue-30);
468
+ --utrecht-link-color: var(--utrecht-color-blue-35);
469
+ --utrecht-link-list-item-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
470
+ --utrecht-link-list-item-margin-block-start: var(--utrecht-space-block-xs);
471
+ --utrecht-heading-6-text-transform: var(--utrecht-typography-text-transform-uppercase);
472
+ --utrecht-heading-6-letter-spacing: var(--utrecht-typography-letter-spacing-sm);
473
+ --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
358
474
  --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
475
+ --utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
476
+ --utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
477
+ --utrecht-heading-5-text-transform: var(--utrecht-typography-text-transform-uppercase);
478
+ --utrecht-heading-5-letter-spacing: var(--utrecht-typography-letter-spacing-sm);
479
+ --utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
359
480
  --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
481
+ --utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
482
+ --utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
483
+ --utrecht-heading-4-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
484
+ --utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
360
485
  --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
486
+ --utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
487
+ --utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
488
+ --utrecht-heading-3-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
489
+ --utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
361
490
  --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
362
- --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
363
- --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
491
+ --utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
492
+ --utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
493
+ --utrecht-heading-2-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
494
+ --utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
495
+ --utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
496
+ --utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
497
+ --utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
498
+ --utrecht-heading-1-letter-spacing: var(--utrecht-typography-letter-spacing-normal);
499
+ --utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
500
+ --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
501
+ --utrecht-heading-1-font-size: var(--utrecht-typography-scale-3xl-font-size);
502
+ --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
503
+ --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
504
+ --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
505
+ --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
506
+ --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
507
+ --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
508
+ --utrecht-form-toggle-color: var(--utrecht-color-black);
509
+ --utrecht-form-toggle-background-color: var(--utrecht-color-white);
364
510
  --utrecht-form-label-radio-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
365
511
  --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
512
+ --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
513
+ --utrecht-form-input-focus-border-color: var(--utrecht-color-grey-80);
514
+ --utrecht-form-input-placeholder-font-style: var(--utrecht-typography-font-style-normal);
515
+ --utrecht-form-input-placeholder-color: var(--utrecht-color-grey-40);
516
+ --utrecht-form-input-font-size: var(--utrecht-typography-scale-md-font-size);
517
+ --utrecht-form-input-color: var(--utrecht-color-black);
518
+ --utrecht-form-input-border-width: var(--utrecht-border-width-sm);
519
+ --utrecht-form-input-border-color: var(--utrecht-color-grey-30);
520
+ --utrecht-form-input-background-color: var(--utrecht-color-white);
521
+ --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
522
+ --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
523
+ --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
524
+ --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
525
+ --utrecht-form-fieldset-margin-block-end: var(--utrecht-space-block-2xs);
366
526
  --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
367
527
  --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
528
+ --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
529
+ --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
530
+ --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
531
+ --utrecht-document-color: var(--utrecht-color-black);
532
+ --utrecht-document-background-color: var(--utrecht-color-white);
533
+ --utrecht-custom-checkbox-invalid-color: var(--utrecht-color-white);
534
+ --utrecht-custom-checkbox-checked-color: var(--utrecht-color-white);
535
+ --utrecht-custom-checkbox-checked-background-color: var(--utrecht-color-blue-40);
536
+ --utrecht-custom-checkbox-checked-border-color: var(--utrecht-color-blue-40);
537
+ --utrecht-custom-checkbox-disabled-color: var(--utrecht-color-grey-80);
538
+ --utrecht-custom-checkbox-disabled-background-color: var(--utrecht-color-white);
539
+ --utrecht-custom-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
368
540
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
369
541
  --utrecht-focus-outline-style: var(--utrecht-border-style-dotted);
370
542
  --utrecht-focus-outline-color: var(--utrecht-color-black);
@@ -373,28 +545,38 @@
373
545
  --utrecht-focus-box-shadow-color: var(--utrecht-color-white);
374
546
  --utrecht-focus-border-style: var(--utrecht-border-style-dotted);
375
547
  --utrecht-focus-border-color: var(--utrecht-color-black);
376
- --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
377
- --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
378
- --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
379
- --utrecht-document-color: var(--utrecht-color-black);
380
- --utrecht-document-background-color: var(--utrecht-color-white);
381
- --utrecht-button-focus-border-width: var(--utrecht-border-width-md);
382
- --utrecht-button-focus-border-color: var(--utrecht-color-blue-40);
383
- --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
384
- --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
385
- --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
386
- --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
548
+ --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
549
+ --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
550
+ --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
551
+ --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
552
+ --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
553
+ --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
554
+ --utrecht-feedback-invalid-color: var(--utrecht-color-invalid);
555
+ --utrecht-feedback-invalid-border-color: var(--utrecht-color-invalid);
556
+ --utrecht-feedback-invalid-background-color: var(--utrecht-color-invalid);
557
+ --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
558
+ --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
559
+ --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
560
+ --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
561
+ --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
562
+ --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
387
563
  --utrecht-button-secondary-action-disabled-border-color: var(--utrecht-color-grey-80);
388
564
  --utrecht-button-secondary-action-disabled-color: var(--utrecht-color-grey-80);
389
565
  --utrecht-button-secondary-action-disabled-background-color: var(--utrecht-color-white);
390
566
  --utrecht-button-secondary-action-hover-border-color: var(--utrecht-color-blue-40);
391
567
  --utrecht-button-secondary-action-hover-color: var(--utrecht-color-blue-35);
392
568
  --utrecht-button-secondary-action-hover-background-color: var(--utrecht-color-white);
569
+ --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
570
+ --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
571
+ --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
572
+ --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
393
573
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
394
574
  --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
395
575
  --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
396
576
  --utrecht-button-primary-action-color: var(--utrecht-color-white);
397
577
  --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
578
+ --utrecht-button-focus-border-width: var(--utrecht-border-width-md);
579
+ --utrecht-button-focus-border-color: var(--utrecht-color-blue-40);
398
580
  --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
399
581
  --utrecht-button-disabled-color: var(--utrecht-color-white);
400
582
  --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
@@ -404,7 +586,19 @@
404
586
  --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
405
587
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
406
588
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
589
+ --utrecht-button-color: var(--utrecht-color-white);
590
+ --utrecht-button-background-color: var(--utrecht-color-blue-35);
591
+ --utrecht-breadcrumb-link-focus-color: var(--utrecht-color-black);
592
+ --utrecht-breadcrumb-link-focus-background-color: var(--utrecht-color-yellow-60);
593
+ --utrecht-breadcrumb-link-color: var(--utrecht-color-black);
594
+ --utrecht-breadcrumb-link-background-color: var(--utrecht-color-grey-90);
595
+ --utrecht-breadcrumb-item-padding-inline-start: var(--utrecht-space-inline-md);
596
+ --utrecht-breadcrumb-item-padding-inline-end: var(--utrecht-space-inline-md);
597
+ --utrecht-breadcrumb-item-padding-block-end: var(--utrecht-space-block-xs);
598
+ --utrecht-breadcrumb-item-padding-block-start: var(--utrecht-space-block-xs);
599
+ --utrecht-breadcrumb-font-size: var(--utrecht-typography-scale-sm-font-size);
407
600
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
601
+ --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
408
602
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm);
409
603
  /* Default inline padding color for badge components */
410
604
  --utrecht-badge-padding-block: var(--utrecht-space-block-xs);
@@ -413,31 +607,48 @@
413
607
  /* Default text color for badge components */
414
608
  --utrecht-badge-background-color: var(--utrecht-color-grey-30);
415
609
  /* Default background color for badge components */
610
+ --utrecht-backdrop-color: var(--utrecht-color-black);
611
+ --utrecht-backdrop-background-color: var(--utrecht-color-white);
612
+ --utrecht-search-bar-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
613
+ --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
614
+ --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
615
+ --utrecht-toptask-link-color: var(--utrecht-button-color);
616
+ --utrecht-toptask-link-background-color: var(--utrecht-button-background-color);
617
+ --utrecht-paragraph-lead-color: var(--utrecht-document-color);
618
+ --utrecht-paragraph-color: var(--utrecht-document-color);
619
+ --utrecht-mapcontrolbutton-focus-border-color: var(--utrecht-focus-border-color);
620
+ --utrecht-mapcontrolbutton-focus-outline-color: var(--utrecht-focus-outline-color);
621
+ --utrecht-mapcontrolbutton-focus-border-style: var(--utrecht-focus-border-style);
622
+ --utrecht-mapcontrolbutton-focus-box-shadow-color: var(--utrecht-focus-box-shadow-color);
623
+ --utrecht-mapcontrolbutton-focus-color: var(--utrecht-focus-color);
624
+ --utrecht-link-visited-color: var(--utrecht-link-color);
625
+ --utrecht-link-hover-color: var(--utrecht-link-focus-color);
626
+ --utrecht-link-active-color: var(--utrecht-link-color);
627
+ --utrecht-heading-6-color: var(--utrecht-document-color);
628
+ --utrecht-heading-5-color: var(--utrecht-document-color);
629
+ --utrecht-heading-4-color: var(--utrecht-document-color);
630
+ --utrecht-heading-3-color: var(--utrecht-document-color);
631
+ --utrecht-heading-2-color: var(--utrecht-document-color);
632
+ --utrecht-heading-1-color: var(--utrecht-document-color);
633
+ --utrecht-form-input-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
634
+ --utrecht-form-input-font-family: var(--utrecht-document-font-family);
635
+ --utrecht-custom-checkbox-invalid-background-color: var(--utrecht-feedback-invalid-background-color);
636
+ --utrecht-custom-checkbox-color: var(--utrecht-form-input-color);
637
+ --utrecht-custom-checkbox-border-color: var(--utrecht-form-input-border-color);
638
+ --utrecht-custom-checkbox-background-color: var(--utrecht-form-input-background-color);
416
639
  --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
417
640
  --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
418
641
  --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
419
642
  --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
420
643
  --utrecht-feedback-valid-color: var(--utrecht-feedback-safe-color);
421
- --utrecht-feedback-invalid-color: var(--utrecht-feedback-danger-color);
644
+ --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
422
645
  --utrecht-feedback-safe-border-color: var(--utrecht-feedback-safe-color);
423
646
  --utrecht-feedback-safe-background-color: var(--utrecht-feedback-safe-color);
424
647
  --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
425
648
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
426
649
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
427
650
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
428
- --utrecht-textbox-font-family: var(--utrecht-document-font-family);
429
- --utrecht-textbox-color: var(--utrecht-form-input-color);
430
- --utrecht-textbox-border-color: var(--utrecht-form-input-border-color);
431
- --utrecht-textarea-font-size: var(--utrecht-textbox-font-size);
432
- --utrecht-textarea-border-width: var(--utrecht-textbox-border-width);
433
- --utrecht-mapcontrolbutton-focus-border-color: var(--utrecht-focus-border-color);
434
- --utrecht-mapcontrolbutton-focus-outline-color: var(--utrecht-focus-outline-color);
435
- --utrecht-mapcontrolbutton-focus-border-style: var(--utrecht-focus-border-style);
436
- --utrecht-mapcontrolbutton-focus-box-shadow-color: var(--utrecht-focus-box-shadow-color);
437
- --utrecht-mapcontrolbutton-focus-color: var(--utrecht-focus-color);
438
- --utrecht-link-visited-color: var(--utrecht-link-color);
439
- --utrecht-link-hover-color: var(--utrecht-link-focus-color);
440
- --utrecht-link-active-color: var(--utrecht-link-color);
651
+ --utrecht-custom-checkbox-invalid-border-color: var(--utrecht-form-input-invalid-border-color);
441
652
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
442
653
  --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
443
654
  --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
@@ -448,27 +659,21 @@
448
659
  --utrecht-feedback-error-background-color: var(--utrecht-feedback-danger-background-color);
449
660
  --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
450
661
  --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
451
- --utrecht-feedback-invalid-border-color: var(--utrecht-feedback-danger-border-color);
452
- --utrecht-feedback-invalid-background-color: var(--utrecht-feedback-danger-background-color);
453
662
  --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
454
663
  --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
455
664
  --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
456
- --utrecht-textarea-font-family: var(--utrecht-textbox-font-family);
457
- --utrecht-textarea-color: var(--utrecht-textbox-color);
458
- --utrecht-textarea-border-color: var(--utrecht-textbox-border-color);
459
665
  --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
460
666
  --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
461
667
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
462
668
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
463
669
  --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
464
- --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
465
- --utrecht-textbox-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
466
- --utrecht-textarea-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
467
670
  }
468
671
 
469
672
  .utrecht-page-footer {
673
+ --utrecht-heading-2-color: var(--utrecht-color-white);
470
674
  --utrecht-heading-2-font-size: 1em;
471
675
  --utrecht-heading-2-text-transform: uppercase;
676
+ --utrecht-heading-3-color: var(--utrecht-color-white);
472
677
  --utrecht-heading-3-font-size: 1.125em;
473
678
  --utrecht-heading-3-font-weight: normal;
474
679
  }
@@ -495,3 +700,15 @@
495
700
  /* 20px on desktop min-width-60em */
496
701
  }
497
702
  }
703
+ :root {
704
+ --utrecht-menulijst-item-background-image: url("./pijltje.svg");
705
+ --utrecht-link-icon-left-background-image: url("./pijltje.svg");
706
+ --utrecht-search-bar-input-background-image: url("./icoon-zoek-rood.svg");
707
+ --utrecht-select-background-image: url("./arrow-dropdown.svg");
708
+ --utrecht-link-list-marker-background-image: url("./pijltje-zwart.svg");
709
+ }
710
+
711
+ utrecht-page-footer,
712
+ .utrecht-page-footer {
713
+ --utrecht-link-list-marker-background-image: url("./pijltje-wit.svg");
714
+ }