@amsterdam/design-system-css 0.1.2 → 0.1.4

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