@amsterdam/design-system-tokens 0.1.8 → 0.3.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 (45) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/_variables.scss +274 -163
  3. package/dist/index.css +274 -163
  4. package/dist/index.d.ts +255 -144
  5. package/dist/index.js +261 -150
  6. package/dist/index.json +260 -149
  7. package/dist/index.tokens.json +455 -297
  8. package/dist/root.css +274 -163
  9. package/dist/tokens.d.ts +442 -284
  10. package/dist/tokens.js +5618 -3116
  11. package/dist/variables.less +274 -163
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/typography.tokens.json +62 -84
  14. package/src/common/amsterdam/border.tokens.json +3 -9
  15. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +8 -9
  18. package/src/components/amsterdam/alert.tokens.json +6 -5
  19. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  20. package/src/components/amsterdam/breadcrumb.tokens.json +21 -34
  21. package/src/components/amsterdam/button.tokens.json +11 -19
  22. package/src/components/amsterdam/card.tokens.json +6 -2
  23. package/src/components/amsterdam/checkbox.tokens.json +27 -73
  24. package/src/components/amsterdam/dialog.tokens.json +6 -5
  25. package/src/components/amsterdam/form-label.tokens.json +6 -5
  26. package/src/components/amsterdam/grid.tokens.json +5 -11
  27. package/src/components/amsterdam/header.tokens.json +7 -0
  28. package/src/components/amsterdam/heading.tokens.json +44 -28
  29. package/src/components/amsterdam/icon.tokens.json +29 -28
  30. package/src/components/amsterdam/link.tokens.json +43 -45
  31. package/src/components/amsterdam/mark.tokens.json +7 -0
  32. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  33. package/src/components/amsterdam/page-heading.tokens.json +9 -8
  34. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  35. package/src/components/amsterdam/pagination.tokens.json +17 -18
  36. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  37. package/src/components/amsterdam/search-field.tokens.json +47 -0
  38. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  39. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  40. package/src/components/amsterdam/switch.tokens.json +10 -30
  41. package/src/components/amsterdam/text-input.tokens.json +36 -0
  42. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  43. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  44. package/src/components/utrecht/button.tokens.json +25 -75
  45. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 27 Nov 2023 11:07:10 GMT
3
+ * Generated on Fri, 22 Dec 2023 12:50:01 GMT
4
4
  */
5
5
 
6
6
  .amsterdam-theme {
@@ -23,10 +23,9 @@
23
23
  --amsterdam-switch-thumb-height: 1.75rem;
24
24
  --amsterdam-switch-thumb-width: 1.75rem;
25
25
  --amsterdam-switch-width: 3.5rem;
26
+ --amsterdam-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
26
27
  --amsterdam-screen-x-wide-max-width: 132rem;
27
28
  --amsterdam-screen-wide-max-width: 100rem;
28
- --amsterdam-page-menu-item-hover-text-decoration: underline;
29
- --amsterdam-page-menu-item-text-decoration: none;
30
29
  --amsterdam-page-menu-item-gap: 0.5rem;
31
30
  --amsterdam-page-menu-row-gap: 0.5rem;
32
31
  --amsterdam-page-menu-column-gap: 2.5rem;
@@ -37,29 +36,18 @@
37
36
  --amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
38
37
  --amsterdam-ordered-list-list-style-type: decimal;
39
38
  --amsterdam-ordered-list-gap: 0.75rem;
39
+ --amsterdam-mark-background-color: var(--amsterdam-color-yellow);
40
40
  --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
41
  --amsterdam-link-in-list-gap: 0.5em;
50
- --amsterdam-link-inline-text-decoration-thickness: 2px;
51
- --amsterdam-link-inline-text-decoration: none;
52
42
  --amsterdam-link-inline-line-height: inherit;
53
43
  --amsterdam-link-inline-font-size: inherit;
54
44
  --amsterdam-link-inline-font-family: inherit;
55
- --amsterdam-link-inline-hover-text-underline-offset: 3px;
56
- --amsterdam-link-inline-hover-text-decoration: underline;
57
45
  --amsterdam-grid-wide-column-count: 12;
58
46
  --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. */
47
+ --amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
48
+ --amsterdam-grid-compact-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
49
+ --amsterdam-grid-spacious-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
50
+ --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
51
  --amsterdam-grid-column-count: 4;
64
52
  --amsterdam-dialog-footer-padding-block: 1.5rem 0;
65
53
  --amsterdam-dialog-footer-gap: 1rem;
@@ -73,41 +61,52 @@
73
61
  --amsterdam-dialog-backdrop-background: #0006;
74
62
  --amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
75
63
  --amsterdam-dialog-border: 0;
76
- --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
64
+ --amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
77
65
  --amsterdam-alert-close-background-color: transparent;
78
66
  --amsterdam-alert-gap: 1rem;
79
67
  --amsterdam-spacing-inset-xl: 2.5rem;
80
68
  --amsterdam-spacing-inset-lg: 1.5rem;
81
69
  --amsterdam-spacing-inset-md: 1rem;
82
70
  --amsterdam-spacing-inset-sm: 0.5rem;
71
+ --amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
72
+ --amsterdam-link-appearance-subtle-text-decoration-line: none;
73
+ --amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
74
+ --amsterdam-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
75
+ --amsterdam-link-appearance-regular-text-decoration-line: underline;
76
+ --amsterdam-link-appearance-text-underline-offset: 0.375rem;
77
+ --amsterdam-link-appearance-text-decoration-thickness: 0.125rem;
83
78
  --amsterdam-focus-outline-offset: 2px;
84
79
  --amsterdam-border-width-lg: 3px;
85
80
  --amsterdam-border-width-md: 2px;
86
81
  --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);
82
+ --amsterdam-typography-compact-text-level-6-line-height: 1.6;
83
+ --amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
84
+ --amsterdam-typography-compact-text-level-5-line-height: 1.6;
85
+ --amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
86
+ --amsterdam-typography-compact-text-level-4-line-height: 1.5;
87
+ --amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
88
+ --amsterdam-typography-compact-text-level-3-line-height: 1.3;
89
+ --amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
90
+ --amsterdam-typography-compact-text-level-2-line-height: 1.25;
91
+ --amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
92
+ --amsterdam-typography-compact-text-level-1-line-height: 1.2;
93
+ --amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
94
+ --amsterdam-typography-compact-text-level-0-line-height: 1.15;
95
+ --amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
96
+ --amsterdam-typography-spacious-text-level-6-line-height: 1.6;
97
+ --amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
98
+ --amsterdam-typography-spacious-text-level-5-line-height: 1.6;
99
+ --amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
100
+ --amsterdam-typography-spacious-text-level-4-line-height: 1.5;
101
+ --amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
102
+ --amsterdam-typography-spacious-text-level-3-line-height: 1.3;
103
+ --amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
104
+ --amsterdam-typography-spacious-text-level-2-line-height: 1.25;
105
+ --amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
106
+ --amsterdam-typography-spacious-text-level-1-line-height: 1.2;
107
+ --amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
108
+ --amsterdam-typography-spacious-text-level-0-line-height: 1.15;
109
+ --amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
111
110
  --amsterdam-typography-font-weight-bold: 800;
112
111
  --amsterdam-typography-font-weight-normal: 400;
113
112
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -152,30 +151,51 @@
152
151
  --utrecht-button-padding-block-start: var(--amsterdam-spacing-inset-sm);
153
152
  --utrecht-button-padding-inline-end: var(--amsterdam-spacing-inset-md);
154
153
  --utrecht-button-padding-inline-start: var(--amsterdam-spacing-inset-md);
155
- --utrecht-button-line-height: var(--amsterdam-typography-text-level-6-line-height);
156
154
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
157
155
  --utrecht-button-color: var(--amsterdam-color-primary-white);
158
156
  --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);
157
+ --amsterdam-unordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
158
+ --amsterdam-unordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
159
+ --amsterdam-unordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
160
+ --amsterdam-unordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
162
161
  --amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
163
162
  --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
164
163
  --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
165
164
  --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);
165
+ --amsterdam-top-task-link-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
166
+ --amsterdam-top-task-link-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
167
+ --amsterdam-top-task-link-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
168
+ --amsterdam-top-task-link-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
169
+ --amsterdam-top-task-link-label-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
169
170
  --amsterdam-top-task-link-label-hover-color: var(--amsterdam-color-dark-blue);
171
+ --amsterdam-top-task-link-label-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
172
+ --amsterdam-top-task-link-label-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
173
+ --amsterdam-top-task-link-label-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
170
174
  --amsterdam-top-task-link-label-font-weight: var(--amsterdam-typography-font-weight-bold);
171
175
  --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);
176
+ --amsterdam-top-task-link-description-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
177
+ --amsterdam-top-task-link-description-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
178
+ --amsterdam-top-task-link-description-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
179
+ --amsterdam-top-task-link-description-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
176
180
  --amsterdam-top-task-link-description-font-weight: var(--amsterdam-typography-font-weight-normal);
177
181
  --amsterdam-top-task-link-description-font-family: var(--amsterdam-typography-font-family);
178
182
  --amsterdam-top-task-link-description-color: var(--amsterdam-color-primary-black);
183
+ --amsterdam-text-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
184
+ --amsterdam-text-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
185
+ --amsterdam-text-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
186
+ --amsterdam-text-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
187
+ --amsterdam-text-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
188
+ --amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-red);
189
+ --amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-red);
190
+ --amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
191
+ --amsterdam-text-input-disabled-color: var(--amsterdam-color-neutral-grey2);
192
+ --amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px var(--amsterdam-color-neutral-grey2);
193
+ --amsterdam-text-input-disabled-background-color: var(--amsterdam-color-primary-white);
194
+ --amsterdam-text-input-outline-offset: var(--amsterdam-focus-outline-offset);
195
+ --amsterdam-text-input-font-weight: var(--amsterdam-typography-font-weight-normal);
196
+ --amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
197
+ --amsterdam-text-input-color: var(--amsterdam-color-primary-black);
198
+ --amsterdam-text-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
179
199
  --amsterdam-switch-disabled-background-color: var(--amsterdam-color-neutral-grey2);
180
200
  --amsterdam-switch-outline-offset: var(--amsterdam-focus-outline-offset);
181
201
  --amsterdam-switch-checked-background-color: var(--amsterdam-color-primary-blue);
@@ -183,134 +203,196 @@
183
203
  --amsterdam-switch-thumb-background-color: var(--amsterdam-color-primary-white);
184
204
  --amsterdam-switch-background-color: var(--amsterdam-color-neutral-grey3);
185
205
  --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);
206
+ --amsterdam-spotlight-yellow-background-color: var(--amsterdam-color-yellow);
207
+ --amsterdam-spotlight-purple-background-color: var(--amsterdam-color-purple);
208
+ --amsterdam-spotlight-orange-background-color: var(--amsterdam-color-orange);
209
+ --amsterdam-spotlight-magenta-background-color: var(--amsterdam-color-magenta);
210
+ --amsterdam-spotlight-light-blue-background-color: var(--amsterdam-color-blue);
211
+ --amsterdam-spotlight-green-background-color: var(--amsterdam-color-green);
212
+ --amsterdam-spotlight-dark-green-background-color: var(--amsterdam-color-dark-green);
213
+ --amsterdam-spotlight-blue-background-color: var(--amsterdam-color-primary-blue);
214
+ --amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
215
+ --amsterdam-skip-link-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
216
+ --amsterdam-skip-link-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
217
+ --amsterdam-skip-link-outline-offset: var(--amsterdam-focus-outline-offset);
218
+ --amsterdam-skip-link-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
219
+ --amsterdam-skip-link-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
220
+ --amsterdam-skip-link-font-weight: var(--amsterdam-typography-font-weight-normal);
221
+ --amsterdam-skip-link-font-family: var(--amsterdam-typography-font-family);
222
+ --amsterdam-skip-link-color: var(--amsterdam-color-primary-white);
223
+ --amsterdam-skip-link-background-color: var(--amsterdam-color-primary-blue);
224
+ --amsterdam-search-field-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
225
+ --amsterdam-search-field-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
226
+ --amsterdam-search-field-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
227
+ --amsterdam-search-field-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
228
+ --amsterdam-search-field-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
229
+ --amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
230
+ --amsterdam-search-field-input-cancel-button-width: var(--amsterdam-typography-spacious-text-level-6-font-size);
231
+ --amsterdam-search-field-input-cancel-button-height: var(--amsterdam-typography-spacious-text-level-6-font-size);
232
+ --amsterdam-search-field-input-cancel-button-color: var(--amsterdam-color-primary-blue);
233
+ --amsterdam-search-field-input-outline-offset: var(--amsterdam-focus-outline-offset);
234
+ --amsterdam-search-field-input-font-weight: var(--amsterdam-typography-font-weight-normal);
235
+ --amsterdam-search-field-input-font-family: var(--amsterdam-typography-font-family);
236
+ --amsterdam-search-field-input-color: var(--amsterdam-color-primary-black);
237
+ --amsterdam-search-field-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
238
+ --amsterdam-search-field-button-hover-background-color: var(--amsterdam-color-dark-blue);
239
+ --amsterdam-search-field-button-outline-offset: var(--amsterdam-focus-outline-offset);
240
+ --amsterdam-search-field-button-color: var(--amsterdam-color-primary-white);
241
+ --amsterdam-search-field-button-background-color: var(--amsterdam-color-primary-blue);
242
+ --amsterdam-paragraph-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
243
+ --amsterdam-paragraph-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
244
+ --amsterdam-paragraph-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
245
+ --amsterdam-paragraph-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
246
+ --amsterdam-paragraph-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
247
+ --amsterdam-paragraph-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
248
+ --amsterdam-paragraph-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
249
+ --amsterdam-paragraph-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
250
+ --amsterdam-paragraph-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
251
+ --amsterdam-paragraph-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
252
+ --amsterdam-paragraph-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
253
+ --amsterdam-paragraph-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
195
254
  --amsterdam-paragraph-inverse-color: var(--amsterdam-color-primary-white);
196
255
  --amsterdam-paragraph-font-weight: var(--amsterdam-typography-font-weight-normal);
197
256
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
198
257
  --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);
258
+ --amsterdam-pagination-button-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
201
259
  --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);
260
+ --amsterdam-pagination-button-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
261
+ --amsterdam-pagination-button-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
262
+ --amsterdam-pagination-button-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
263
+ --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
264
+ --amsterdam-pagination-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
265
+ --amsterdam-pagination-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
266
+ --amsterdam-pagination-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
267
+ --amsterdam-pagination-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
205
268
  --amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
206
269
  --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);
270
+ --amsterdam-page-menu-item-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
271
+ --amsterdam-page-menu-item-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
272
+ --amsterdam-page-menu-item-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
273
+ --amsterdam-page-menu-item-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
274
+ --amsterdam-page-menu-item-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
275
+ --amsterdam-page-menu-item-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
276
+ --amsterdam-page-menu-item-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
277
+ --amsterdam-page-menu-item-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
278
+ --amsterdam-page-menu-item-outline-offset: var(--amsterdam-focus-outline-offset);
212
279
  --amsterdam-page-menu-item-font-weight: var(--amsterdam-typography-font-weight-normal);
213
280
  --amsterdam-page-menu-item-font-family: var(--amsterdam-typography-font-family);
214
- --amsterdam-page-menu-item-color: var(--amsterdam-color-primary-black);
281
+ --amsterdam-page-heading-compact-line-height: var(--amsterdam-typography-compact-text-level-0-font-size);
282
+ --amsterdam-page-heading-compact-font-size: var(--amsterdam-typography-compact-text-level-0-font-size);
283
+ --amsterdam-page-heading-spacious-line-height: var(--amsterdam-typography-spacious-text-level-0-font-size);
284
+ --amsterdam-page-heading-spacious-font-size: var(--amsterdam-typography-spacious-text-level-0-font-size);
215
285
  --amsterdam-page-heading-inverse-color: var(--amsterdam-color-primary-white);
216
286
  --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
287
  --amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
221
288
  --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);
289
+ --amsterdam-ordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
290
+ --amsterdam-ordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
291
+ --amsterdam-ordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
292
+ --amsterdam-ordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
225
293
  --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
226
294
  --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
227
295
  --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
228
296
  --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
229
297
  --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
230
298
  --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);
299
+ --amsterdam-link-standalone-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
300
+ --amsterdam-link-standalone-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
301
+ --amsterdam-link-standalone-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
302
+ --amsterdam-link-standalone-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
303
+ --amsterdam-link-standalone-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
304
+ --amsterdam-link-standalone-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
305
+ --amsterdam-link-standalone-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
306
+ --amsterdam-link-standalone-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
307
+ --amsterdam-link-standalone-text-decoration-line: var(--amsterdam-link-appearance-regular-text-decoration-line);
308
+ --amsterdam-link-in-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
309
+ --amsterdam-link-in-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
310
+ --amsterdam-link-in-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
311
+ --amsterdam-link-in-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
312
+ --amsterdam-link-in-list-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
313
+ --amsterdam-link-in-list-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
314
+ --amsterdam-link-in-list-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
315
+ --amsterdam-link-in-list-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
243
316
  --amsterdam-link-inline-visited-color: var(--amsterdam-color-purple);
244
- --amsterdam-link-hover-color: var(--amsterdam-color-dark-blue);
317
+ --amsterdam-link-inline-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
318
+ --amsterdam-link-inline-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
319
+ --amsterdam-link-inline-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
320
+ --amsterdam-link-inline-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
321
+ --amsterdam-link-inline-text-decoration-line: var(--amsterdam-link-appearance-regular-text-decoration-line);
322
+ --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
245
323
  --amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
246
324
  --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);
264
- --amsterdam-highlight-yellow-background-color: var(--amsterdam-color-yellow);
265
- --amsterdam-highlight-purple-background-color: var(--amsterdam-color-purple);
266
- --amsterdam-highlight-orange-background-color: var(--amsterdam-color-orange);
267
- --amsterdam-highlight-magenta-background-color: var(--amsterdam-color-magenta);
268
- --amsterdam-highlight-light-blue-background-color: var(--amsterdam-color-blue);
269
- --amsterdam-highlight-green-background-color: var(--amsterdam-color-green);
270
- --amsterdam-highlight-dark-green-background-color: var(--amsterdam-color-dark-green);
271
- --amsterdam-highlight-blue-background-color: var(--amsterdam-color-primary-blue);
325
+ --amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
326
+ --amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
327
+ --amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
328
+ --amsterdam-icon-compact-size-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
329
+ --amsterdam-icon-compact-size-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
330
+ --amsterdam-icon-compact-size-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
331
+ --amsterdam-icon-compact-size-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
332
+ --amsterdam-icon-compact-size-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
333
+ --amsterdam-icon-spacious-size-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
334
+ --amsterdam-icon-spacious-size-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
335
+ --amsterdam-icon-spacious-size-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
336
+ --amsterdam-icon-spacious-size-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
337
+ --amsterdam-icon-spacious-size-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
338
+ --amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
339
+ --amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
340
+ --amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
341
+ --amsterdam-heading-compact-level-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
342
+ --amsterdam-heading-compact-level-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
343
+ --amsterdam-heading-compact-level-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
344
+ --amsterdam-heading-compact-level-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
345
+ --amsterdam-heading-compact-level-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
346
+ --amsterdam-heading-compact-level-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
347
+ --amsterdam-heading-compact-level-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
348
+ --amsterdam-heading-compact-level-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
349
+ --amsterdam-heading-compact-level-2-font-size: var(--amsterdam-typography-compact-text-level-2-font-size);
350
+ --amsterdam-heading-compact-level-2-line-height: var(--amsterdam-typography-compact-text-level-2-line-height);
351
+ --amsterdam-heading-compact-level-1-font-size: var(--amsterdam-typography-compact-text-level-1-font-size);
352
+ --amsterdam-heading-compact-level-1-line-height: var(--amsterdam-typography-compact-text-level-1-line-height);
353
+ --amsterdam-heading-spacious-level-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
354
+ --amsterdam-heading-spacious-level-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
355
+ --amsterdam-heading-spacious-level-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
356
+ --amsterdam-heading-spacious-level-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
357
+ --amsterdam-heading-spacious-level-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
358
+ --amsterdam-heading-spacious-level-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
359
+ --amsterdam-heading-spacious-level-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
360
+ --amsterdam-heading-spacious-level-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
361
+ --amsterdam-heading-spacious-level-2-font-size: var(--amsterdam-typography-spacious-text-level-2-font-size);
362
+ --amsterdam-heading-spacious-level-2-line-height: var(--amsterdam-typography-spacious-text-level-2-line-height);
363
+ --amsterdam-heading-spacious-level-1-font-size: var(--amsterdam-typography-spacious-text-level-1-font-size);
364
+ --amsterdam-heading-spacious-level-1-line-height: var(--amsterdam-typography-spacious-text-level-1-line-height);
272
365
  --amsterdam-heading-inverse-color: var(--amsterdam-color-primary-white);
273
366
  --amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
274
367
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
275
368
  --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);
369
+ --amsterdam-header-column-gap: var(--amsterdam-grid-spacious-gap);
370
+ --amsterdam-form-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
371
+ --amsterdam-form-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
372
+ --amsterdam-form-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
373
+ --amsterdam-form-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
291
374
  --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
292
375
  --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
293
376
  --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
294
377
  --amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
295
378
  --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);
379
+ --amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
380
+ --amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
381
+ --amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
382
+ --amsterdam-dialog-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
299
383
  --amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
300
384
  --amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
301
385
  --amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
302
386
  --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);
387
+ --amsterdam-checkbox-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
388
+ --amsterdam-checkbox-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
389
+ --amsterdam-checkbox-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
390
+ --amsterdam-checkbox-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
306
391
  --amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
307
392
  --amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
308
393
  --amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
309
394
  --amsterdam-checkbox-font-family: var(--amsterdam-typography-font-family);
310
395
  --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
396
  --amsterdam-checkbox-checkmark-indeterminate-hover-background-color: var(--amsterdam-color-dark-blue);
315
397
  --amsterdam-checkbox-checkmark-indeterminate-background-color: var(--amsterdam-color-primary-blue);
316
398
  --amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--amsterdam-color-primary-red);
@@ -330,28 +412,35 @@
330
412
  --amsterdam-checkbox-checkmark-border-color: var(--amsterdam-color-primary-blue);
331
413
  --amsterdam-checkbox-color: var(--amsterdam-color-primary-black);
332
414
  --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);
335
- --amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
415
+ --amsterdam-card-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
416
+ --amsterdam-card-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
417
+ --amsterdam-card-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
418
+ --amsterdam-card-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
419
+ --amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-dark-blue);
336
420
  --amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
337
421
  --amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
338
422
  --amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
339
423
  --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);
424
+ --amsterdam-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
425
+ --amsterdam-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
426
+ --amsterdam-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
427
+ --amsterdam-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
428
+ --amsterdam-breadcrumb-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
429
+ --amsterdam-breadcrumb-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
430
+ --amsterdam-breadcrumb-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
431
+ --amsterdam-breadcrumb-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
432
+ --amsterdam-breadcrumb-item-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
344
433
  --amsterdam-breadcrumb-item-link-hover-color: var(--amsterdam-color-dark-blue);
434
+ --amsterdam-breadcrumb-item-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
435
+ --amsterdam-breadcrumb-item-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
436
+ --amsterdam-breadcrumb-item-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
345
437
  --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);
349
438
  --amsterdam-breadcrumb-font-weight: var(--amsterdam-typography-font-weight-normal);
350
439
  --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);
440
+ --amsterdam-blockquote-compact-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
441
+ --amsterdam-blockquote-compact-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
442
+ --amsterdam-blockquote-spacious-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
443
+ --amsterdam-blockquote-spacious-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
355
444
  --amsterdam-blockquote-inverse-color: var(--amsterdam-color-primary-white);
356
445
  --amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
357
446
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
@@ -368,9 +457,10 @@
368
457
  --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
369
458
  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
370
459
  --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);
460
+ --amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
461
+ --amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
462
+ --amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
463
+ --amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
374
464
  --amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
375
465
  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
376
466
  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
@@ -380,12 +470,33 @@
380
470
  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
381
471
  --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
382
472
  --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
473
+ --amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
474
+ --amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
475
+ --amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
476
+ --amsterdam-accordion-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
383
477
  --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
478
  --amsterdam-accordion-button-font-weight: var(--amsterdam-typography-font-weight-bold);
388
479
  --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
389
480
  --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
390
481
  --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
482
+ --amsterdam-link-appearance-on-background-light-color: var(--amsterdam-color-primary-black);
483
+ --amsterdam-link-appearance-on-background-dark-color: var(--amsterdam-color-primary-white);
484
+ --amsterdam-link-appearance-hover-color: var(--amsterdam-color-dark-blue);
485
+ --amsterdam-link-appearance-color: var(--amsterdam-color-primary-blue);
486
+ --amsterdam-top-task-link-label-color: var(--amsterdam-link-appearance-color);
487
+ --amsterdam-pagination-button-hover-color: var(--amsterdam-link-appearance-hover-color);
488
+ --amsterdam-pagination-color: var(--amsterdam-link-appearance-color);
489
+ --amsterdam-page-menu-item-hover-color: var(--amsterdam-link-appearance-hover-color);
490
+ --amsterdam-page-menu-item-color: var(--amsterdam-link-appearance-color);
491
+ --amsterdam-link-on-background-light-visited-color: var(--amsterdam-link-appearance-on-background-light-color);
492
+ --amsterdam-link-on-background-light-hover-color: var(--amsterdam-link-appearance-on-background-light-color);
493
+ --amsterdam-link-on-background-light-color: var(--amsterdam-link-appearance-on-background-light-color);
494
+ --amsterdam-link-on-background-dark-visited-color: var(--amsterdam-link-appearance-on-background-dark-color);
495
+ --amsterdam-link-on-background-dark-hover-color: var(--amsterdam-link-appearance-on-background-dark-color);
496
+ --amsterdam-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
497
+ --amsterdam-link-hover-color: var(--amsterdam-link-appearance-hover-color);
498
+ --amsterdam-link-color: var(--amsterdam-link-appearance-color);
499
+ --amsterdam-card-link-hover-color: var(--amsterdam-link-appearance-hover-color);
500
+ --amsterdam-card-link-color: var(--amsterdam-link-appearance-color);
501
+ --amsterdam-breadcrumb-item-link-color: var(--amsterdam-link-appearance-color);
391
502
  }