@amsterdam/design-system-tokens 0.2.0 → 0.4.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 (48) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_variables.scss +225 -106
  3. package/dist/index.css +225 -106
  4. package/dist/index.d.ts +146 -27
  5. package/dist/index.js +218 -99
  6. package/dist/index.json +217 -98
  7. package/dist/index.tokens.json +361 -116
  8. package/dist/root.css +225 -106
  9. package/dist/tokens.d.ts +297 -52
  10. package/dist/tokens.js +7327 -4668
  11. package/dist/variables.less +225 -106
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/color.tokens.json +5 -6
  14. package/src/brand/amsterdam/typography.tokens.json +10 -18
  15. package/src/common/amsterdam/border.tokens.json +3 -9
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +1 -3
  18. package/src/components/amsterdam/alert.tokens.json +12 -9
  19. package/src/components/amsterdam/badge.tokens.json +49 -0
  20. package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
  21. package/src/components/amsterdam/button.tokens.json +9 -19
  22. package/src/components/amsterdam/checkbox.tokens.json +24 -64
  23. package/src/components/amsterdam/dialog.tokens.json +0 -7
  24. package/src/components/amsterdam/form-label.tokens.json +4 -4
  25. package/src/components/amsterdam/grid.tokens.json +3 -9
  26. package/src/components/amsterdam/header.tokens.json +7 -0
  27. package/src/components/amsterdam/heading.tokens.json +24 -24
  28. package/src/components/amsterdam/icon-button.tokens.json +37 -0
  29. package/src/components/amsterdam/icon.tokens.json +0 -8
  30. package/src/components/amsterdam/link-list.tokens.json +61 -0
  31. package/src/components/amsterdam/link.tokens.json +13 -23
  32. package/src/components/amsterdam/mark.tokens.json +7 -0
  33. package/src/components/amsterdam/mega-menu.tokens.json +12 -0
  34. package/src/components/amsterdam/ordered-list.tokens.json +4 -4
  35. package/src/components/amsterdam/page-heading.tokens.json +4 -12
  36. package/src/components/amsterdam/page-menu.tokens.json +4 -4
  37. package/src/components/amsterdam/pagination.tokens.json +4 -4
  38. package/src/components/amsterdam/paragraph.tokens.json +10 -10
  39. package/src/components/amsterdam/search-field.tokens.json +47 -0
  40. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  41. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  42. package/src/components/amsterdam/switch.tokens.json +10 -30
  43. package/src/components/amsterdam/table.tokens.json +20 -0
  44. package/src/components/amsterdam/text-input.tokens.json +36 -0
  45. package/src/components/amsterdam/top-task-link.tokens.json +4 -4
  46. package/src/components/amsterdam/unordered-list.tokens.json +4 -4
  47. package/src/components/utrecht/button.tokens.json +24 -72
  48. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/dist/variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 01 Dec 2023 15:48:43 GMT
3
+ // Generated on Wed, 31 Jan 2024 12:56:25 GMT
4
4
 
5
5
  @utrecht-button-subtle-disabled-background-color: transparent;
6
6
  @utrecht-button-subtle-background-color: transparent;
@@ -21,6 +21,7 @@
21
21
  @amsterdam-switch-thumb-height: 1.75rem;
22
22
  @amsterdam-switch-thumb-width: 1.75rem;
23
23
  @amsterdam-switch-width: 3.5rem;
24
+ @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>");
24
25
  @amsterdam-screen-x-wide-max-width: 132rem;
25
26
  @amsterdam-screen-wide-max-width: 100rem;
26
27
  @amsterdam-page-menu-item-gap: 0.5rem;
@@ -33,11 +34,18 @@
33
34
  @amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
34
35
  @amsterdam-ordered-list-list-style-type: decimal;
35
36
  @amsterdam-ordered-list-gap: 0.75rem;
37
+ @amsterdam-mega-menu-list-category-padding-block-start: 1rem;
38
+ @amsterdam-mega-menu-list-category-column-width: 20rem;
39
+ @amsterdam-mark-background-color: var(--amsterdam-color-yellow);
36
40
  @amsterdam-logo-height: 2.5rem;
37
41
  @amsterdam-link-in-list-gap: 0.5em;
38
42
  @amsterdam-link-inline-line-height: inherit;
39
43
  @amsterdam-link-inline-font-size: inherit;
40
44
  @amsterdam-link-inline-font-family: inherit;
45
+ @amsterdam-link-list-link-gap: 0.5em;
46
+ @amsterdam-link-list-gap: 0.5em;
47
+ @amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
48
+ @amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
41
49
  @amsterdam-grid-wide-column-count: 12;
42
50
  @amsterdam-grid-medium-column-count: 8;
43
51
  @amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
@@ -53,12 +61,14 @@
53
61
  @amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
54
62
  @amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
55
63
  @amsterdam-dialog-form-gap: 1.5rem;
56
- @amsterdam-dialog-close-background-color: transparent;
57
64
  @amsterdam-dialog-backdrop-background: #0006;
58
65
  @amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
59
66
  @amsterdam-dialog-border: 0;
60
- @amsterdam-alert-close-background-color: transparent;
67
+ @amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
68
+ @amsterdam-badge-padding-inline: 0.5rem;
61
69
  @amsterdam-alert-gap: 1rem;
70
+ @amsterdam-alert-border-style: solid;
71
+ @amsterdam-alert-border-width: 4px;
62
72
  @amsterdam-spacing-inset-xl: 2.5rem;
63
73
  @amsterdam-spacing-inset-lg: 1.5rem;
64
74
  @amsterdam-spacing-inset-md: 1rem;
@@ -74,37 +84,33 @@
74
84
  @amsterdam-border-width-lg: 3px;
75
85
  @amsterdam-border-width-md: 2px;
76
86
  @amsterdam-border-width-sm: 1px;
77
- @amsterdam-typography-compact-text-level-7-line-height: 1.6;
78
- @amsterdam-typography-compact-text-level-7-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
79
87
  @amsterdam-typography-compact-text-level-6-line-height: 1.6;
80
- @amsterdam-typography-compact-text-level-6-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
81
- @amsterdam-typography-compact-text-level-5-line-height: 1.5;
82
- @amsterdam-typography-compact-text-level-5-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
83
- @amsterdam-typography-compact-text-level-4-line-height: 1.4;
88
+ @amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
89
+ @amsterdam-typography-compact-text-level-5-line-height: 1.6;
90
+ @amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
91
+ @amsterdam-typography-compact-text-level-4-line-height: 1.5;
84
92
  @amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
85
- @amsterdam-typography-compact-text-level-3-line-height: 1.4;
93
+ @amsterdam-typography-compact-text-level-3-line-height: 1.3;
86
94
  @amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
87
- @amsterdam-typography-compact-text-level-2-line-height: 1.3;
95
+ @amsterdam-typography-compact-text-level-2-line-height: 1.25;
88
96
  @amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
89
97
  @amsterdam-typography-compact-text-level-1-line-height: 1.2;
90
98
  @amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
91
- @amsterdam-typography-compact-text-level-0-line-height: 1.1;
99
+ @amsterdam-typography-compact-text-level-0-line-height: 1.15;
92
100
  @amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
93
- @amsterdam-typography-spacious-text-level-7-line-height: 1.6;
94
- @amsterdam-typography-spacious-text-level-7-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
95
101
  @amsterdam-typography-spacious-text-level-6-line-height: 1.6;
96
- @amsterdam-typography-spacious-text-level-6-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
97
- @amsterdam-typography-spacious-text-level-5-line-height: 1.5;
98
- @amsterdam-typography-spacious-text-level-5-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
99
- @amsterdam-typography-spacious-text-level-4-line-height: 1.4;
102
+ @amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
103
+ @amsterdam-typography-spacious-text-level-5-line-height: 1.6;
104
+ @amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
105
+ @amsterdam-typography-spacious-text-level-4-line-height: 1.5;
100
106
  @amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
101
- @amsterdam-typography-spacious-text-level-3-line-height: 1.4;
107
+ @amsterdam-typography-spacious-text-level-3-line-height: 1.3;
102
108
  @amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
103
- @amsterdam-typography-spacious-text-level-2-line-height: 1.3;
109
+ @amsterdam-typography-spacious-text-level-2-line-height: 1.25;
104
110
  @amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
105
111
  @amsterdam-typography-spacious-text-level-1-line-height: 1.2;
106
112
  @amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
107
- @amsterdam-typography-spacious-text-level-0-line-height: 1.1;
113
+ @amsterdam-typography-spacious-text-level-0-line-height: 1.15;
108
114
  @amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
109
115
  @amsterdam-typography-font-weight-bold: 800;
110
116
  @amsterdam-typography-font-weight-normal: 400;
@@ -115,13 +121,12 @@
115
121
  @amsterdam-proportion-square: 1 / 1;
116
122
  @amsterdam-proportion-tall: 4 / 5;
117
123
  @amsterdam-proportion-x-tall: 9 / 16;
118
- @amsterdam-color-neutral-grey4: #323232;
119
124
  @amsterdam-color-neutral-grey3: #767676;
120
- @amsterdam-color-neutral-grey2: #B4B4B4;
121
- @amsterdam-color-neutral-grey1: #E6E6E6;
125
+ @amsterdam-color-neutral-grey2: #BEBEBE;
126
+ @amsterdam-color-neutral-grey1: #E8E8E8;
122
127
  @amsterdam-color-magenta: #E50082;
123
128
  @amsterdam-color-purple: #A00078;
124
- @amsterdam-color-blue: #009DEC;
129
+ @amsterdam-color-blue: #009DE6;
125
130
  @amsterdam-color-dark-green: #00A03C;
126
131
  @amsterdam-color-green: #BED200;
127
132
  @amsterdam-color-yellow: #FFE600;
@@ -129,7 +134,7 @@
129
134
  @amsterdam-color-dark-blue: #102E62;
130
135
  @amsterdam-color-primary-red: #EC0000;
131
136
  @amsterdam-color-primary-blue: #004699;
132
- @amsterdam-color-primary-white: #ffffff;
137
+ @amsterdam-color-primary-white: #FFFFFF;
133
138
  @amsterdam-color-primary-black: #000000;
134
139
  @utrecht-button-subtle-disabled-color: @amsterdam-color-neutral-grey2;
135
140
  @utrecht-button-subtle-focus-color: @amsterdam-color-dark-blue;
@@ -153,10 +158,10 @@
153
158
  @utrecht-button-font-family: @amsterdam-typography-font-family;
154
159
  @utrecht-button-color: @amsterdam-color-primary-white;
155
160
  @utrecht-button-background-color: @amsterdam-color-primary-blue;
156
- @amsterdam-unordered-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
157
- @amsterdam-unordered-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
158
- @amsterdam-unordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
159
- @amsterdam-unordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
161
+ @amsterdam-unordered-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
162
+ @amsterdam-unordered-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
163
+ @amsterdam-unordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
164
+ @amsterdam-unordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
160
165
  @amsterdam-unordered-list-font-weight: @amsterdam-typography-font-weight-normal;
161
166
  @amsterdam-unordered-list-font-family: @amsterdam-typography-font-family;
162
167
  @amsterdam-unordered-list-color: @amsterdam-color-primary-black;
@@ -172,13 +177,37 @@
172
177
  @amsterdam-top-task-link-label-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
173
178
  @amsterdam-top-task-link-label-font-weight: @amsterdam-typography-font-weight-bold;
174
179
  @amsterdam-top-task-link-label-font-family: @amsterdam-typography-font-family;
175
- @amsterdam-top-task-link-description-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
176
- @amsterdam-top-task-link-description-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
177
- @amsterdam-top-task-link-description-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
178
- @amsterdam-top-task-link-description-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
180
+ @amsterdam-top-task-link-description-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
181
+ @amsterdam-top-task-link-description-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
182
+ @amsterdam-top-task-link-description-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
183
+ @amsterdam-top-task-link-description-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
179
184
  @amsterdam-top-task-link-description-font-weight: @amsterdam-typography-font-weight-normal;
180
185
  @amsterdam-top-task-link-description-font-family: @amsterdam-typography-font-family;
181
186
  @amsterdam-top-task-link-description-color: @amsterdam-color-primary-black;
187
+ @amsterdam-text-input-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
188
+ @amsterdam-text-input-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
189
+ @amsterdam-text-input-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
190
+ @amsterdam-text-input-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
191
+ @amsterdam-text-input-placeholder-color: @amsterdam-color-neutral-grey3;
192
+ @amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-red;
193
+ @amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-red;
194
+ @amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-black;
195
+ @amsterdam-text-input-disabled-color: @amsterdam-color-neutral-grey2;
196
+ @amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px @amsterdam-color-neutral-grey2;
197
+ @amsterdam-text-input-disabled-background-color: @amsterdam-color-primary-white;
198
+ @amsterdam-text-input-outline-offset: @amsterdam-focus-outline-offset;
199
+ @amsterdam-text-input-font-weight: @amsterdam-typography-font-weight-normal;
200
+ @amsterdam-text-input-font-family: @amsterdam-typography-font-family;
201
+ @amsterdam-text-input-color: @amsterdam-color-primary-black;
202
+ @amsterdam-text-input-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-black;
203
+ @amsterdam-table-header-cell-font-weight: @amsterdam-typography-font-weight-bold;
204
+ @amsterdam-table-cell-border-bottom: 1px solid @amsterdam-color-neutral-grey1;
205
+ @amsterdam-table-caption-font-weight: @amsterdam-typography-font-weight-bold;
206
+ @amsterdam-table-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
207
+ @amsterdam-table-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
208
+ @amsterdam-table-font-weight: @amsterdam-typography-font-weight-normal;
209
+ @amsterdam-table-font-family: @amsterdam-typography-font-family;
210
+ @amsterdam-table-color: @amsterdam-color-primary-black;
182
211
  @amsterdam-switch-disabled-background-color: @amsterdam-color-neutral-grey2;
183
212
  @amsterdam-switch-outline-offset: @amsterdam-focus-outline-offset;
184
213
  @amsterdam-switch-checked-background-color: @amsterdam-color-primary-blue;
@@ -186,18 +215,54 @@
186
215
  @amsterdam-switch-thumb-background-color: @amsterdam-color-primary-white;
187
216
  @amsterdam-switch-background-color: @amsterdam-color-neutral-grey3;
188
217
  @amsterdam-switch-font-family: @amsterdam-typography-font-family;
189
- @amsterdam-paragraph-compact-large-line-height: @amsterdam-typography-compact-text-level-5-line-height;
190
- @amsterdam-paragraph-compact-large-font-size: @amsterdam-typography-compact-text-level-5-font-size;
191
- @amsterdam-paragraph-compact-medium-line-height: @amsterdam-typography-compact-text-level-6-line-height;
192
- @amsterdam-paragraph-compact-medium-font-size: @amsterdam-typography-compact-text-level-6-font-size;
193
- @amsterdam-paragraph-compact-small-line-height: @amsterdam-typography-compact-text-level-7-line-height;
194
- @amsterdam-paragraph-compact-small-font-size: @amsterdam-typography-compact-text-level-7-font-size;
195
- @amsterdam-paragraph-spacious-large-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
196
- @amsterdam-paragraph-spacious-large-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
197
- @amsterdam-paragraph-spacious-medium-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
198
- @amsterdam-paragraph-spacious-medium-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
199
- @amsterdam-paragraph-spacious-small-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
200
- @amsterdam-paragraph-spacious-small-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
218
+ @amsterdam-spotlight-yellow-background-color: @amsterdam-color-yellow;
219
+ @amsterdam-spotlight-purple-background-color: @amsterdam-color-purple;
220
+ @amsterdam-spotlight-orange-background-color: @amsterdam-color-orange;
221
+ @amsterdam-spotlight-magenta-background-color: @amsterdam-color-magenta;
222
+ @amsterdam-spotlight-green-background-color: @amsterdam-color-green;
223
+ @amsterdam-spotlight-dark-green-background-color: @amsterdam-color-dark-green;
224
+ @amsterdam-spotlight-dark-blue-background-color: @amsterdam-color-primary-blue;
225
+ @amsterdam-spotlight-blue-background-color: @amsterdam-color-blue;
226
+ @amsterdam-skip-link-hover-background-color: @amsterdam-color-dark-blue;
227
+ @amsterdam-skip-link-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
228
+ @amsterdam-skip-link-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
229
+ @amsterdam-skip-link-outline-offset: @amsterdam-focus-outline-offset;
230
+ @amsterdam-skip-link-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
231
+ @amsterdam-skip-link-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
232
+ @amsterdam-skip-link-font-weight: @amsterdam-typography-font-weight-normal;
233
+ @amsterdam-skip-link-font-family: @amsterdam-typography-font-family;
234
+ @amsterdam-skip-link-color: @amsterdam-color-primary-white;
235
+ @amsterdam-skip-link-background-color: @amsterdam-color-primary-blue;
236
+ @amsterdam-search-field-input-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
237
+ @amsterdam-search-field-input-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
238
+ @amsterdam-search-field-input-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
239
+ @amsterdam-search-field-input-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
240
+ @amsterdam-search-field-input-placeholder-color: @amsterdam-color-neutral-grey3;
241
+ @amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-black;
242
+ @amsterdam-search-field-input-cancel-button-width: @amsterdam-typography-spacious-text-level-6-font-size;
243
+ @amsterdam-search-field-input-cancel-button-height: @amsterdam-typography-spacious-text-level-6-font-size;
244
+ @amsterdam-search-field-input-cancel-button-color: @amsterdam-color-primary-blue;
245
+ @amsterdam-search-field-input-outline-offset: @amsterdam-focus-outline-offset;
246
+ @amsterdam-search-field-input-font-weight: @amsterdam-typography-font-weight-normal;
247
+ @amsterdam-search-field-input-font-family: @amsterdam-typography-font-family;
248
+ @amsterdam-search-field-input-color: @amsterdam-color-primary-black;
249
+ @amsterdam-search-field-input-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-black;
250
+ @amsterdam-search-field-button-hover-background-color: @amsterdam-color-dark-blue;
251
+ @amsterdam-search-field-button-outline-offset: @amsterdam-focus-outline-offset;
252
+ @amsterdam-search-field-button-color: @amsterdam-color-primary-white;
253
+ @amsterdam-search-field-button-background-color: @amsterdam-color-primary-blue;
254
+ @amsterdam-paragraph-compact-large-line-height: @amsterdam-typography-compact-text-level-4-line-height;
255
+ @amsterdam-paragraph-compact-large-font-size: @amsterdam-typography-compact-text-level-4-font-size;
256
+ @amsterdam-paragraph-compact-medium-line-height: @amsterdam-typography-compact-text-level-5-line-height;
257
+ @amsterdam-paragraph-compact-medium-font-size: @amsterdam-typography-compact-text-level-5-font-size;
258
+ @amsterdam-paragraph-compact-small-line-height: @amsterdam-typography-compact-text-level-6-line-height;
259
+ @amsterdam-paragraph-compact-small-font-size: @amsterdam-typography-compact-text-level-6-font-size;
260
+ @amsterdam-paragraph-spacious-large-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
261
+ @amsterdam-paragraph-spacious-large-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
262
+ @amsterdam-paragraph-spacious-medium-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
263
+ @amsterdam-paragraph-spacious-medium-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
264
+ @amsterdam-paragraph-spacious-small-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
265
+ @amsterdam-paragraph-spacious-small-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
201
266
  @amsterdam-paragraph-inverse-color: @amsterdam-color-primary-white;
202
267
  @amsterdam-paragraph-font-weight: @amsterdam-typography-font-weight-normal;
203
268
  @amsterdam-paragraph-font-family: @amsterdam-typography-font-family;
@@ -208,17 +273,17 @@
208
273
  @amsterdam-pagination-button-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
209
274
  @amsterdam-pagination-button-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
210
275
  @amsterdam-pagination-button-outline-offset: @amsterdam-focus-outline-offset;
211
- @amsterdam-pagination-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
212
- @amsterdam-pagination-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
213
- @amsterdam-pagination-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
214
- @amsterdam-pagination-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
276
+ @amsterdam-pagination-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
277
+ @amsterdam-pagination-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
278
+ @amsterdam-pagination-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
279
+ @amsterdam-pagination-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
215
280
  @amsterdam-pagination-font-weight: @amsterdam-typography-font-weight-normal;
216
281
  @amsterdam-pagination-font-family: @amsterdam-typography-font-family;
217
282
  @amsterdam-page-menu-item-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
218
- @amsterdam-page-menu-item-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
219
- @amsterdam-page-menu-item-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
220
- @amsterdam-page-menu-item-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
221
- @amsterdam-page-menu-item-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
283
+ @amsterdam-page-menu-item-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
284
+ @amsterdam-page-menu-item-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
285
+ @amsterdam-page-menu-item-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
286
+ @amsterdam-page-menu-item-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
222
287
  @amsterdam-page-menu-item-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
223
288
  @amsterdam-page-menu-item-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
224
289
  @amsterdam-page-menu-item-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
@@ -233,29 +298,31 @@
233
298
  @amsterdam-page-heading-font-weight: @amsterdam-typography-font-weight-bold;
234
299
  @amsterdam-page-heading-font-family: @amsterdam-typography-font-family;
235
300
  @amsterdam-page-heading-color: @amsterdam-color-primary-black;
236
- @amsterdam-ordered-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
237
- @amsterdam-ordered-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
238
- @amsterdam-ordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
239
- @amsterdam-ordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
301
+ @amsterdam-ordered-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
302
+ @amsterdam-ordered-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
303
+ @amsterdam-ordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
304
+ @amsterdam-ordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
240
305
  @amsterdam-ordered-list-font-weight: @amsterdam-typography-font-weight-normal;
241
306
  @amsterdam-ordered-list-font-family: @amsterdam-typography-font-family;
242
307
  @amsterdam-ordered-list-color: @amsterdam-color-primary-black;
308
+ @amsterdam-mega-menu-list-category-padding-block-end: @amsterdam-grid-spacious-gap;
309
+ @amsterdam-mega-menu-list-category-column-gap: @amsterdam-grid-spacious-gap;
243
310
  @amsterdam-logo-subsite-color: @amsterdam-color-primary-black;
244
311
  @amsterdam-logo-title-color: @amsterdam-color-primary-red;
245
312
  @amsterdam-logo-emblem-color: @amsterdam-color-primary-red;
246
- @amsterdam-link-standalone-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
247
- @amsterdam-link-standalone-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
248
- @amsterdam-link-standalone-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
249
- @amsterdam-link-standalone-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
313
+ @amsterdam-link-standalone-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
314
+ @amsterdam-link-standalone-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
315
+ @amsterdam-link-standalone-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
316
+ @amsterdam-link-standalone-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
250
317
  @amsterdam-link-standalone-hover-text-underline-offset: @amsterdam-link-appearance-regular-hover-text-underline-offset;
251
318
  @amsterdam-link-standalone-hover-text-decoration-thickness: @amsterdam-link-appearance-regular-hover-text-decoration-thickness;
252
319
  @amsterdam-link-standalone-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
253
320
  @amsterdam-link-standalone-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
254
321
  @amsterdam-link-standalone-text-decoration-line: @amsterdam-link-appearance-regular-text-decoration-line;
255
- @amsterdam-link-in-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
256
- @amsterdam-link-in-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
257
- @amsterdam-link-in-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
258
- @amsterdam-link-in-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
322
+ @amsterdam-link-in-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
323
+ @amsterdam-link-in-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
324
+ @amsterdam-link-in-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
325
+ @amsterdam-link-in-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
259
326
  @amsterdam-link-in-list-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
260
327
  @amsterdam-link-in-list-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
261
328
  @amsterdam-link-in-list-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
@@ -269,8 +336,25 @@
269
336
  @amsterdam-link-outline-offset: @amsterdam-focus-outline-offset;
270
337
  @amsterdam-link-font-weight: @amsterdam-typography-font-weight-normal;
271
338
  @amsterdam-link-font-family: @amsterdam-typography-font-family;
272
- @amsterdam-icon-compact-size-7-line-height: @amsterdam-typography-compact-text-level-7-line-height;
273
- @amsterdam-icon-compact-size-7-font-size: @amsterdam-typography-compact-text-level-7-font-size;
339
+ @amsterdam-link-list-link-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
340
+ @amsterdam-link-list-link-compact-large-line-height: @amsterdam-typography-compact-text-level-4-line-height;
341
+ @amsterdam-link-list-link-compact-large-font-size: @amsterdam-typography-compact-text-level-4-font-size;
342
+ @amsterdam-link-list-link-compact-medium-line-height: @amsterdam-typography-compact-text-level-5-line-height;
343
+ @amsterdam-link-list-link-compact-medium-font-size: @amsterdam-typography-compact-text-level-5-font-size;
344
+ @amsterdam-link-list-link-compact-small-line-height: @amsterdam-typography-compact-text-level-6-line-height;
345
+ @amsterdam-link-list-link-compact-small-font-size: @amsterdam-typography-compact-text-level-6-font-size;
346
+ @amsterdam-link-list-link-spacious-large-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
347
+ @amsterdam-link-list-link-spacious-large-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
348
+ @amsterdam-link-list-link-spacious-medium-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
349
+ @amsterdam-link-list-link-spacious-medium-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
350
+ @amsterdam-link-list-link-spacious-small-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
351
+ @amsterdam-link-list-link-spacious-small-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
352
+ @amsterdam-link-list-link-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
353
+ @amsterdam-link-list-link-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
354
+ @amsterdam-link-list-link-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
355
+ @amsterdam-link-list-link-outline-offset: @amsterdam-focus-outline-offset;
356
+ @amsterdam-link-list-link-font-weight: @amsterdam-typography-font-weight-normal;
357
+ @amsterdam-link-list-link-font-family: @amsterdam-typography-font-family;
274
358
  @amsterdam-icon-compact-size-6-line-height: @amsterdam-typography-compact-text-level-6-line-height;
275
359
  @amsterdam-icon-compact-size-6-font-size: @amsterdam-typography-compact-text-level-6-font-size;
276
360
  @amsterdam-icon-compact-size-5-line-height: @amsterdam-typography-compact-text-level-5-line-height;
@@ -279,8 +363,6 @@
279
363
  @amsterdam-icon-compact-size-4-font-size: @amsterdam-typography-compact-text-level-4-font-size;
280
364
  @amsterdam-icon-compact-size-3-line-height: @amsterdam-typography-compact-text-level-3-line-height;
281
365
  @amsterdam-icon-compact-size-3-font-size: @amsterdam-typography-compact-text-level-3-font-size;
282
- @amsterdam-icon-spacious-size-7-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
283
- @amsterdam-icon-spacious-size-7-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
284
366
  @amsterdam-icon-spacious-size-6-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
285
367
  @amsterdam-icon-spacious-size-6-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
286
368
  @amsterdam-icon-spacious-size-5-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
@@ -289,14 +371,23 @@
289
371
  @amsterdam-icon-spacious-size-4-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
290
372
  @amsterdam-icon-spacious-size-3-line-height: @amsterdam-typography-spacious-text-level-3-line-height;
291
373
  @amsterdam-icon-spacious-size-3-font-size: @amsterdam-typography-spacious-text-level-3-font-size;
292
- @amsterdam-highlight-yellow-background-color: @amsterdam-color-yellow;
293
- @amsterdam-highlight-purple-background-color: @amsterdam-color-purple;
294
- @amsterdam-highlight-orange-background-color: @amsterdam-color-orange;
295
- @amsterdam-highlight-magenta-background-color: @amsterdam-color-magenta;
296
- @amsterdam-highlight-light-blue-background-color: @amsterdam-color-blue;
297
- @amsterdam-highlight-green-background-color: @amsterdam-color-green;
298
- @amsterdam-highlight-dark-green-background-color: @amsterdam-color-dark-green;
299
- @amsterdam-highlight-blue-background-color: @amsterdam-color-primary-blue;
374
+ @amsterdam-icon-button-on-background-dark-disabled-background-color: @amsterdam-color-neutral-grey2;
375
+ @amsterdam-icon-button-on-background-dark-disabled-color: @amsterdam-color-primary-white;
376
+ @amsterdam-icon-button-on-background-dark-hover-color: @amsterdam-color-primary-white;
377
+ @amsterdam-icon-button-on-background-dark-hover-background-color: @amsterdam-color-dark-blue;
378
+ @amsterdam-icon-button-on-background-dark-color: @amsterdam-color-primary-white;
379
+ @amsterdam-icon-button-on-background-dark-background-color: @amsterdam-color-primary-blue;
380
+ @amsterdam-icon-button-on-background-light-disabled-color: @amsterdam-color-neutral-grey2;
381
+ @amsterdam-icon-button-on-background-light-hover-color: @amsterdam-color-primary-black;
382
+ @amsterdam-icon-button-on-background-light-color: @amsterdam-color-primary-black;
383
+ @amsterdam-icon-button-disabled-color: @amsterdam-color-neutral-grey2;
384
+ @amsterdam-icon-button-hover-color: @amsterdam-color-dark-blue;
385
+ @amsterdam-icon-button-outline-offset: @amsterdam-focus-outline-offset;
386
+ @amsterdam-icon-button-color: @amsterdam-color-primary-blue;
387
+ @amsterdam-heading-compact-level-6-font-size: @amsterdam-typography-compact-text-level-6-font-size;
388
+ @amsterdam-heading-compact-level-6-line-height: @amsterdam-typography-compact-text-level-6-line-height;
389
+ @amsterdam-heading-compact-level-5-font-size: @amsterdam-typography-compact-text-level-5-font-size;
390
+ @amsterdam-heading-compact-level-5-line-height: @amsterdam-typography-compact-text-level-5-line-height;
300
391
  @amsterdam-heading-compact-level-4-font-size: @amsterdam-typography-compact-text-level-4-font-size;
301
392
  @amsterdam-heading-compact-level-4-line-height: @amsterdam-typography-compact-text-level-4-line-height;
302
393
  @amsterdam-heading-compact-level-3-font-size: @amsterdam-typography-compact-text-level-3-font-size;
@@ -305,6 +396,10 @@
305
396
  @amsterdam-heading-compact-level-2-line-height: @amsterdam-typography-compact-text-level-2-line-height;
306
397
  @amsterdam-heading-compact-level-1-font-size: @amsterdam-typography-compact-text-level-1-font-size;
307
398
  @amsterdam-heading-compact-level-1-line-height: @amsterdam-typography-compact-text-level-1-line-height;
399
+ @amsterdam-heading-spacious-level-6-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
400
+ @amsterdam-heading-spacious-level-6-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
401
+ @amsterdam-heading-spacious-level-5-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
402
+ @amsterdam-heading-spacious-level-5-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
308
403
  @amsterdam-heading-spacious-level-4-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
309
404
  @amsterdam-heading-spacious-level-4-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
310
405
  @amsterdam-heading-spacious-level-3-font-size: @amsterdam-typography-spacious-text-level-3-font-size;
@@ -317,15 +412,14 @@
317
412
  @amsterdam-heading-font-weight: @amsterdam-typography-font-weight-bold;
318
413
  @amsterdam-heading-font-family: @amsterdam-typography-font-family;
319
414
  @amsterdam-heading-color: @amsterdam-color-primary-black;
320
- @amsterdam-form-label-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
321
- @amsterdam-form-label-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
322
- @amsterdam-form-label-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
323
- @amsterdam-form-label-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
415
+ @amsterdam-header-column-gap: @amsterdam-grid-spacious-gap;
416
+ @amsterdam-form-label-compact-line-height: @amsterdam-typography-compact-text-level-4-line-height;
417
+ @amsterdam-form-label-compact-font-size: @amsterdam-typography-compact-text-level-4-font-size;
418
+ @amsterdam-form-label-spacious-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
419
+ @amsterdam-form-label-spacious-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
324
420
  @amsterdam-form-label-font-weight: @amsterdam-typography-font-weight-bold;
325
421
  @amsterdam-form-label-font-family: @amsterdam-typography-font-family;
326
422
  @amsterdam-form-label-color: @amsterdam-color-primary-black;
327
- @amsterdam-dialog-close-hover-fill: @amsterdam-color-primary-blue;
328
- @amsterdam-dialog-close-fill: @amsterdam-color-primary-black;
329
423
  @amsterdam-dialog-title-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
330
424
  @amsterdam-dialog-title-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
331
425
  @amsterdam-dialog-title-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
@@ -334,10 +428,10 @@
334
428
  @amsterdam-dialog-title-font-family: @amsterdam-typography-font-family;
335
429
  @amsterdam-dialog-title-color: @amsterdam-color-primary-black;
336
430
  @amsterdam-dialog-background-color: @amsterdam-color-primary-white;
337
- @amsterdam-checkbox-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
338
- @amsterdam-checkbox-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
339
- @amsterdam-checkbox-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
340
- @amsterdam-checkbox-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
431
+ @amsterdam-checkbox-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
432
+ @amsterdam-checkbox-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
433
+ @amsterdam-checkbox-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
434
+ @amsterdam-checkbox-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
341
435
  @amsterdam-checkbox-outline-offset: @amsterdam-focus-outline-offset;
342
436
  @amsterdam-checkbox-hover-color: @amsterdam-color-dark-blue;
343
437
  @amsterdam-checkbox-font-weight: @amsterdam-typography-font-weight-normal;
@@ -366,26 +460,25 @@
366
460
  @amsterdam-card-link-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
367
461
  @amsterdam-card-link-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
368
462
  @amsterdam-card-link-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
369
- @amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
463
+ @amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-dark-blue;
370
464
  @amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-blue;
371
465
  @amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey2;
372
466
  @amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px @amsterdam-color-dark-blue;
373
467
  @amsterdam-button-secondary-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-blue;
374
- @amsterdam-button-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
375
- @amsterdam-button-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
376
- @amsterdam-button-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
377
- @amsterdam-button-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
378
- @amsterdam-breadcrumb-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
379
- @amsterdam-breadcrumb-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
380
- @amsterdam-breadcrumb-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
381
- @amsterdam-breadcrumb-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
468
+ @amsterdam-button-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
469
+ @amsterdam-button-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
470
+ @amsterdam-button-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
471
+ @amsterdam-button-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
472
+ @amsterdam-breadcrumb-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
473
+ @amsterdam-breadcrumb-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
474
+ @amsterdam-breadcrumb-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
475
+ @amsterdam-breadcrumb-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
382
476
  @amsterdam-breadcrumb-item-link-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
383
477
  @amsterdam-breadcrumb-item-link-hover-color: @amsterdam-color-dark-blue;
384
478
  @amsterdam-breadcrumb-item-link-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
385
479
  @amsterdam-breadcrumb-item-link-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
386
480
  @amsterdam-breadcrumb-item-link-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
387
481
  @amsterdam-breadcrumb-item-link-outline-offset: @amsterdam-focus-outline-offset;
388
- @amsterdam-breadcrumb-separator-background-color: @amsterdam-color-primary-blue;
389
482
  @amsterdam-breadcrumb-font-weight: @amsterdam-typography-font-weight-normal;
390
483
  @amsterdam-breadcrumb-font-family: @amsterdam-typography-font-family;
391
484
  @amsterdam-blockquote-compact-line-height: @amsterdam-typography-compact-text-level-3-line-height;
@@ -396,6 +489,28 @@
396
489
  @amsterdam-blockquote-font-weight: @amsterdam-typography-font-weight-bold;
397
490
  @amsterdam-blockquote-font-family: @amsterdam-typography-font-family;
398
491
  @amsterdam-blockquote-color: @amsterdam-color-primary-black;
492
+ @amsterdam-badge-yellow-color: @amsterdam-color-primary-black;
493
+ @amsterdam-badge-yellow-background-color: @amsterdam-color-yellow;
494
+ @amsterdam-badge-purple-color: @amsterdam-color-primary-white;
495
+ @amsterdam-badge-purple-background-color: @amsterdam-color-purple;
496
+ @amsterdam-badge-orange-color: @amsterdam-color-primary-black;
497
+ @amsterdam-badge-orange-background-color: @amsterdam-color-orange;
498
+ @amsterdam-badge-magenta-color: @amsterdam-color-primary-white;
499
+ @amsterdam-badge-magenta-background-color: @amsterdam-color-magenta;
500
+ @amsterdam-badge-green-color: @amsterdam-color-primary-black;
501
+ @amsterdam-badge-green-background-color: @amsterdam-color-green;
502
+ @amsterdam-badge-dark-green-color: @amsterdam-color-primary-white;
503
+ @amsterdam-badge-dark-green-background-color: @amsterdam-color-dark-green;
504
+ @amsterdam-badge-dark-blue-color: @amsterdam-color-primary-white;
505
+ @amsterdam-badge-dark-blue-background-color: @amsterdam-color-primary-blue;
506
+ @amsterdam-badge-blue-color: @amsterdam-color-primary-black;
507
+ @amsterdam-badge-blue-background-color: @amsterdam-color-blue;
508
+ @amsterdam-badge-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
509
+ @amsterdam-badge-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
510
+ @amsterdam-badge-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
511
+ @amsterdam-badge-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
512
+ @amsterdam-badge-font-weight: @amsterdam-typography-font-weight-bold;
513
+ @amsterdam-badge-font-family: @amsterdam-typography-font-family;
399
514
  @amsterdam-aspect-ratio-2x-wide: @amsterdam-proportion-2x-wide;
400
515
  @amsterdam-aspect-ratio-x-wide: @amsterdam-proportion-x-wide;
401
516
  @amsterdam-aspect-ratio-wide: @amsterdam-proportion-wide;
@@ -404,14 +519,14 @@
404
519
  @amsterdam-aspect-ratio-x-tall: @amsterdam-proportion-x-tall;
405
520
  @amsterdam-alert-close-hover-fill: @amsterdam-color-primary-blue;
406
521
  @amsterdam-alert-close-fill: @amsterdam-color-primary-black;
522
+ @amsterdam-alert-warning-border-color: @amsterdam-color-orange;
407
523
  @amsterdam-alert-success-border-color: @amsterdam-color-dark-green;
408
- @amsterdam-alert-success-background-color: @amsterdam-color-primary-white;
524
+ @amsterdam-alert-info-border-color: @amsterdam-color-primary-blue;
409
525
  @amsterdam-alert-error-border-color: @amsterdam-color-primary-red;
410
- @amsterdam-alert-error-background-color: @amsterdam-color-primary-white;
411
- @amsterdam-alert-title-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
412
- @amsterdam-alert-title-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
413
- @amsterdam-alert-title-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
414
- @amsterdam-alert-title-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
526
+ @amsterdam-alert-title-compact-line-height: @amsterdam-typography-compact-text-level-4-line-height;
527
+ @amsterdam-alert-title-compact-font-size: @amsterdam-typography-compact-text-level-4-font-size;
528
+ @amsterdam-alert-title-spacious-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
529
+ @amsterdam-alert-title-spacious-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
415
530
  @amsterdam-alert-title-font-weight: @amsterdam-typography-font-weight-bold;
416
531
  @amsterdam-alert-title-font-family: @amsterdam-typography-font-family;
417
532
  @amsterdam-alert-title-color: @amsterdam-color-primary-black;
@@ -419,8 +534,6 @@
419
534
  @amsterdam-alert-padding-inline-start: @amsterdam-spacing-inset-lg;
420
535
  @amsterdam-alert-padding-block-end: @amsterdam-spacing-inset-md;
421
536
  @amsterdam-alert-padding-block-start: @amsterdam-spacing-inset-md;
422
- @amsterdam-alert-border: 4px solid @amsterdam-color-yellow;
423
- @amsterdam-alert-background-color: @amsterdam-color-yellow;
424
537
  @amsterdam-accordion-button-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
425
538
  @amsterdam-accordion-button-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
426
539
  @amsterdam-accordion-button-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
@@ -447,6 +560,12 @@
447
560
  @amsterdam-link-on-background-dark-color: @amsterdam-link-appearance-on-background-dark-color;
448
561
  @amsterdam-link-hover-color: @amsterdam-link-appearance-hover-color;
449
562
  @amsterdam-link-color: @amsterdam-link-appearance-color;
563
+ @amsterdam-link-list-link-on-background-light-hover-color: @amsterdam-link-appearance-on-background-light-color;
564
+ @amsterdam-link-list-link-on-background-light-color: @amsterdam-link-appearance-on-background-light-color;
565
+ @amsterdam-link-list-link-on-background-dark-hover-color: @amsterdam-link-appearance-on-background-dark-color;
566
+ @amsterdam-link-list-link-on-background-dark-color: @amsterdam-link-appearance-on-background-dark-color;
567
+ @amsterdam-link-list-link-hover-color: @amsterdam-link-appearance-hover-color;
568
+ @amsterdam-link-list-link-color: @amsterdam-link-appearance-color;
450
569
  @amsterdam-card-link-hover-color: @amsterdam-link-appearance-hover-color;
451
570
  @amsterdam-card-link-color: @amsterdam-link-appearance-color;
452
571
  @amsterdam-breadcrumb-item-link-color: @amsterdam-link-appearance-color;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.2.0",
2
+ "version": "0.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
26
26
  "devDependencies": {
27
27
  "chokidar-cli": "3.0.0",
28
28
  "npm-run-all": "4.1.5",
29
- "style-dictionary": "3.9.0"
29
+ "style-dictionary": "3.9.2"
30
30
  },
31
- "gitHead": "de071558a849af9c0f7b1a442b255a1a42d78f2f"
31
+ "gitHead": "3bc9765e9de9553db5b643d2ed79735837d4d7b6"
32
32
  }
package/src/brand/amsterdam/color.tokens.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "amsterdam": {
3
3
  "color": {
4
4
  "primary-black": { "value": "#000000" },
5
- "primary-white": { "value": "#ffffff" },
5
+ "primary-white": { "value": "#FFFFFF" },
6
6
  "primary-blue": { "value": "#004699" },
7
7
  "primary-red": { "value": "#EC0000" },
8
8
  "dark-blue": { "value": "#102E62" },
@@ -10,13 +10,12 @@
10
10
  "yellow": { "value": "#FFE600" },
11
11
  "green": { "value": "#BED200" },
12
12
  "dark-green": { "value": "#00A03C" },
13
- "blue": { "value": "#009DEC" },
13
+ "blue": { "value": "#009DE6" },
14
14
  "purple": { "value": "#A00078" },
15
15
  "magenta": { "value": "#E50082" },
16
- "neutral-grey1": { "value": "#E6E6E6" },
17
- "neutral-grey2": { "value": "#B4B4B4" },
18
- "neutral-grey3": { "value": "#767676" },
19
- "neutral-grey4": { "value": "#323232" }
16
+ "neutral-grey1": { "value": "#E8E8E8" },
17
+ "neutral-grey2": { "value": "#BEBEBE" },
18
+ "neutral-grey3": { "value": "#767676" }
20
19
  }
21
20
  }
22
21
  }