@amsterdam/design-system-tokens 0.1.8 → 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 (35) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/_variables.scss +218 -154
  3. package/dist/index.css +218 -154
  4. package/dist/index.d.ts +200 -136
  5. package/dist/index.js +205 -141
  6. package/dist/index.json +204 -140
  7. package/dist/index.tokens.json +336 -269
  8. package/dist/root.css +218 -154
  9. package/dist/tokens.d.ts +324 -257
  10. package/dist/tokens.js +3343 -1864
  11. package/dist/variables.less +218 -154
  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 +6 -5
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +2 -2
  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/ordered-list.tokens.json +6 -5
  29. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  30. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  31. package/src/components/amsterdam/pagination.tokens.json +17 -18
  32. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  33. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  34. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  35. package/src/components/utrecht/button.tokens.json +1 -3
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 27 Nov 2023 11:07:10 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;
@@ -38,28 +36,16 @@
38
36
  --amsterdam-ordered-list-list-style-type: decimal;
39
37
  --amsterdam-ordered-list-gap: 0.75rem;
40
38
  --amsterdam-logo-height: 2.5rem;
41
- --amsterdam-link-standalone-hover-text-underline-offset: 7px;
42
- --amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
43
- --amsterdam-link-standalone-text-decoration-thickness: 2px;
44
- --amsterdam-link-standalone-text-underline-offset: 8px;
45
- --amsterdam-link-in-list-text-decoration: none;
46
- --amsterdam-link-in-list-hover-text-underline-offset: 7px;
47
- --amsterdam-link-in-list-hover-text-decoration-thickness: 2px;
48
- --amsterdam-link-in-list-hover-text-decoration: underline;
49
39
  --amsterdam-link-in-list-gap: 0.5em;
50
- --amsterdam-link-inline-text-decoration-thickness: 2px;
51
- --amsterdam-link-inline-text-decoration: none;
52
40
  --amsterdam-link-inline-line-height: inherit;
53
41
  --amsterdam-link-inline-font-size: inherit;
54
42
  --amsterdam-link-inline-font-family: inherit;
55
- --amsterdam-link-inline-hover-text-underline-offset: 3px;
56
- --amsterdam-link-inline-hover-text-decoration: underline;
57
43
  --amsterdam-grid-wide-column-count: 12;
58
44
  --amsterdam-grid-medium-column-count: 8;
59
- --amsterdam-grid-density-high-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
60
- --amsterdam-grid-density-high-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
61
- --amsterdam-grid-density-low-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
62
- --amsterdam-grid-density-low-gap: clamp(1rem, calc(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. */
63
49
  --amsterdam-grid-column-count: 4;
64
50
  --amsterdam-dialog-footer-padding-block: 1.5rem 0;
65
51
  --amsterdam-dialog-footer-gap: 1rem;
@@ -73,41 +59,55 @@
73
59
  --amsterdam-dialog-backdrop-background: #0006;
74
60
  --amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
75
61
  --amsterdam-dialog-border: 0;
76
- --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
77
62
  --amsterdam-alert-close-background-color: transparent;
78
63
  --amsterdam-alert-gap: 1rem;
79
64
  --amsterdam-spacing-inset-xl: 2.5rem;
80
65
  --amsterdam-spacing-inset-lg: 1.5rem;
81
66
  --amsterdam-spacing-inset-md: 1rem;
82
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;
83
75
  --amsterdam-focus-outline-offset: 2px;
84
76
  --amsterdam-border-width-lg: 3px;
85
77
  --amsterdam-border-width-md: 2px;
86
78
  --amsterdam-border-width-sm: 1px;
87
- --amsterdam-typography-text-level-7-line-height: 1.6;
88
- --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
89
- --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
90
- --amsterdam-typography-text-level-6-line-height: 1.6;
91
- --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
92
- --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
93
- --amsterdam-typography-text-level-5-line-height: 1.5;
94
- --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
95
- --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
96
- --amsterdam-typography-text-level-4-line-height: 1.4;
97
- --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
98
- --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
99
- --amsterdam-typography-text-level-3-line-height: 1.4;
100
- --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
101
- --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
102
- --amsterdam-typography-text-level-2-line-height: 1.3;
103
- --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
104
- --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
105
- --amsterdam-typography-text-level-1-line-height: 1.2;
106
- --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
107
- --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
108
- --amsterdam-typography-text-level-0-line-height: 1.1;
109
- --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
110
- --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);
111
111
  --amsterdam-typography-font-weight-bold: 800;
112
112
  --amsterdam-typography-font-weight-normal: 400;
113
113
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -152,27 +152,32 @@
152
152
  --utrecht-button-padding-block-start: var(--amsterdam-spacing-inset-sm);
153
153
  --utrecht-button-padding-inline-end: var(--amsterdam-spacing-inset-md);
154
154
  --utrecht-button-padding-inline-start: var(--amsterdam-spacing-inset-md);
155
- --utrecht-button-line-height: var(--amsterdam-typography-text-level-6-line-height);
156
155
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
157
156
  --utrecht-button-color: var(--amsterdam-color-primary-white);
158
157
  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
159
- --amsterdam-unordered-list-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
160
- --amsterdam-unordered-list-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
161
- --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);
162
162
  --amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
163
163
  --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
164
164
  --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
165
165
  --amsterdam-top-task-link-outline-offset: var(--amsterdam-focus-outline-offset);
166
- --amsterdam-top-task-link-label-wide-font-size: var(--amsterdam-typography-text-level-4-wide-font-size);
167
- --amsterdam-top-task-link-label-narrow-font-size: var(--amsterdam-typography-text-level-4-narrow-font-size);
168
- --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);
169
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);
170
175
  --amsterdam-top-task-link-label-font-weight: var(--amsterdam-typography-font-weight-bold);
171
176
  --amsterdam-top-task-link-label-font-family: var(--amsterdam-typography-font-family);
172
- --amsterdam-top-task-link-label-color: var(--amsterdam-color-primary-blue);
173
- --amsterdam-top-task-link-description-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
174
- --amsterdam-top-task-link-description-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
175
- --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);
176
181
  --amsterdam-top-task-link-description-font-weight: var(--amsterdam-typography-font-weight-normal);
177
182
  --amsterdam-top-task-link-description-font-family: var(--amsterdam-typography-font-family);
178
183
  --amsterdam-top-task-link-description-color: var(--amsterdam-color-primary-black);
@@ -183,84 +188,109 @@
183
188
  --amsterdam-switch-thumb-background-color: var(--amsterdam-color-primary-white);
184
189
  --amsterdam-switch-background-color: var(--amsterdam-color-neutral-grey3);
185
190
  --amsterdam-switch-font-family: var(--amsterdam-typography-font-family);
186
- --amsterdam-paragraph-large-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
187
- --amsterdam-paragraph-large-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
188
- --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-5-line-height);
189
- --amsterdam-paragraph-small-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
190
- --amsterdam-paragraph-small-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
191
- --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-7-line-height);
192
- --amsterdam-paragraph-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
193
- --amsterdam-paragraph-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
194
- --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);
195
203
  --amsterdam-paragraph-inverse-color: var(--amsterdam-color-primary-white);
196
204
  --amsterdam-paragraph-font-weight: var(--amsterdam-typography-font-weight-normal);
197
205
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
198
206
  --amsterdam-paragraph-color: var(--amsterdam-color-primary-black);
199
- --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
200
- --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);
201
208
  --amsterdam-pagination-button-current-font-weight: var(--amsterdam-typography-font-weight-bold);
202
- --amsterdam-pagination-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
203
- --amsterdam-pagination-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
204
- --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);
205
217
  --amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
206
218
  --amsterdam-pagination-font-family: var(--amsterdam-typography-font-family);
207
- --amsterdam-pagination-color: var(--amsterdam-color-primary-blue);
208
- --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-primary-black);
209
- --amsterdam-page-menu-item-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
210
- --amsterdam-page-menu-item-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
211
- --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);
212
228
  --amsterdam-page-menu-item-font-weight: var(--amsterdam-typography-font-weight-normal);
213
229
  --amsterdam-page-menu-item-font-family: var(--amsterdam-typography-font-family);
214
- --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);
215
234
  --amsterdam-page-heading-inverse-color: var(--amsterdam-color-primary-white);
216
235
  --amsterdam-page-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
217
- --amsterdam-page-heading-wide-font-size: var(--amsterdam-typography-text-level-0-wide-font-size);
218
- --amsterdam-page-heading-narrow-font-size: var(--amsterdam-typography-text-level-0-narrow-font-size);
219
- --amsterdam-page-heading-line-height: var(--amsterdam-typography-text-level-0-line-height);
220
236
  --amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
221
237
  --amsterdam-page-heading-color: var(--amsterdam-color-primary-black);
222
- --amsterdam-ordered-list-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
223
- --amsterdam-ordered-list-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
224
- --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);
225
242
  --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
226
243
  --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
227
244
  --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
228
245
  --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
229
246
  --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
230
247
  --amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
231
- --amsterdam-link-on-background-light-visited-color: var(--amsterdam-color-primary-black);
232
- --amsterdam-link-on-background-light-hover-color: var(--amsterdam-color-primary-black);
233
- --amsterdam-link-on-background-light-color: var(--amsterdam-color-primary-black);
234
- --amsterdam-link-on-background-dark-visited-color: var(--amsterdam-color-primary-white);
235
- --amsterdam-link-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
236
- --amsterdam-link-on-background-dark-color: var(--amsterdam-color-primary-white);
237
- --amsterdam-link-standalone-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
238
- --amsterdam-link-standalone-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
239
- --amsterdam-link-standalone-line-height: var(--amsterdam-typography-text-level-6-line-height);
240
- --amsterdam-link-in-list-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
241
- --amsterdam-link-in-list-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
242
- --amsterdam-link-in-list-line-height: var(--amsterdam-typography-text-level-7-line-height);
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);
243
265
  --amsterdam-link-inline-visited-color: var(--amsterdam-color-purple);
244
- --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);
245
272
  --amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
246
273
  --amsterdam-link-font-family: var(--amsterdam-typography-font-family);
247
- --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
248
- --amsterdam-link-color: var(--amsterdam-color-primary-blue);
249
- --amsterdam-icon-size-7-container-multiplier: var(--amsterdam-typography-text-level-7-line-height);
250
- --amsterdam-icon-size-7-icon-size-wide: var(--amsterdam-typography-text-level-7-wide-font-size);
251
- --amsterdam-icon-size-7-icon-size-narrow: var(--amsterdam-typography-text-level-7-narrow-font-size);
252
- --amsterdam-icon-size-6-container-multiplier: var(--amsterdam-typography-text-level-6-line-height);
253
- --amsterdam-icon-size-6-icon-size-wide: var(--amsterdam-typography-text-level-6-wide-font-size);
254
- --amsterdam-icon-size-6-icon-size-narrow: var(--amsterdam-typography-text-level-6-narrow-font-size);
255
- --amsterdam-icon-size-5-container-multiplier: var(--amsterdam-typography-text-level-5-line-height);
256
- --amsterdam-icon-size-5-icon-size-wide: var(--amsterdam-typography-text-level-5-wide-font-size);
257
- --amsterdam-icon-size-5-icon-size-narrow: var(--amsterdam-typography-text-level-5-narrow-font-size);
258
- --amsterdam-icon-size-4-container-multiplier: var(--amsterdam-typography-text-level-4-line-height);
259
- --amsterdam-icon-size-4-icon-size-wide: var(--amsterdam-typography-text-level-4-wide-font-size);
260
- --amsterdam-icon-size-4-icon-size-narrow: var(--amsterdam-typography-text-level-4-narrow-font-size);
261
- --amsterdam-icon-size-3-container-multiplier: var(--amsterdam-typography-text-level-3-line-height);
262
- --amsterdam-icon-size-3-icon-size-wide: var(--amsterdam-typography-text-level-3-wide-font-size);
263
- --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);
264
294
  --amsterdam-highlight-yellow-background-color: var(--amsterdam-color-yellow);
265
295
  --amsterdam-highlight-purple-background-color: var(--amsterdam-color-purple);
266
296
  --amsterdam-highlight-orange-background-color: var(--amsterdam-color-orange);
@@ -269,48 +299,52 @@
269
299
  --amsterdam-highlight-green-background-color: var(--amsterdam-color-green);
270
300
  --amsterdam-highlight-dark-green-background-color: var(--amsterdam-color-dark-green);
271
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);
272
318
  --amsterdam-heading-inverse-color: var(--amsterdam-color-primary-white);
273
319
  --amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
274
320
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
275
321
  --amsterdam-heading-color: var(--amsterdam-color-primary-black);
276
- --amsterdam-heading-4-wide-font-size: var(--amsterdam-typography-text-level-4-wide-font-size);
277
- --amsterdam-heading-4-narrow-font-size: var(--amsterdam-typography-text-level-4-narrow-font-size);
278
- --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
279
- --amsterdam-heading-3-wide-font-size: var(--amsterdam-typography-text-level-3-wide-font-size);
280
- --amsterdam-heading-3-narrow-font-size: var(--amsterdam-typography-text-level-3-narrow-font-size);
281
- --amsterdam-heading-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
282
- --amsterdam-heading-2-wide-font-size: var(--amsterdam-typography-text-level-2-wide-font-size);
283
- --amsterdam-heading-2-narrow-font-size: var(--amsterdam-typography-text-level-2-narrow-font-size);
284
- --amsterdam-heading-2-line-height: var(--amsterdam-typography-text-level-2-line-height);
285
- --amsterdam-heading-1-wide-font-size: var(--amsterdam-typography-text-level-1-wide-font-size);
286
- --amsterdam-heading-1-narrow-font-size: var(--amsterdam-typography-text-level-1-narrow-font-size);
287
- --amsterdam-heading-1-line-height: var(--amsterdam-typography-text-level-1-line-height);
288
- --amsterdam-form-label-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
289
- --amsterdam-form-label-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
290
- --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);
291
326
  --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
292
327
  --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
293
328
  --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
294
329
  --amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
295
330
  --amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
296
- --amsterdam-dialog-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
297
- --amsterdam-dialog-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
298
- --amsterdam-dialog-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
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);
299
335
  --amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
300
336
  --amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
301
337
  --amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
302
338
  --amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
303
- --amsterdam-checkbox-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
304
- --amsterdam-checkbox-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
305
- --amsterdam-checkbox-line-height: var(--amsterdam-typography-text-level-6-line-height);
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);
306
343
  --amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
307
344
  --amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
308
345
  --amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
309
346
  --amsterdam-checkbox-font-family: var(--amsterdam-typography-font-family);
310
347
  --amsterdam-checkbox-disabled-color: var(--amsterdam-color-neutral-grey3);
311
- --amsterdam-checkbox-checkmark-multiplier: var(--amsterdam-typography-text-level-6-line-height);
312
- --amsterdam-checkbox-checkmark-wide-size: var(--amsterdam-typography-text-level-6-wide-font-size);
313
- --amsterdam-checkbox-checkmark-narrow-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
314
348
  --amsterdam-checkbox-checkmark-indeterminate-hover-background-color: var(--amsterdam-color-dark-blue);
315
349
  --amsterdam-checkbox-checkmark-indeterminate-background-color: var(--amsterdam-color-primary-blue);
316
350
  --amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--amsterdam-color-primary-red);
@@ -330,28 +364,36 @@
330
364
  --amsterdam-checkbox-checkmark-border-color: var(--amsterdam-color-primary-blue);
331
365
  --amsterdam-checkbox-color: var(--amsterdam-color-primary-black);
332
366
  --amsterdam-card-outline-offset: var(--amsterdam-focus-outline-offset);
333
- --amsterdam-card-link-hover-color: var(--amsterdam-color-dark-blue);
334
- --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);
335
371
  --amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
336
372
  --amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
337
373
  --amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
338
374
  --amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
339
375
  --amsterdam-button-secondary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
340
- --amsterdam-button-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
341
- --amsterdam-button-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
342
- --amsterdam-breadcrumb-item-link-focus-color: var(--amsterdam-color-dark-blue);
343
- --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);
344
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);
345
389
  --amsterdam-breadcrumb-item-link-outline-offset: var(--amsterdam-focus-outline-offset);
346
- --amsterdam-breadcrumb-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
347
- --amsterdam-breadcrumb-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
348
- --amsterdam-breadcrumb-line-height: var(--amsterdam-typography-text-level-7-line-height);
390
+ --amsterdam-breadcrumb-separator-background-color: var(--amsterdam-color-primary-blue);
349
391
  --amsterdam-breadcrumb-font-weight: var(--amsterdam-typography-font-weight-normal);
350
392
  --amsterdam-breadcrumb-font-family: var(--amsterdam-typography-font-family);
351
- --amsterdam-breadcrumb-color: var(--amsterdam-color-primary-blue);
352
- --amsterdam-blockquote-wide-font-size: var(--amsterdam-typography-text-level-3-wide-font-size);
353
- --amsterdam-blockquote-narrow-font-size: var(--amsterdam-typography-text-level-3-narrow-font-size);
354
- --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);
355
397
  --amsterdam-blockquote-inverse-color: var(--amsterdam-color-primary-white);
356
398
  --amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
357
399
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
@@ -368,9 +410,10 @@
368
410
  --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
369
411
  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
370
412
  --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
371
- --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
372
- --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
373
- --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);
374
417
  --amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
375
418
  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
376
419
  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
@@ -380,12 +423,33 @@
380
423
  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
381
424
  --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
382
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);
383
430
  --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
384
- --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
385
- --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
386
- --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
387
431
  --amsterdam-accordion-button-font-weight: var(--amsterdam-typography-font-weight-bold);
388
432
  --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
389
433
  --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
390
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);
391
455
  }