@amsterdam/design-system-tokens 0.1.7 → 0.2.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 (37) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/_variables.scss +240 -152
  3. package/dist/index.css +240 -152
  4. package/dist/index.d.ts +222 -134
  5. package/dist/index.js +227 -139
  6. package/dist/index.json +226 -138
  7. package/dist/index.tokens.json +388 -271
  8. package/dist/root.css +240 -152
  9. package/dist/tokens.d.ts +372 -255
  10. package/dist/tokens.js +4043 -2036
  11. package/dist/variables.less +240 -152
  12. package/package.json +2 -2
  13. package/src/brand/amsterdam/typography.tokens.json +70 -84
  14. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  15. package/src/components/amsterdam/accordion.tokens.json +8 -7
  16. package/src/components/amsterdam/alert.tokens.json +6 -5
  17. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  18. package/src/components/amsterdam/breadcrumb.tokens.json +19 -34
  19. package/src/components/amsterdam/button.tokens.json +6 -4
  20. package/src/components/amsterdam/card.tokens.json +6 -2
  21. package/src/components/amsterdam/checkbox.tokens.json +7 -13
  22. package/src/components/amsterdam/dialog.tokens.json +48 -0
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +6 -6
  25. package/src/components/amsterdam/heading.tokens.json +44 -28
  26. package/src/components/amsterdam/icon.tokens.json +37 -28
  27. package/src/components/amsterdam/link.tokens.json +41 -33
  28. package/src/components/amsterdam/logo.tokens.json +10 -0
  29. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  30. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  31. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  32. package/src/components/amsterdam/pagination.tokens.json +17 -18
  33. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  34. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  35. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  36. package/src/components/utrecht/button.tokens.json +1 -3
  37. package/src/components/amsterdam/footer.tokens.json +0 -11
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 17 Nov 2023 13:11:47 GMT
3
+ * Generated on Fri, 01 Dec 2023 15:48:43 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -25,8 +25,6 @@
25
25
  --amsterdam-switch-width: 3.5rem;
26
26
  --amsterdam-screen-x-wide-max-width: 132rem;
27
27
  --amsterdam-screen-wide-max-width: 100rem;
28
- --amsterdam-page-menu-item-hover-text-decoration: underline;
29
- --amsterdam-page-menu-item-text-decoration: none;
30
28
  --amsterdam-page-menu-item-gap: 0.5rem;
31
29
  --amsterdam-page-menu-row-gap: 0.5rem;
32
30
  --amsterdam-page-menu-column-gap: 2.5rem;
@@ -37,64 +35,79 @@
37
35
  --amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
38
36
  --amsterdam-ordered-list-list-style-type: decimal;
39
37
  --amsterdam-ordered-list-gap: 0.75rem;
40
- --amsterdam-link-standalone-hover-text-underline-offset: 7px;
41
- --amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
42
- --amsterdam-link-standalone-text-decoration-thickness: 2px;
43
- --amsterdam-link-standalone-text-underline-offset: 8px;
44
- --amsterdam-link-in-list-text-decoration: none;
45
- --amsterdam-link-in-list-hover-text-underline-offset: 7px;
46
- --amsterdam-link-in-list-hover-text-decoration-thickness: 2px;
47
- --amsterdam-link-in-list-hover-text-decoration: underline;
38
+ --amsterdam-logo-height: 2.5rem;
48
39
  --amsterdam-link-in-list-gap: 0.5em;
49
- --amsterdam-link-inline-text-decoration-thickness: 2px;
50
- --amsterdam-link-inline-text-decoration: none;
51
40
  --amsterdam-link-inline-line-height: inherit;
52
41
  --amsterdam-link-inline-font-size: inherit;
53
42
  --amsterdam-link-inline-font-family: inherit;
54
- --amsterdam-link-inline-hover-text-underline-offset: 3px;
55
- --amsterdam-link-inline-hover-text-decoration: underline;
56
43
  --amsterdam-grid-wide-column-count: 12;
57
44
  --amsterdam-grid-medium-column-count: 8;
58
- --amsterdam-grid-density-high-padding-inline: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Equals the gap. */
59
- --amsterdam-grid-density-high-gap: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
60
- --amsterdam-grid-density-low-padding-inline: clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem); /* Equals 1.5 times the gap. */
61
- --amsterdam-grid-density-low-gap: clamp(1rem, 3.125vw + 0.375rem, 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
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. */
62
49
  --amsterdam-grid-column-count: 4;
63
- --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
50
+ --amsterdam-dialog-footer-padding-block: 1.5rem 0;
51
+ --amsterdam-dialog-footer-gap: 1rem;
52
+ --amsterdam-dialog-header-gap: 1rem;
53
+ --amsterdam-dialog-article-padding-inline-end: 1.5rem;
54
+ --amsterdam-dialog-form-max-block-size: 75vh;
55
+ --amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
56
+ --amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
57
+ --amsterdam-dialog-form-gap: 1.5rem;
58
+ --amsterdam-dialog-close-background-color: transparent;
59
+ --amsterdam-dialog-backdrop-background: #0006;
60
+ --amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
61
+ --amsterdam-dialog-border: 0;
64
62
  --amsterdam-alert-close-background-color: transparent;
65
63
  --amsterdam-alert-gap: 1rem;
66
64
  --amsterdam-spacing-inset-xl: 2.5rem;
67
65
  --amsterdam-spacing-inset-lg: 1.5rem;
68
66
  --amsterdam-spacing-inset-md: 1rem;
69
67
  --amsterdam-spacing-inset-sm: 0.5rem;
68
+ --amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
69
+ --amsterdam-link-appearance-subtle-text-decoration-line: none;
70
+ --amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
71
+ --amsterdam-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
72
+ --amsterdam-link-appearance-regular-text-decoration-line: underline;
73
+ --amsterdam-link-appearance-text-underline-offset: 0.375rem;
74
+ --amsterdam-link-appearance-text-decoration-thickness: 0.125rem;
70
75
  --amsterdam-focus-outline-offset: 2px;
71
76
  --amsterdam-border-width-lg: 3px;
72
77
  --amsterdam-border-width-md: 2px;
73
78
  --amsterdam-border-width-sm: 1px;
74
- --amsterdam-typography-text-level-7-line-height: 1.6;
75
- --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
76
- --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
77
- --amsterdam-typography-text-level-6-line-height: 1.6;
78
- --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
79
- --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
80
- --amsterdam-typography-text-level-5-line-height: 1.5;
81
- --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
82
- --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
83
- --amsterdam-typography-text-level-4-line-height: 1.4;
84
- --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
85
- --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
86
- --amsterdam-typography-text-level-3-line-height: 1.4;
87
- --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
88
- --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
89
- --amsterdam-typography-text-level-2-line-height: 1.3;
90
- --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
91
- --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
92
- --amsterdam-typography-text-level-1-line-height: 1.2;
93
- --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
94
- --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
95
- --amsterdam-typography-text-level-0-line-height: 1.1;
96
- --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
97
- --amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem);
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
+ --amsterdam-typography-compact-text-level-6-line-height: 1.6;
82
+ --amsterdam-typography-compact-text-level-6-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
83
+ --amsterdam-typography-compact-text-level-5-line-height: 1.5;
84
+ --amsterdam-typography-compact-text-level-5-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
85
+ --amsterdam-typography-compact-text-level-4-line-height: 1.4;
86
+ --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.4;
88
+ --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.3;
90
+ --amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
91
+ --amsterdam-typography-compact-text-level-1-line-height: 1.2;
92
+ --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.1;
94
+ --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
+ --amsterdam-typography-spacious-text-level-6-line-height: 1.6;
98
+ --amsterdam-typography-spacious-text-level-6-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
99
+ --amsterdam-typography-spacious-text-level-5-line-height: 1.5;
100
+ --amsterdam-typography-spacious-text-level-5-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
101
+ --amsterdam-typography-spacious-text-level-4-line-height: 1.4;
102
+ --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.4;
104
+ --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.3;
106
+ --amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
107
+ --amsterdam-typography-spacious-text-level-1-line-height: 1.2;
108
+ --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.1;
110
+ --amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
98
111
  --amsterdam-typography-font-weight-bold: 800;
99
112
  --amsterdam-typography-font-weight-normal: 400;
100
113
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -139,27 +152,32 @@
139
152
  --utrecht-button-padding-block-start: var(--amsterdam-spacing-inset-sm);
140
153
  --utrecht-button-padding-inline-end: var(--amsterdam-spacing-inset-md);
141
154
  --utrecht-button-padding-inline-start: var(--amsterdam-spacing-inset-md);
142
- --utrecht-button-line-height: var(--amsterdam-typography-text-level-6-line-height);
143
155
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
144
156
  --utrecht-button-color: var(--amsterdam-color-primary-white);
145
157
  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
146
- --amsterdam-unordered-list-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
147
- --amsterdam-unordered-list-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
148
- --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-6-line-height);
158
+ --amsterdam-unordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
159
+ --amsterdam-unordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
160
+ --amsterdam-unordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
161
+ --amsterdam-unordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
149
162
  --amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
150
163
  --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
151
164
  --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
152
165
  --amsterdam-top-task-link-outline-offset: var(--amsterdam-focus-outline-offset);
153
- --amsterdam-top-task-link-label-wide-font-size: var(--amsterdam-typography-text-level-4-wide-font-size);
154
- --amsterdam-top-task-link-label-narrow-font-size: var(--amsterdam-typography-text-level-4-narrow-font-size);
155
- --amsterdam-top-task-link-label-line-height: var(--amsterdam-typography-text-level-4-line-height);
166
+ --amsterdam-top-task-link-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
167
+ --amsterdam-top-task-link-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
168
+ --amsterdam-top-task-link-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
169
+ --amsterdam-top-task-link-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
170
+ --amsterdam-top-task-link-label-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
156
171
  --amsterdam-top-task-link-label-hover-color: var(--amsterdam-color-dark-blue);
172
+ --amsterdam-top-task-link-label-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
173
+ --amsterdam-top-task-link-label-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
174
+ --amsterdam-top-task-link-label-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
157
175
  --amsterdam-top-task-link-label-font-weight: var(--amsterdam-typography-font-weight-bold);
158
176
  --amsterdam-top-task-link-label-font-family: var(--amsterdam-typography-font-family);
159
- --amsterdam-top-task-link-label-color: var(--amsterdam-color-primary-blue);
160
- --amsterdam-top-task-link-description-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
161
- --amsterdam-top-task-link-description-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
162
- --amsterdam-top-task-link-description-line-height: var(--amsterdam-typography-text-level-7-line-height);
177
+ --amsterdam-top-task-link-description-compact-line-height: var(--amsterdam-typography-compact-text-level-7-line-height);
178
+ --amsterdam-top-task-link-description-compact-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
179
+ --amsterdam-top-task-link-description-spacious-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
180
+ --amsterdam-top-task-link-description-spacious-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
163
181
  --amsterdam-top-task-link-description-font-weight: var(--amsterdam-typography-font-weight-normal);
164
182
  --amsterdam-top-task-link-description-font-family: var(--amsterdam-typography-font-family);
165
183
  --amsterdam-top-task-link-description-color: var(--amsterdam-color-primary-black);
@@ -170,81 +188,109 @@
170
188
  --amsterdam-switch-thumb-background-color: var(--amsterdam-color-primary-white);
171
189
  --amsterdam-switch-background-color: var(--amsterdam-color-neutral-grey3);
172
190
  --amsterdam-switch-font-family: var(--amsterdam-typography-font-family);
173
- --amsterdam-paragraph-large-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
174
- --amsterdam-paragraph-large-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
175
- --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-5-line-height);
176
- --amsterdam-paragraph-small-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
177
- --amsterdam-paragraph-small-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
178
- --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-7-line-height);
179
- --amsterdam-paragraph-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
180
- --amsterdam-paragraph-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
181
- --amsterdam-paragraph-line-height: var(--amsterdam-typography-text-level-6-line-height);
191
+ --amsterdam-paragraph-compact-large-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
192
+ --amsterdam-paragraph-compact-large-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
193
+ --amsterdam-paragraph-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
194
+ --amsterdam-paragraph-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
195
+ --amsterdam-paragraph-compact-small-line-height: var(--amsterdam-typography-compact-text-level-7-line-height);
196
+ --amsterdam-paragraph-compact-small-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
197
+ --amsterdam-paragraph-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
198
+ --amsterdam-paragraph-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
199
+ --amsterdam-paragraph-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
200
+ --amsterdam-paragraph-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
201
+ --amsterdam-paragraph-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
202
+ --amsterdam-paragraph-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
182
203
  --amsterdam-paragraph-inverse-color: var(--amsterdam-color-primary-white);
183
204
  --amsterdam-paragraph-font-weight: var(--amsterdam-typography-font-weight-normal);
184
205
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
185
206
  --amsterdam-paragraph-color: var(--amsterdam-color-primary-black);
186
- --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
187
- --amsterdam-pagination-button-hover-color: var(--amsterdam-color-dark-blue);
207
+ --amsterdam-pagination-button-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
188
208
  --amsterdam-pagination-button-current-font-weight: var(--amsterdam-typography-font-weight-bold);
189
- --amsterdam-pagination-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
190
- --amsterdam-pagination-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
191
- --amsterdam-pagination-line-height: var(--amsterdam-typography-text-level-6-line-height);
209
+ --amsterdam-pagination-button-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
210
+ --amsterdam-pagination-button-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
211
+ --amsterdam-pagination-button-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
212
+ --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
213
+ --amsterdam-pagination-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
214
+ --amsterdam-pagination-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
215
+ --amsterdam-pagination-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
216
+ --amsterdam-pagination-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
192
217
  --amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
193
218
  --amsterdam-pagination-font-family: var(--amsterdam-typography-font-family);
194
- --amsterdam-pagination-color: var(--amsterdam-color-primary-blue);
195
- --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-primary-black);
196
- --amsterdam-page-menu-item-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
197
- --amsterdam-page-menu-item-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
198
- --amsterdam-page-menu-item-line-height: var(--amsterdam-typography-text-level-7-line-height);
219
+ --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-7-line-height);
221
+ --amsterdam-page-menu-item-compact-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
222
+ --amsterdam-page-menu-item-spacious-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
223
+ --amsterdam-page-menu-item-spacious-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
224
+ --amsterdam-page-menu-item-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
225
+ --amsterdam-page-menu-item-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
226
+ --amsterdam-page-menu-item-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
227
+ --amsterdam-page-menu-item-outline-offset: var(--amsterdam-focus-outline-offset);
199
228
  --amsterdam-page-menu-item-font-weight: var(--amsterdam-typography-font-weight-normal);
200
229
  --amsterdam-page-menu-item-font-family: var(--amsterdam-typography-font-family);
201
- --amsterdam-page-menu-item-color: var(--amsterdam-color-primary-black);
230
+ --amsterdam-page-heading-compact-line-height: var(--amsterdam-typography-compact-text-level-0-font-size);
231
+ --amsterdam-page-heading-compact-font-size: var(--amsterdam-typography-compact-text-level-0-font-size);
232
+ --amsterdam-page-heading-spacious-line-height: var(--amsterdam-typography-spacious-text-level-0-font-size);
233
+ --amsterdam-page-heading-spacious-font-size: var(--amsterdam-typography-spacious-text-level-0-font-size);
202
234
  --amsterdam-page-heading-inverse-color: var(--amsterdam-color-primary-white);
203
235
  --amsterdam-page-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
204
- --amsterdam-page-heading-wide-font-size: var(--amsterdam-typography-text-level-0-wide-font-size);
205
- --amsterdam-page-heading-narrow-font-size: var(--amsterdam-typography-text-level-0-narrow-font-size);
206
- --amsterdam-page-heading-line-height: var(--amsterdam-typography-text-level-0-line-height);
207
236
  --amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
208
237
  --amsterdam-page-heading-color: var(--amsterdam-color-primary-black);
209
- --amsterdam-ordered-list-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
210
- --amsterdam-ordered-list-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
211
- --amsterdam-ordered-list-line-height: var(--amsterdam-typography-text-level-6-line-height);
238
+ --amsterdam-ordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
239
+ --amsterdam-ordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
240
+ --amsterdam-ordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
241
+ --amsterdam-ordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
212
242
  --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
213
243
  --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
214
244
  --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
215
- --amsterdam-link-on-background-light-visited-color: var(--amsterdam-color-primary-black);
216
- --amsterdam-link-on-background-light-hover-color: var(--amsterdam-color-primary-black);
217
- --amsterdam-link-on-background-light-color: var(--amsterdam-color-primary-black);
218
- --amsterdam-link-on-background-dark-visited-color: var(--amsterdam-color-primary-white);
219
- --amsterdam-link-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
220
- --amsterdam-link-on-background-dark-color: var(--amsterdam-color-primary-white);
221
- --amsterdam-link-standalone-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
222
- --amsterdam-link-standalone-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
223
- --amsterdam-link-standalone-line-height: var(--amsterdam-typography-text-level-6-line-height);
224
- --amsterdam-link-in-list-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
225
- --amsterdam-link-in-list-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
226
- --amsterdam-link-in-list-line-height: var(--amsterdam-typography-text-level-7-line-height);
245
+ --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
246
+ --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
247
+ --amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
248
+ --amsterdam-link-standalone-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
249
+ --amsterdam-link-standalone-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
250
+ --amsterdam-link-standalone-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
251
+ --amsterdam-link-standalone-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
252
+ --amsterdam-link-standalone-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
253
+ --amsterdam-link-standalone-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
254
+ --amsterdam-link-standalone-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
255
+ --amsterdam-link-standalone-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
256
+ --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-6-line-height);
258
+ --amsterdam-link-in-list-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
259
+ --amsterdam-link-in-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
260
+ --amsterdam-link-in-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
261
+ --amsterdam-link-in-list-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
262
+ --amsterdam-link-in-list-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
263
+ --amsterdam-link-in-list-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
264
+ --amsterdam-link-in-list-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
227
265
  --amsterdam-link-inline-visited-color: var(--amsterdam-color-purple);
228
- --amsterdam-link-hover-color: var(--amsterdam-color-dark-blue);
266
+ --amsterdam-link-inline-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
267
+ --amsterdam-link-inline-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
268
+ --amsterdam-link-inline-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
269
+ --amsterdam-link-inline-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
270
+ --amsterdam-link-inline-text-decoration-line: var(--amsterdam-link-appearance-regular-text-decoration-line);
271
+ --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
229
272
  --amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
230
273
  --amsterdam-link-font-family: var(--amsterdam-typography-font-family);
231
- --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
232
- --amsterdam-link-color: var(--amsterdam-color-primary-blue);
233
- --amsterdam-icon-size-7-container-multiplier: var(--amsterdam-typography-text-level-7-line-height);
234
- --amsterdam-icon-size-7-icon-size-wide: var(--amsterdam-typography-text-level-7-wide-font-size);
235
- --amsterdam-icon-size-7-icon-size-narrow: var(--amsterdam-typography-text-level-7-narrow-font-size);
236
- --amsterdam-icon-size-6-container-multiplier: var(--amsterdam-typography-text-level-6-line-height);
237
- --amsterdam-icon-size-6-icon-size-wide: var(--amsterdam-typography-text-level-6-wide-font-size);
238
- --amsterdam-icon-size-6-icon-size-narrow: var(--amsterdam-typography-text-level-6-narrow-font-size);
239
- --amsterdam-icon-size-5-container-multiplier: var(--amsterdam-typography-text-level-5-line-height);
240
- --amsterdam-icon-size-5-icon-size-wide: var(--amsterdam-typography-text-level-5-wide-font-size);
241
- --amsterdam-icon-size-5-icon-size-narrow: var(--amsterdam-typography-text-level-5-narrow-font-size);
242
- --amsterdam-icon-size-4-container-multiplier: var(--amsterdam-typography-text-level-4-line-height);
243
- --amsterdam-icon-size-4-icon-size-wide: var(--amsterdam-typography-text-level-4-wide-font-size);
244
- --amsterdam-icon-size-4-icon-size-narrow: var(--amsterdam-typography-text-level-4-narrow-font-size);
245
- --amsterdam-icon-size-3-container-multiplier: var(--amsterdam-typography-text-level-3-line-height);
246
- --amsterdam-icon-size-3-icon-size-wide: var(--amsterdam-typography-text-level-3-wide-font-size);
247
- --amsterdam-icon-size-3-icon-size-narrow: var(--amsterdam-typography-text-level-3-narrow-font-size);
274
+ --amsterdam-icon-compact-size-7-line-height: var(--amsterdam-typography-compact-text-level-7-line-height);
275
+ --amsterdam-icon-compact-size-7-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
276
+ --amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
277
+ --amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
278
+ --amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
279
+ --amsterdam-icon-compact-size-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
280
+ --amsterdam-icon-compact-size-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
281
+ --amsterdam-icon-compact-size-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
282
+ --amsterdam-icon-compact-size-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
283
+ --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
+ --amsterdam-icon-spacious-size-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
287
+ --amsterdam-icon-spacious-size-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
288
+ --amsterdam-icon-spacious-size-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
289
+ --amsterdam-icon-spacious-size-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
290
+ --amsterdam-icon-spacious-size-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
291
+ --amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
292
+ --amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
293
+ --amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
248
294
  --amsterdam-highlight-yellow-background-color: var(--amsterdam-color-yellow);
249
295
  --amsterdam-highlight-purple-background-color: var(--amsterdam-color-purple);
250
296
  --amsterdam-highlight-orange-background-color: var(--amsterdam-color-orange);
@@ -253,40 +299,52 @@
253
299
  --amsterdam-highlight-green-background-color: var(--amsterdam-color-green);
254
300
  --amsterdam-highlight-dark-green-background-color: var(--amsterdam-color-dark-green);
255
301
  --amsterdam-highlight-blue-background-color: var(--amsterdam-color-primary-blue);
302
+ --amsterdam-heading-compact-level-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
303
+ --amsterdam-heading-compact-level-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
304
+ --amsterdam-heading-compact-level-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
305
+ --amsterdam-heading-compact-level-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
306
+ --amsterdam-heading-compact-level-2-font-size: var(--amsterdam-typography-compact-text-level-2-font-size);
307
+ --amsterdam-heading-compact-level-2-line-height: var(--amsterdam-typography-compact-text-level-2-line-height);
308
+ --amsterdam-heading-compact-level-1-font-size: var(--amsterdam-typography-compact-text-level-1-font-size);
309
+ --amsterdam-heading-compact-level-1-line-height: var(--amsterdam-typography-compact-text-level-1-line-height);
310
+ --amsterdam-heading-spacious-level-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
311
+ --amsterdam-heading-spacious-level-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
312
+ --amsterdam-heading-spacious-level-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
313
+ --amsterdam-heading-spacious-level-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
314
+ --amsterdam-heading-spacious-level-2-font-size: var(--amsterdam-typography-spacious-text-level-2-font-size);
315
+ --amsterdam-heading-spacious-level-2-line-height: var(--amsterdam-typography-spacious-text-level-2-line-height);
316
+ --amsterdam-heading-spacious-level-1-font-size: var(--amsterdam-typography-spacious-text-level-1-font-size);
317
+ --amsterdam-heading-spacious-level-1-line-height: var(--amsterdam-typography-spacious-text-level-1-line-height);
256
318
  --amsterdam-heading-inverse-color: var(--amsterdam-color-primary-white);
257
319
  --amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
258
320
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
259
321
  --amsterdam-heading-color: var(--amsterdam-color-primary-black);
260
- --amsterdam-heading-4-wide-font-size: var(--amsterdam-typography-text-level-4-wide-font-size);
261
- --amsterdam-heading-4-narrow-font-size: var(--amsterdam-typography-text-level-4-narrow-font-size);
262
- --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
263
- --amsterdam-heading-3-wide-font-size: var(--amsterdam-typography-text-level-3-wide-font-size);
264
- --amsterdam-heading-3-narrow-font-size: var(--amsterdam-typography-text-level-3-narrow-font-size);
265
- --amsterdam-heading-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
266
- --amsterdam-heading-2-wide-font-size: var(--amsterdam-typography-text-level-2-wide-font-size);
267
- --amsterdam-heading-2-narrow-font-size: var(--amsterdam-typography-text-level-2-narrow-font-size);
268
- --amsterdam-heading-2-line-height: var(--amsterdam-typography-text-level-2-line-height);
269
- --amsterdam-heading-1-wide-font-size: var(--amsterdam-typography-text-level-1-wide-font-size);
270
- --amsterdam-heading-1-narrow-font-size: var(--amsterdam-typography-text-level-1-narrow-font-size);
271
- --amsterdam-heading-1-line-height: var(--amsterdam-typography-text-level-1-line-height);
272
- --amsterdam-form-label-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
273
- --amsterdam-form-label-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
274
- --amsterdam-form-label-line-height: var(--amsterdam-typography-text-level-7-line-height);
322
+ --amsterdam-form-label-compact-line-height: var(--amsterdam-typography-compact-text-level-7-line-height);
323
+ --amsterdam-form-label-compact-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
324
+ --amsterdam-form-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
325
+ --amsterdam-form-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
275
326
  --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
276
327
  --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
277
328
  --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
278
- --amsterdam-footer-top-background-color: var(--amsterdam-color-primary-blue);
279
- --amsterdam-checkbox-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
280
- --amsterdam-checkbox-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
281
- --amsterdam-checkbox-line-height: var(--amsterdam-typography-text-level-6-line-height);
329
+ --amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
330
+ --amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
331
+ --amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
332
+ --amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
333
+ --amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
334
+ --amsterdam-dialog-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
335
+ --amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
336
+ --amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
337
+ --amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
338
+ --amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
339
+ --amsterdam-checkbox-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
340
+ --amsterdam-checkbox-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
341
+ --amsterdam-checkbox-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
342
+ --amsterdam-checkbox-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
282
343
  --amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
283
344
  --amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
284
345
  --amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
285
346
  --amsterdam-checkbox-font-family: var(--amsterdam-typography-font-family);
286
347
  --amsterdam-checkbox-disabled-color: var(--amsterdam-color-neutral-grey3);
287
- --amsterdam-checkbox-checkmark-multiplier: var(--amsterdam-typography-text-level-6-line-height);
288
- --amsterdam-checkbox-checkmark-wide-size: var(--amsterdam-typography-text-level-6-wide-font-size);
289
- --amsterdam-checkbox-checkmark-narrow-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
290
348
  --amsterdam-checkbox-checkmark-indeterminate-hover-background-color: var(--amsterdam-color-dark-blue);
291
349
  --amsterdam-checkbox-checkmark-indeterminate-background-color: var(--amsterdam-color-primary-blue);
292
350
  --amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--amsterdam-color-primary-red);
@@ -306,28 +364,36 @@
306
364
  --amsterdam-checkbox-checkmark-border-color: var(--amsterdam-color-primary-blue);
307
365
  --amsterdam-checkbox-color: var(--amsterdam-color-primary-black);
308
366
  --amsterdam-card-outline-offset: var(--amsterdam-focus-outline-offset);
309
- --amsterdam-card-link-hover-color: var(--amsterdam-color-dark-blue);
310
- --amsterdam-card-link-color: var(--amsterdam-color-primary-blue);
367
+ --amsterdam-card-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
368
+ --amsterdam-card-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
369
+ --amsterdam-card-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
370
+ --amsterdam-card-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
311
371
  --amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
312
372
  --amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
313
373
  --amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
314
374
  --amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
315
375
  --amsterdam-button-secondary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
316
- --amsterdam-button-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
317
- --amsterdam-button-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
318
- --amsterdam-breadcrumb-item-link-focus-color: var(--amsterdam-color-dark-blue);
319
- --amsterdam-breadcrumb-item-link-hover-box-shadow: inset 0 -2px 0 0 var(--amsterdam-color-dark-blue);
376
+ --amsterdam-button-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
377
+ --amsterdam-button-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
378
+ --amsterdam-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
379
+ --amsterdam-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
380
+ --amsterdam-breadcrumb-compact-line-height: var(--amsterdam-typography-compact-text-level-7-line-height);
381
+ --amsterdam-breadcrumb-compact-font-size: var(--amsterdam-typography-compact-text-level-7-font-size);
382
+ --amsterdam-breadcrumb-spacious-line-height: var(--amsterdam-typography-spacious-text-level-7-line-height);
383
+ --amsterdam-breadcrumb-spacious-font-size: var(--amsterdam-typography-spacious-text-level-7-font-size);
384
+ --amsterdam-breadcrumb-item-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
320
385
  --amsterdam-breadcrumb-item-link-hover-color: var(--amsterdam-color-dark-blue);
386
+ --amsterdam-breadcrumb-item-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
387
+ --amsterdam-breadcrumb-item-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
388
+ --amsterdam-breadcrumb-item-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
321
389
  --amsterdam-breadcrumb-item-link-outline-offset: var(--amsterdam-focus-outline-offset);
322
- --amsterdam-breadcrumb-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
323
- --amsterdam-breadcrumb-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
324
- --amsterdam-breadcrumb-line-height: var(--amsterdam-typography-text-level-7-line-height);
390
+ --amsterdam-breadcrumb-separator-background-color: var(--amsterdam-color-primary-blue);
325
391
  --amsterdam-breadcrumb-font-weight: var(--amsterdam-typography-font-weight-normal);
326
392
  --amsterdam-breadcrumb-font-family: var(--amsterdam-typography-font-family);
327
- --amsterdam-breadcrumb-color: var(--amsterdam-color-primary-blue);
328
- --amsterdam-blockquote-wide-font-size: var(--amsterdam-typography-text-level-3-wide-font-size);
329
- --amsterdam-blockquote-narrow-font-size: var(--amsterdam-typography-text-level-3-narrow-font-size);
330
- --amsterdam-blockquote-line-height: var(--amsterdam-typography-text-level-3-line-height);
393
+ --amsterdam-blockquote-compact-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
394
+ --amsterdam-blockquote-compact-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
395
+ --amsterdam-blockquote-spacious-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
396
+ --amsterdam-blockquote-spacious-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
331
397
  --amsterdam-blockquote-inverse-color: var(--amsterdam-color-primary-white);
332
398
  --amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
333
399
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
@@ -344,9 +410,10 @@
344
410
  --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
345
411
  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
346
412
  --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
347
- --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
348
- --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
349
- --amsterdam-alert-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
413
+ --amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
414
+ --amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
415
+ --amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
416
+ --amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
350
417
  --amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
351
418
  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
352
419
  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
@@ -356,12 +423,33 @@
356
423
  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
357
424
  --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
358
425
  --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
426
+ --amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
427
+ --amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
428
+ --amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
429
+ --amsterdam-accordion-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
359
430
  --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
360
- --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
361
- --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
362
- --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
363
431
  --amsterdam-accordion-button-font-weight: var(--amsterdam-typography-font-weight-bold);
364
432
  --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
365
433
  --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
366
434
  --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
435
+ --amsterdam-link-appearance-on-background-light-color: var(--amsterdam-color-primary-black);
436
+ --amsterdam-link-appearance-on-background-dark-color: var(--amsterdam-color-primary-white);
437
+ --amsterdam-link-appearance-hover-color: var(--amsterdam-color-dark-blue);
438
+ --amsterdam-link-appearance-color: var(--amsterdam-color-primary-blue);
439
+ --amsterdam-top-task-link-label-color: var(--amsterdam-link-appearance-color);
440
+ --amsterdam-pagination-button-hover-color: var(--amsterdam-link-appearance-hover-color);
441
+ --amsterdam-pagination-color: var(--amsterdam-link-appearance-color);
442
+ --amsterdam-page-menu-item-hover-color: var(--amsterdam-link-appearance-hover-color);
443
+ --amsterdam-page-menu-item-color: var(--amsterdam-link-appearance-color);
444
+ --amsterdam-link-on-background-light-visited-color: var(--amsterdam-link-appearance-on-background-light-color);
445
+ --amsterdam-link-on-background-light-hover-color: var(--amsterdam-link-appearance-on-background-light-color);
446
+ --amsterdam-link-on-background-light-color: var(--amsterdam-link-appearance-on-background-light-color);
447
+ --amsterdam-link-on-background-dark-visited-color: var(--amsterdam-link-appearance-on-background-dark-color);
448
+ --amsterdam-link-on-background-dark-hover-color: var(--amsterdam-link-appearance-on-background-dark-color);
449
+ --amsterdam-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
450
+ --amsterdam-link-hover-color: var(--amsterdam-link-appearance-hover-color);
451
+ --amsterdam-link-color: var(--amsterdam-link-appearance-color);
452
+ --amsterdam-card-link-hover-color: var(--amsterdam-link-appearance-hover-color);
453
+ --amsterdam-card-link-color: var(--amsterdam-link-appearance-color);
454
+ --amsterdam-breadcrumb-item-link-color: var(--amsterdam-link-appearance-color);
367
455
  }