@utrecht/component-library-css 1.0.0-alpha.99 → 1.0.0

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