@utrecht/component-library-css 1.0.0-alpha.15 → 1.0.0-alpha.150

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