@utrecht/component-library-css 1.0.0-alpha.43 → 1.0.0-alpha.430

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,563 +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 Mon, 09 Aug 2021 19:19:03 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-form-input-block-size: 42px;
21
- --utrecht-badge-counter-padding-inline: 1ex;
22
- --utrecht-badge-counter-padding-block: 1ex;
23
- --utrecht-badge-counter-border-radius: 3ex;
24
- --utrecht-border-style-dotted: dotted;
25
- --utrecht-border-style-solid: solid;
26
- --utrecht-border-width-md: 2px;
27
- --utrecht-border-width-sm: 1px;
28
- --utrecht-typography-weight-scale-normal-font-weight: normal;
29
- --utrecht-typography-weight-scale-bold-font-weight: bold;
30
- --utrecht-typography-scale-3xl-font-size: 2rem;
31
- /* 36px */
32
- --utrecht-typography-scale-2xl-font-size: 1.5rem;
33
- /* 24px */
34
- --utrecht-typography-scale-xl-font-size: 1.4rem;
35
- /* 22,4px */
36
- --utrecht-typography-scale-lg-font-size: 1.25rem;
37
- /* 20px */
38
- --utrecht-typography-scale-md-font-size: 1rem;
39
- /* 16px */
40
- --utrecht-typography-scale-sm-font-size: 0.9rem;
41
- /* 14,4px */
42
- --utrecht-typography-scale-xs-font-size: 0.7rem;
43
- /* 11,2px */
44
- --utrecht-typography-scale-2xs-font-size: 0.5rem;
45
- /* 8px */
46
- --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
47
- --utrecht-color-black: hsl(0 0% 0%);
48
- --utrecht-color-white: hsl(0 0% 100%);
49
- --utrecht-color-green-90: hsl(90 30% 90%);
50
- /* Achtergrond licht groen */
51
- --utrecht-color-green-80: hsl(90 30% 80%);
52
- /* Licht groen */
53
- --utrecht-color-green-50: hsl(90 30% 50%);
54
- /* Standaard groen #80a659 */
55
- --utrecht-color-green-40: hsl(90 30% 40%);
56
- /* donker groen */
57
- --utrecht-color-yellow-80: hsl(48 100% 80%);
58
- /* spotlight en uitgelicht */
59
- --utrecht-color-yellow-60: hsl(48 100% 60%);
60
- /* selecteer geel */
61
- --utrecht-color-yellow-50: hsl(48 100% 50%);
62
- /* basis geel #ffcc00 */
63
- --utrecht-color-yellow-40: hsl(48 100% 40%);
64
- /* donker geel */
65
- --utrecht-color-grey-90: hsl(0 0% 90%);
66
- /* grijs variant voor achtergrond templates #f2f2f2 */
67
- --utrecht-color-grey-80: hsl(0 0% 80%);
68
- /* grijs variant voor achtergrond content #e5e5e5 */
69
- --utrecht-color-grey-40: hsl(0 0% 40%);
70
- /* basis grijs #727272 */
71
- --utrecht-color-grey-30: hsl(0 0% 30%);
72
- /* border grijs #888 */
73
- --utrecht-color-grey-15: hsl(0 0% 15%);
74
- /* experimenteel / beperkt gebruiken */
75
- --utrecht-color-blue-90: hsl(211 60% 90%);
76
- /* ijsblauw variant achtergrond, spotlight en uitgelicht */
77
- --utrecht-color-blue-80: hsl(211 60% 80%);
78
- /* licht blauw voor achtergrond */
79
- --utrecht-color-blue-50: hsl(211 60% 50%);
80
- /* experimenteel / beperkt gebruiken */
81
- --utrecht-color-blue-40: hsl(211 60% 40%);
82
- /* blauw variant bij hover/focus #3669a5 */
83
- --utrecht-color-blue-35: hsl(211 60% 35%);
84
- /* basis link en knoppen CTA donkerblauw */
85
- --utrecht-color-blue-30: hsl(211 60% 30%);
86
- /* basis link en knoppen CTA donkerblauw */
87
- --utrecht-color-blue-20: hsl(211 60% 20%);
88
- /* basis donkerblauw (OS focus) */
89
- --utrecht-color-red-40: hsl(0 100% 40%);
90
- /* basis rood #cc0000 */
91
- --utrecht-color-red-30: hsl(0 100% 30%);
92
- /* hover rood */
93
- --utrecht-color-red-20: hsl(0 100% 20%);
94
- /* donker rood */
95
- --utrecht-unordered-list-item-margin-block-end: 0.5rem;
96
- --utrecht-unordered-list-item-margin-block-start: 0.5rem;
97
- --utrecht-unordered-list-margin-block-end: 1rem;
98
- --utrecht-unordered-list-margin-block-start: 0;
99
- --utrecht-textbox-padding-inline-start: 12px;
100
- --utrecht-textbox-padding-inline-end: 12px;
101
- --utrecht-textbox-padding-block-start: 8px;
102
- --utrecht-textbox-padding-block-end: 8px;
103
- --utrecht-textbox-max-width: 28em;
104
- --utrecht-textbox-border-radius: 0;
105
- --utrecht-textbox-border-bottom-width: 3px;
106
- --utrecht-table-cell-padding-inline-start: 0.4em;
107
- --utrecht-table-cell-padding-inline-end: 0;
108
- --utrecht-table-cell-padding-block-start: 0.5em;
109
- --utrecht-table-cell-padding-block-end: 0.5em;
110
- --utrecht-table-caption-margin-block-end: 1em;
111
- --utrecht-table-caption-text-align: start;
112
- --utrecht-table-caption-font-size: 1.125em;
113
- --utrecht-space-column-5xl: 80px;
114
- /* Extra Large 5 */
115
- --utrecht-space-column-4xl: 64px;
116
- /* Extra Large 4 */
117
- --utrecht-space-column-3xl: 48px;
118
- /* Extra Large 3 */
119
- --utrecht-space-column-2xl: 32px;
120
- /* Extra Large 2 */
121
- --utrecht-space-column-xl: 28px;
122
- /* Extra Large */
123
- --utrecht-space-column-lg: 24px;
124
- /* Large */
125
- --utrecht-space-column-md: 16px;
126
- /* Medium */
127
- --utrecht-space-column-sm: 12px;
128
- /* Small */
129
- --utrecht-space-column-xs: 8px;
130
- /* Extra Small */
131
- --utrecht-space-column-2xs: 4px;
132
- /* Extra Small 2 */
133
- --utrecht-space-column-3xs: 2px;
134
- /* Extra Small 3 */
135
- --utrecht-space-column-4xs: 1px;
136
- /* Extra Small 4 */
137
- --utrecht-space-row-5xl: 80px;
138
- /* Extra Large 5 */
139
- --utrecht-space-row-4xl: 64px;
140
- /* Extra Large 4 */
141
- --utrecht-space-row-3xl: 48px;
142
- /* Extra Large 3 */
143
- --utrecht-space-row-2xl: 32px;
144
- /* Extra Large 2 */
145
- --utrecht-space-row-xl: 28px;
146
- /* Extra Large */
147
- --utrecht-space-row-lg: 24px;
148
- /* Large */
149
- --utrecht-space-row-md: 16px;
150
- /* Medium */
151
- --utrecht-space-row-sm: 12px;
152
- /* Small */
153
- --utrecht-space-row-xs: 8px;
154
- /* Extra Small */
155
- --utrecht-space-row-2xs: 4px;
156
- /* Extra Small 2 */
157
- --utrecht-space-row-3xs: 2px;
158
- /* Extra Small 3 */
159
- --utrecht-space-row-4xs: 1px;
160
- /* Extra Small 4 */
161
- --utrecht-space-text-3xl: 3ch;
162
- /* Extra Large 3 */
163
- --utrecht-space-text-2xl: 2ch;
164
- /* Extra Large 2 */
165
- --utrecht-space-text-xl: 1.75ch;
166
- /* Extra Large */
167
- --utrecht-space-text-lg: 1.5ch;
168
- /* Large */
169
- --utrecht-space-text-md: 1ch;
170
- /* Medium */
171
- --utrecht-space-text-sm: 0.75ch;
172
- /* Small */
173
- --utrecht-space-text-xs: 0.5ch;
174
- /* Extra Small */
175
- --utrecht-space-text-2xs: 0.25ch;
176
- /* Extra Small 2 */
177
- --utrecht-space-text-3xs: 0.125ch;
178
- /* Extra Small 3 */
179
- --utrecht-space-inline-3xl: 48px;
180
- /* Extra Large 3 */
181
- --utrecht-space-inline-2xl: 32px;
182
- /* Extra Large 2 */
183
- --utrecht-space-inline-xl: 28px;
184
- /* Extra Large */
185
- --utrecht-space-inline-lg: 24px;
186
- /* Large */
187
- --utrecht-space-inline-md: 16px;
188
- /* Medium */
189
- --utrecht-space-inline-sm: 12px;
190
- /* Small */
191
- --utrecht-space-inline-xs: 8px;
192
- /* Extra Small */
193
- --utrecht-space-inline-2xs: 4px;
194
- /* Extra Small 2 */
195
- --utrecht-space-inline-3xs: 2px;
196
- /* Extra Small 3 */
197
- --utrecht-space-block-5xl: 80px;
198
- /* Extra Large 5 */
199
- --utrecht-space-block-4xl: 64px;
200
- /* Extra Large 4 */
201
- --utrecht-space-block-3xl: 48px;
202
- /* Extra Large 3 */
203
- --utrecht-space-block-2xl: 32px;
204
- /* Extra Large 2 */
205
- --utrecht-space-block-xl: 28px;
206
- /* Extra Large */
207
- --utrecht-space-block-lg: 24px;
208
- /* Large */
209
- --utrecht-space-block-md: 16px;
210
- /* Medium */
211
- --utrecht-space-block-sm: 12px;
212
- /* Small */
213
- --utrecht-space-block-xs: 8px;
214
- /* Extra Small */
215
- --utrecht-space-block-2xs: 4px;
216
- /* Extra Small 2 */
217
- --utrecht-space-block-3xs: 2px;
218
- /* Extra Small 3 */
219
- --utrecht-separator-width: 8px;
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-margin-block-end: 0.25em;
247
- --utrecht-ordered-list-item-margin-block-start: 0.25em;
248
- --utrecht-ordered-list-margin-block-end: 1em;
249
- --utrecht-ordered-list-margin-block-start: 0;
250
- --utrecht-mapcontrolbutton-focus-text-decoration: none;
251
- --utrecht-mapcontrolbutton-border-radius: 0;
252
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
253
- --utrecht-mapcontrolbutton-margin-inline-start: 0;
254
- --utrecht-logo-max-width: 110.57px;
255
- --utrecht-logo-max-height: 58.97px;
256
- --utrecht-link-hover-text-decoration: underline;
257
- --utrecht-link-focus-text-decoration: none;
258
- --utrecht-link-text-decoration: underline;
259
- --utrecht-heading-6-text-transform: uppercase;
260
- --utrecht-heading-6-letter-spacing: 0.72px;
261
- --utrecht-heading-6-margin-block-start: 1rem;
262
- --utrecht-heading-6-margin-block-end: 0.2rem;
263
- --utrecht-heading-6-line-height: 1.333;
264
- --utrecht-heading-6-font-size: 0.9rem;
265
- --utrecht-heading-5-text-transform: uppercase;
266
- --utrecht-heading-5-letter-spacing: 0.72px;
267
- --utrecht-heading-5-margin-block-start: 1rem;
268
- --utrecht-heading-5-margin-block-end: 0.2rem;
269
- --utrecht-heading-5-line-height: 1.333;
270
- --utrecht-heading-5-font-size: 0.9rem;
271
- --utrecht-heading-4-margin-block-start: 1.2rem;
272
- --utrecht-heading-4-margin-block-end: 0.3rem;
273
- --utrecht-heading-4-line-height: 1.25;
274
- --utrecht-heading-4-font-size: 1.125rem;
275
- --utrecht-heading-3-margin-block-start: 1rem;
276
- --utrecht-heading-3-margin-block-end: 0.2rem;
277
- --utrecht-heading-3-line-height: 1.2;
278
- --utrecht-heading-3-font-size: 1.25rem;
279
- --utrecht-heading-2-margin-block-start: 1.5rem;
280
- --utrecht-heading-2-margin-block-end: 0.3rem;
281
- --utrecht-heading-2-line-height: 1.2;
282
- --utrecht-heading-2-font-size: 1.25rem;
283
- --utrecht-heading-1-margin-block-start: 0.67rem;
284
- --utrecht-heading-1-margin-block-end: 0.67rem;
285
- --utrecht-heading-1-line-height: 1.4;
286
- --utrecht-heading-1-font-size: 1.5rem;
287
- --utrecht-form-label-font-size: 1em;
288
- --utrecht-document-line-height: 1.4;
289
- --utrecht-button-focus-transform-scale: 1.02;
290
- --utrecht-button-border-radius: 0;
291
- --utrecht-button-margin-inline-end: 0;
292
- --utrecht-button-margin-inline-start: 0;
293
- --utrecht-button-border-width: 0;
294
- --utrecht-breadcrumb-divider-inline-size: 1px;
295
- --utrecht-breadcrumb-block-size: 34px;
296
- --utrecht-blockquote-content-font-size: 1.125rem;
297
- --utrecht-blockquote-attribution-font-size: 0.75rem;
298
- --utrecht-blockquote-margin-inline-block-end: 1.6em;
299
- --utrecht-blockquote-margin-inline-block-start: 1.6em;
300
- --utrecht-blockquote-margin-inline-end: 1.6em;
301
- --utrecht-blockquote-margin-inline-start: 1.6em;
302
- --utrecht-badge-border-radius: 0;
303
- /* Default corner radius for badge components */
304
- --utrecht-badge-status-text-transform: uppercase;
305
- --utrecht-badge-status-letter-spacing: 0.15ch;
306
- --utrecht-badge-data-text-transform: uppercase;
307
- --utrecht-badge-data-letter-spacing: 0.15ch;
308
- --utrecht-article-max-inline-size: 780px;
309
- --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
310
- --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
311
- --utrecht-search-bar-button-color: var(--utrecht-color-white);
312
- --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
313
- --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
314
- --utrecht-search-bar-textbox-padding-inline-start: var(--utrecht-space-inline-2xl);
315
- --utrecht-search-bar-textbox-border-color: var(--utrecht-color-red-40);
316
- --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
317
- --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
318
- --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
319
- --utrecht-topnav-link-color: var(--utrecht-color-white);
320
- --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
321
- --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
322
- --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
323
- --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
324
- --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
325
- --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
326
- --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
327
- --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
328
- --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
329
- --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
330
- --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
331
- --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
332
- --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
333
- --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
334
- --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
335
- --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
336
- --utrecht-form-input-focus-border-color: var(--utrecht-color-grey-80);
337
- --utrecht-form-input-placeholder-color: var(--utrecht-color-grey-40);
338
- --utrecht-form-input-font-family: var(--utrecht-typography-sans-serif-font-family);
339
- --utrecht-form-input-border-color: var(--utrecht-color-grey-30);
340
- --utrecht-form-input-color: var(--utrecht-color-black);
341
- --utrecht-badge-counter-color: var(--utrecht-color-white);
342
- --utrecht-badge-counter-background-color: var(--utrecht-color-red-40);
343
- --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
344
- --utrecht-textbox-font-size: var(--utrecht-typography-scale-md-font-size);
345
- --utrecht-textbox-border-width: var(--utrecht-border-width-sm);
346
- --utrecht-textarea-padding-inline-start: var(--utrecht-textbox-padding-inline-start);
347
- --utrecht-textarea-padding-inline-end: var(--utrecht-textbox-padding-inline-end);
348
- --utrecht-textarea-padding-block-start: var(--utrecht-textbox-padding-block-start);
349
- --utrecht-textarea-padding-block-end: var(--utrecht-textbox-padding-block-end);
350
- --utrecht-textarea-max-width: var(--utrecht-textbox-max-width);
351
- --utrecht-textarea-border-radius: var(--utrecht-textbox-border-radius);
352
- --utrecht-textarea-border-bottom-width: var(--utrecht-textbox-border-bottom-width);
353
- --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
354
- --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
355
- --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
356
- --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
357
- --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
358
- --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
359
- --utrecht-separator-color: var(--utrecht-color-grey-90);
360
- --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-lg-font-size);
361
- --utrecht-paragraph-margin-block-start: var(--utrecht-space-row-md);
362
- --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
363
- --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
364
- --utrecht-pagination-relative-link-border-color: var(--utrecht-color-blue-35);
365
- --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
366
- --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
367
- --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
368
- --utrecht-pagination-relative-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
369
- --utrecht-pagination-relative-link-color: var(--utrecht-color-blue-35);
370
- --utrecht-pagination-relative-link-background-color: var(--utrecht-color-white);
371
- --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
372
- --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
373
- --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
374
- --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
375
- --utrecht-pagination-page-link-hover-background-color: var(--utrecht-color-blue-35);
376
- --utrecht-pagination-page-link-current-color: var(--utrecht-color-white);
377
- --utrecht-pagination-page-link-current-border-color: var(--utrecht-color-blue-35);
378
- --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
379
- --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, hsl(5 54% 59%) 50%);
380
- --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
381
- --utrecht-page-footer-color: var(--utrecht-color-white);
382
- --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
383
- --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
384
- --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
385
- --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
386
- --utrecht-mapcontrolbutton-height: var(--utrecht-space-block-2xl);
387
- --utrecht-mapcontrolbutton-width: var(--utrecht-space-block-2xl);
388
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
389
- --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
390
- --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
391
- --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
392
- --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
393
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
394
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
395
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
396
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
397
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
398
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
399
- --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
400
- --utrecht-link-focus-color: var(--utrecht-color-blue-40);
401
- --utrecht-link-color: var(--utrecht-color-blue-30);
402
- --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
403
- --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
404
- --utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
405
- --utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
406
- --utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
407
- --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
408
- --utrecht-form-label-radio-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
409
- --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
410
- --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
411
- --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
412
- --utrecht-focus-outline-width: var(--utrecht-border-width-md);
413
- --utrecht-focus-outline-style: var(--utrecht-border-style-dotted);
414
- --utrecht-focus-outline-color: var(--utrecht-color-black);
415
- --utrecht-focus-color: var(--utrecht-color-black);
416
- --utrecht-focus-box-shadow-spread-radius: var(--utrecht-border-width-md);
417
- --utrecht-focus-box-shadow-color: var(--utrecht-color-white);
418
- --utrecht-focus-border-style: var(--utrecht-border-style-dotted);
419
- --utrecht-focus-border-color: var(--utrecht-color-black);
420
- --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
421
- --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
422
- --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
423
- --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
424
- --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
425
- --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
426
- --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
427
- --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
428
- --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
429
- --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
430
- --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
431
- --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
432
- --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
433
- --utrecht-document-font-size: var(--utrecht-typography-scale-md-font-size);
434
- --utrecht-document-font-family: var(--utrecht-typography-sans-serif-font-family);
435
- --utrecht-document-color: var(--utrecht-color-black);
436
- --utrecht-document-background-color: var(--utrecht-color-white);
437
- --utrecht-button-focus-border-width: var(--utrecht-border-width-md);
438
- --utrecht-button-focus-border-color: var(--utrecht-color-blue-40);
439
- --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
440
- --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-35);
441
- --utrecht-button-secondary-action-color: var(--utrecht-color-blue-35);
442
- --utrecht-button-secondary-action-background-color: var(--utrecht-color-white);
443
- --utrecht-button-secondary-action-disabled-border-color: var(--utrecht-color-grey-80);
444
- --utrecht-button-secondary-action-disabled-color: var(--utrecht-color-grey-80);
445
- --utrecht-button-secondary-action-disabled-background-color: var(--utrecht-color-white);
446
- --utrecht-button-secondary-action-hover-border-color: var(--utrecht-color-blue-40);
447
- --utrecht-button-secondary-action-hover-color: var(--utrecht-color-blue-35);
448
- --utrecht-button-secondary-action-hover-background-color: var(--utrecht-color-white);
449
- --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
450
- --utrecht-button-primary-action-hover-color: var(--utrecht-color-white);
451
- --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-40);
452
- --utrecht-button-primary-action-color: var(--utrecht-color-white);
453
- --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-35);
454
- --utrecht-button-disabled-background-color: var(--utrecht-color-grey-90);
455
- --utrecht-button-disabled-color: var(--utrecht-color-white);
456
- --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
457
- --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
458
- --utrecht-button-padding-block-end: var(--utrecht-space-block-sm);
459
- --utrecht-button-padding-block-start: var(--utrecht-space-block-sm);
460
- --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
461
- --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
462
- --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
463
- --utrecht-breadcrumb-item-padding-inline-start: var(--utrecht-space-inline-md);
464
- --utrecht-breadcrumb-item-padding-inline-end: var(--utrecht-space-inline-md);
465
- --utrecht-breadcrumb-item-padding-block-end: var(--utrecht-space-block-xs);
466
- --utrecht-breadcrumb-item-padding-block-start: var(--utrecht-space-block-xs);
467
- --utrecht-breadcrumb-link-color: var(--utrecht-color-black);
468
- --utrecht-breadcrumb-link-background-color: var(--utrecht-color-grey-90);
469
- --utrecht-breadcrumb-link-focus-color: var(--utrecht-color-black);
470
- --utrecht-breadcrumb-link-focus-background-color: var(--utrecht-color-yellow-60);
471
- --utrecht-breadcrumb-font-size: var(--utrecht-typography-scale-sm-font-size);
472
- --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
473
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm);
474
- /* Default inline padding color for badge components */
475
- --utrecht-badge-padding-block: var(--utrecht-space-block-xs);
476
- /* Default block padding for badge components */
477
- --utrecht-badge-color: var(--utrecht-color-white);
478
- /* Default text color for badge components */
479
- --utrecht-badge-background-color: var(--utrecht-color-grey-30);
480
- /* Default background color for badge components */
481
- --utrecht-textbox-font-family: var(--utrecht-document-font-family);
482
- --utrecht-textbox-color: var(--utrecht-form-input-color);
483
- --utrecht-textbox-border-color: var(--utrecht-form-input-border-color);
484
- --utrecht-textarea-font-size: var(--utrecht-textbox-font-size);
485
- --utrecht-textarea-border-width: var(--utrecht-textbox-border-width);
486
- --utrecht-mapcontrolbutton-focus-border-color: var(--utrecht-focus-border-color);
487
- --utrecht-mapcontrolbutton-focus-outline-color: var(--utrecht-focus-outline-color);
488
- --utrecht-mapcontrolbutton-focus-border-style: var(--utrecht-focus-border-style);
489
- --utrecht-mapcontrolbutton-focus-box-shadow-color: var(--utrecht-focus-box-shadow-color);
490
- --utrecht-mapcontrolbutton-focus-color: var(--utrecht-focus-color);
491
- --utrecht-link-visited-color: var(--utrecht-link-color);
492
- --utrecht-link-hover-color: var(--utrecht-link-focus-color);
493
- --utrecht-link-active-color: var(--utrecht-link-color);
494
- --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
495
- --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
496
- --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
497
- --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
498
- --utrecht-feedback-valid-color: var(--utrecht-feedback-safe-color);
499
- --utrecht-feedback-invalid-color: var(--utrecht-feedback-danger-color);
500
- --utrecht-feedback-safe-border-color: var(--utrecht-feedback-safe-color);
501
- --utrecht-feedback-safe-background-color: var(--utrecht-feedback-safe-color);
502
- --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
503
- --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
504
- --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
505
- --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
506
- --utrecht-textarea-font-family: var(--utrecht-textbox-font-family);
507
- --utrecht-textarea-color: var(--utrecht-textbox-color);
508
- --utrecht-textarea-border-color: var(--utrecht-textbox-border-color);
509
- --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
510
- --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
511
- --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
512
- --utrecht-feedback-inactive-background-color: var(--utrecht-feedback-danger-background-color);
513
- --utrecht-feedback-success-border-color: var(--utrecht-feedback-safe-border-color);
514
- --utrecht-feedback-success-background-color: var(--utrecht-feedback-safe-background-color);
515
- --utrecht-feedback-error-border-color: var(--utrecht-feedback-danger-border-color);
516
- --utrecht-feedback-error-background-color: var(--utrecht-feedback-danger-background-color);
517
- --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
518
- --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
519
- --utrecht-feedback-invalid-border-color: var(--utrecht-feedback-danger-border-color);
520
- --utrecht-feedback-invalid-background-color: var(--utrecht-feedback-danger-background-color);
521
- --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
522
- --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
523
- --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
524
- --utrecht-searchbar-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
525
- --utrecht-textbox-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
526
- --utrecht-textarea-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
527
- --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
528
- --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
529
- --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
530
- --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
531
- --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
532
- --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
533
- }
534
-
535
- .utrecht-page-footer {
536
- --utrecht-heading-2-font-size: 1em;
537
- --utrecht-heading-2-text-transform: uppercase;
538
- --utrecht-heading-3-font-size: 1.125em;
539
- --utrecht-heading-3-font-weight: normal;
540
- }
541
-
542
- /**
543
- * @license SEE LICENSE.md
544
- * Copyright (c) 2021 Gemeente Utrecht
545
- * All rights reserved
546
- */
547
- /* stylelint-disable no-duplicate-selectors */
548
- @media (min-width: 35em) {
549
- :root {
550
- --utrecht-heading-1-font-size: 28px;
551
- /* 28px on tablet min-width-35e */
552
- --utrecht-paragraph-lead-font-size: 1.25em;
553
- /* 20px on tablet min-width-35e */
554
- }
555
- }
556
- @media (min-width: 60em) {
557
- :root {
558
- --utrecht-heading-1-font-size: 32px;
559
- /* 32px on desktop min-width-60em */
560
- --utrecht-paragraph-lead-font-size: 1.25em;
561
- /* 20px on desktop min-width-60em */
562
- }
563
- }
package/src/bem.scss DELETED
@@ -1,58 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Gemeente Utrecht
4
- */
5
-
6
- /* Collection of all BEM class names in the component library */
7
-
8
- /*
9
- * TODO: Once every component is a separate npm package, these imports should
10
- * be updated to use a package reference instead of a relative path.
11
- *
12
- * For example:
13
- * @import "../../blockquote/index";
14
- *
15
- * Will become:
16
- * @import "@utrecht/blockquote/index";
17
- */
18
-
19
- @import "../../../components/alternate-lang-link/bem";
20
- @import "../../../components/article/bem";
21
- @import "../../../components/badge/bem";
22
- @import "../../../components/badge-counter/bem";
23
- @import "../../../components/badge-data/bem";
24
- @import "../../../components/badge-status/bem";
25
- @import "../../../components/blockquote/bem";
26
- @import "../../../components/breadcrumb/bem";
27
- @import "../../../components/button/bem";
28
- @import "../../../components/checkbox/bem";
29
- @import "../../../components/document/bem";
30
- @import "../../../components/emphasis/bem";
31
- @import "../../../components/focus/bem";
32
- @import "../../../components/form-field-checkbox/bem";
33
- @import "../../../components/form-field-radio/bem";
34
- @import "../../../components/form-field-radio-group/bem";
35
- @import "../../../components/form-fieldset/bem";
36
- @import "../../../components/form-label/bem";
37
- @import "../../../components/heading-1/bem";
38
- @import "../../../components/heading-2/bem";
39
- @import "../../../components/heading-3/bem";
40
- @import "../../../components/heading-4/bem";
41
- @import "../../../components/heading-5/bem";
42
- @import "../../../components/heading-6/bem";
43
- @import "../../../components/link/bem";
44
- @import "../../../components/mapcontrolbutton/bem";
45
- @import "../../../components/menulijst/bem";
46
- @import "../../../components/navigatie sidenav/bem";
47
- @import "../../../components/navigatie topnav/bem";
48
- @import "../../../components/nav-top/bem";
49
- @import "../../../components/ordered-list/bem";
50
- @import "../../../components/page-footer/bem";
51
- @import "../../../components/paragraph/bem";
52
- @import "../../../components/radio-button/bem";
53
- @import "../../../components/search-bar/bem";
54
- @import "../../../components/separator/bem";
55
- @import "../../../components/table/bem";
56
- @import "../../../components/textarea/bem";
57
- @import "../../../components/textbox/bem";
58
- @import "../../../components/unordered-list/bem";
@@ -1,9 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Gemeente Utrecht
4
- */
5
-
6
- /* Collection of CSS variables for Utrecht theme applied to `:root` */
7
-
8
- @import "@utrecht/design-tokens/dist/index";
9
- @import "@utrecht/design-tokens/src/custom";