@amsterdam/design-system-css 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/button/button.css +702 -0
  2. package/dist/button/button.css.map +1 -0
  3. package/dist/details/details.css +62 -0
  4. package/dist/details/details.css.map +1 -0
  5. package/dist/form-label/form-label.css +26 -0
  6. package/dist/form-label/form-label.css.map +1 -0
  7. package/dist/heading/heading.css +45 -95
  8. package/dist/heading/heading.css.map +1 -1
  9. package/dist/icon/icon.css +106 -21
  10. package/dist/icon/icon.css.map +1 -1
  11. package/dist/link/link.css +83 -55
  12. package/dist/link/link.css.map +1 -1
  13. package/dist/list/list.css +5 -0
  14. package/dist/list/list.css.map +1 -1
  15. package/dist/paragraph/paragraph.css +40 -44
  16. package/dist/paragraph/paragraph.css.map +1 -1
  17. package/dist/radio-button/radio-button.css +341 -0
  18. package/dist/radio-button/radio-button.css.map +1 -0
  19. package/dist/textbox/textbox.css +178 -0
  20. package/dist/textbox/textbox.css.map +1 -0
  21. package/package.json +7 -6
  22. package/src/button/README.md +24 -0
  23. package/src/button/button-css.md +12 -0
  24. package/src/button/button.scss +14 -0
  25. package/src/form-label/README.md +3 -0
  26. package/src/form-label/form-label.scss +17 -0
  27. package/src/heading/README.md +23 -0
  28. package/src/heading/heading-css.md +3 -0
  29. package/src/heading/heading.scss +40 -25
  30. package/src/icon/README.md +21 -0
  31. package/src/icon/icon.scss +87 -18
  32. package/src/link/README.md +1 -0
  33. package/src/link/link.scss +88 -32
  34. package/src/list/list.scss +11 -0
  35. package/src/paragraph/README.md +24 -0
  36. package/src/paragraph/paragraph-css.md +3 -0
  37. package/src/paragraph/paragraph.scss +35 -9
  38. package/utils/breakpoint.scss +7 -2
  39. package/utils/calculate-fluid-style.scss +6 -1
  40. package/dist/document/document.css +0 -22
  41. package/dist/document/document.css.map +0 -1
  42. package/dist/grid/grid.css +0 -340
  43. package/dist/grid/grid.css.map +0 -1
  44. package/dist/spacing/spacing.css +0 -249
  45. package/dist/spacing/spacing.css.map +0 -1
  46. package/src/document/document.scss +0 -16
  47. package/src/grid/grid.scss +0 -83
  48. package/src/spacing/spacing.scss +0 -60
package/dist/button/button.css ADDED
@@ -0,0 +1,702 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
4
+ * Copyright (c) 2021 Gemeente Utrecht
5
+ */
6
+ /**
7
+ * @license EUPL-1.2
8
+ * Copyright (c) 2021 Gemeente Utrecht
9
+ * Copyright (c) 2021 Robbert Broersma
10
+ */
11
+ /* stylelint-disable-next-line block-no-empty */
12
+ /**
13
+ * @license EUPL-1.2
14
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
15
+ * Copyright (c) 2021 Gemeente Utrecht
16
+ */
17
+ /**
18
+ * @license EUPL-1.2
19
+ * Copyright (c) 2021 Gemeente Utrecht
20
+ * Copyright (c) 2021 Robbert Broersma
21
+ */
22
+ /* stylelint-disable-next-line block-no-empty */
23
+ .utrecht-button {
24
+ /*
25
+ `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
26
+ The hint color takes priority over the appearance color.
27
+
28
+ `--_utrecht-button-appearance` is the internal prefix for the appearance
29
+ (primary-action, secondary-action or subtle), it is not an API.
30
+ */
31
+ --_utrecht-button-background-color: var(
32
+ --_utrecht-button-hint-background-color,
33
+ var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
34
+ );
35
+ --_utrecht-button-color: var(
36
+ --_utrecht-button-hint-color,
37
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
38
+ );
39
+ --_utrecht-button-border-color: var(
40
+ --_utrecht-button-hint-border-color,
41
+ var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
42
+ );
43
+ --_utrecht-button-border-bottom-color: var(
44
+ --_utrecht-button-hint-border-bottom-color,
45
+ var(
46
+ --_utrecht-button-hint-border-color,
47
+ var(
48
+ --_utrecht-button-appearance-border-bottom-color,
49
+ var(
50
+ --_utrecht-button-appearance-border-color,
51
+ var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
52
+ )
53
+ )
54
+ )
55
+ );
56
+ --_utrecht-button-disabled-background-color: var(
57
+ --_utrecht-button-hint-disabled-background-color,
58
+ var(
59
+ --_utrecht-button-appearance-disabled-background-color,
60
+ var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
61
+ )
62
+ );
63
+ --_utrecht-button-disabled-border-color: var(
64
+ --_utrecht-button-hint-disabled-border-color,
65
+ var(
66
+ --_utrecht-button-appearance-disabled-border-color,
67
+ var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
68
+ )
69
+ );
70
+ --_utrecht-button-disabled-color: var(
71
+ --_utrecht-button-hint-disabled-color,
72
+ var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
73
+ );
74
+ --_utrecht-button-pressed-background-color: var(
75
+ --_utrecht-button-hint-pressed-background-color,
76
+ var(
77
+ --_utrecht-button-hint-background-color,
78
+ var(
79
+ --_utrecht-button-appearance-pressed-background-color,
80
+ var(
81
+ --_utrecht-button-appearance-background-color,
82
+ var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
83
+ )
84
+ )
85
+ )
86
+ );
87
+ --_utrecht-button-pressed-border-color: var(
88
+ --_utrecht-button-hint-pressed-border-color,
89
+ var(
90
+ --_utrecht-button-hint-border-color,
91
+ var(
92
+ --_utrecht-button-appearance-pressed-border-color,
93
+ var(
94
+ --_utrecht-button-appearance-border-color,
95
+ var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
96
+ )
97
+ )
98
+ )
99
+ );
100
+ --_utrecht-button-pressed-color: var(
101
+ --_utrecht-button-hint-pressed-color,
102
+ var(
103
+ --_utrecht-button-hint-color,
104
+ var(
105
+ --_utrecht-button-appearance-pressed-color,
106
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
107
+ )
108
+ )
109
+ );
110
+ --_utrecht-button-focus-background-color: var(
111
+ --_utrecht-button-hint-focus-background-color,
112
+ var(
113
+ --_utrecht-button-hint-background-color,
114
+ var(
115
+ --_utrecht-button-appearance-focus-background-color,
116
+ var(
117
+ --_utrecht-button-appearance-background-color,
118
+ var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
119
+ )
120
+ )
121
+ )
122
+ );
123
+ --_utrecht-button-focus-border-color: var(
124
+ --_utrecht-button-hint-focus-border-color,
125
+ var(
126
+ --_utrecht-button-hint-border-color,
127
+ var(
128
+ --_utrecht-button-appearance-focus-border-color,
129
+ var(
130
+ --_utrecht-button-appearance-border-color,
131
+ var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
132
+ )
133
+ )
134
+ )
135
+ );
136
+ --_utrecht-button-focus-color: var(
137
+ --_utrecht-button-hint-focus-color,
138
+ var(
139
+ --_utrecht-button-hint-color,
140
+ var(
141
+ --_utrecht-button-appearance-focus-color,
142
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
143
+ )
144
+ )
145
+ );
146
+ --_utrecht-button-hover-background-color: var(
147
+ --_utrecht-button-hint-hover-background-color,
148
+ var(
149
+ --_utrecht-button-hint-background-color,
150
+ var(
151
+ --_utrecht-button-appearance-hover-background-color,
152
+ var(
153
+ --_utrecht-button-appearance-background-color,
154
+ var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
155
+ )
156
+ )
157
+ )
158
+ );
159
+ --_utrecht-button-hover-border-color: var(
160
+ --_utrecht-button-hint-hover-border-color,
161
+ var(
162
+ --_utrecht-button-hint-border-color,
163
+ var(
164
+ --_utrecht-button-appearance-hover-border-color,
165
+ var(
166
+ --_utrecht-button-appearance-border-color,
167
+ var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
168
+ )
169
+ )
170
+ )
171
+ );
172
+ --_utrecht-button-hover-color: var(
173
+ --_utrecht-button-hint-hover-color,
174
+ var(
175
+ --_utrecht-button-hint-color,
176
+ var(
177
+ --_utrecht-button-appearance-hover-color,
178
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
179
+ )
180
+ )
181
+ );
182
+ --_utrecht-button-active-background-color: var(
183
+ --_utrecht-button-hint-active-background-color,
184
+ var(
185
+ --_utrecht-button-hint-background-color,
186
+ var(
187
+ --_utrecht-button-appearance-active-background-color,
188
+ var(
189
+ --_utrecht-button-appearance-background-color,
190
+ var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
191
+ )
192
+ )
193
+ )
194
+ );
195
+ --_utrecht-button-active-border-color: var(
196
+ --_utrecht-button-hint-active-border-color,
197
+ var(
198
+ --_utrecht-button-hint-border-color,
199
+ var(
200
+ --_utrecht-button-appearance-active-border-color,
201
+ var(
202
+ --_utrecht-button-appearance-border-color,
203
+ var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
204
+ )
205
+ )
206
+ )
207
+ );
208
+ --_utrecht-button-active-color: var(
209
+ --_utrecht-button-hint-active-color,
210
+ var(
211
+ --_utrecht-button-hint-color,
212
+ var(
213
+ --_utrecht-button-appearance-active-color,
214
+ var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
215
+ )
216
+ )
217
+ );
218
+ --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
219
+ --_utrecht-button-border-block-end-width: var(
220
+ --utrecht-button-border-bottom-width,
221
+ var(--_utrecht-button-border-width, 0)
222
+ );
223
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
224
+ align-items: center;
225
+ background-color: var(--_utrecht-button-background-color);
226
+ border-block-end-color: var(--_utrecht-button-border-bottom-color);
227
+ border-block-end-width: var(--_utrecht-button-border-block-end-width);
228
+ border-color: var(--_utrecht-button-border-color);
229
+ border-radius: var(--utrecht-button-border-radius);
230
+ border-style: solid;
231
+ border-width: var(--_utrecht-button-border-width);
232
+ box-sizing: border-box;
233
+ color: var(--_utrecht-button-color);
234
+ cursor: var(--utrecht-action-activate-cursor);
235
+ display: inline-flex;
236
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
237
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
238
+ font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
239
+ gap: var(--utrecht-button-icon-gap);
240
+ inline-size: var(--utrecht-button-inline-size, auto);
241
+ justify-content: center;
242
+ letter-spacing: var(--utrecht-button-letter-spacing);
243
+ line-height: var(--utrecht-button-line-height);
244
+ min-block-size: var(--utrecht-button-min-block-size, 44px);
245
+ min-inline-size: var(--utrecht-button-min-inline-size, 44px);
246
+ padding-block-end: var(--utrecht-button-padding-block-end);
247
+ padding-block-start: var(--utrecht-button-padding-block-start);
248
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
249
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
250
+ text-transform: var(--utrecht-button-text-transform);
251
+ -webkit-user-select: none;
252
+ user-select: none;
253
+ }
254
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
255
+ .utrecht-button {
256
+ --_utrecht-button-disabled-border-color: GrayText;
257
+ --_utrecht-button-disabled-color: GrayText;
258
+ /*
259
+ * `<button>` has these styles by default, but other elements styles as button do not:
260
+ *
261
+ * - `<div role="button">` needs this.
262
+ * - `<a role="button">` needs this.
263
+ */
264
+ background-color: ButtonFace;
265
+ border-color: buttonborder;
266
+ color: ButtonText;
267
+ /* TODO: Find a way to express the `pressed` state */
268
+ }
269
+ }
270
+
271
+ .utrecht-button--distanced {
272
+ margin-block-end: var(--utrecht-button-margin-block-end);
273
+ margin-block-start: var(--utrecht-button-margin-block-start);
274
+ margin-inline-end: var(--utrecht-button-margin-inline-end);
275
+ margin-inline-start: var(--utrecht-button-margin-inline-start);
276
+ }
277
+
278
+ .utrecht-button--submit {
279
+ /* lower priority specificty than busy and disabled cursor */
280
+ cursor: var(--utrecht-action-submit-cursor);
281
+ }
282
+
283
+ .utrecht-button--busy {
284
+ cursor: var(--utrecht-action-busy-cursor);
285
+ }
286
+
287
+ .utrecht-button--pressed {
288
+ background-color: var(--_utrecht-button-pressed-background-color);
289
+ border-color: var(--_utrecht-button-pressed-border-color);
290
+ color: var(--_utrecht-button-pressed-color);
291
+ }
292
+
293
+ .utrecht-button:disabled,
294
+ .utrecht-button--disabled {
295
+ background-color: var(--_utrecht-button-disabled-background-color);
296
+ border-color: var(--_utrecht-button-disabled-border-color);
297
+ color: var(--_utrecht-button-disabled-color);
298
+ cursor: var(--utrecht-action-disabled-cursor);
299
+ }
300
+
301
+ .utrecht-button--focus-visible {
302
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
303
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
304
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
305
+ * can combine it with the focus ring box shadow.
306
+ */
307
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
308
+ var(--utrecht-focus-inverse-outline-color, transparent);
309
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
310
+ outline-color: var(--utrecht-focus-outline-color, revert);
311
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
312
+ outline-style: var(--utrecht-focus-outline-style, revert);
313
+ outline-width: var(--utrecht-focus-outline-width, revert);
314
+ }
315
+
316
+ .utrecht-button--focus:not(.utrecht-button--disabled) {
317
+ background-color: var(--_utrecht-button-focus-background-color);
318
+ border-color: var(--_utrecht-button-focus-border-color);
319
+ color: var(--_utrecht-button-focus-color);
320
+ scale: var(--utrecht-button-focus-scale, 1);
321
+ }
322
+
323
+ .utrecht-button:focus {
324
+ /* Show focus ring even for disabled :focus-visible buttons. *
325
+ /* For example: <button disabled tabindex="0"> */
326
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
327
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
328
+ * can combine it with the focus ring box shadow.
329
+ */
330
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
331
+ var(--utrecht-focus-inverse-outline-color, transparent);
332
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
333
+ outline-color: var(--utrecht-focus-outline-color, revert);
334
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
335
+ outline-style: var(--utrecht-focus-outline-style, revert);
336
+ outline-width: var(--utrecht-focus-outline-width, revert);
337
+ }
338
+
339
+ .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
340
+ background-color: var(--_utrecht-button-focus-background-color);
341
+ border-color: var(--_utrecht-button-focus-border-color);
342
+ color: var(--_utrecht-button-focus-color);
343
+ scale: var(--utrecht-button-focus-scale, 1);
344
+ /* the pseudo-class for `:focus-visible` is implemented via the mixin */
345
+ /* - The browser default focus ring should apply when these CSS custom properties are not set.
346
+ * - Make the `box-shadow` value available, so components that have their own `box-shadow`
347
+ * can combine it with the focus ring box shadow.
348
+ */
349
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
350
+ var(--utrecht-focus-inverse-outline-color, transparent);
351
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
352
+ outline-color: var(--utrecht-focus-outline-color, revert);
353
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
354
+ outline-style: var(--utrecht-focus-outline-style, revert);
355
+ outline-width: var(--utrecht-focus-outline-width, revert);
356
+ }
357
+
358
+ /* override the `:focus` selector above */
359
+ /* stylelint-disable-next-line no-descending-specificity */
360
+ .utrecht-button:focus:not(:focus-visible) {
361
+ /* undo focus ring */
362
+ box-shadow: none;
363
+ outline-style: revert;
364
+ }
365
+
366
+ .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
367
+ .utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
368
+ background-color: var(--_utrecht-button-hover-background-color);
369
+ border-color: var(--_utrecht-button-hover-border-color);
370
+ color: var(--_utrecht-button-hover-color);
371
+ scale: var(--utrecht-button-hover-scale, 1);
372
+ }
373
+
374
+ .utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
375
+ .utrecht-button--active {
376
+ background-color: var(--_utrecht-button-active-background-color);
377
+ border-color: var(--_utrecht-button-active-border-color);
378
+ color: var(--_utrecht-button-active-color);
379
+ }
380
+
381
+ .utrecht-button--primary-action {
382
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
383
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
384
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
385
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
386
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
387
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
388
+ --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
389
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
390
+ --_utrecht-button-appearance-disabled-background-color: var(
391
+ --utrecht-button-primary-action-disabled-background-color
392
+ );
393
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
394
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
395
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
396
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
397
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
398
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
399
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
400
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
401
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
402
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
403
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
404
+ }
405
+
406
+ .utrecht-button--secondary-action {
407
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
408
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
409
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
410
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
411
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
412
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
413
+ --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
414
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
415
+ --_utrecht-button-appearance-disabled-background-color: var(
416
+ --utrecht-button-secondary-action-disabled-background-color
417
+ );
418
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
419
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
420
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
421
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
422
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
423
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
424
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
425
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
426
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
427
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
428
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
429
+ }
430
+
431
+ .utrecht-button--subtle {
432
+ --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
433
+ --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
434
+ --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
435
+ --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
436
+ --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
437
+ --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
438
+ --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
439
+ --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
440
+ --_utrecht-button-appearance-disabled-background-color: var(
441
+ --utrecht-button-subtle-disabled-background-color
442
+ );
443
+ --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
444
+ --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
445
+ --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
446
+ --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
447
+ --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
448
+ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
449
+ --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
450
+ --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
451
+ --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
452
+ --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
453
+ --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
454
+ }
455
+
456
+ .utrecht-button--primary-action.utrecht-button--danger {
457
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
458
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
459
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
460
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
461
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
462
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
463
+ --_utrecht-button-hint-disabled-background-color: var(
464
+ --utrecht-button-primary-action-danger-disabled-background-color
465
+ );
466
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
467
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
468
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
469
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
470
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
471
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
472
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
473
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
474
+ --_utrecht-button-hint-pressed-background-color: var(
475
+ --utrecht-button-primary-action-danger-pressed-background-color
476
+ );
477
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
478
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
479
+ }
480
+
481
+ .utrecht-button--primary-action.utrecht-button--ready {
482
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
483
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
484
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
485
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
486
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
487
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
488
+ --_utrecht-button-hint-disabled-background-color: var(
489
+ --utrecht-button-primary-action-ready-disabled-background-color
490
+ );
491
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
492
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
493
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
494
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
495
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
496
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
497
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
498
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
499
+ --_utrecht-button-hint-pressed-background-color: var(
500
+ --utrecht-button-primary-action-ready-pressed-background-color
501
+ );
502
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
503
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
504
+ }
505
+
506
+ .utrecht-button--primary-action.utrecht-button--warning {
507
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
508
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
509
+ --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
510
+ --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
511
+ --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
512
+ --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
513
+ --_utrecht-button-hint-disabled-background-color: var(
514
+ --utrecht-button-primary-action-warning-disabled-background-color
515
+ );
516
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
517
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
518
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
519
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
520
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
521
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
522
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
523
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
524
+ --_utrecht-button-hint-pressed-background-color: var(
525
+ --utrecht-button-primary-action-warning-pressed-background-color
526
+ );
527
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
528
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
529
+ }
530
+
531
+ .utrecht-button--secondary-action.utrecht-button--danger {
532
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
533
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
534
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
535
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
536
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
537
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
538
+ --_utrecht-button-hint-disabled-background-color: var(
539
+ --utrecht-button-secondary-action-danger-disabled-background-color
540
+ );
541
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
542
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
543
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
544
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
545
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
546
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
547
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
548
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
549
+ --_utrecht-button-hint-pressed-background-color: var(
550
+ --utrecht-button-secondary-action-danger-pressed-background-color
551
+ );
552
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
553
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
554
+ }
555
+
556
+ .utrecht-button--secondary-action.utrecht-button--ready {
557
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
558
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
559
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
560
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
561
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
562
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
563
+ --_utrecht-button-hint-disabled-background-color: var(
564
+ --utrecht-button-secondary-action-ready-disabled-background-color
565
+ );
566
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
567
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
568
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
569
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
570
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
571
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
572
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
573
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
574
+ --_utrecht-button-hint-pressed-background-color: var(
575
+ --utrecht-button-secondary-action-ready-pressed-background-color
576
+ );
577
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
578
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
579
+ }
580
+
581
+ .utrecht-button--secondary-action.utrecht-button--warning {
582
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
583
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
584
+ --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
585
+ --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
586
+ --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
587
+ --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
588
+ --_utrecht-button-hint-disabled-background-color: var(
589
+ --utrecht-button-secondary-action-warning-disabled-background-color
590
+ );
591
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
592
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
593
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
594
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
595
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
596
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
597
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
598
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
599
+ --_utrecht-button-hint-pressed-background-color: var(
600
+ --utrecht-button-secondary-action-warning-pressed-background-color
601
+ );
602
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
603
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
604
+ }
605
+
606
+ .utrecht-button--subtle.utrecht-button--danger {
607
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
608
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
609
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
610
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
611
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
612
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
613
+ --_utrecht-button-hint-disabled-background-color: var(
614
+ --utrecht-button-subtle-danger-disabled-background-color
615
+ );
616
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
617
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
618
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
619
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
620
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
621
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
622
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
623
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
624
+ --_utrecht-button-hint-pressed-background-color: var(
625
+ --utrecht-button-subtle-danger-pressed-background-color
626
+ );
627
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
628
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
629
+ }
630
+
631
+ .utrecht-button--subtle.utrecht-button--ready {
632
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
633
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
634
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
635
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
636
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
637
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
638
+ --_utrecht-button-hint-disabled-background-color: var(
639
+ --utrecht-button-subtle-ready-disabled-background-color
640
+ );
641
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
642
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
643
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
644
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
645
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
646
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
647
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
648
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
649
+ --_utrecht-button-hint-pressed-background-color: var(
650
+ --utrecht-button-subtle-ready-pressed-background-color
651
+ );
652
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
653
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
654
+ }
655
+
656
+ .utrecht-button--subtle.utrecht-button--warning {
657
+ --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
658
+ --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
659
+ --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
660
+ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
661
+ --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
662
+ --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
663
+ --_utrecht-button-hint-disabled-background-color: var(
664
+ --utrecht-button-subtle-warning-disabled-background-color
665
+ );
666
+ --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
667
+ --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
668
+ --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
669
+ --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
670
+ --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
671
+ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
672
+ --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
673
+ --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
674
+ --_utrecht-button-hint-pressed-background-color: var(
675
+ --utrecht-button-subtle-warning-pressed-background-color
676
+ );
677
+ --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
678
+ --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
679
+ }
680
+
681
+ /**
682
+ * @license EUPL-1.2+
683
+ * Copyright (c) 2023 Gemeente Amsterdam
684
+ */
685
+ /*
686
+ The breakpoint is 854px / 16 = 53.375rems
687
+ https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
688
+ */
689
+ .amsterdam-button {
690
+ font-size: var(--amsterdam-button-font-size-narrow);
691
+ }
692
+ @media screen and (width > 53.375rem) {
693
+ .amsterdam-button {
694
+ font-size: var(--amsterdam-button-font-size-wide);
695
+ }
696
+ }
697
+
698
+ .amsterdam-button--secondary:hover {
699
+ box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
700
+ }
701
+
702
+ /*# sourceMappingURL=button.css.map */