@amsterdam/design-system-tokens 0.3.0 → 0.5.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.
Files changed (54) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/build.js +99 -0
  3. package/dist/compact.css +16 -0
  4. package/dist/compact.d.ts +56 -0
  5. package/dist/compact.json +33 -0
  6. package/dist/compact.mjs +14 -0
  7. package/dist/compact.scss +13 -0
  8. package/dist/compact.theme.css +16 -0
  9. package/dist/index.css +169 -196
  10. package/dist/index.d.ts +1103 -508
  11. package/dist/index.json +1082 -495
  12. package/dist/{index.js → index.mjs} +189 -216
  13. package/dist/{_variables.scss → index.scss} +168 -195
  14. package/dist/{root.css → index.theme.css} +169 -196
  15. package/package.json +8 -11
  16. package/src/brand/amsterdam/color.tokens.json +5 -6
  17. package/src/brand/amsterdam/typography.compact.tokens.json +29 -0
  18. package/src/brand/amsterdam/typography.tokens.json +28 -62
  19. package/src/common/amsterdam/hyphenation.tokens.json +9 -0
  20. package/src/components/amsterdam/accordion.tokens.json +4 -10
  21. package/src/components/amsterdam/alert.tokens.json +8 -18
  22. package/src/components/amsterdam/badge.tokens.json +43 -0
  23. package/src/components/amsterdam/blockquote.tokens.json +3 -9
  24. package/src/components/amsterdam/breadcrumb.tokens.json +2 -8
  25. package/src/components/amsterdam/button.tokens.json +2 -8
  26. package/src/components/amsterdam/checkbox.tokens.json +5 -11
  27. package/src/components/amsterdam/dialog.tokens.json +2 -15
  28. package/src/components/amsterdam/form-label.tokens.json +2 -8
  29. package/src/components/amsterdam/grid.compact.tokens.json +14 -0
  30. package/src/components/amsterdam/grid.tokens.json +6 -18
  31. package/src/components/amsterdam/header.tokens.json +1 -1
  32. package/src/components/amsterdam/heading.tokens.json +22 -50
  33. package/src/components/amsterdam/icon-button.tokens.json +37 -0
  34. package/src/components/amsterdam/icon.tokens.json +14 -34
  35. package/src/components/amsterdam/link-list.tokens.json +45 -0
  36. package/src/components/amsterdam/link.tokens.json +2 -25
  37. package/src/components/amsterdam/mega-menu.tokens.json +12 -0
  38. package/src/components/amsterdam/ordered-list.tokens.json +2 -8
  39. package/src/components/amsterdam/page-heading.tokens.json +2 -8
  40. package/src/components/amsterdam/page-menu.tokens.json +2 -8
  41. package/src/components/amsterdam/pagination.tokens.json +2 -8
  42. package/src/components/amsterdam/paragraph.tokens.json +10 -26
  43. package/src/components/amsterdam/search-field.tokens.json +4 -10
  44. package/src/components/amsterdam/skip-link.tokens.json +2 -6
  45. package/src/components/amsterdam/spotlight.tokens.json +3 -3
  46. package/src/components/amsterdam/table.tokens.json +20 -0
  47. package/src/components/amsterdam/text-input.tokens.json +2 -8
  48. package/src/components/amsterdam/top-task-link.tokens.json +4 -16
  49. package/src/components/amsterdam/unordered-list.tokens.json +2 -8
  50. package/dist/index.tokens.json +0 -1187
  51. package/dist/tokens.d.ts +0 -1210
  52. package/dist/tokens.js +0 -11291
  53. package/dist/variables.less +0 -499
  54. package/style-dictionary.config.json +0 -101
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 22 Dec 2023 12:50:01 GMT
3
+ // Generated on Fri, 09 Feb 2024 16:26:11 GMT
4
4
 
5
5
  $utrecht-button-subtle-disabled-background-color: transparent;
6
6
  $utrecht-button-subtle-background-color: transparent;
@@ -34,18 +34,21 @@ $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
- $amsterdam-link-in-list-gap: 0.5em;
40
41
  $amsterdam-link-inline-line-height: inherit;
41
42
  $amsterdam-link-inline-font-size: inherit;
42
43
  $amsterdam-link-inline-font-family: inherit;
44
+ $amsterdam-link-list-link-gap: 0.5em;
45
+ $amsterdam-link-list-gap: 0.5em;
46
+ $amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
47
+ $amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
43
48
  $amsterdam-grid-wide-column-count: 12;
44
49
  $amsterdam-grid-medium-column-count: 8;
45
- $amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
46
- $amsterdam-grid-compact-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
47
- $amsterdam-grid-spacious-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); // Equals 1.5 times the gap.
48
- $amsterdam-grid-spacious-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
50
+ $amsterdam-grid-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); // Equals 1.5 times the gap.
51
+ $amsterdam-grid-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
49
52
  $amsterdam-grid-column-count: 4;
50
53
  $amsterdam-dialog-footer-padding-block: 1.5rem 0;
51
54
  $amsterdam-dialog-footer-gap: 1rem;
@@ -55,13 +58,14 @@ $amsterdam-dialog-form-max-block-size: 75vh;
55
58
  $amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
56
59
  $amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
57
60
  $amsterdam-dialog-form-gap: 1.5rem;
58
- $amsterdam-dialog-close-background-color: transparent;
59
61
  $amsterdam-dialog-backdrop-background: #0006;
60
62
  $amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
61
63
  $amsterdam-dialog-border: 0;
62
64
  $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-alert-close-background-color: transparent;
65
+ $amsterdam-badge-padding-inline: 0.5rem;
64
66
  $amsterdam-alert-gap: 1rem;
67
+ $amsterdam-alert-border-style: solid;
68
+ $amsterdam-alert-border-width: 4px;
65
69
  $amsterdam-spacing-inset-xl: 2.5rem;
66
70
  $amsterdam-spacing-inset-lg: 1.5rem;
67
71
  $amsterdam-spacing-inset-md: 1rem;
@@ -73,38 +77,27 @@ $amsterdam-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
73
77
  $amsterdam-link-appearance-regular-text-decoration-line: underline;
74
78
  $amsterdam-link-appearance-text-underline-offset: 0.375rem;
75
79
  $amsterdam-link-appearance-text-decoration-thickness: 0.125rem;
80
+ $amsterdam-hyphenation-overflow-wrap: break-word;
81
+ $amsterdam-hyphenation-hyphens: auto;
82
+ $amsterdam-hyphenation-hyphenate-limit-chars: 12 8 4;
76
83
  $amsterdam-focus-outline-offset: 2px;
77
84
  $amsterdam-border-width-lg: 3px;
78
85
  $amsterdam-border-width-md: 2px;
79
86
  $amsterdam-border-width-sm: 1px;
80
- $amsterdam-typography-compact-text-level-6-line-height: 1.6;
81
- $amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
82
- $amsterdam-typography-compact-text-level-5-line-height: 1.6;
83
- $amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
84
- $amsterdam-typography-compact-text-level-4-line-height: 1.5;
85
- $amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
86
- $amsterdam-typography-compact-text-level-3-line-height: 1.3;
87
- $amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
88
- $amsterdam-typography-compact-text-level-2-line-height: 1.25;
89
- $amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
90
- $amsterdam-typography-compact-text-level-1-line-height: 1.2;
91
- $amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
92
- $amsterdam-typography-compact-text-level-0-line-height: 1.15;
93
- $amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
94
- $amsterdam-typography-spacious-text-level-6-line-height: 1.6;
95
- $amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
96
- $amsterdam-typography-spacious-text-level-5-line-height: 1.6;
97
- $amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
98
- $amsterdam-typography-spacious-text-level-4-line-height: 1.5;
99
- $amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
100
- $amsterdam-typography-spacious-text-level-3-line-height: 1.3;
101
- $amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
102
- $amsterdam-typography-spacious-text-level-2-line-height: 1.25;
103
- $amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
104
- $amsterdam-typography-spacious-text-level-1-line-height: 1.2;
105
- $amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
106
- $amsterdam-typography-spacious-text-level-0-line-height: 1.15;
107
- $amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
87
+ $amsterdam-typography-text-level-6-line-height: 1.6;
88
+ $amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
89
+ $amsterdam-typography-text-level-5-line-height: 1.6;
90
+ $amsterdam-typography-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
91
+ $amsterdam-typography-text-level-4-line-height: 1.5;
92
+ $amsterdam-typography-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
93
+ $amsterdam-typography-text-level-3-line-height: 1.3;
94
+ $amsterdam-typography-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
95
+ $amsterdam-typography-text-level-2-line-height: 1.25;
96
+ $amsterdam-typography-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
97
+ $amsterdam-typography-text-level-1-line-height: 1.2;
98
+ $amsterdam-typography-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
99
+ $amsterdam-typography-text-level-0-line-height: 1.15;
100
+ $amsterdam-typography-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
108
101
  $amsterdam-typography-font-weight-bold: 800;
109
102
  $amsterdam-typography-font-weight-normal: 400;
110
103
  $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -114,13 +107,12 @@ $amsterdam-proportion-wide: 5 / 4;
114
107
  $amsterdam-proportion-square: 1 / 1;
115
108
  $amsterdam-proportion-tall: 4 / 5;
116
109
  $amsterdam-proportion-x-tall: 9 / 16;
117
- $amsterdam-color-neutral-grey4: #323232;
118
110
  $amsterdam-color-neutral-grey3: #767676;
119
- $amsterdam-color-neutral-grey2: #B4B4B4;
120
- $amsterdam-color-neutral-grey1: #E6E6E6;
111
+ $amsterdam-color-neutral-grey2: #BEBEBE;
112
+ $amsterdam-color-neutral-grey1: #E8E8E8;
121
113
  $amsterdam-color-magenta: #E50082;
122
114
  $amsterdam-color-purple: #A00078;
123
- $amsterdam-color-blue: #009DEC;
115
+ $amsterdam-color-blue: #009DE6;
124
116
  $amsterdam-color-dark-green: #00A03C;
125
117
  $amsterdam-color-green: #BED200;
126
118
  $amsterdam-color-yellow: #FFE600;
@@ -128,7 +120,7 @@ $amsterdam-color-orange: #FF9100;
128
120
  $amsterdam-color-dark-blue: #102E62;
129
121
  $amsterdam-color-primary-red: #EC0000;
130
122
  $amsterdam-color-primary-blue: #004699;
131
- $amsterdam-color-primary-white: #ffffff;
123
+ $amsterdam-color-primary-white: #FFFFFF;
132
124
  $amsterdam-color-primary-black: #000000;
133
125
  $utrecht-button-subtle-disabled-color: $amsterdam-color-neutral-grey2;
134
126
  $utrecht-button-subtle-focus-color: $amsterdam-color-dark-blue;
@@ -152,36 +144,26 @@ $utrecht-button-padding-inline-start: $amsterdam-spacing-inset-md;
152
144
  $utrecht-button-font-family: $amsterdam-typography-font-family;
153
145
  $utrecht-button-color: $amsterdam-color-primary-white;
154
146
  $utrecht-button-background-color: $amsterdam-color-primary-blue;
155
- $amsterdam-unordered-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
156
- $amsterdam-unordered-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
157
- $amsterdam-unordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
158
- $amsterdam-unordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
147
+ $amsterdam-unordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
159
148
  $amsterdam-unordered-list-font-weight: $amsterdam-typography-font-weight-normal;
149
+ $amsterdam-unordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
160
150
  $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
161
151
  $amsterdam-unordered-list-color: $amsterdam-color-primary-black;
162
152
  $amsterdam-top-task-link-outline-offset: $amsterdam-focus-outline-offset;
163
- $amsterdam-top-task-link-label-compact-line-height: $amsterdam-typography-compact-text-level-4-line-height;
164
- $amsterdam-top-task-link-label-compact-font-size: $amsterdam-typography-compact-text-level-4-font-size;
165
- $amsterdam-top-task-link-label-spacious-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
166
- $amsterdam-top-task-link-label-spacious-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
167
153
  $amsterdam-top-task-link-label-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
168
154
  $amsterdam-top-task-link-label-hover-color: $amsterdam-color-dark-blue;
169
155
  $amsterdam-top-task-link-label-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
170
156
  $amsterdam-top-task-link-label-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
171
157
  $amsterdam-top-task-link-label-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
158
+ $amsterdam-top-task-link-label-line-height: $amsterdam-typography-text-level-4-line-height;
172
159
  $amsterdam-top-task-link-label-font-weight: $amsterdam-typography-font-weight-bold;
160
+ $amsterdam-top-task-link-label-font-size: $amsterdam-typography-text-level-4-font-size;
173
161
  $amsterdam-top-task-link-label-font-family: $amsterdam-typography-font-family;
174
- $amsterdam-top-task-link-description-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
175
- $amsterdam-top-task-link-description-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
176
- $amsterdam-top-task-link-description-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
177
- $amsterdam-top-task-link-description-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
162
+ $amsterdam-top-task-link-description-line-height: $amsterdam-typography-text-level-6-line-height;
178
163
  $amsterdam-top-task-link-description-font-weight: $amsterdam-typography-font-weight-normal;
164
+ $amsterdam-top-task-link-description-font-size: $amsterdam-typography-text-level-6-font-size;
179
165
  $amsterdam-top-task-link-description-font-family: $amsterdam-typography-font-family;
180
166
  $amsterdam-top-task-link-description-color: $amsterdam-color-primary-black;
181
- $amsterdam-text-input-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
182
- $amsterdam-text-input-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
183
- $amsterdam-text-input-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
184
- $amsterdam-text-input-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
185
167
  $amsterdam-text-input-placeholder-color: $amsterdam-color-neutral-grey3;
186
168
  $amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
187
169
  $amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
@@ -190,10 +172,20 @@ $amsterdam-text-input-disabled-color: $amsterdam-color-neutral-grey2;
190
172
  $amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
191
173
  $amsterdam-text-input-disabled-background-color: $amsterdam-color-primary-white;
192
174
  $amsterdam-text-input-outline-offset: $amsterdam-focus-outline-offset;
175
+ $amsterdam-text-input-line-height: $amsterdam-typography-text-level-6-line-height;
193
176
  $amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
177
+ $amsterdam-text-input-font-size: $amsterdam-typography-text-level-6-font-size;
194
178
  $amsterdam-text-input-font-family: $amsterdam-typography-font-family;
195
179
  $amsterdam-text-input-color: $amsterdam-color-primary-black;
196
180
  $amsterdam-text-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
181
+ $amsterdam-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
182
+ $amsterdam-table-cell-border-bottom: 1px solid $amsterdam-color-neutral-grey1;
183
+ $amsterdam-table-caption-font-weight: $amsterdam-typography-font-weight-bold;
184
+ $amsterdam-table-line-height: $amsterdam-typography-text-level-5-line-height;
185
+ $amsterdam-table-font-size: $amsterdam-typography-text-level-5-font-size;
186
+ $amsterdam-table-font-weight: $amsterdam-typography-font-weight-normal;
187
+ $amsterdam-table-font-family: $amsterdam-typography-font-family;
188
+ $amsterdam-table-color: $amsterdam-color-primary-black;
197
189
  $amsterdam-switch-disabled-background-color: $amsterdam-color-neutral-grey2;
198
190
  $amsterdam-switch-outline-offset: $amsterdam-focus-outline-offset;
199
191
  $amsterdam-switch-checked-background-color: $amsterdam-color-primary-blue;
@@ -205,31 +197,27 @@ $amsterdam-spotlight-yellow-background-color: $amsterdam-color-yellow;
205
197
  $amsterdam-spotlight-purple-background-color: $amsterdam-color-purple;
206
198
  $amsterdam-spotlight-orange-background-color: $amsterdam-color-orange;
207
199
  $amsterdam-spotlight-magenta-background-color: $amsterdam-color-magenta;
208
- $amsterdam-spotlight-light-blue-background-color: $amsterdam-color-blue;
209
200
  $amsterdam-spotlight-green-background-color: $amsterdam-color-green;
210
201
  $amsterdam-spotlight-dark-green-background-color: $amsterdam-color-dark-green;
211
- $amsterdam-spotlight-blue-background-color: $amsterdam-color-primary-blue;
202
+ $amsterdam-spotlight-dark-blue-background-color: $amsterdam-color-primary-blue;
203
+ $amsterdam-spotlight-blue-background-color: $amsterdam-color-blue;
212
204
  $amsterdam-skip-link-hover-background-color: $amsterdam-color-dark-blue;
213
- $amsterdam-skip-link-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
214
- $amsterdam-skip-link-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
215
205
  $amsterdam-skip-link-outline-offset: $amsterdam-focus-outline-offset;
216
- $amsterdam-skip-link-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
217
- $amsterdam-skip-link-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
206
+ $amsterdam-skip-link-line-height: $amsterdam-typography-text-level-6-line-height;
207
+ $amsterdam-skip-link-font-size: $amsterdam-typography-text-level-6-font-size;
218
208
  $amsterdam-skip-link-font-weight: $amsterdam-typography-font-weight-normal;
219
209
  $amsterdam-skip-link-font-family: $amsterdam-typography-font-family;
220
210
  $amsterdam-skip-link-color: $amsterdam-color-primary-white;
221
211
  $amsterdam-skip-link-background-color: $amsterdam-color-primary-blue;
222
- $amsterdam-search-field-input-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
223
- $amsterdam-search-field-input-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
224
- $amsterdam-search-field-input-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
225
- $amsterdam-search-field-input-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
226
212
  $amsterdam-search-field-input-placeholder-color: $amsterdam-color-neutral-grey3;
227
213
  $amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
228
- $amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-spacious-text-level-6-font-size;
229
- $amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-spacious-text-level-6-font-size;
214
+ $amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-text-level-6-font-size;
215
+ $amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-text-level-6-font-size;
230
216
  $amsterdam-search-field-input-cancel-button-color: $amsterdam-color-primary-blue;
231
217
  $amsterdam-search-field-input-outline-offset: $amsterdam-focus-outline-offset;
218
+ $amsterdam-search-field-input-line-height: $amsterdam-typography-text-level-6-line-height;
232
219
  $amsterdam-search-field-input-font-weight: $amsterdam-typography-font-weight-normal;
220
+ $amsterdam-search-field-input-font-size: $amsterdam-typography-text-level-6-font-size;
233
221
  $amsterdam-search-field-input-font-family: $amsterdam-typography-font-family;
234
222
  $amsterdam-search-field-input-color: $amsterdam-color-primary-black;
235
223
  $amsterdam-search-field-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
@@ -237,18 +225,12 @@ $amsterdam-search-field-button-hover-background-color: $amsterdam-color-dark-blu
237
225
  $amsterdam-search-field-button-outline-offset: $amsterdam-focus-outline-offset;
238
226
  $amsterdam-search-field-button-color: $amsterdam-color-primary-white;
239
227
  $amsterdam-search-field-button-background-color: $amsterdam-color-primary-blue;
240
- $amsterdam-paragraph-compact-large-line-height: $amsterdam-typography-compact-text-level-4-line-height;
241
- $amsterdam-paragraph-compact-large-font-size: $amsterdam-typography-compact-text-level-4-font-size;
242
- $amsterdam-paragraph-compact-medium-line-height: $amsterdam-typography-compact-text-level-5-line-height;
243
- $amsterdam-paragraph-compact-medium-font-size: $amsterdam-typography-compact-text-level-5-font-size;
244
- $amsterdam-paragraph-compact-small-line-height: $amsterdam-typography-compact-text-level-6-line-height;
245
- $amsterdam-paragraph-compact-small-font-size: $amsterdam-typography-compact-text-level-6-font-size;
246
- $amsterdam-paragraph-spacious-large-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
247
- $amsterdam-paragraph-spacious-large-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
248
- $amsterdam-paragraph-spacious-medium-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
249
- $amsterdam-paragraph-spacious-medium-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
250
- $amsterdam-paragraph-spacious-small-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
251
- $amsterdam-paragraph-spacious-small-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
228
+ $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-4-line-height;
229
+ $amsterdam-paragraph-large-font-size: $amsterdam-typography-text-level-4-font-size;
230
+ $amsterdam-paragraph-medium-line-height: $amsterdam-typography-text-level-5-line-height;
231
+ $amsterdam-paragraph-medium-font-size: $amsterdam-typography-text-level-5-font-size;
232
+ $amsterdam-paragraph-small-line-height: $amsterdam-typography-text-level-6-line-height;
233
+ $amsterdam-paragraph-small-font-size: $amsterdam-typography-text-level-6-font-size;
252
234
  $amsterdam-paragraph-inverse-color: $amsterdam-color-primary-white;
253
235
  $amsterdam-paragraph-font-weight: $amsterdam-typography-font-weight-normal;
254
236
  $amsterdam-paragraph-font-family: $amsterdam-typography-font-family;
@@ -259,58 +241,42 @@ $amsterdam-pagination-button-text-underline-offset: $amsterdam-link-appearance-t
259
241
  $amsterdam-pagination-button-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
260
242
  $amsterdam-pagination-button-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
261
243
  $amsterdam-pagination-button-outline-offset: $amsterdam-focus-outline-offset;
262
- $amsterdam-pagination-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
263
- $amsterdam-pagination-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
264
- $amsterdam-pagination-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
265
- $amsterdam-pagination-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
244
+ $amsterdam-pagination-line-height: $amsterdam-typography-text-level-5-line-height;
266
245
  $amsterdam-pagination-font-weight: $amsterdam-typography-font-weight-normal;
246
+ $amsterdam-pagination-font-size: $amsterdam-typography-text-level-5-font-size;
267
247
  $amsterdam-pagination-font-family: $amsterdam-typography-font-family;
268
248
  $amsterdam-page-menu-item-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
269
- $amsterdam-page-menu-item-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
270
- $amsterdam-page-menu-item-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
271
- $amsterdam-page-menu-item-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
272
- $amsterdam-page-menu-item-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
273
249
  $amsterdam-page-menu-item-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
274
250
  $amsterdam-page-menu-item-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
275
251
  $amsterdam-page-menu-item-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
276
252
  $amsterdam-page-menu-item-outline-offset: $amsterdam-focus-outline-offset;
253
+ $amsterdam-page-menu-item-line-height: $amsterdam-typography-text-level-6-line-height;
277
254
  $amsterdam-page-menu-item-font-weight: $amsterdam-typography-font-weight-normal;
255
+ $amsterdam-page-menu-item-font-size: $amsterdam-typography-text-level-6-font-size;
278
256
  $amsterdam-page-menu-item-font-family: $amsterdam-typography-font-family;
279
- $amsterdam-page-heading-compact-line-height: $amsterdam-typography-compact-text-level-0-font-size;
280
- $amsterdam-page-heading-compact-font-size: $amsterdam-typography-compact-text-level-0-font-size;
281
- $amsterdam-page-heading-spacious-line-height: $amsterdam-typography-spacious-text-level-0-font-size;
282
- $amsterdam-page-heading-spacious-font-size: $amsterdam-typography-spacious-text-level-0-font-size;
257
+ $amsterdam-page-heading-line-height: $amsterdam-typography-text-level-0-font-size;
283
258
  $amsterdam-page-heading-inverse-color: $amsterdam-color-primary-white;
284
259
  $amsterdam-page-heading-font-weight: $amsterdam-typography-font-weight-bold;
260
+ $amsterdam-page-heading-font-size: $amsterdam-typography-text-level-0-font-size;
285
261
  $amsterdam-page-heading-font-family: $amsterdam-typography-font-family;
286
262
  $amsterdam-page-heading-color: $amsterdam-color-primary-black;
287
- $amsterdam-ordered-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
288
- $amsterdam-ordered-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
289
- $amsterdam-ordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
290
- $amsterdam-ordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
263
+ $amsterdam-ordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
291
264
  $amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
265
+ $amsterdam-ordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
292
266
  $amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
293
267
  $amsterdam-ordered-list-color: $amsterdam-color-primary-black;
268
+ $amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-grid-gap;
269
+ $amsterdam-mega-menu-list-category-column-gap: $amsterdam-grid-gap;
294
270
  $amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
295
271
  $amsterdam-logo-title-color: $amsterdam-color-primary-red;
296
272
  $amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
297
- $amsterdam-link-standalone-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
298
- $amsterdam-link-standalone-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
299
- $amsterdam-link-standalone-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
300
- $amsterdam-link-standalone-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
301
273
  $amsterdam-link-standalone-hover-text-underline-offset: $amsterdam-link-appearance-regular-hover-text-underline-offset;
302
274
  $amsterdam-link-standalone-hover-text-decoration-thickness: $amsterdam-link-appearance-regular-hover-text-decoration-thickness;
303
275
  $amsterdam-link-standalone-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
304
276
  $amsterdam-link-standalone-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
305
277
  $amsterdam-link-standalone-text-decoration-line: $amsterdam-link-appearance-regular-text-decoration-line;
306
- $amsterdam-link-in-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
307
- $amsterdam-link-in-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
308
- $amsterdam-link-in-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
309
- $amsterdam-link-in-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
310
- $amsterdam-link-in-list-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
311
- $amsterdam-link-in-list-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
312
- $amsterdam-link-in-list-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
313
- $amsterdam-link-in-list-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
278
+ $amsterdam-link-standalone-line-height: $amsterdam-typography-text-level-5-line-height;
279
+ $amsterdam-link-standalone-font-size: $amsterdam-typography-text-level-5-font-size;
314
280
  $amsterdam-link-inline-visited-color: $amsterdam-color-purple;
315
281
  $amsterdam-link-inline-hover-text-underline-offset: $amsterdam-link-appearance-regular-hover-text-underline-offset;
316
282
  $amsterdam-link-inline-hover-text-decoration-thickness: $amsterdam-link-appearance-regular-hover-text-decoration-thickness;
@@ -320,76 +286,69 @@ $amsterdam-link-inline-text-decoration-line: $amsterdam-link-appearance-regular-
320
286
  $amsterdam-link-outline-offset: $amsterdam-focus-outline-offset;
321
287
  $amsterdam-link-font-weight: $amsterdam-typography-font-weight-normal;
322
288
  $amsterdam-link-font-family: $amsterdam-typography-font-family;
323
- $amsterdam-icon-compact-size-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
324
- $amsterdam-icon-compact-size-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
325
- $amsterdam-icon-compact-size-5-line-height: $amsterdam-typography-compact-text-level-5-line-height;
326
- $amsterdam-icon-compact-size-5-font-size: $amsterdam-typography-compact-text-level-5-font-size;
327
- $amsterdam-icon-compact-size-4-line-height: $amsterdam-typography-compact-text-level-4-line-height;
328
- $amsterdam-icon-compact-size-4-font-size: $amsterdam-typography-compact-text-level-4-font-size;
329
- $amsterdam-icon-compact-size-3-line-height: $amsterdam-typography-compact-text-level-3-line-height;
330
- $amsterdam-icon-compact-size-3-font-size: $amsterdam-typography-compact-text-level-3-font-size;
331
- $amsterdam-icon-spacious-size-6-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
332
- $amsterdam-icon-spacious-size-6-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
333
- $amsterdam-icon-spacious-size-5-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
334
- $amsterdam-icon-spacious-size-5-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
335
- $amsterdam-icon-spacious-size-4-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
336
- $amsterdam-icon-spacious-size-4-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
337
- $amsterdam-icon-spacious-size-3-line-height: $amsterdam-typography-spacious-text-level-3-line-height;
338
- $amsterdam-icon-spacious-size-3-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
339
- $amsterdam-heading-compact-level-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
340
- $amsterdam-heading-compact-level-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
341
- $amsterdam-heading-compact-level-5-font-size: $amsterdam-typography-compact-text-level-5-font-size;
342
- $amsterdam-heading-compact-level-5-line-height: $amsterdam-typography-compact-text-level-5-line-height;
343
- $amsterdam-heading-compact-level-4-font-size: $amsterdam-typography-compact-text-level-4-font-size;
344
- $amsterdam-heading-compact-level-4-line-height: $amsterdam-typography-compact-text-level-4-line-height;
345
- $amsterdam-heading-compact-level-3-font-size: $amsterdam-typography-compact-text-level-3-font-size;
346
- $amsterdam-heading-compact-level-3-line-height: $amsterdam-typography-compact-text-level-3-line-height;
347
- $amsterdam-heading-compact-level-2-font-size: $amsterdam-typography-compact-text-level-2-font-size;
348
- $amsterdam-heading-compact-level-2-line-height: $amsterdam-typography-compact-text-level-2-line-height;
349
- $amsterdam-heading-compact-level-1-font-size: $amsterdam-typography-compact-text-level-1-font-size;
350
- $amsterdam-heading-compact-level-1-line-height: $amsterdam-typography-compact-text-level-1-line-height;
351
- $amsterdam-heading-spacious-level-6-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
352
- $amsterdam-heading-spacious-level-6-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
353
- $amsterdam-heading-spacious-level-5-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
354
- $amsterdam-heading-spacious-level-5-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
355
- $amsterdam-heading-spacious-level-4-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
356
- $amsterdam-heading-spacious-level-4-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
357
- $amsterdam-heading-spacious-level-3-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
358
- $amsterdam-heading-spacious-level-3-line-height: $amsterdam-typography-spacious-text-level-3-line-height;
359
- $amsterdam-heading-spacious-level-2-font-size: $amsterdam-typography-spacious-text-level-2-font-size;
360
- $amsterdam-heading-spacious-level-2-line-height: $amsterdam-typography-spacious-text-level-2-line-height;
361
- $amsterdam-heading-spacious-level-1-font-size: $amsterdam-typography-spacious-text-level-1-font-size;
362
- $amsterdam-heading-spacious-level-1-line-height: $amsterdam-typography-spacious-text-level-1-line-height;
289
+ $amsterdam-link-list-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
290
+ $amsterdam-link-list-link-large-line-height: $amsterdam-typography-text-level-4-line-height;
291
+ $amsterdam-link-list-link-large-font-size: $amsterdam-typography-text-level-4-font-size;
292
+ $amsterdam-link-list-link-medium-line-height: $amsterdam-typography-text-level-5-line-height;
293
+ $amsterdam-link-list-link-medium-font-size: $amsterdam-typography-text-level-5-font-size;
294
+ $amsterdam-link-list-link-small-line-height: $amsterdam-typography-text-level-6-line-height;
295
+ $amsterdam-link-list-link-small-font-size: $amsterdam-typography-text-level-6-font-size;
296
+ $amsterdam-link-list-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
297
+ $amsterdam-link-list-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
298
+ $amsterdam-link-list-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
299
+ $amsterdam-link-list-link-outline-offset: $amsterdam-focus-outline-offset;
300
+ $amsterdam-link-list-link-font-weight: $amsterdam-typography-font-weight-normal;
301
+ $amsterdam-link-list-link-font-family: $amsterdam-typography-font-family;
302
+ $amsterdam-icon-size-6-line-height: $amsterdam-typography-text-level-6-line-height;
303
+ $amsterdam-icon-size-6-font-size: $amsterdam-typography-text-level-6-font-size;
304
+ $amsterdam-icon-size-5-line-height: $amsterdam-typography-text-level-5-line-height;
305
+ $amsterdam-icon-size-5-font-size: $amsterdam-typography-text-level-5-font-size;
306
+ $amsterdam-icon-size-4-line-height: $amsterdam-typography-text-level-4-line-height;
307
+ $amsterdam-icon-size-4-font-size: $amsterdam-typography-text-level-4-font-size;
308
+ $amsterdam-icon-size-3-line-height: $amsterdam-typography-text-level-3-line-height;
309
+ $amsterdam-icon-size-3-font-size: $amsterdam-typography-text-level-3-font-size;
310
+ $amsterdam-icon-button-on-background-dark-disabled-background-color: $amsterdam-color-neutral-grey2;
311
+ $amsterdam-icon-button-on-background-dark-disabled-color: $amsterdam-color-primary-white;
312
+ $amsterdam-icon-button-on-background-dark-hover-color: $amsterdam-color-primary-white;
313
+ $amsterdam-icon-button-on-background-dark-hover-background-color: $amsterdam-color-dark-blue;
314
+ $amsterdam-icon-button-on-background-dark-color: $amsterdam-color-primary-white;
315
+ $amsterdam-icon-button-on-background-dark-background-color: $amsterdam-color-primary-blue;
316
+ $amsterdam-icon-button-on-background-light-disabled-color: $amsterdam-color-neutral-grey2;
317
+ $amsterdam-icon-button-on-background-light-hover-color: $amsterdam-color-primary-black;
318
+ $amsterdam-icon-button-on-background-light-color: $amsterdam-color-primary-black;
319
+ $amsterdam-icon-button-disabled-color: $amsterdam-color-neutral-grey2;
320
+ $amsterdam-icon-button-hover-color: $amsterdam-color-dark-blue;
321
+ $amsterdam-icon-button-outline-offset: $amsterdam-focus-outline-offset;
322
+ $amsterdam-icon-button-color: $amsterdam-color-primary-blue;
323
+ $amsterdam-heading-level-6-line-height: $amsterdam-typography-text-level-6-line-height;
324
+ $amsterdam-heading-level-6-font-size: $amsterdam-typography-text-level-6-font-size;
325
+ $amsterdam-heading-level-5-line-height: $amsterdam-typography-text-level-5-line-height;
326
+ $amsterdam-heading-level-5-font-size: $amsterdam-typography-text-level-5-font-size;
327
+ $amsterdam-heading-level-4-line-height: $amsterdam-typography-text-level-4-line-height;
328
+ $amsterdam-heading-level-4-font-size: $amsterdam-typography-text-level-4-font-size;
329
+ $amsterdam-heading-level-3-line-height: $amsterdam-typography-text-level-3-line-height;
330
+ $amsterdam-heading-level-3-font-size: $amsterdam-typography-text-level-3-font-size;
331
+ $amsterdam-heading-level-2-line-height: $amsterdam-typography-text-level-2-line-height;
332
+ $amsterdam-heading-level-2-font-size: $amsterdam-typography-text-level-2-font-size;
333
+ $amsterdam-heading-level-1-line-height: $amsterdam-typography-text-level-1-line-height;
334
+ $amsterdam-heading-level-1-font-size: $amsterdam-typography-text-level-1-font-size;
363
335
  $amsterdam-heading-inverse-color: $amsterdam-color-primary-white;
364
336
  $amsterdam-heading-font-weight: $amsterdam-typography-font-weight-bold;
365
337
  $amsterdam-heading-font-family: $amsterdam-typography-font-family;
366
338
  $amsterdam-heading-color: $amsterdam-color-primary-black;
367
- $amsterdam-header-column-gap: $amsterdam-grid-spacious-gap;
368
- $amsterdam-form-label-compact-line-height: $amsterdam-typography-compact-text-level-4-line-height;
369
- $amsterdam-form-label-compact-font-size: $amsterdam-typography-compact-text-level-4-font-size;
370
- $amsterdam-form-label-spacious-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
371
- $amsterdam-form-label-spacious-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
339
+ $amsterdam-header-column-gap: $amsterdam-grid-gap;
340
+ $amsterdam-form-label-line-height: $amsterdam-typography-text-level-4-line-height;
372
341
  $amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
342
+ $amsterdam-form-label-font-size: $amsterdam-typography-text-level-4-font-size;
373
343
  $amsterdam-form-label-font-family: $amsterdam-typography-font-family;
374
344
  $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
- $amsterdam-dialog-title-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
378
- $amsterdam-dialog-title-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
379
- $amsterdam-dialog-title-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
380
- $amsterdam-dialog-title-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
345
+ $amsterdam-dialog-title-line-height: $amsterdam-typography-text-level-5-line-height;
381
346
  $amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
347
+ $amsterdam-dialog-title-font-size: $amsterdam-typography-text-level-5-font-size;
382
348
  $amsterdam-dialog-title-font-family: $amsterdam-typography-font-family;
383
349
  $amsterdam-dialog-title-color: $amsterdam-color-primary-black;
384
350
  $amsterdam-dialog-background-color: $amsterdam-color-primary-white;
385
- $amsterdam-checkbox-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
386
- $amsterdam-checkbox-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
387
- $amsterdam-checkbox-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
388
- $amsterdam-checkbox-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
389
- $amsterdam-checkbox-outline-offset: $amsterdam-focus-outline-offset;
390
351
  $amsterdam-checkbox-hover-color: $amsterdam-color-dark-blue;
391
- $amsterdam-checkbox-font-weight: $amsterdam-typography-font-weight-normal;
392
- $amsterdam-checkbox-font-family: $amsterdam-typography-font-family;
393
352
  $amsterdam-checkbox-disabled-color: $amsterdam-color-neutral-grey3;
394
353
  $amsterdam-checkbox-checkmark-indeterminate-hover-background-color: $amsterdam-color-dark-blue;
395
354
  $amsterdam-checkbox-checkmark-indeterminate-background-color: $amsterdam-color-primary-blue;
@@ -408,6 +367,11 @@ $amsterdam-checkbox-checkmark-disabled-border-color: $amsterdam-color-neutral-gr
408
367
  $amsterdam-checkbox-checkmark-checked-hover-background-color: $amsterdam-color-dark-blue;
409
368
  $amsterdam-checkbox-checkmark-checked-background-color: $amsterdam-color-primary-blue;
410
369
  $amsterdam-checkbox-checkmark-border-color: $amsterdam-color-primary-blue;
370
+ $amsterdam-checkbox-outline-offset: $amsterdam-focus-outline-offset;
371
+ $amsterdam-checkbox-line-height: $amsterdam-typography-text-level-5-line-height;
372
+ $amsterdam-checkbox-font-weight: $amsterdam-typography-font-weight-normal;
373
+ $amsterdam-checkbox-font-size: $amsterdam-typography-text-level-5-font-size;
374
+ $amsterdam-checkbox-font-family: $amsterdam-typography-font-family;
411
375
  $amsterdam-checkbox-color: $amsterdam-color-primary-black;
412
376
  $amsterdam-card-outline-offset: $amsterdam-focus-outline-offset;
413
377
  $amsterdam-card-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
@@ -419,30 +383,44 @@ $amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px $amsterdam-color-p
419
383
  $amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
420
384
  $amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px $amsterdam-color-dark-blue;
421
385
  $amsterdam-button-secondary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
422
- $amsterdam-button-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
423
- $amsterdam-button-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
424
- $amsterdam-button-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
425
- $amsterdam-button-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
426
- $amsterdam-breadcrumb-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
427
- $amsterdam-breadcrumb-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
428
- $amsterdam-breadcrumb-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
429
- $amsterdam-breadcrumb-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
386
+ $amsterdam-button-line-height: $amsterdam-typography-text-level-5-line-height;
387
+ $amsterdam-button-font-size: $amsterdam-typography-text-level-5-font-size;
430
388
  $amsterdam-breadcrumb-item-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
431
389
  $amsterdam-breadcrumb-item-link-hover-color: $amsterdam-color-dark-blue;
432
390
  $amsterdam-breadcrumb-item-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
433
391
  $amsterdam-breadcrumb-item-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
434
392
  $amsterdam-breadcrumb-item-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
435
393
  $amsterdam-breadcrumb-item-link-outline-offset: $amsterdam-focus-outline-offset;
394
+ $amsterdam-breadcrumb-line-height: $amsterdam-typography-text-level-6-line-height;
436
395
  $amsterdam-breadcrumb-font-weight: $amsterdam-typography-font-weight-normal;
396
+ $amsterdam-breadcrumb-font-size: $amsterdam-typography-text-level-6-font-size;
437
397
  $amsterdam-breadcrumb-font-family: $amsterdam-typography-font-family;
438
- $amsterdam-blockquote-compact-line-height: $amsterdam-typography-compact-text-level-3-line-height;
439
- $amsterdam-blockquote-compact-font-size: $amsterdam-typography-compact-text-level-3-font-size;
440
- $amsterdam-blockquote-spacious-line-height: $amsterdam-typography-spacious-text-level-3-line-height;
441
- $amsterdam-blockquote-spacious-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
442
398
  $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
399
+ $amsterdam-blockquote-line-height: $amsterdam-typography-text-level-3-line-height;
443
400
  $amsterdam-blockquote-font-weight: $amsterdam-typography-font-weight-bold;
401
+ $amsterdam-blockquote-font-size: $amsterdam-typography-text-level-3-font-size;
444
402
  $amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
445
403
  $amsterdam-blockquote-color: $amsterdam-color-primary-black;
404
+ $amsterdam-badge-yellow-color: $amsterdam-color-primary-black;
405
+ $amsterdam-badge-yellow-background-color: $amsterdam-color-yellow;
406
+ $amsterdam-badge-purple-color: $amsterdam-color-primary-white;
407
+ $amsterdam-badge-purple-background-color: $amsterdam-color-purple;
408
+ $amsterdam-badge-orange-color: $amsterdam-color-primary-black;
409
+ $amsterdam-badge-orange-background-color: $amsterdam-color-orange;
410
+ $amsterdam-badge-magenta-color: $amsterdam-color-primary-white;
411
+ $amsterdam-badge-magenta-background-color: $amsterdam-color-magenta;
412
+ $amsterdam-badge-green-color: $amsterdam-color-primary-black;
413
+ $amsterdam-badge-green-background-color: $amsterdam-color-green;
414
+ $amsterdam-badge-dark-green-color: $amsterdam-color-primary-white;
415
+ $amsterdam-badge-dark-green-background-color: $amsterdam-color-dark-green;
416
+ $amsterdam-badge-dark-blue-color: $amsterdam-color-primary-white;
417
+ $amsterdam-badge-dark-blue-background-color: $amsterdam-color-primary-blue;
418
+ $amsterdam-badge-blue-color: $amsterdam-color-primary-black;
419
+ $amsterdam-badge-blue-background-color: $amsterdam-color-blue;
420
+ $amsterdam-badge-line-height: $amsterdam-typography-text-level-5-line-height;
421
+ $amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
422
+ $amsterdam-badge-font-size: $amsterdam-typography-text-level-5-font-size;
423
+ $amsterdam-badge-font-family: $amsterdam-typography-font-family;
446
424
  $amsterdam-aspect-ratio-2x-wide: $amsterdam-proportion-2x-wide;
447
425
  $amsterdam-aspect-ratio-x-wide: $amsterdam-proportion-x-wide;
448
426
  $amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
@@ -451,31 +429,20 @@ $amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
451
429
  $amsterdam-aspect-ratio-x-tall: $amsterdam-proportion-x-tall;
452
430
  $amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
453
431
  $amsterdam-alert-close-fill: $amsterdam-color-primary-black;
432
+ $amsterdam-alert-warning-border-color: $amsterdam-color-orange;
454
433
  $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
455
- $amsterdam-alert-success-background-color: $amsterdam-color-primary-white;
434
+ $amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
456
435
  $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
457
- $amsterdam-alert-error-background-color: $amsterdam-color-primary-white;
458
- $amsterdam-alert-title-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
459
- $amsterdam-alert-title-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
460
- $amsterdam-alert-title-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
461
- $amsterdam-alert-title-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
462
- $amsterdam-alert-title-font-weight: $amsterdam-typography-font-weight-bold;
463
- $amsterdam-alert-title-font-family: $amsterdam-typography-font-family;
464
- $amsterdam-alert-title-color: $amsterdam-color-primary-black;
465
436
  $amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
466
437
  $amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
467
438
  $amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
468
439
  $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
- $amsterdam-accordion-button-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
472
- $amsterdam-accordion-button-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
473
- $amsterdam-accordion-button-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
474
- $amsterdam-accordion-button-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
475
440
  $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
441
+ $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
442
+ $amsterdam-accordion-button-line-height: $amsterdam-typography-text-level-5-line-height;
476
443
  $amsterdam-accordion-button-font-weight: $amsterdam-typography-font-weight-bold;
444
+ $amsterdam-accordion-button-font-size: $amsterdam-typography-text-level-5-font-size;
477
445
  $amsterdam-accordion-button-font-family: $amsterdam-typography-font-family;
478
- $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
479
446
  $amsterdam-accordion-button-color: $amsterdam-color-primary-blue;
480
447
  $amsterdam-link-appearance-on-background-light-color: $amsterdam-color-primary-black;
481
448
  $amsterdam-link-appearance-on-background-dark-color: $amsterdam-color-primary-white;
@@ -494,6 +461,12 @@ $amsterdam-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-ba
494
461
  $amsterdam-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
495
462
  $amsterdam-link-hover-color: $amsterdam-link-appearance-hover-color;
496
463
  $amsterdam-link-color: $amsterdam-link-appearance-color;
464
+ $amsterdam-link-list-link-on-background-light-hover-color: $amsterdam-link-appearance-on-background-light-color;
465
+ $amsterdam-link-list-link-on-background-light-color: $amsterdam-link-appearance-on-background-light-color;
466
+ $amsterdam-link-list-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-background-dark-color;
467
+ $amsterdam-link-list-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
468
+ $amsterdam-link-list-link-hover-color: $amsterdam-link-appearance-hover-color;
469
+ $amsterdam-link-list-link-color: $amsterdam-link-appearance-color;
497
470
  $amsterdam-card-link-hover-color: $amsterdam-link-appearance-hover-color;
498
471
  $amsterdam-card-link-color: $amsterdam-link-appearance-color;
499
472
  $amsterdam-breadcrumb-item-link-color: $amsterdam-link-appearance-color;