@amsterdam/design-system-tokens 0.5.1 → 0.6.1

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 (46) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/compact.css +7 -3
  3. package/dist/compact.d.ts +10 -2
  4. package/dist/compact.json +9 -1
  5. package/dist/compact.mjs +7 -3
  6. package/dist/compact.scss +7 -3
  7. package/dist/compact.theme.css +7 -3
  8. package/dist/index.css +162 -50
  9. package/dist/index.d.ts +271 -263
  10. package/dist/index.json +272 -264
  11. package/dist/index.mjs +162 -50
  12. package/dist/index.scss +162 -50
  13. package/dist/index.theme.css +162 -50
  14. package/package.json +1 -1
  15. package/src/brand/amsterdam/space.compact.tokens.json +16 -0
  16. package/src/brand/amsterdam/space.tokens.json +30 -0
  17. package/src/common/{utrecht → amsterdam}/action.tokens.json +1 -1
  18. package/src/components/amsterdam/accordion.tokens.json +6 -0
  19. package/src/components/amsterdam/alert.tokens.json +2 -4
  20. package/src/components/amsterdam/badge.tokens.json +1 -1
  21. package/src/components/amsterdam/button.tokens.json +37 -3
  22. package/src/components/amsterdam/checkbox.tokens.json +6 -0
  23. package/src/components/amsterdam/column.tokens.json +13 -0
  24. package/src/components/amsterdam/dialog.tokens.json +1 -8
  25. package/src/components/amsterdam/fieldset.tokens.json +13 -0
  26. package/src/components/amsterdam/gap.tokens.json +11 -0
  27. package/src/components/amsterdam/grid.compact.tokens.json +1 -8
  28. package/src/components/amsterdam/grid.tokens.json +10 -6
  29. package/src/components/amsterdam/header.tokens.json +8 -1
  30. package/src/components/amsterdam/margin.tokens.json +11 -0
  31. package/src/components/amsterdam/mark.tokens.json +1 -1
  32. package/src/components/amsterdam/mega-menu.tokens.json +8 -2
  33. package/src/components/amsterdam/ordered-list.tokens.json +1 -0
  34. package/src/components/amsterdam/pagination.tokens.json +1 -0
  35. package/src/components/amsterdam/radio.tokens.json +63 -0
  36. package/src/components/amsterdam/row.tokens.json +13 -0
  37. package/src/components/amsterdam/search-field.tokens.json +5 -1
  38. package/src/components/amsterdam/skip-link.tokens.json +2 -0
  39. package/src/components/amsterdam/table.tokens.json +3 -1
  40. package/src/components/amsterdam/tabs.tokens.json +34 -0
  41. package/src/components/amsterdam/text-area.tokens.json +36 -0
  42. package/src/components/amsterdam/text-input.tokens.json +2 -0
  43. package/src/components/amsterdam/unordered-list.tokens.json +1 -0
  44. package/src/common/amsterdam/spacing.tokens.json +0 -12
  45. package/src/common/utrecht/focus.tokens.json +0 -7
  46. package/src/components/utrecht/button.tokens.json +0 -214
package/dist/index.scss CHANGED
@@ -1,16 +1,7 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 13 Feb 2024 11:27:27 GMT
3
+ // Generated on Mon, 11 Mar 2024 17:19:31 GMT
4
4
 
5
- $utrecht-button-subtle-disabled-background-color: transparent;
6
- $utrecht-button-subtle-background-color: transparent;
7
- $utrecht-focus-outline-offset: 2px;
8
- $utrecht-action-submit-cursor: pointer;
9
- $utrecht-action-navigate-cursor: pointer;
10
- $utrecht-action-inert-cursor: default;
11
- $utrecht-action-disabled-cursor: not-allowed;
12
- $utrecht-action-busy-cursor: wait;
13
- $utrecht-action-activate-cursor: pointer;
14
5
  $amsterdam-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
15
6
  $amsterdam-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
16
7
  $amsterdam-unordered-list-unordered-list-list-style-type: '\2013';
@@ -18,12 +9,25 @@ $amsterdam-unordered-list-item-padding-inline-start: 0.875rem; // The total leve
18
9
  $amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
19
10
  $amsterdam-unordered-list-list-style-type: '\2022';
20
11
  $amsterdam-unordered-list-gap: 0.75rem;
12
+ $amsterdam-text-area-padding-inline: 1rem;
13
+ $amsterdam-text-area-padding-block: 0.5rem;
14
+ $amsterdam-tabs-button-padding-inline: 1rem;
15
+ $amsterdam-tabs-button-padding-block: .5rem;
16
+ $amsterdam-tabs-button-outline-offset: -0.25rem;
17
+ $amsterdam-tabs-button-border: none;
18
+ $amsterdam-tabs-button-background-color: transparent;
21
19
  $amsterdam-switch-thumb-height: 1.75rem;
22
20
  $amsterdam-switch-thumb-width: 1.75rem;
23
21
  $amsterdam-switch-width: 3.5rem;
24
22
  $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>");
25
23
  $amsterdam-screen-x-wide-max-width: 132rem;
26
24
  $amsterdam-screen-wide-max-width: 100rem;
25
+ $amsterdam-radio-circle-invalid-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
26
+ $amsterdam-radio-circle-invalid-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
27
+ $amsterdam-radio-circle-disabled-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
28
+ $amsterdam-radio-circle-disabled-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
29
+ $amsterdam-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
30
+ $amsterdam-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
27
31
  $amsterdam-page-menu-item-gap: 0.5rem;
28
32
  $amsterdam-page-menu-row-gap: 0.5rem;
29
33
  $amsterdam-page-menu-column-gap: 2.5rem;
@@ -36,7 +40,6 @@ $amsterdam-ordered-list-list-style-type: decimal;
36
40
  $amsterdam-ordered-list-gap: 0.75rem;
37
41
  $amsterdam-mega-menu-list-category-padding-block-start: 1rem;
38
42
  $amsterdam-mega-menu-list-category-column-width: 20rem;
39
- $amsterdam-mark-background-color: var(--amsterdam-color-yellow);
40
43
  $amsterdam-logo-height: 2.5rem;
41
44
  $amsterdam-link-inline-line-height: inherit;
42
45
  $amsterdam-link-inline-font-size: inherit;
@@ -47,29 +50,24 @@ $amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0,
47
50
  $amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
48
51
  $amsterdam-grid-wide-column-count: 12;
49
52
  $amsterdam-grid-medium-column-count: 8;
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.
52
53
  $amsterdam-grid-column-count: 4;
53
- $amsterdam-dialog-footer-padding-block: 1.5rem 0;
54
54
  $amsterdam-dialog-footer-gap: 1rem;
55
55
  $amsterdam-dialog-header-gap: 1rem;
56
- $amsterdam-dialog-article-padding-inline-end: 1.5rem;
57
56
  $amsterdam-dialog-form-max-block-size: 75vh;
58
57
  $amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
59
58
  $amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
60
59
  $amsterdam-dialog-form-gap: 1.5rem;
61
- $amsterdam-dialog-backdrop-background: #0006;
62
60
  $amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
63
61
  $amsterdam-dialog-border: 0;
62
+ $amsterdam-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
63
+ $amsterdam-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
64
+ $amsterdam-button-tertiary-disabled-background-color: transparent;
65
+ $amsterdam-button-tertiary-background-color: transparent;
66
+ $amsterdam-button-gap: 1rem;
64
67
  $amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
65
- $amsterdam-badge-padding-inline: 0.5rem;
66
68
  $amsterdam-alert-gap: 1rem;
67
69
  $amsterdam-alert-border-style: solid;
68
70
  $amsterdam-alert-border-width: 4px;
69
- $amsterdam-spacing-inset-xl: 2.5rem;
70
- $amsterdam-spacing-inset-lg: 1.5rem;
71
- $amsterdam-spacing-inset-md: 1rem;
72
- $amsterdam-spacing-inset-sm: 0.5rem;
73
71
  $amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
74
72
  $amsterdam-link-appearance-subtle-text-decoration-line: none;
75
73
  $amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
@@ -84,6 +82,12 @@ $amsterdam-focus-outline-offset: 2px;
84
82
  $amsterdam-border-width-lg: 3px;
85
83
  $amsterdam-border-width-md: 2px;
86
84
  $amsterdam-border-width-sm: 1px;
85
+ $amsterdam-action-submit-cursor: pointer;
86
+ $amsterdam-action-navigate-cursor: pointer;
87
+ $amsterdam-action-inert-cursor: default;
88
+ $amsterdam-action-disabled-cursor: not-allowed;
89
+ $amsterdam-action-busy-cursor: wait;
90
+ $amsterdam-action-activate-cursor: pointer;
87
91
  $amsterdam-typography-text-level-6-line-height: 1.6;
88
92
  $amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
89
93
  $amsterdam-typography-text-level-5-line-height: 1.6;
@@ -101,6 +105,21 @@ $amsterdam-typography-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.8
101
105
  $amsterdam-typography-font-weight-bold: 800;
102
106
  $amsterdam-typography-font-weight-normal: 400;
103
107
  $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
108
+ $amsterdam-space-stack-xl: 2rem;
109
+ $amsterdam-space-stack-lg: 1.5rem;
110
+ $amsterdam-space-stack-md: 1rem;
111
+ $amsterdam-space-stack-sm: .75rem;
112
+ $amsterdam-space-stack-xs: .5rem;
113
+ $amsterdam-space-inside-xl: 2rem;
114
+ $amsterdam-space-inside-lg: 1.5rem;
115
+ $amsterdam-space-inside-md: 1rem;
116
+ $amsterdam-space-inside-sm: .75rem;
117
+ $amsterdam-space-inside-xs: .5rem;
118
+ $amsterdam-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
119
+ $amsterdam-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
120
+ $amsterdam-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
121
+ $amsterdam-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
122
+ $amsterdam-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
104
123
  $amsterdam-proportion-2x-wide: 32 / 9;
105
124
  $amsterdam-proportion-x-wide: 16 / 9;
106
125
  $amsterdam-proportion-wide: 5 / 4;
@@ -122,29 +141,8 @@ $amsterdam-color-primary-red: #EC0000;
122
141
  $amsterdam-color-primary-blue: #004699;
123
142
  $amsterdam-color-primary-white: #FFFFFF;
124
143
  $amsterdam-color-primary-black: #000000;
125
- $utrecht-button-subtle-disabled-color: $amsterdam-color-neutral-grey2;
126
- $utrecht-button-subtle-focus-color: $amsterdam-color-dark-blue;
127
- $utrecht-button-subtle-hover-color: $amsterdam-color-dark-blue;
128
- $utrecht-button-subtle-color: $amsterdam-color-primary-blue;
129
- $utrecht-button-secondary-action-disabled-color: $amsterdam-color-neutral-grey2;
130
- $utrecht-button-secondary-action-disabled-background-color: $amsterdam-color-primary-white;
131
- $utrecht-button-secondary-action-hover-color: $amsterdam-color-dark-blue;
132
- $utrecht-button-secondary-action-color: $amsterdam-color-primary-blue;
133
- $utrecht-button-secondary-action-background-color: $amsterdam-color-primary-white;
134
- $utrecht-button-primary-action-hover-background-color: $amsterdam-color-dark-blue;
135
- $utrecht-button-primary-action-disabled-background-color: $amsterdam-color-neutral-grey2;
136
- $utrecht-button-primary-action-color: $amsterdam-color-primary-white;
137
- $utrecht-button-primary-action-background-color: $amsterdam-color-primary-blue;
138
- $utrecht-button-disabled-color: $amsterdam-color-primary-white;
139
- $utrecht-button-disabled-background-color: $amsterdam-color-neutral-grey2;
140
- $utrecht-button-padding-block-end: $amsterdam-spacing-inset-sm;
141
- $utrecht-button-padding-block-start: $amsterdam-spacing-inset-sm;
142
- $utrecht-button-padding-inline-end: $amsterdam-spacing-inset-md;
143
- $utrecht-button-padding-inline-start: $amsterdam-spacing-inset-md;
144
- $utrecht-button-font-family: $amsterdam-typography-font-family;
145
- $utrecht-button-color: $amsterdam-color-primary-white;
146
- $utrecht-button-background-color: $amsterdam-color-primary-blue;
147
144
  $amsterdam-unordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
145
+ $amsterdam-unordered-list-inverse-color: $amsterdam-color-primary-white;
148
146
  $amsterdam-unordered-list-font-weight: $amsterdam-typography-font-weight-normal;
149
147
  $amsterdam-unordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
150
148
  $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
@@ -171,6 +169,8 @@ $amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary
171
169
  $amsterdam-text-input-disabled-color: $amsterdam-color-neutral-grey2;
172
170
  $amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
173
171
  $amsterdam-text-input-disabled-background-color: $amsterdam-color-primary-white;
172
+ $amsterdam-text-input-padding-inline: $amsterdam-space-inside-md;
173
+ $amsterdam-text-input-padding-block: $amsterdam-space-inside-xs;
174
174
  $amsterdam-text-input-outline-offset: $amsterdam-focus-outline-offset;
175
175
  $amsterdam-text-input-line-height: $amsterdam-typography-text-level-6-line-height;
176
176
  $amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
@@ -178,7 +178,38 @@ $amsterdam-text-input-font-size: $amsterdam-typography-text-level-6-font-size;
178
178
  $amsterdam-text-input-font-family: $amsterdam-typography-font-family;
179
179
  $amsterdam-text-input-color: $amsterdam-color-primary-black;
180
180
  $amsterdam-text-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
181
+ $amsterdam-text-area-placeholder-color: $amsterdam-color-neutral-grey3;
182
+ $amsterdam-text-area-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
183
+ $amsterdam-text-area-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
184
+ $amsterdam-text-area-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
185
+ $amsterdam-text-area-disabled-cursor: $amsterdam-action-disabled-cursor;
186
+ $amsterdam-text-area-disabled-color: $amsterdam-color-neutral-grey2;
187
+ $amsterdam-text-area-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
188
+ $amsterdam-text-area-disabled-background-color: $amsterdam-color-primary-white;
189
+ $amsterdam-text-area-outline-offset: $amsterdam-focus-outline-offset;
190
+ $amsterdam-text-area-min-height: calc($amsterdam-typography-text-level-6-line-height * 1em + 2 * $amsterdam-text-area-padding-block);
191
+ $amsterdam-text-area-line-height: $amsterdam-typography-text-level-6-line-height;
192
+ $amsterdam-text-area-font-weight: $amsterdam-typography-font-weight-normal;
193
+ $amsterdam-text-area-font-size: $amsterdam-typography-text-level-6-font-size;
194
+ $amsterdam-text-area-font-family: $amsterdam-typography-font-family;
195
+ $amsterdam-text-area-color: $amsterdam-color-primary-black;
196
+ $amsterdam-text-area-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
197
+ $amsterdam-tabs-button-disabled-cursor: $amsterdam-action-disabled-cursor;
198
+ $amsterdam-tabs-button-disabled-color: $amsterdam-color-neutral-grey2;
199
+ $amsterdam-tabs-button-selected-color: $amsterdam-color-primary-white;
200
+ $amsterdam-tabs-button-selected-background-color: $amsterdam-color-primary-blue;
201
+ $amsterdam-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $amsterdam-color-dark-blue;
202
+ $amsterdam-tabs-button-hover-color: $amsterdam-color-dark-blue;
203
+ $amsterdam-tabs-button-line-height: $amsterdam-typography-text-level-5-line-height;
204
+ $amsterdam-tabs-button-font-size: $amsterdam-typography-text-level-5-font-size;
205
+ $amsterdam-tabs-button-font-weight: $amsterdam-typography-font-weight-normal;
206
+ $amsterdam-tabs-button-font-family: $amsterdam-typography-font-family;
207
+ $amsterdam-tabs-button-cursor: $amsterdam-action-activate-cursor;
208
+ $amsterdam-tabs-button-color: $amsterdam-color-primary-blue;
209
+ $amsterdam-tabs-list-border-bottom: .125rem solid $amsterdam-color-primary-blue;
181
210
  $amsterdam-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
211
+ $amsterdam-table-cell-padding-inline: $amsterdam-space-inside-md;
212
+ $amsterdam-table-cell-padding-block: $amsterdam-space-inside-md;
182
213
  $amsterdam-table-cell-border-bottom: 1px solid $amsterdam-color-neutral-grey1;
183
214
  $amsterdam-table-caption-font-weight: $amsterdam-typography-font-weight-bold;
184
215
  $amsterdam-table-line-height: $amsterdam-typography-text-level-5-line-height;
@@ -202,6 +233,8 @@ $amsterdam-spotlight-dark-green-background-color: $amsterdam-color-dark-green;
202
233
  $amsterdam-spotlight-dark-blue-background-color: $amsterdam-color-primary-blue;
203
234
  $amsterdam-spotlight-blue-background-color: $amsterdam-color-blue;
204
235
  $amsterdam-skip-link-hover-background-color: $amsterdam-color-dark-blue;
236
+ $amsterdam-skip-link-padding-inline: $amsterdam-space-inside-md;
237
+ $amsterdam-skip-link-padding-block: $amsterdam-space-inside-xs;
205
238
  $amsterdam-skip-link-outline-offset: $amsterdam-focus-outline-offset;
206
239
  $amsterdam-skip-link-line-height: $amsterdam-typography-text-level-6-line-height;
207
240
  $amsterdam-skip-link-font-size: $amsterdam-typography-text-level-6-font-size;
@@ -214,6 +247,8 @@ $amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color
214
247
  $amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-text-level-6-font-size;
215
248
  $amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-text-level-6-font-size;
216
249
  $amsterdam-search-field-input-cancel-button-color: $amsterdam-color-primary-blue;
250
+ $amsterdam-search-field-input-padding-inline: $amsterdam-space-inside-md;
251
+ $amsterdam-search-field-input-padding-block: $amsterdam-space-inside-xs;
217
252
  $amsterdam-search-field-input-outline-offset: $amsterdam-focus-outline-offset;
218
253
  $amsterdam-search-field-input-line-height: $amsterdam-typography-text-level-6-line-height;
219
254
  $amsterdam-search-field-input-font-weight: $amsterdam-typography-font-weight-normal;
@@ -221,10 +256,30 @@ $amsterdam-search-field-input-font-size: $amsterdam-typography-text-level-6-font
221
256
  $amsterdam-search-field-input-font-family: $amsterdam-typography-font-family;
222
257
  $amsterdam-search-field-input-color: $amsterdam-color-primary-black;
223
258
  $amsterdam-search-field-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
259
+ $amsterdam-search-field-button-padding-inline: $amsterdam-space-inside-xs;
260
+ $amsterdam-search-field-button-padding-block: $amsterdam-space-inside-xs;
224
261
  $amsterdam-search-field-button-hover-background-color: $amsterdam-color-dark-blue;
225
262
  $amsterdam-search-field-button-outline-offset: $amsterdam-focus-outline-offset;
226
263
  $amsterdam-search-field-button-color: $amsterdam-color-primary-white;
227
264
  $amsterdam-search-field-button-background-color: $amsterdam-color-primary-blue;
265
+ $amsterdam-row-gap-xl: $amsterdam-space-stack-xl;
266
+ $amsterdam-row-gap-lg: $amsterdam-space-stack-lg;
267
+ $amsterdam-row-gap-md: $amsterdam-space-stack-md;
268
+ $amsterdam-row-gap-sm: $amsterdam-space-stack-sm;
269
+ $amsterdam-row-gap-xs: $amsterdam-space-stack-xs;
270
+ $amsterdam-radio-hover-color: $amsterdam-color-dark-blue;
271
+ $amsterdam-radio-disabled-color: $amsterdam-color-neutral-grey3;
272
+ $amsterdam-radio-circle-invalid-hover-border-color: $amsterdam-color-primary-red;
273
+ $amsterdam-radio-circle-invalid-border-color: $amsterdam-color-primary-red;
274
+ $amsterdam-radio-circle-hover-border-color: $amsterdam-color-dark-blue;
275
+ $amsterdam-radio-circle-disabled-border-color: $amsterdam-color-neutral-grey3;
276
+ $amsterdam-radio-circle-border-color: $amsterdam-color-primary-blue;
277
+ $amsterdam-radio-outline-offset: $amsterdam-focus-outline-offset;
278
+ $amsterdam-radio-line-height: $amsterdam-typography-text-level-5-line-height;
279
+ $amsterdam-radio-font-weight: $amsterdam-typography-font-weight-normal;
280
+ $amsterdam-radio-font-size: $amsterdam-typography-text-level-5-font-size;
281
+ $amsterdam-radio-font-family: $amsterdam-typography-font-family;
282
+ $amsterdam-radio-color: $amsterdam-color-primary-black;
228
283
  $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-4-line-height;
229
284
  $amsterdam-paragraph-large-font-size: $amsterdam-typography-text-level-4-font-size;
230
285
  $amsterdam-paragraph-medium-line-height: $amsterdam-typography-text-level-5-line-height;
@@ -240,6 +295,7 @@ $amsterdam-pagination-button-current-font-weight: $amsterdam-typography-font-wei
240
295
  $amsterdam-pagination-button-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
241
296
  $amsterdam-pagination-button-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
242
297
  $amsterdam-pagination-button-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
298
+ $amsterdam-pagination-button-padding-inline: $amsterdam-space-inside-sm;
243
299
  $amsterdam-pagination-button-outline-offset: $amsterdam-focus-outline-offset;
244
300
  $amsterdam-pagination-line-height: $amsterdam-typography-text-level-5-line-height;
245
301
  $amsterdam-pagination-font-weight: $amsterdam-typography-font-weight-normal;
@@ -261,12 +317,19 @@ $amsterdam-page-heading-font-size: $amsterdam-typography-text-level-0-font-size;
261
317
  $amsterdam-page-heading-font-family: $amsterdam-typography-font-family;
262
318
  $amsterdam-page-heading-color: $amsterdam-color-primary-black;
263
319
  $amsterdam-ordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
320
+ $amsterdam-ordered-list-inverse-color: $amsterdam-color-primary-white;
264
321
  $amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
265
322
  $amsterdam-ordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
266
323
  $amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
267
324
  $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;
325
+ $amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.row-gap.md`.
326
+ $amsterdam-mega-menu-list-category-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
327
+ $amsterdam-mark-background-color: $amsterdam-color-yellow;
328
+ $amsterdam-margin-xl: $amsterdam-space-grid-xl;
329
+ $amsterdam-margin-lg: $amsterdam-space-grid-lg;
330
+ $amsterdam-margin-md: $amsterdam-space-grid-md;
331
+ $amsterdam-margin-sm: $amsterdam-space-grid-sm;
332
+ $amsterdam-margin-xs: $amsterdam-space-grid-xs;
270
333
  $amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
271
334
  $amsterdam-logo-title-color: $amsterdam-color-primary-red;
272
335
  $amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
@@ -336,18 +399,43 @@ $amsterdam-heading-inverse-color: $amsterdam-color-primary-white;
336
399
  $amsterdam-heading-font-weight: $amsterdam-typography-font-weight-bold;
337
400
  $amsterdam-heading-font-family: $amsterdam-typography-font-family;
338
401
  $amsterdam-heading-color: $amsterdam-color-primary-black;
339
- $amsterdam-header-column-gap: $amsterdam-grid-gap;
402
+ $amsterdam-header-logo-link-outline-offset: $amsterdam-focus-outline-offset;
403
+ $amsterdam-header-padding-block: $amsterdam-space-inside-md;
404
+ $amsterdam-header-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
405
+ $amsterdam-grid-row-gap-lg: $amsterdam-space-grid-lg;
406
+ $amsterdam-grid-row-gap-md: $amsterdam-space-grid-md;
407
+ $amsterdam-grid-row-gap-sm: $amsterdam-space-grid-sm;
408
+ $amsterdam-grid-padding-inline: $amsterdam-space-grid-lg;
409
+ $amsterdam-grid-padding-block-lg: $amsterdam-space-grid-lg;
410
+ $amsterdam-grid-padding-block-md: $amsterdam-space-grid-md;
411
+ $amsterdam-grid-padding-block-sm: $amsterdam-space-grid-sm;
412
+ $amsterdam-grid-column-gap: $amsterdam-space-grid-md;
413
+ $amsterdam-gap-xl: $amsterdam-space-grid-xl;
414
+ $amsterdam-gap-lg: $amsterdam-space-grid-lg;
415
+ $amsterdam-gap-md: $amsterdam-space-grid-md;
416
+ $amsterdam-gap-sm: $amsterdam-space-grid-sm;
417
+ $amsterdam-gap-xs: $amsterdam-space-grid-xs;
340
418
  $amsterdam-form-label-line-height: $amsterdam-typography-text-level-4-line-height;
341
419
  $amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
342
420
  $amsterdam-form-label-font-size: $amsterdam-typography-text-level-4-font-size;
343
421
  $amsterdam-form-label-font-family: $amsterdam-typography-font-family;
344
422
  $amsterdam-form-label-color: $amsterdam-color-primary-black;
423
+ $amsterdam-fieldset-legend-line-height: $amsterdam-typography-text-level-4-line-height;
424
+ $amsterdam-fieldset-legend-font-weight: $amsterdam-typography-font-weight-bold;
425
+ $amsterdam-fieldset-legend-font-size: $amsterdam-typography-text-level-4-font-size;
426
+ $amsterdam-fieldset-legend-font-family: $amsterdam-typography-font-family;
427
+ $amsterdam-fieldset-legend-color: $amsterdam-color-primary-black;
345
428
  $amsterdam-dialog-title-line-height: $amsterdam-typography-text-level-5-line-height;
346
429
  $amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
347
430
  $amsterdam-dialog-title-font-size: $amsterdam-typography-text-level-5-font-size;
348
431
  $amsterdam-dialog-title-font-family: $amsterdam-typography-font-family;
349
432
  $amsterdam-dialog-title-color: $amsterdam-color-primary-black;
350
433
  $amsterdam-dialog-background-color: $amsterdam-color-primary-white;
434
+ $amsterdam-column-gap-xl: $amsterdam-space-grid-xl;
435
+ $amsterdam-column-gap-lg: $amsterdam-space-grid-lg;
436
+ $amsterdam-column-gap-md: $amsterdam-space-grid-md;
437
+ $amsterdam-column-gap-sm: $amsterdam-space-grid-sm;
438
+ $amsterdam-column-gap-xs: $amsterdam-space-grid-xs;
351
439
  $amsterdam-checkbox-hover-color: $amsterdam-color-dark-blue;
352
440
  $amsterdam-checkbox-disabled-color: $amsterdam-color-neutral-grey3;
353
441
  $amsterdam-checkbox-checkmark-indeterminate-hover-background-color: $amsterdam-color-dark-blue;
@@ -378,13 +466,34 @@ $amsterdam-card-link-hover-text-decoration-line: $amsterdam-link-appearance-subt
378
466
  $amsterdam-card-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
379
467
  $amsterdam-card-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
380
468
  $amsterdam-card-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
469
+ $amsterdam-button-tertiary-disabled-color: $amsterdam-color-neutral-grey2;
470
+ $amsterdam-button-tertiary-hover-color: $amsterdam-color-dark-blue;
381
471
  $amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
472
+ $amsterdam-button-tertiary-color: $amsterdam-color-primary-blue;
382
473
  $amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
474
+ $amsterdam-button-secondary-disabled-color: $amsterdam-color-neutral-grey2;
383
475
  $amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
476
+ $amsterdam-button-secondary-disabled-background-color: $amsterdam-color-primary-white;
477
+ $amsterdam-button-secondary-hover-color: $amsterdam-color-dark-blue;
384
478
  $amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px $amsterdam-color-dark-blue;
385
479
  $amsterdam-button-secondary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
480
+ $amsterdam-button-secondary-color: $amsterdam-color-primary-blue;
481
+ $amsterdam-button-secondary-background-color: $amsterdam-color-primary-white;
482
+ $amsterdam-button-primary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
483
+ $amsterdam-button-primary-hover-background-color: $amsterdam-color-dark-blue;
484
+ $amsterdam-button-primary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
485
+ $amsterdam-button-primary-disabled-background-color: $amsterdam-color-neutral-grey2;
486
+ $amsterdam-button-primary-color: $amsterdam-color-primary-white;
487
+ $amsterdam-button-primary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
488
+ $amsterdam-button-primary-background-color: $amsterdam-color-primary-blue;
489
+ $amsterdam-button-disabled-cursor: $amsterdam-action-disabled-cursor;
490
+ $amsterdam-button-outline-offset: $amsterdam-focus-outline-offset;
491
+ $amsterdam-button-padding-inline: $amsterdam-space-inside-md;
492
+ $amsterdam-button-padding-block: $amsterdam-space-inside-xs;
386
493
  $amsterdam-button-line-height: $amsterdam-typography-text-level-5-line-height;
387
494
  $amsterdam-button-font-size: $amsterdam-typography-text-level-5-font-size;
495
+ $amsterdam-button-font-family: $amsterdam-typography-font-family;
496
+ $amsterdam-button-cursor: $amsterdam-action-activate-cursor;
388
497
  $amsterdam-breadcrumb-item-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
389
498
  $amsterdam-breadcrumb-item-link-hover-color: $amsterdam-color-dark-blue;
390
499
  $amsterdam-breadcrumb-item-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
@@ -417,6 +526,7 @@ $amsterdam-badge-dark-blue-color: $amsterdam-color-primary-white;
417
526
  $amsterdam-badge-dark-blue-background-color: $amsterdam-color-primary-blue;
418
527
  $amsterdam-badge-blue-color: $amsterdam-color-primary-black;
419
528
  $amsterdam-badge-blue-background-color: $amsterdam-color-blue;
529
+ $amsterdam-badge-padding-inline: $amsterdam-space-inside-xs;
420
530
  $amsterdam-badge-line-height: $amsterdam-typography-text-level-5-line-height;
421
531
  $amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
422
532
  $amsterdam-badge-font-size: $amsterdam-typography-text-level-5-font-size;
@@ -433,12 +543,14 @@ $amsterdam-alert-warning-border-color: $amsterdam-color-orange;
433
543
  $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
434
544
  $amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
435
545
  $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
436
- $amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
437
- $amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
438
- $amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
439
- $amsterdam-alert-padding-block-start: $amsterdam-spacing-inset-md;
546
+ $amsterdam-alert-padding-inline: $amsterdam-space-inside-lg;
547
+ $amsterdam-alert-padding-block: $amsterdam-space-inside-md;
548
+ $amsterdam-accordion-panel-padding-inline: $amsterdam-space-inside-md;
549
+ $amsterdam-accordion-panel-padding-block: $amsterdam-space-inside-md;
440
550
  $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
441
551
  $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
552
+ $amsterdam-accordion-button-padding-inline: $amsterdam-space-inside-md;
553
+ $amsterdam-accordion-button-padding-block: $amsterdam-space-inside-sm;
442
554
  $amsterdam-accordion-button-line-height: $amsterdam-typography-text-level-5-line-height;
443
555
  $amsterdam-accordion-button-font-weight: $amsterdam-typography-font-weight-bold;
444
556
  $amsterdam-accordion-button-font-size: $amsterdam-typography-text-level-5-font-size;