@amsterdam/design-system-tokens 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/_variables.scss +92 -20
- package/dist/index.css +92 -20
- package/dist/index.d.ts +83 -11
- package/dist/index.js +118 -46
- package/dist/index.json +117 -45
- package/dist/index.tokens.json +205 -51
- package/dist/root.css +92 -20
- package/dist/tokens.d.ts +172 -18
- package/dist/tokens.js +3884 -2248
- package/dist/variables.less +92 -20
- package/package.json +3 -3
- package/src/brand/amsterdam/color.tokens.json +5 -6
- package/src/components/amsterdam/alert.tokens.json +12 -9
- package/src/components/amsterdam/badge.tokens.json +49 -0
- package/src/components/amsterdam/dialog.tokens.json +0 -7
- package/src/components/amsterdam/icon-button.tokens.json +37 -0
- package/src/components/amsterdam/link-list.tokens.json +61 -0
- package/src/components/amsterdam/mega-menu.tokens.json +12 -0
- package/src/components/amsterdam/spotlight.tokens.json +3 -3
- package/src/components/amsterdam/table.tokens.json +20 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.3.0...@amsterdam/design-system-tokens@0.4.0) (2024-01-31)
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
* Change blue color names of Spotlight to match Badge API (#1061)
|
|
11
|
+
* Remove unused grey-4 color token (#1059)
|
|
12
|
+
* Add icon button (#1021)
|
|
13
|
+
* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
|
|
18
|
+
* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
|
|
19
|
+
* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
|
|
20
|
+
* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
|
|
21
|
+
* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
|
|
22
|
+
* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
* Remove unused grey-4 color token ([#1059](https://github.com/Amsterdam/design-system/issues/1059)) ([379560e](https://github.com/Amsterdam/design-system/commit/379560eafc48d3301439c4e40268b65beae59a56))
|
|
27
|
+
* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
|
|
28
|
+
|
|
6
29
|
## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.2.0...@amsterdam/design-system-tokens@0.3.0) (2023-12-22)
|
|
7
30
|
|
|
8
31
|
### ⚠ BREAKING CHANGES
|
package/dist/_variables.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 31 Jan 2024 12:56:24 GMT
|
|
4
4
|
|
|
5
5
|
$utrecht-button-subtle-disabled-background-color: transparent;
|
|
6
6
|
$utrecht-button-subtle-background-color: transparent;
|
|
@@ -34,12 +34,18 @@ $amsterdam-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1
|
|
|
34
34
|
$amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
|
|
35
35
|
$amsterdam-ordered-list-list-style-type: decimal;
|
|
36
36
|
$amsterdam-ordered-list-gap: 0.75rem;
|
|
37
|
+
$amsterdam-mega-menu-list-category-padding-block-start: 1rem;
|
|
38
|
+
$amsterdam-mega-menu-list-category-column-width: 20rem;
|
|
37
39
|
$amsterdam-mark-background-color: var(--amsterdam-color-yellow);
|
|
38
40
|
$amsterdam-logo-height: 2.5rem;
|
|
39
41
|
$amsterdam-link-in-list-gap: 0.5em;
|
|
40
42
|
$amsterdam-link-inline-line-height: inherit;
|
|
41
43
|
$amsterdam-link-inline-font-size: inherit;
|
|
42
44
|
$amsterdam-link-inline-font-family: inherit;
|
|
45
|
+
$amsterdam-link-list-link-gap: 0.5em;
|
|
46
|
+
$amsterdam-link-list-gap: 0.5em;
|
|
47
|
+
$amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
|
|
48
|
+
$amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
|
|
43
49
|
$amsterdam-grid-wide-column-count: 12;
|
|
44
50
|
$amsterdam-grid-medium-column-count: 8;
|
|
45
51
|
$amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
|
|
@@ -55,13 +61,14 @@ $amsterdam-dialog-form-max-block-size: 75vh;
|
|
|
55
61
|
$amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
56
62
|
$amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
57
63
|
$amsterdam-dialog-form-gap: 1.5rem;
|
|
58
|
-
$amsterdam-dialog-close-background-color: transparent;
|
|
59
64
|
$amsterdam-dialog-backdrop-background: #0006;
|
|
60
65
|
$amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
61
66
|
$amsterdam-dialog-border: 0;
|
|
62
67
|
$amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
|
|
63
|
-
$amsterdam-
|
|
68
|
+
$amsterdam-badge-padding-inline: 0.5rem;
|
|
64
69
|
$amsterdam-alert-gap: 1rem;
|
|
70
|
+
$amsterdam-alert-border-style: solid;
|
|
71
|
+
$amsterdam-alert-border-width: 4px;
|
|
65
72
|
$amsterdam-spacing-inset-xl: 2.5rem;
|
|
66
73
|
$amsterdam-spacing-inset-lg: 1.5rem;
|
|
67
74
|
$amsterdam-spacing-inset-md: 1rem;
|
|
@@ -114,13 +121,12 @@ $amsterdam-proportion-wide: 5 / 4;
|
|
|
114
121
|
$amsterdam-proportion-square: 1 / 1;
|
|
115
122
|
$amsterdam-proportion-tall: 4 / 5;
|
|
116
123
|
$amsterdam-proportion-x-tall: 9 / 16;
|
|
117
|
-
$amsterdam-color-neutral-grey4: #323232;
|
|
118
124
|
$amsterdam-color-neutral-grey3: #767676;
|
|
119
|
-
$amsterdam-color-neutral-grey2: #
|
|
120
|
-
$amsterdam-color-neutral-grey1: #
|
|
125
|
+
$amsterdam-color-neutral-grey2: #BEBEBE;
|
|
126
|
+
$amsterdam-color-neutral-grey1: #E8E8E8;
|
|
121
127
|
$amsterdam-color-magenta: #E50082;
|
|
122
128
|
$amsterdam-color-purple: #A00078;
|
|
123
|
-
$amsterdam-color-blue: #
|
|
129
|
+
$amsterdam-color-blue: #009DE6;
|
|
124
130
|
$amsterdam-color-dark-green: #00A03C;
|
|
125
131
|
$amsterdam-color-green: #BED200;
|
|
126
132
|
$amsterdam-color-yellow: #FFE600;
|
|
@@ -128,7 +134,7 @@ $amsterdam-color-orange: #FF9100;
|
|
|
128
134
|
$amsterdam-color-dark-blue: #102E62;
|
|
129
135
|
$amsterdam-color-primary-red: #EC0000;
|
|
130
136
|
$amsterdam-color-primary-blue: #004699;
|
|
131
|
-
$amsterdam-color-primary-white: #
|
|
137
|
+
$amsterdam-color-primary-white: #FFFFFF;
|
|
132
138
|
$amsterdam-color-primary-black: #000000;
|
|
133
139
|
$utrecht-button-subtle-disabled-color: $amsterdam-color-neutral-grey2;
|
|
134
140
|
$utrecht-button-subtle-focus-color: $amsterdam-color-dark-blue;
|
|
@@ -194,6 +200,14 @@ $amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
|
|
|
194
200
|
$amsterdam-text-input-font-family: $amsterdam-typography-font-family;
|
|
195
201
|
$amsterdam-text-input-color: $amsterdam-color-primary-black;
|
|
196
202
|
$amsterdam-text-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
|
|
203
|
+
$amsterdam-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
|
|
204
|
+
$amsterdam-table-cell-border-bottom: 1px solid $amsterdam-color-neutral-grey1;
|
|
205
|
+
$amsterdam-table-caption-font-weight: $amsterdam-typography-font-weight-bold;
|
|
206
|
+
$amsterdam-table-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
|
|
207
|
+
$amsterdam-table-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
|
|
208
|
+
$amsterdam-table-font-weight: $amsterdam-typography-font-weight-normal;
|
|
209
|
+
$amsterdam-table-font-family: $amsterdam-typography-font-family;
|
|
210
|
+
$amsterdam-table-color: $amsterdam-color-primary-black;
|
|
197
211
|
$amsterdam-switch-disabled-background-color: $amsterdam-color-neutral-grey2;
|
|
198
212
|
$amsterdam-switch-outline-offset: $amsterdam-focus-outline-offset;
|
|
199
213
|
$amsterdam-switch-checked-background-color: $amsterdam-color-primary-blue;
|
|
@@ -205,10 +219,10 @@ $amsterdam-spotlight-yellow-background-color: $amsterdam-color-yellow;
|
|
|
205
219
|
$amsterdam-spotlight-purple-background-color: $amsterdam-color-purple;
|
|
206
220
|
$amsterdam-spotlight-orange-background-color: $amsterdam-color-orange;
|
|
207
221
|
$amsterdam-spotlight-magenta-background-color: $amsterdam-color-magenta;
|
|
208
|
-
$amsterdam-spotlight-light-blue-background-color: $amsterdam-color-blue;
|
|
209
222
|
$amsterdam-spotlight-green-background-color: $amsterdam-color-green;
|
|
210
223
|
$amsterdam-spotlight-dark-green-background-color: $amsterdam-color-dark-green;
|
|
211
|
-
$amsterdam-spotlight-blue-background-color: $amsterdam-color-primary-blue;
|
|
224
|
+
$amsterdam-spotlight-dark-blue-background-color: $amsterdam-color-primary-blue;
|
|
225
|
+
$amsterdam-spotlight-blue-background-color: $amsterdam-color-blue;
|
|
212
226
|
$amsterdam-skip-link-hover-background-color: $amsterdam-color-dark-blue;
|
|
213
227
|
$amsterdam-skip-link-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
|
|
214
228
|
$amsterdam-skip-link-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
|
|
@@ -291,6 +305,8 @@ $amsterdam-ordered-list-spacious-font-size: $amsterdam-typography-spacious-text-
|
|
|
291
305
|
$amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
|
|
292
306
|
$amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
|
|
293
307
|
$amsterdam-ordered-list-color: $amsterdam-color-primary-black;
|
|
308
|
+
$amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-grid-spacious-gap;
|
|
309
|
+
$amsterdam-mega-menu-list-category-column-gap: $amsterdam-grid-spacious-gap;
|
|
294
310
|
$amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
|
|
295
311
|
$amsterdam-logo-title-color: $amsterdam-color-primary-red;
|
|
296
312
|
$amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
|
|
@@ -320,6 +336,25 @@ $amsterdam-link-inline-text-decoration-line: $amsterdam-link-appearance-regular-
|
|
|
320
336
|
$amsterdam-link-outline-offset: $amsterdam-focus-outline-offset;
|
|
321
337
|
$amsterdam-link-font-weight: $amsterdam-typography-font-weight-normal;
|
|
322
338
|
$amsterdam-link-font-family: $amsterdam-typography-font-family;
|
|
339
|
+
$amsterdam-link-list-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
|
|
340
|
+
$amsterdam-link-list-link-compact-large-line-height: $amsterdam-typography-compact-text-level-4-line-height;
|
|
341
|
+
$amsterdam-link-list-link-compact-large-font-size: $amsterdam-typography-compact-text-level-4-font-size;
|
|
342
|
+
$amsterdam-link-list-link-compact-medium-line-height: $amsterdam-typography-compact-text-level-5-line-height;
|
|
343
|
+
$amsterdam-link-list-link-compact-medium-font-size: $amsterdam-typography-compact-text-level-5-font-size;
|
|
344
|
+
$amsterdam-link-list-link-compact-small-line-height: $amsterdam-typography-compact-text-level-6-line-height;
|
|
345
|
+
$amsterdam-link-list-link-compact-small-font-size: $amsterdam-typography-compact-text-level-6-font-size;
|
|
346
|
+
$amsterdam-link-list-link-spacious-large-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
|
|
347
|
+
$amsterdam-link-list-link-spacious-large-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
|
|
348
|
+
$amsterdam-link-list-link-spacious-medium-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
|
|
349
|
+
$amsterdam-link-list-link-spacious-medium-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
|
|
350
|
+
$amsterdam-link-list-link-spacious-small-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
|
|
351
|
+
$amsterdam-link-list-link-spacious-small-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
|
|
352
|
+
$amsterdam-link-list-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
|
|
353
|
+
$amsterdam-link-list-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
|
|
354
|
+
$amsterdam-link-list-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
|
|
355
|
+
$amsterdam-link-list-link-outline-offset: $amsterdam-focus-outline-offset;
|
|
356
|
+
$amsterdam-link-list-link-font-weight: $amsterdam-typography-font-weight-normal;
|
|
357
|
+
$amsterdam-link-list-link-font-family: $amsterdam-typography-font-family;
|
|
323
358
|
$amsterdam-icon-compact-size-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
|
|
324
359
|
$amsterdam-icon-compact-size-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
|
|
325
360
|
$amsterdam-icon-compact-size-5-line-height: $amsterdam-typography-compact-text-level-5-line-height;
|
|
@@ -336,6 +371,19 @@ $amsterdam-icon-spacious-size-4-line-height: $amsterdam-typography-spacious-text
|
|
|
336
371
|
$amsterdam-icon-spacious-size-4-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
|
|
337
372
|
$amsterdam-icon-spacious-size-3-line-height: $amsterdam-typography-spacious-text-level-3-line-height;
|
|
338
373
|
$amsterdam-icon-spacious-size-3-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
|
|
374
|
+
$amsterdam-icon-button-on-background-dark-disabled-background-color: $amsterdam-color-neutral-grey2;
|
|
375
|
+
$amsterdam-icon-button-on-background-dark-disabled-color: $amsterdam-color-primary-white;
|
|
376
|
+
$amsterdam-icon-button-on-background-dark-hover-color: $amsterdam-color-primary-white;
|
|
377
|
+
$amsterdam-icon-button-on-background-dark-hover-background-color: $amsterdam-color-dark-blue;
|
|
378
|
+
$amsterdam-icon-button-on-background-dark-color: $amsterdam-color-primary-white;
|
|
379
|
+
$amsterdam-icon-button-on-background-dark-background-color: $amsterdam-color-primary-blue;
|
|
380
|
+
$amsterdam-icon-button-on-background-light-disabled-color: $amsterdam-color-neutral-grey2;
|
|
381
|
+
$amsterdam-icon-button-on-background-light-hover-color: $amsterdam-color-primary-black;
|
|
382
|
+
$amsterdam-icon-button-on-background-light-color: $amsterdam-color-primary-black;
|
|
383
|
+
$amsterdam-icon-button-disabled-color: $amsterdam-color-neutral-grey2;
|
|
384
|
+
$amsterdam-icon-button-hover-color: $amsterdam-color-dark-blue;
|
|
385
|
+
$amsterdam-icon-button-outline-offset: $amsterdam-focus-outline-offset;
|
|
386
|
+
$amsterdam-icon-button-color: $amsterdam-color-primary-blue;
|
|
339
387
|
$amsterdam-heading-compact-level-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
|
|
340
388
|
$amsterdam-heading-compact-level-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
|
|
341
389
|
$amsterdam-heading-compact-level-5-font-size: $amsterdam-typography-compact-text-level-5-font-size;
|
|
@@ -372,8 +420,6 @@ $amsterdam-form-label-spacious-font-size: $amsterdam-typography-spacious-text-le
|
|
|
372
420
|
$amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
|
|
373
421
|
$amsterdam-form-label-font-family: $amsterdam-typography-font-family;
|
|
374
422
|
$amsterdam-form-label-color: $amsterdam-color-primary-black;
|
|
375
|
-
$amsterdam-dialog-close-hover-fill: $amsterdam-color-primary-blue;
|
|
376
|
-
$amsterdam-dialog-close-fill: $amsterdam-color-primary-black;
|
|
377
423
|
$amsterdam-dialog-title-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
|
|
378
424
|
$amsterdam-dialog-title-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
|
|
379
425
|
$amsterdam-dialog-title-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
|
|
@@ -443,6 +489,28 @@ $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
|
|
|
443
489
|
$amsterdam-blockquote-font-weight: $amsterdam-typography-font-weight-bold;
|
|
444
490
|
$amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
|
|
445
491
|
$amsterdam-blockquote-color: $amsterdam-color-primary-black;
|
|
492
|
+
$amsterdam-badge-yellow-color: $amsterdam-color-primary-black;
|
|
493
|
+
$amsterdam-badge-yellow-background-color: $amsterdam-color-yellow;
|
|
494
|
+
$amsterdam-badge-purple-color: $amsterdam-color-primary-white;
|
|
495
|
+
$amsterdam-badge-purple-background-color: $amsterdam-color-purple;
|
|
496
|
+
$amsterdam-badge-orange-color: $amsterdam-color-primary-black;
|
|
497
|
+
$amsterdam-badge-orange-background-color: $amsterdam-color-orange;
|
|
498
|
+
$amsterdam-badge-magenta-color: $amsterdam-color-primary-white;
|
|
499
|
+
$amsterdam-badge-magenta-background-color: $amsterdam-color-magenta;
|
|
500
|
+
$amsterdam-badge-green-color: $amsterdam-color-primary-black;
|
|
501
|
+
$amsterdam-badge-green-background-color: $amsterdam-color-green;
|
|
502
|
+
$amsterdam-badge-dark-green-color: $amsterdam-color-primary-white;
|
|
503
|
+
$amsterdam-badge-dark-green-background-color: $amsterdam-color-dark-green;
|
|
504
|
+
$amsterdam-badge-dark-blue-color: $amsterdam-color-primary-white;
|
|
505
|
+
$amsterdam-badge-dark-blue-background-color: $amsterdam-color-primary-blue;
|
|
506
|
+
$amsterdam-badge-blue-color: $amsterdam-color-primary-black;
|
|
507
|
+
$amsterdam-badge-blue-background-color: $amsterdam-color-blue;
|
|
508
|
+
$amsterdam-badge-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
|
|
509
|
+
$amsterdam-badge-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
|
|
510
|
+
$amsterdam-badge-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
|
|
511
|
+
$amsterdam-badge-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
|
|
512
|
+
$amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
|
|
513
|
+
$amsterdam-badge-font-family: $amsterdam-typography-font-family;
|
|
446
514
|
$amsterdam-aspect-ratio-2x-wide: $amsterdam-proportion-2x-wide;
|
|
447
515
|
$amsterdam-aspect-ratio-x-wide: $amsterdam-proportion-x-wide;
|
|
448
516
|
$amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
|
|
@@ -451,14 +519,14 @@ $amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
|
|
|
451
519
|
$amsterdam-aspect-ratio-x-tall: $amsterdam-proportion-x-tall;
|
|
452
520
|
$amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
|
|
453
521
|
$amsterdam-alert-close-fill: $amsterdam-color-primary-black;
|
|
522
|
+
$amsterdam-alert-warning-border-color: $amsterdam-color-orange;
|
|
454
523
|
$amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
|
|
455
|
-
$amsterdam-alert-
|
|
524
|
+
$amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
|
|
456
525
|
$amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
|
|
457
|
-
$amsterdam-alert-
|
|
458
|
-
$amsterdam-alert-title-compact-
|
|
459
|
-
$amsterdam-alert-title-
|
|
460
|
-
$amsterdam-alert-title-spacious-
|
|
461
|
-
$amsterdam-alert-title-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
|
|
526
|
+
$amsterdam-alert-title-compact-line-height: $amsterdam-typography-compact-text-level-4-line-height;
|
|
527
|
+
$amsterdam-alert-title-compact-font-size: $amsterdam-typography-compact-text-level-4-font-size;
|
|
528
|
+
$amsterdam-alert-title-spacious-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
|
|
529
|
+
$amsterdam-alert-title-spacious-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
|
|
462
530
|
$amsterdam-alert-title-font-weight: $amsterdam-typography-font-weight-bold;
|
|
463
531
|
$amsterdam-alert-title-font-family: $amsterdam-typography-font-family;
|
|
464
532
|
$amsterdam-alert-title-color: $amsterdam-color-primary-black;
|
|
@@ -466,8 +534,6 @@ $amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
|
|
|
466
534
|
$amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
|
|
467
535
|
$amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
|
|
468
536
|
$amsterdam-alert-padding-block-start: $amsterdam-spacing-inset-md;
|
|
469
|
-
$amsterdam-alert-border: 4px solid $amsterdam-color-yellow;
|
|
470
|
-
$amsterdam-alert-background-color: $amsterdam-color-yellow;
|
|
471
537
|
$amsterdam-accordion-button-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
|
|
472
538
|
$amsterdam-accordion-button-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
|
|
473
539
|
$amsterdam-accordion-button-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
|
|
@@ -494,6 +560,12 @@ $amsterdam-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-ba
|
|
|
494
560
|
$amsterdam-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
|
|
495
561
|
$amsterdam-link-hover-color: $amsterdam-link-appearance-hover-color;
|
|
496
562
|
$amsterdam-link-color: $amsterdam-link-appearance-color;
|
|
563
|
+
$amsterdam-link-list-link-on-background-light-hover-color: $amsterdam-link-appearance-on-background-light-color;
|
|
564
|
+
$amsterdam-link-list-link-on-background-light-color: $amsterdam-link-appearance-on-background-light-color;
|
|
565
|
+
$amsterdam-link-list-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-background-dark-color;
|
|
566
|
+
$amsterdam-link-list-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
|
|
567
|
+
$amsterdam-link-list-link-hover-color: $amsterdam-link-appearance-hover-color;
|
|
568
|
+
$amsterdam-link-list-link-color: $amsterdam-link-appearance-color;
|
|
497
569
|
$amsterdam-card-link-hover-color: $amsterdam-link-appearance-hover-color;
|
|
498
570
|
$amsterdam-card-link-color: $amsterdam-link-appearance-color;
|
|
499
571
|
$amsterdam-breadcrumb-item-link-color: $amsterdam-link-appearance-color;
|
package/dist/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 31 Jan 2024 12:56:24 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
.amsterdam-theme {
|
|
@@ -36,12 +36,18 @@
|
|
|
36
36
|
--amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
|
|
37
37
|
--amsterdam-ordered-list-list-style-type: decimal;
|
|
38
38
|
--amsterdam-ordered-list-gap: 0.75rem;
|
|
39
|
+
--amsterdam-mega-menu-list-category-padding-block-start: 1rem;
|
|
40
|
+
--amsterdam-mega-menu-list-category-column-width: 20rem;
|
|
39
41
|
--amsterdam-mark-background-color: var(--amsterdam-color-yellow);
|
|
40
42
|
--amsterdam-logo-height: 2.5rem;
|
|
41
43
|
--amsterdam-link-in-list-gap: 0.5em;
|
|
42
44
|
--amsterdam-link-inline-line-height: inherit;
|
|
43
45
|
--amsterdam-link-inline-font-size: inherit;
|
|
44
46
|
--amsterdam-link-inline-font-family: inherit;
|
|
47
|
+
--amsterdam-link-list-link-gap: 0.5em;
|
|
48
|
+
--amsterdam-link-list-gap: 0.5em;
|
|
49
|
+
--amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
|
|
50
|
+
--amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
|
|
45
51
|
--amsterdam-grid-wide-column-count: 12;
|
|
46
52
|
--amsterdam-grid-medium-column-count: 8;
|
|
47
53
|
--amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
|
|
@@ -57,13 +63,14 @@
|
|
|
57
63
|
--amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
58
64
|
--amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
59
65
|
--amsterdam-dialog-form-gap: 1.5rem;
|
|
60
|
-
--amsterdam-dialog-close-background-color: transparent;
|
|
61
66
|
--amsterdam-dialog-backdrop-background: #0006;
|
|
62
67
|
--amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
63
68
|
--amsterdam-dialog-border: 0;
|
|
64
69
|
--amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
|
|
65
|
-
--amsterdam-
|
|
70
|
+
--amsterdam-badge-padding-inline: 0.5rem;
|
|
66
71
|
--amsterdam-alert-gap: 1rem;
|
|
72
|
+
--amsterdam-alert-border-style: solid;
|
|
73
|
+
--amsterdam-alert-border-width: 4px;
|
|
67
74
|
--amsterdam-spacing-inset-xl: 2.5rem;
|
|
68
75
|
--amsterdam-spacing-inset-lg: 1.5rem;
|
|
69
76
|
--amsterdam-spacing-inset-md: 1rem;
|
|
@@ -116,13 +123,12 @@
|
|
|
116
123
|
--amsterdam-proportion-square: 1 / 1;
|
|
117
124
|
--amsterdam-proportion-tall: 4 / 5;
|
|
118
125
|
--amsterdam-proportion-x-tall: 9 / 16;
|
|
119
|
-
--amsterdam-color-neutral-grey4: #323232;
|
|
120
126
|
--amsterdam-color-neutral-grey3: #767676;
|
|
121
|
-
--amsterdam-color-neutral-grey2: #
|
|
122
|
-
--amsterdam-color-neutral-grey1: #
|
|
127
|
+
--amsterdam-color-neutral-grey2: #BEBEBE;
|
|
128
|
+
--amsterdam-color-neutral-grey1: #E8E8E8;
|
|
123
129
|
--amsterdam-color-magenta: #E50082;
|
|
124
130
|
--amsterdam-color-purple: #A00078;
|
|
125
|
-
--amsterdam-color-blue: #
|
|
131
|
+
--amsterdam-color-blue: #009DE6;
|
|
126
132
|
--amsterdam-color-dark-green: #00A03C;
|
|
127
133
|
--amsterdam-color-green: #BED200;
|
|
128
134
|
--amsterdam-color-yellow: #FFE600;
|
|
@@ -130,7 +136,7 @@
|
|
|
130
136
|
--amsterdam-color-dark-blue: #102E62;
|
|
131
137
|
--amsterdam-color-primary-red: #EC0000;
|
|
132
138
|
--amsterdam-color-primary-blue: #004699;
|
|
133
|
-
--amsterdam-color-primary-white: #
|
|
139
|
+
--amsterdam-color-primary-white: #FFFFFF;
|
|
134
140
|
--amsterdam-color-primary-black: #000000;
|
|
135
141
|
--utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2);
|
|
136
142
|
--utrecht-button-subtle-focus-color: var(--amsterdam-color-dark-blue);
|
|
@@ -196,6 +202,14 @@
|
|
|
196
202
|
--amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
|
|
197
203
|
--amsterdam-text-input-color: var(--amsterdam-color-primary-black);
|
|
198
204
|
--amsterdam-text-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
|
|
205
|
+
--amsterdam-table-header-cell-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
206
|
+
--amsterdam-table-cell-border-bottom: 1px solid var(--amsterdam-color-neutral-grey1);
|
|
207
|
+
--amsterdam-table-caption-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
208
|
+
--amsterdam-table-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
209
|
+
--amsterdam-table-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
210
|
+
--amsterdam-table-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
211
|
+
--amsterdam-table-font-family: var(--amsterdam-typography-font-family);
|
|
212
|
+
--amsterdam-table-color: var(--amsterdam-color-primary-black);
|
|
199
213
|
--amsterdam-switch-disabled-background-color: var(--amsterdam-color-neutral-grey2);
|
|
200
214
|
--amsterdam-switch-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
201
215
|
--amsterdam-switch-checked-background-color: var(--amsterdam-color-primary-blue);
|
|
@@ -207,10 +221,10 @@
|
|
|
207
221
|
--amsterdam-spotlight-purple-background-color: var(--amsterdam-color-purple);
|
|
208
222
|
--amsterdam-spotlight-orange-background-color: var(--amsterdam-color-orange);
|
|
209
223
|
--amsterdam-spotlight-magenta-background-color: var(--amsterdam-color-magenta);
|
|
210
|
-
--amsterdam-spotlight-light-blue-background-color: var(--amsterdam-color-blue);
|
|
211
224
|
--amsterdam-spotlight-green-background-color: var(--amsterdam-color-green);
|
|
212
225
|
--amsterdam-spotlight-dark-green-background-color: var(--amsterdam-color-dark-green);
|
|
213
|
-
--amsterdam-spotlight-blue-background-color: var(--amsterdam-color-primary-blue);
|
|
226
|
+
--amsterdam-spotlight-dark-blue-background-color: var(--amsterdam-color-primary-blue);
|
|
227
|
+
--amsterdam-spotlight-blue-background-color: var(--amsterdam-color-blue);
|
|
214
228
|
--amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
|
|
215
229
|
--amsterdam-skip-link-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
216
230
|
--amsterdam-skip-link-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
@@ -293,6 +307,8 @@
|
|
|
293
307
|
--amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
294
308
|
--amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
|
|
295
309
|
--amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
|
|
310
|
+
--amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-grid-spacious-gap);
|
|
311
|
+
--amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-grid-spacious-gap);
|
|
296
312
|
--amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
|
|
297
313
|
--amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
|
|
298
314
|
--amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
|
|
@@ -322,6 +338,25 @@
|
|
|
322
338
|
--amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
323
339
|
--amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
324
340
|
--amsterdam-link-font-family: var(--amsterdam-typography-font-family);
|
|
341
|
+
--amsterdam-link-list-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
|
|
342
|
+
--amsterdam-link-list-link-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
|
|
343
|
+
--amsterdam-link-list-link-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
344
|
+
--amsterdam-link-list-link-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
345
|
+
--amsterdam-link-list-link-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
346
|
+
--amsterdam-link-list-link-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
347
|
+
--amsterdam-link-list-link-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
348
|
+
--amsterdam-link-list-link-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
|
|
349
|
+
--amsterdam-link-list-link-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
350
|
+
--amsterdam-link-list-link-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
351
|
+
--amsterdam-link-list-link-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
352
|
+
--amsterdam-link-list-link-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
353
|
+
--amsterdam-link-list-link-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
354
|
+
--amsterdam-link-list-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
355
|
+
--amsterdam-link-list-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
356
|
+
--amsterdam-link-list-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
357
|
+
--amsterdam-link-list-link-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
358
|
+
--amsterdam-link-list-link-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
359
|
+
--amsterdam-link-list-link-font-family: var(--amsterdam-typography-font-family);
|
|
325
360
|
--amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
326
361
|
--amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
327
362
|
--amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
@@ -338,6 +373,19 @@
|
|
|
338
373
|
--amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
339
374
|
--amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
|
|
340
375
|
--amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
|
|
376
|
+
--amsterdam-icon-button-on-background-dark-disabled-background-color: var(--amsterdam-color-neutral-grey2);
|
|
377
|
+
--amsterdam-icon-button-on-background-dark-disabled-color: var(--amsterdam-color-primary-white);
|
|
378
|
+
--amsterdam-icon-button-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
|
|
379
|
+
--amsterdam-icon-button-on-background-dark-hover-background-color: var(--amsterdam-color-dark-blue);
|
|
380
|
+
--amsterdam-icon-button-on-background-dark-color: var(--amsterdam-color-primary-white);
|
|
381
|
+
--amsterdam-icon-button-on-background-dark-background-color: var(--amsterdam-color-primary-blue);
|
|
382
|
+
--amsterdam-icon-button-on-background-light-disabled-color: var(--amsterdam-color-neutral-grey2);
|
|
383
|
+
--amsterdam-icon-button-on-background-light-hover-color: var(--amsterdam-color-primary-black);
|
|
384
|
+
--amsterdam-icon-button-on-background-light-color: var(--amsterdam-color-primary-black);
|
|
385
|
+
--amsterdam-icon-button-disabled-color: var(--amsterdam-color-neutral-grey2);
|
|
386
|
+
--amsterdam-icon-button-hover-color: var(--amsterdam-color-dark-blue);
|
|
387
|
+
--amsterdam-icon-button-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
388
|
+
--amsterdam-icon-button-color: var(--amsterdam-color-primary-blue);
|
|
341
389
|
--amsterdam-heading-compact-level-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
342
390
|
--amsterdam-heading-compact-level-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
343
391
|
--amsterdam-heading-compact-level-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
@@ -374,8 +422,6 @@
|
|
|
374
422
|
--amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
375
423
|
--amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
|
|
376
424
|
--amsterdam-form-label-color: var(--amsterdam-color-primary-black);
|
|
377
|
-
--amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
378
|
-
--amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
|
|
379
425
|
--amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
380
426
|
--amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
381
427
|
--amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
@@ -445,6 +491,28 @@
|
|
|
445
491
|
--amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
446
492
|
--amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
|
|
447
493
|
--amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
|
|
494
|
+
--amsterdam-badge-yellow-color: var(--amsterdam-color-primary-black);
|
|
495
|
+
--amsterdam-badge-yellow-background-color: var(--amsterdam-color-yellow);
|
|
496
|
+
--amsterdam-badge-purple-color: var(--amsterdam-color-primary-white);
|
|
497
|
+
--amsterdam-badge-purple-background-color: var(--amsterdam-color-purple);
|
|
498
|
+
--amsterdam-badge-orange-color: var(--amsterdam-color-primary-black);
|
|
499
|
+
--amsterdam-badge-orange-background-color: var(--amsterdam-color-orange);
|
|
500
|
+
--amsterdam-badge-magenta-color: var(--amsterdam-color-primary-white);
|
|
501
|
+
--amsterdam-badge-magenta-background-color: var(--amsterdam-color-magenta);
|
|
502
|
+
--amsterdam-badge-green-color: var(--amsterdam-color-primary-black);
|
|
503
|
+
--amsterdam-badge-green-background-color: var(--amsterdam-color-green);
|
|
504
|
+
--amsterdam-badge-dark-green-color: var(--amsterdam-color-primary-white);
|
|
505
|
+
--amsterdam-badge-dark-green-background-color: var(--amsterdam-color-dark-green);
|
|
506
|
+
--amsterdam-badge-dark-blue-color: var(--amsterdam-color-primary-white);
|
|
507
|
+
--amsterdam-badge-dark-blue-background-color: var(--amsterdam-color-primary-blue);
|
|
508
|
+
--amsterdam-badge-blue-color: var(--amsterdam-color-primary-black);
|
|
509
|
+
--amsterdam-badge-blue-background-color: var(--amsterdam-color-blue);
|
|
510
|
+
--amsterdam-badge-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
511
|
+
--amsterdam-badge-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
512
|
+
--amsterdam-badge-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
513
|
+
--amsterdam-badge-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
514
|
+
--amsterdam-badge-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
515
|
+
--amsterdam-badge-font-family: var(--amsterdam-typography-font-family);
|
|
448
516
|
--amsterdam-aspect-ratio-2x-wide: var(--amsterdam-proportion-2x-wide);
|
|
449
517
|
--amsterdam-aspect-ratio-x-wide: var(--amsterdam-proportion-x-wide);
|
|
450
518
|
--amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
|
|
@@ -453,14 +521,14 @@
|
|
|
453
521
|
--amsterdam-aspect-ratio-x-tall: var(--amsterdam-proportion-x-tall);
|
|
454
522
|
--amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
455
523
|
--amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
|
|
524
|
+
--amsterdam-alert-warning-border-color: var(--amsterdam-color-orange);
|
|
456
525
|
--amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
|
|
457
|
-
--amsterdam-alert-
|
|
526
|
+
--amsterdam-alert-info-border-color: var(--amsterdam-color-primary-blue);
|
|
458
527
|
--amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
|
|
459
|
-
--amsterdam-alert-
|
|
460
|
-
--amsterdam-alert-title-compact-
|
|
461
|
-
--amsterdam-alert-title-
|
|
462
|
-
--amsterdam-alert-title-spacious-
|
|
463
|
-
--amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
528
|
+
--amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
|
|
529
|
+
--amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
530
|
+
--amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
|
|
531
|
+
--amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
464
532
|
--amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
465
533
|
--amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
|
|
466
534
|
--amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
|
|
@@ -468,8 +536,6 @@
|
|
|
468
536
|
--amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
|
|
469
537
|
--amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
|
|
470
538
|
--amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
|
|
471
|
-
--amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
|
|
472
|
-
--amsterdam-alert-background-color: var(--amsterdam-color-yellow);
|
|
473
539
|
--amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
474
540
|
--amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
475
541
|
--amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
@@ -496,6 +562,12 @@
|
|
|
496
562
|
--amsterdam-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
|
|
497
563
|
--amsterdam-link-hover-color: var(--amsterdam-link-appearance-hover-color);
|
|
498
564
|
--amsterdam-link-color: var(--amsterdam-link-appearance-color);
|
|
565
|
+
--amsterdam-link-list-link-on-background-light-hover-color: var(--amsterdam-link-appearance-on-background-light-color);
|
|
566
|
+
--amsterdam-link-list-link-on-background-light-color: var(--amsterdam-link-appearance-on-background-light-color);
|
|
567
|
+
--amsterdam-link-list-link-on-background-dark-hover-color: var(--amsterdam-link-appearance-on-background-dark-color);
|
|
568
|
+
--amsterdam-link-list-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
|
|
569
|
+
--amsterdam-link-list-link-hover-color: var(--amsterdam-link-appearance-hover-color);
|
|
570
|
+
--amsterdam-link-list-link-color: var(--amsterdam-link-appearance-color);
|
|
499
571
|
--amsterdam-card-link-hover-color: var(--amsterdam-link-appearance-hover-color);
|
|
500
572
|
--amsterdam-card-link-color: var(--amsterdam-link-appearance-color);
|
|
501
573
|
--amsterdam-breadcrumb-item-link-color: var(--amsterdam-link-appearance-color);
|