@amsterdam/design-system-tokens 0.2.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 +45 -0
- package/dist/_variables.scss +225 -106
- package/dist/index.css +225 -106
- package/dist/index.d.ts +146 -27
- package/dist/index.js +218 -99
- package/dist/index.json +217 -98
- package/dist/index.tokens.json +361 -116
- package/dist/root.css +225 -106
- package/dist/tokens.d.ts +297 -52
- package/dist/tokens.js +7327 -4668
- package/dist/variables.less +225 -106
- package/package.json +3 -3
- package/src/brand/amsterdam/color.tokens.json +5 -6
- package/src/brand/amsterdam/typography.tokens.json +10 -18
- package/src/common/amsterdam/border.tokens.json +3 -9
- package/src/common/amsterdam/spacing.tokens.json +4 -12
- package/src/components/amsterdam/accordion.tokens.json +1 -3
- package/src/components/amsterdam/alert.tokens.json +12 -9
- package/src/components/amsterdam/badge.tokens.json +49 -0
- package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
- package/src/components/amsterdam/button.tokens.json +9 -19
- package/src/components/amsterdam/checkbox.tokens.json +24 -64
- package/src/components/amsterdam/dialog.tokens.json +0 -7
- package/src/components/amsterdam/form-label.tokens.json +4 -4
- package/src/components/amsterdam/grid.tokens.json +3 -9
- package/src/components/amsterdam/header.tokens.json +7 -0
- package/src/components/amsterdam/heading.tokens.json +24 -24
- package/src/components/amsterdam/icon-button.tokens.json +37 -0
- package/src/components/amsterdam/icon.tokens.json +0 -8
- package/src/components/amsterdam/link-list.tokens.json +61 -0
- package/src/components/amsterdam/link.tokens.json +13 -23
- package/src/components/amsterdam/mark.tokens.json +7 -0
- package/src/components/amsterdam/mega-menu.tokens.json +12 -0
- package/src/components/amsterdam/ordered-list.tokens.json +4 -4
- package/src/components/amsterdam/page-heading.tokens.json +4 -12
- package/src/components/amsterdam/page-menu.tokens.json +4 -4
- package/src/components/amsterdam/pagination.tokens.json +4 -4
- package/src/components/amsterdam/paragraph.tokens.json +10 -10
- package/src/components/amsterdam/search-field.tokens.json +47 -0
- package/src/components/amsterdam/skip-link.tokens.json +20 -0
- package/src/components/amsterdam/spotlight.tokens.json +30 -0
- package/src/components/amsterdam/switch.tokens.json +10 -30
- package/src/components/amsterdam/table.tokens.json +20 -0
- package/src/components/amsterdam/text-input.tokens.json +36 -0
- package/src/components/amsterdam/top-task-link.tokens.json +4 -4
- package/src/components/amsterdam/unordered-list.tokens.json +4 -4
- package/src/components/utrecht/button.tokens.json +24 -72
- package/src/components/amsterdam/highlight.tokens.json +0 -46
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 {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--amsterdam-switch-thumb-height: 1.75rem;
|
|
24
24
|
--amsterdam-switch-thumb-width: 1.75rem;
|
|
25
25
|
--amsterdam-switch-width: 3.5rem;
|
|
26
|
+
--amsterdam-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
|
|
26
27
|
--amsterdam-screen-x-wide-max-width: 132rem;
|
|
27
28
|
--amsterdam-screen-wide-max-width: 100rem;
|
|
28
29
|
--amsterdam-page-menu-item-gap: 0.5rem;
|
|
@@ -35,11 +36,18 @@
|
|
|
35
36
|
--amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
|
|
36
37
|
--amsterdam-ordered-list-list-style-type: decimal;
|
|
37
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;
|
|
41
|
+
--amsterdam-mark-background-color: var(--amsterdam-color-yellow);
|
|
38
42
|
--amsterdam-logo-height: 2.5rem;
|
|
39
43
|
--amsterdam-link-in-list-gap: 0.5em;
|
|
40
44
|
--amsterdam-link-inline-line-height: inherit;
|
|
41
45
|
--amsterdam-link-inline-font-size: inherit;
|
|
42
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);
|
|
43
51
|
--amsterdam-grid-wide-column-count: 12;
|
|
44
52
|
--amsterdam-grid-medium-column-count: 8;
|
|
45
53
|
--amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
|
|
@@ -55,12 +63,14 @@
|
|
|
55
63
|
--amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
56
64
|
--amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
57
65
|
--amsterdam-dialog-form-gap: 1.5rem;
|
|
58
|
-
--amsterdam-dialog-close-background-color: transparent;
|
|
59
66
|
--amsterdam-dialog-backdrop-background: #0006;
|
|
60
67
|
--amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
61
68
|
--amsterdam-dialog-border: 0;
|
|
62
|
-
--amsterdam-
|
|
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>");
|
|
70
|
+
--amsterdam-badge-padding-inline: 0.5rem;
|
|
63
71
|
--amsterdam-alert-gap: 1rem;
|
|
72
|
+
--amsterdam-alert-border-style: solid;
|
|
73
|
+
--amsterdam-alert-border-width: 4px;
|
|
64
74
|
--amsterdam-spacing-inset-xl: 2.5rem;
|
|
65
75
|
--amsterdam-spacing-inset-lg: 1.5rem;
|
|
66
76
|
--amsterdam-spacing-inset-md: 1rem;
|
|
@@ -76,37 +86,33 @@
|
|
|
76
86
|
--amsterdam-border-width-lg: 3px;
|
|
77
87
|
--amsterdam-border-width-md: 2px;
|
|
78
88
|
--amsterdam-border-width-sm: 1px;
|
|
79
|
-
--amsterdam-typography-compact-text-level-7-line-height: 1.6;
|
|
80
|
-
--amsterdam-typography-compact-text-level-7-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
|
|
81
89
|
--amsterdam-typography-compact-text-level-6-line-height: 1.6;
|
|
82
|
-
--amsterdam-typography-compact-text-level-6-font-size: clamp(0.
|
|
83
|
-
--amsterdam-typography-compact-text-level-5-line-height: 1.
|
|
84
|
-
--amsterdam-typography-compact-text-level-5-font-size: clamp(
|
|
85
|
-
--amsterdam-typography-compact-text-level-4-line-height: 1.
|
|
90
|
+
--amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
|
|
91
|
+
--amsterdam-typography-compact-text-level-5-line-height: 1.6;
|
|
92
|
+
--amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
|
|
93
|
+
--amsterdam-typography-compact-text-level-4-line-height: 1.5;
|
|
86
94
|
--amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
|
|
87
|
-
--amsterdam-typography-compact-text-level-3-line-height: 1.
|
|
95
|
+
--amsterdam-typography-compact-text-level-3-line-height: 1.3;
|
|
88
96
|
--amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
|
|
89
|
-
--amsterdam-typography-compact-text-level-2-line-height: 1.
|
|
97
|
+
--amsterdam-typography-compact-text-level-2-line-height: 1.25;
|
|
90
98
|
--amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
|
|
91
99
|
--amsterdam-typography-compact-text-level-1-line-height: 1.2;
|
|
92
100
|
--amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
|
|
93
|
-
--amsterdam-typography-compact-text-level-0-line-height: 1.
|
|
101
|
+
--amsterdam-typography-compact-text-level-0-line-height: 1.15;
|
|
94
102
|
--amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
|
|
95
|
-
--amsterdam-typography-spacious-text-level-7-line-height: 1.6;
|
|
96
|
-
--amsterdam-typography-spacious-text-level-7-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
|
|
97
103
|
--amsterdam-typography-spacious-text-level-6-line-height: 1.6;
|
|
98
|
-
--amsterdam-typography-spacious-text-level-6-font-size: clamp(
|
|
99
|
-
--amsterdam-typography-spacious-text-level-5-line-height: 1.
|
|
100
|
-
--amsterdam-typography-spacious-text-level-5-font-size: clamp(1.
|
|
101
|
-
--amsterdam-typography-spacious-text-level-4-line-height: 1.
|
|
104
|
+
--amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
|
|
105
|
+
--amsterdam-typography-spacious-text-level-5-line-height: 1.6;
|
|
106
|
+
--amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
|
|
107
|
+
--amsterdam-typography-spacious-text-level-4-line-height: 1.5;
|
|
102
108
|
--amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
|
|
103
|
-
--amsterdam-typography-spacious-text-level-3-line-height: 1.
|
|
109
|
+
--amsterdam-typography-spacious-text-level-3-line-height: 1.3;
|
|
104
110
|
--amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
|
|
105
|
-
--amsterdam-typography-spacious-text-level-2-line-height: 1.
|
|
111
|
+
--amsterdam-typography-spacious-text-level-2-line-height: 1.25;
|
|
106
112
|
--amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
|
|
107
113
|
--amsterdam-typography-spacious-text-level-1-line-height: 1.2;
|
|
108
114
|
--amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
|
|
109
|
-
--amsterdam-typography-spacious-text-level-0-line-height: 1.
|
|
115
|
+
--amsterdam-typography-spacious-text-level-0-line-height: 1.15;
|
|
110
116
|
--amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
|
|
111
117
|
--amsterdam-typography-font-weight-bold: 800;
|
|
112
118
|
--amsterdam-typography-font-weight-normal: 400;
|
|
@@ -117,13 +123,12 @@
|
|
|
117
123
|
--amsterdam-proportion-square: 1 / 1;
|
|
118
124
|
--amsterdam-proportion-tall: 4 / 5;
|
|
119
125
|
--amsterdam-proportion-x-tall: 9 / 16;
|
|
120
|
-
--amsterdam-color-neutral-grey4: #323232;
|
|
121
126
|
--amsterdam-color-neutral-grey3: #767676;
|
|
122
|
-
--amsterdam-color-neutral-grey2: #
|
|
123
|
-
--amsterdam-color-neutral-grey1: #
|
|
127
|
+
--amsterdam-color-neutral-grey2: #BEBEBE;
|
|
128
|
+
--amsterdam-color-neutral-grey1: #E8E8E8;
|
|
124
129
|
--amsterdam-color-magenta: #E50082;
|
|
125
130
|
--amsterdam-color-purple: #A00078;
|
|
126
|
-
--amsterdam-color-blue: #
|
|
131
|
+
--amsterdam-color-blue: #009DE6;
|
|
127
132
|
--amsterdam-color-dark-green: #00A03C;
|
|
128
133
|
--amsterdam-color-green: #BED200;
|
|
129
134
|
--amsterdam-color-yellow: #FFE600;
|
|
@@ -131,7 +136,7 @@
|
|
|
131
136
|
--amsterdam-color-dark-blue: #102E62;
|
|
132
137
|
--amsterdam-color-primary-red: #EC0000;
|
|
133
138
|
--amsterdam-color-primary-blue: #004699;
|
|
134
|
-
--amsterdam-color-primary-white: #
|
|
139
|
+
--amsterdam-color-primary-white: #FFFFFF;
|
|
135
140
|
--amsterdam-color-primary-black: #000000;
|
|
136
141
|
--utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2);
|
|
137
142
|
--utrecht-button-subtle-focus-color: var(--amsterdam-color-dark-blue);
|
|
@@ -155,10 +160,10 @@
|
|
|
155
160
|
--utrecht-button-font-family: var(--amsterdam-typography-font-family);
|
|
156
161
|
--utrecht-button-color: var(--amsterdam-color-primary-white);
|
|
157
162
|
--utrecht-button-background-color: var(--amsterdam-color-primary-blue);
|
|
158
|
-
--amsterdam-unordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
159
|
-
--amsterdam-unordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
160
|
-
--amsterdam-unordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
161
|
-
--amsterdam-unordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
163
|
+
--amsterdam-unordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
164
|
+
--amsterdam-unordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
165
|
+
--amsterdam-unordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
166
|
+
--amsterdam-unordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
162
167
|
--amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
163
168
|
--amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
|
|
164
169
|
--amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
|
|
@@ -174,13 +179,37 @@
|
|
|
174
179
|
--amsterdam-top-task-link-label-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
175
180
|
--amsterdam-top-task-link-label-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
176
181
|
--amsterdam-top-task-link-label-font-family: var(--amsterdam-typography-font-family);
|
|
177
|
-
--amsterdam-top-task-link-description-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
178
|
-
--amsterdam-top-task-link-description-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
179
|
-
--amsterdam-top-task-link-description-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
180
|
-
--amsterdam-top-task-link-description-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
182
|
+
--amsterdam-top-task-link-description-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
183
|
+
--amsterdam-top-task-link-description-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
184
|
+
--amsterdam-top-task-link-description-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
185
|
+
--amsterdam-top-task-link-description-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
181
186
|
--amsterdam-top-task-link-description-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
182
187
|
--amsterdam-top-task-link-description-font-family: var(--amsterdam-typography-font-family);
|
|
183
188
|
--amsterdam-top-task-link-description-color: var(--amsterdam-color-primary-black);
|
|
189
|
+
--amsterdam-text-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
190
|
+
--amsterdam-text-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
191
|
+
--amsterdam-text-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
192
|
+
--amsterdam-text-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
193
|
+
--amsterdam-text-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
|
|
194
|
+
--amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-red);
|
|
195
|
+
--amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-red);
|
|
196
|
+
--amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
|
|
197
|
+
--amsterdam-text-input-disabled-color: var(--amsterdam-color-neutral-grey2);
|
|
198
|
+
--amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px var(--amsterdam-color-neutral-grey2);
|
|
199
|
+
--amsterdam-text-input-disabled-background-color: var(--amsterdam-color-primary-white);
|
|
200
|
+
--amsterdam-text-input-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
201
|
+
--amsterdam-text-input-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
202
|
+
--amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
|
|
203
|
+
--amsterdam-text-input-color: var(--amsterdam-color-primary-black);
|
|
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);
|
|
184
213
|
--amsterdam-switch-disabled-background-color: var(--amsterdam-color-neutral-grey2);
|
|
185
214
|
--amsterdam-switch-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
186
215
|
--amsterdam-switch-checked-background-color: var(--amsterdam-color-primary-blue);
|
|
@@ -188,18 +217,54 @@
|
|
|
188
217
|
--amsterdam-switch-thumb-background-color: var(--amsterdam-color-primary-white);
|
|
189
218
|
--amsterdam-switch-background-color: var(--amsterdam-color-neutral-grey3);
|
|
190
219
|
--amsterdam-switch-font-family: var(--amsterdam-typography-font-family);
|
|
191
|
-
--amsterdam-
|
|
192
|
-
--amsterdam-
|
|
193
|
-
--amsterdam-
|
|
194
|
-
--amsterdam-
|
|
195
|
-
--amsterdam-
|
|
196
|
-
--amsterdam-
|
|
197
|
-
--amsterdam-
|
|
198
|
-
--amsterdam-
|
|
199
|
-
--amsterdam-
|
|
200
|
-
--amsterdam-
|
|
201
|
-
--amsterdam-
|
|
202
|
-
--amsterdam-
|
|
220
|
+
--amsterdam-spotlight-yellow-background-color: var(--amsterdam-color-yellow);
|
|
221
|
+
--amsterdam-spotlight-purple-background-color: var(--amsterdam-color-purple);
|
|
222
|
+
--amsterdam-spotlight-orange-background-color: var(--amsterdam-color-orange);
|
|
223
|
+
--amsterdam-spotlight-magenta-background-color: var(--amsterdam-color-magenta);
|
|
224
|
+
--amsterdam-spotlight-green-background-color: var(--amsterdam-color-green);
|
|
225
|
+
--amsterdam-spotlight-dark-green-background-color: var(--amsterdam-color-dark-green);
|
|
226
|
+
--amsterdam-spotlight-dark-blue-background-color: var(--amsterdam-color-primary-blue);
|
|
227
|
+
--amsterdam-spotlight-blue-background-color: var(--amsterdam-color-blue);
|
|
228
|
+
--amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
|
|
229
|
+
--amsterdam-skip-link-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
230
|
+
--amsterdam-skip-link-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
231
|
+
--amsterdam-skip-link-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
232
|
+
--amsterdam-skip-link-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
233
|
+
--amsterdam-skip-link-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
234
|
+
--amsterdam-skip-link-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
235
|
+
--amsterdam-skip-link-font-family: var(--amsterdam-typography-font-family);
|
|
236
|
+
--amsterdam-skip-link-color: var(--amsterdam-color-primary-white);
|
|
237
|
+
--amsterdam-skip-link-background-color: var(--amsterdam-color-primary-blue);
|
|
238
|
+
--amsterdam-search-field-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
239
|
+
--amsterdam-search-field-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
240
|
+
--amsterdam-search-field-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
241
|
+
--amsterdam-search-field-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
242
|
+
--amsterdam-search-field-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
|
|
243
|
+
--amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
|
|
244
|
+
--amsterdam-search-field-input-cancel-button-width: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
245
|
+
--amsterdam-search-field-input-cancel-button-height: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
246
|
+
--amsterdam-search-field-input-cancel-button-color: var(--amsterdam-color-primary-blue);
|
|
247
|
+
--amsterdam-search-field-input-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
248
|
+
--amsterdam-search-field-input-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
249
|
+
--amsterdam-search-field-input-font-family: var(--amsterdam-typography-font-family);
|
|
250
|
+
--amsterdam-search-field-input-color: var(--amsterdam-color-primary-black);
|
|
251
|
+
--amsterdam-search-field-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
|
|
252
|
+
--amsterdam-search-field-button-hover-background-color: var(--amsterdam-color-dark-blue);
|
|
253
|
+
--amsterdam-search-field-button-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
254
|
+
--amsterdam-search-field-button-color: var(--amsterdam-color-primary-white);
|
|
255
|
+
--amsterdam-search-field-button-background-color: var(--amsterdam-color-primary-blue);
|
|
256
|
+
--amsterdam-paragraph-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
|
|
257
|
+
--amsterdam-paragraph-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
258
|
+
--amsterdam-paragraph-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
259
|
+
--amsterdam-paragraph-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
260
|
+
--amsterdam-paragraph-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
261
|
+
--amsterdam-paragraph-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
262
|
+
--amsterdam-paragraph-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
|
|
263
|
+
--amsterdam-paragraph-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
264
|
+
--amsterdam-paragraph-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
265
|
+
--amsterdam-paragraph-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
266
|
+
--amsterdam-paragraph-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
267
|
+
--amsterdam-paragraph-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
203
268
|
--amsterdam-paragraph-inverse-color: var(--amsterdam-color-primary-white);
|
|
204
269
|
--amsterdam-paragraph-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
205
270
|
--amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
|
|
@@ -210,17 +275,17 @@
|
|
|
210
275
|
--amsterdam-pagination-button-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
211
276
|
--amsterdam-pagination-button-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
212
277
|
--amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
213
|
-
--amsterdam-pagination-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
214
|
-
--amsterdam-pagination-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
215
|
-
--amsterdam-pagination-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
216
|
-
--amsterdam-pagination-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
278
|
+
--amsterdam-pagination-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
279
|
+
--amsterdam-pagination-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
280
|
+
--amsterdam-pagination-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
281
|
+
--amsterdam-pagination-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
217
282
|
--amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
218
283
|
--amsterdam-pagination-font-family: var(--amsterdam-typography-font-family);
|
|
219
284
|
--amsterdam-page-menu-item-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
|
|
220
|
-
--amsterdam-page-menu-item-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
221
|
-
--amsterdam-page-menu-item-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
222
|
-
--amsterdam-page-menu-item-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
223
|
-
--amsterdam-page-menu-item-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
285
|
+
--amsterdam-page-menu-item-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
286
|
+
--amsterdam-page-menu-item-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
287
|
+
--amsterdam-page-menu-item-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
288
|
+
--amsterdam-page-menu-item-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
224
289
|
--amsterdam-page-menu-item-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
225
290
|
--amsterdam-page-menu-item-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
226
291
|
--amsterdam-page-menu-item-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
@@ -235,29 +300,31 @@
|
|
|
235
300
|
--amsterdam-page-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
236
301
|
--amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
|
|
237
302
|
--amsterdam-page-heading-color: var(--amsterdam-color-primary-black);
|
|
238
|
-
--amsterdam-ordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
239
|
-
--amsterdam-ordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
240
|
-
--amsterdam-ordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
241
|
-
--amsterdam-ordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
303
|
+
--amsterdam-ordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
304
|
+
--amsterdam-ordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
305
|
+
--amsterdam-ordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
306
|
+
--amsterdam-ordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
242
307
|
--amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
243
308
|
--amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
|
|
244
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);
|
|
245
312
|
--amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
|
|
246
313
|
--amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
|
|
247
314
|
--amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
|
|
248
|
-
--amsterdam-link-standalone-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
249
|
-
--amsterdam-link-standalone-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
250
|
-
--amsterdam-link-standalone-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
251
|
-
--amsterdam-link-standalone-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
315
|
+
--amsterdam-link-standalone-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
316
|
+
--amsterdam-link-standalone-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
317
|
+
--amsterdam-link-standalone-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
318
|
+
--amsterdam-link-standalone-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
252
319
|
--amsterdam-link-standalone-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
|
|
253
320
|
--amsterdam-link-standalone-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
|
|
254
321
|
--amsterdam-link-standalone-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
255
322
|
--amsterdam-link-standalone-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
256
323
|
--amsterdam-link-standalone-text-decoration-line: var(--amsterdam-link-appearance-regular-text-decoration-line);
|
|
257
|
-
--amsterdam-link-in-list-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
258
|
-
--amsterdam-link-in-list-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
259
|
-
--amsterdam-link-in-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
260
|
-
--amsterdam-link-in-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
324
|
+
--amsterdam-link-in-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
325
|
+
--amsterdam-link-in-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
326
|
+
--amsterdam-link-in-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
327
|
+
--amsterdam-link-in-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
261
328
|
--amsterdam-link-in-list-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
|
|
262
329
|
--amsterdam-link-in-list-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
263
330
|
--amsterdam-link-in-list-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
@@ -271,8 +338,25 @@
|
|
|
271
338
|
--amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
272
339
|
--amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
273
340
|
--amsterdam-link-font-family: var(--amsterdam-typography-font-family);
|
|
274
|
-
--amsterdam-
|
|
275
|
-
--amsterdam-
|
|
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);
|
|
276
360
|
--amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
277
361
|
--amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
278
362
|
--amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
@@ -281,8 +365,6 @@
|
|
|
281
365
|
--amsterdam-icon-compact-size-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
282
366
|
--amsterdam-icon-compact-size-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
|
|
283
367
|
--amsterdam-icon-compact-size-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
|
|
284
|
-
--amsterdam-icon-spacious-size-7-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
|
|
285
|
-
--amsterdam-icon-spacious-size-7-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
|
|
286
368
|
--amsterdam-icon-spacious-size-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
287
369
|
--amsterdam-icon-spacious-size-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
288
370
|
--amsterdam-icon-spacious-size-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
@@ -291,14 +373,23 @@
|
|
|
291
373
|
--amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
292
374
|
--amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
|
|
293
375
|
--amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
|
|
294
|
-
--amsterdam-
|
|
295
|
-
--amsterdam-
|
|
296
|
-
--amsterdam-
|
|
297
|
-
--amsterdam-
|
|
298
|
-
--amsterdam-
|
|
299
|
-
--amsterdam-
|
|
300
|
-
--amsterdam-
|
|
301
|
-
--amsterdam-
|
|
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);
|
|
389
|
+
--amsterdam-heading-compact-level-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
390
|
+
--amsterdam-heading-compact-level-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
391
|
+
--amsterdam-heading-compact-level-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
392
|
+
--amsterdam-heading-compact-level-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
302
393
|
--amsterdam-heading-compact-level-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
303
394
|
--amsterdam-heading-compact-level-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
|
|
304
395
|
--amsterdam-heading-compact-level-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
|
|
@@ -307,6 +398,10 @@
|
|
|
307
398
|
--amsterdam-heading-compact-level-2-line-height: var(--amsterdam-typography-compact-text-level-2-line-height);
|
|
308
399
|
--amsterdam-heading-compact-level-1-font-size: var(--amsterdam-typography-compact-text-level-1-font-size);
|
|
309
400
|
--amsterdam-heading-compact-level-1-line-height: var(--amsterdam-typography-compact-text-level-1-line-height);
|
|
401
|
+
--amsterdam-heading-spacious-level-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
402
|
+
--amsterdam-heading-spacious-level-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
403
|
+
--amsterdam-heading-spacious-level-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
404
|
+
--amsterdam-heading-spacious-level-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
310
405
|
--amsterdam-heading-spacious-level-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
311
406
|
--amsterdam-heading-spacious-level-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
|
|
312
407
|
--amsterdam-heading-spacious-level-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
|
|
@@ -319,15 +414,14 @@
|
|
|
319
414
|
--amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
320
415
|
--amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
|
|
321
416
|
--amsterdam-heading-color: var(--amsterdam-color-primary-black);
|
|
322
|
-
--amsterdam-
|
|
323
|
-
--amsterdam-form-label-compact-
|
|
324
|
-
--amsterdam-form-label-
|
|
325
|
-
--amsterdam-form-label-spacious-
|
|
417
|
+
--amsterdam-header-column-gap: var(--amsterdam-grid-spacious-gap);
|
|
418
|
+
--amsterdam-form-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
|
|
419
|
+
--amsterdam-form-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
|
|
420
|
+
--amsterdam-form-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
|
|
421
|
+
--amsterdam-form-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
|
|
326
422
|
--amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
327
423
|
--amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
|
|
328
424
|
--amsterdam-form-label-color: var(--amsterdam-color-primary-black);
|
|
329
|
-
--amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
330
|
-
--amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
|
|
331
425
|
--amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
332
426
|
--amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
333
427
|
--amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
@@ -336,10 +430,10 @@
|
|
|
336
430
|
--amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
|
|
337
431
|
--amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
|
|
338
432
|
--amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
|
|
339
|
-
--amsterdam-checkbox-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
340
|
-
--amsterdam-checkbox-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
341
|
-
--amsterdam-checkbox-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
342
|
-
--amsterdam-checkbox-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
433
|
+
--amsterdam-checkbox-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
434
|
+
--amsterdam-checkbox-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
435
|
+
--amsterdam-checkbox-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
436
|
+
--amsterdam-checkbox-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
343
437
|
--amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
344
438
|
--amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
|
|
345
439
|
--amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
@@ -368,26 +462,25 @@
|
|
|
368
462
|
--amsterdam-card-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
369
463
|
--amsterdam-card-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
370
464
|
--amsterdam-card-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
371
|
-
--amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-
|
|
465
|
+
--amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-dark-blue);
|
|
372
466
|
--amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
|
|
373
467
|
--amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
|
|
374
468
|
--amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
|
|
375
469
|
--amsterdam-button-secondary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
|
|
376
|
-
--amsterdam-button-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
377
|
-
--amsterdam-button-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
378
|
-
--amsterdam-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
379
|
-
--amsterdam-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
380
|
-
--amsterdam-breadcrumb-compact-line-height: var(--amsterdam-typography-compact-text-level-
|
|
381
|
-
--amsterdam-breadcrumb-compact-font-size: var(--amsterdam-typography-compact-text-level-
|
|
382
|
-
--amsterdam-breadcrumb-spacious-line-height: var(--amsterdam-typography-spacious-text-level-
|
|
383
|
-
--amsterdam-breadcrumb-spacious-font-size: var(--amsterdam-typography-spacious-text-level-
|
|
470
|
+
--amsterdam-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
471
|
+
--amsterdam-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
472
|
+
--amsterdam-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
473
|
+
--amsterdam-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
|
|
474
|
+
--amsterdam-breadcrumb-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
|
|
475
|
+
--amsterdam-breadcrumb-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
|
|
476
|
+
--amsterdam-breadcrumb-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
|
|
477
|
+
--amsterdam-breadcrumb-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
|
|
384
478
|
--amsterdam-breadcrumb-item-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
|
|
385
479
|
--amsterdam-breadcrumb-item-link-hover-color: var(--amsterdam-color-dark-blue);
|
|
386
480
|
--amsterdam-breadcrumb-item-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
|
|
387
481
|
--amsterdam-breadcrumb-item-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
|
|
388
482
|
--amsterdam-breadcrumb-item-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
|
|
389
483
|
--amsterdam-breadcrumb-item-link-outline-offset: var(--amsterdam-focus-outline-offset);
|
|
390
|
-
--amsterdam-breadcrumb-separator-background-color: var(--amsterdam-color-primary-blue);
|
|
391
484
|
--amsterdam-breadcrumb-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
392
485
|
--amsterdam-breadcrumb-font-family: var(--amsterdam-typography-font-family);
|
|
393
486
|
--amsterdam-blockquote-compact-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
|
|
@@ -398,6 +491,28 @@
|
|
|
398
491
|
--amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
399
492
|
--amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
|
|
400
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);
|
|
401
516
|
--amsterdam-aspect-ratio-2x-wide: var(--amsterdam-proportion-2x-wide);
|
|
402
517
|
--amsterdam-aspect-ratio-x-wide: var(--amsterdam-proportion-x-wide);
|
|
403
518
|
--amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
|
|
@@ -406,14 +521,14 @@
|
|
|
406
521
|
--amsterdam-aspect-ratio-x-tall: var(--amsterdam-proportion-x-tall);
|
|
407
522
|
--amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
408
523
|
--amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
|
|
524
|
+
--amsterdam-alert-warning-border-color: var(--amsterdam-color-orange);
|
|
409
525
|
--amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
|
|
410
|
-
--amsterdam-alert-
|
|
526
|
+
--amsterdam-alert-info-border-color: var(--amsterdam-color-primary-blue);
|
|
411
527
|
--amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
|
|
412
|
-
--amsterdam-alert-
|
|
413
|
-
--amsterdam-alert-title-compact-
|
|
414
|
-
--amsterdam-alert-title-
|
|
415
|
-
--amsterdam-alert-title-spacious-
|
|
416
|
-
--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);
|
|
417
532
|
--amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
418
533
|
--amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
|
|
419
534
|
--amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
|
|
@@ -421,8 +536,6 @@
|
|
|
421
536
|
--amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
|
|
422
537
|
--amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
|
|
423
538
|
--amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
|
|
424
|
-
--amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
|
|
425
|
-
--amsterdam-alert-background-color: var(--amsterdam-color-yellow);
|
|
426
539
|
--amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
|
|
427
540
|
--amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
|
|
428
541
|
--amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
|
|
@@ -449,6 +562,12 @@
|
|
|
449
562
|
--amsterdam-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
|
|
450
563
|
--amsterdam-link-hover-color: var(--amsterdam-link-appearance-hover-color);
|
|
451
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);
|
|
452
571
|
--amsterdam-card-link-hover-color: var(--amsterdam-link-appearance-hover-color);
|
|
453
572
|
--amsterdam-card-link-color: var(--amsterdam-link-appearance-color);
|
|
454
573
|
--amsterdam-breadcrumb-item-link-color: var(--amsterdam-link-appearance-color);
|