@amsterdam/design-system-tokens 0.4.0 → 0.5.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 (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build.js +99 -0
  3. package/dist/compact.css +16 -0
  4. package/dist/compact.d.ts +56 -0
  5. package/dist/compact.json +33 -0
  6. package/dist/compact.mjs +14 -0
  7. package/dist/compact.scss +13 -0
  8. package/dist/compact.theme.css +16 -0
  9. package/dist/index.css +102 -201
  10. package/dist/index.d.ts +1103 -580
  11. package/dist/index.json +1082 -567
  12. package/dist/{index.js → index.mjs} +92 -191
  13. package/dist/{_variables.scss → index.scss} +101 -200
  14. package/dist/{root.css → index.theme.css} +102 -201
  15. package/package.json +7 -10
  16. package/src/brand/amsterdam/typography.compact.tokens.json +29 -0
  17. package/src/brand/amsterdam/typography.tokens.json +28 -62
  18. package/src/common/amsterdam/hyphenation.tokens.json +9 -0
  19. package/src/components/amsterdam/accordion.tokens.json +4 -10
  20. package/src/components/amsterdam/alert.tokens.json +0 -13
  21. package/src/components/amsterdam/badge.tokens.json +2 -8
  22. package/src/components/amsterdam/blockquote.tokens.json +3 -9
  23. package/src/components/amsterdam/breadcrumb.tokens.json +2 -8
  24. package/src/components/amsterdam/button.tokens.json +2 -8
  25. package/src/components/amsterdam/checkbox.tokens.json +5 -11
  26. package/src/components/amsterdam/dialog.tokens.json +2 -8
  27. package/src/components/amsterdam/form-label.tokens.json +2 -8
  28. package/src/components/amsterdam/grid.compact.tokens.json +14 -0
  29. package/src/components/amsterdam/grid.tokens.json +6 -18
  30. package/src/components/amsterdam/header.tokens.json +1 -1
  31. package/src/components/amsterdam/heading.tokens.json +22 -50
  32. package/src/components/amsterdam/icon.tokens.json +14 -34
  33. package/src/components/amsterdam/link-list.tokens.json +10 -26
  34. package/src/components/amsterdam/link.tokens.json +2 -25
  35. package/src/components/amsterdam/mega-menu.tokens.json +2 -2
  36. package/src/components/amsterdam/ordered-list.tokens.json +2 -8
  37. package/src/components/amsterdam/page-heading.tokens.json +2 -8
  38. package/src/components/amsterdam/page-menu.tokens.json +2 -8
  39. package/src/components/amsterdam/pagination.tokens.json +2 -8
  40. package/src/components/amsterdam/paragraph.tokens.json +10 -26
  41. package/src/components/amsterdam/search-field.tokens.json +4 -10
  42. package/src/components/amsterdam/skip-link.tokens.json +2 -6
  43. package/src/components/amsterdam/table.tokens.json +2 -2
  44. package/src/components/amsterdam/text-input.tokens.json +2 -8
  45. package/src/components/amsterdam/top-task-link.tokens.json +4 -16
  46. package/src/components/amsterdam/unordered-list.tokens.json +2 -8
  47. package/dist/index.tokens.json +0 -1341
  48. package/dist/tokens.d.ts +0 -1364
  49. package/dist/tokens.js +0 -12927
  50. package/dist/variables.less +0 -571
  51. package/style-dictionary.config.json +0 -101
package/dist/{root.css → index.theme.css} RENAMED
@@ -1,9 +1,9 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 31 Jan 2024 12:56:24 GMT
3
+ * Generated on Fri, 09 Feb 2024 16:26:11 GMT
4
4
  */
5
5
 
6
- :root {
6
+ .amsterdam-theme {
7
7
  --utrecht-button-subtle-disabled-background-color: transparent;
8
8
  --utrecht-button-subtle-background-color: transparent;
9
9
  --utrecht-focus-outline-offset: 2px;
@@ -40,7 +40,6 @@
40
40
  --amsterdam-mega-menu-list-category-column-width: 20rem;
41
41
  --amsterdam-mark-background-color: var(--amsterdam-color-yellow);
42
42
  --amsterdam-logo-height: 2.5rem;
43
- --amsterdam-link-in-list-gap: 0.5em;
44
43
  --amsterdam-link-inline-line-height: inherit;
45
44
  --amsterdam-link-inline-font-size: inherit;
46
45
  --amsterdam-link-inline-font-family: inherit;
@@ -50,10 +49,8 @@
50
49
  --amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
51
50
  --amsterdam-grid-wide-column-count: 12;
52
51
  --amsterdam-grid-medium-column-count: 8;
53
- --amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
54
- --amsterdam-grid-compact-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
55
- --amsterdam-grid-spacious-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
56
- --amsterdam-grid-spacious-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
52
+ --amsterdam-grid-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
53
+ --amsterdam-grid-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
57
54
  --amsterdam-grid-column-count: 4;
58
55
  --amsterdam-dialog-footer-padding-block: 1.5rem 0;
59
56
  --amsterdam-dialog-footer-gap: 1rem;
@@ -82,38 +79,27 @@
82
79
  --amsterdam-link-appearance-regular-text-decoration-line: underline;
83
80
  --amsterdam-link-appearance-text-underline-offset: 0.375rem;
84
81
  --amsterdam-link-appearance-text-decoration-thickness: 0.125rem;
82
+ --amsterdam-hyphenation-overflow-wrap: break-word;
83
+ --amsterdam-hyphenation-hyphens: auto;
84
+ --amsterdam-hyphenation-hyphenate-limit-chars: 12 8 4;
85
85
  --amsterdam-focus-outline-offset: 2px;
86
86
  --amsterdam-border-width-lg: 3px;
87
87
  --amsterdam-border-width-md: 2px;
88
88
  --amsterdam-border-width-sm: 1px;
89
- --amsterdam-typography-compact-text-level-6-line-height: 1.6;
90
- --amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
91
- --amsterdam-typography-compact-text-level-5-line-height: 1.6;
92
- --amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
93
- --amsterdam-typography-compact-text-level-4-line-height: 1.5;
94
- --amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
95
- --amsterdam-typography-compact-text-level-3-line-height: 1.3;
96
- --amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
97
- --amsterdam-typography-compact-text-level-2-line-height: 1.25;
98
- --amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
99
- --amsterdam-typography-compact-text-level-1-line-height: 1.2;
100
- --amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
101
- --amsterdam-typography-compact-text-level-0-line-height: 1.15;
102
- --amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
103
- --amsterdam-typography-spacious-text-level-6-line-height: 1.6;
104
- --amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
105
- --amsterdam-typography-spacious-text-level-5-line-height: 1.6;
106
- --amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
107
- --amsterdam-typography-spacious-text-level-4-line-height: 1.5;
108
- --amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
109
- --amsterdam-typography-spacious-text-level-3-line-height: 1.3;
110
- --amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
111
- --amsterdam-typography-spacious-text-level-2-line-height: 1.25;
112
- --amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
113
- --amsterdam-typography-spacious-text-level-1-line-height: 1.2;
114
- --amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
115
- --amsterdam-typography-spacious-text-level-0-line-height: 1.15;
116
- --amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
89
+ --amsterdam-typography-text-level-6-line-height: 1.6;
90
+ --amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
91
+ --amsterdam-typography-text-level-5-line-height: 1.6;
92
+ --amsterdam-typography-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
93
+ --amsterdam-typography-text-level-4-line-height: 1.5;
94
+ --amsterdam-typography-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
95
+ --amsterdam-typography-text-level-3-line-height: 1.3;
96
+ --amsterdam-typography-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
97
+ --amsterdam-typography-text-level-2-line-height: 1.25;
98
+ --amsterdam-typography-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
99
+ --amsterdam-typography-text-level-1-line-height: 1.2;
100
+ --amsterdam-typography-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
101
+ --amsterdam-typography-text-level-0-line-height: 1.15;
102
+ --amsterdam-typography-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
117
103
  --amsterdam-typography-font-weight-bold: 800;
118
104
  --amsterdam-typography-font-weight-normal: 400;
119
105
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -160,36 +146,26 @@
160
146
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
161
147
  --utrecht-button-color: var(--amsterdam-color-primary-white);
162
148
  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
163
- --amsterdam-unordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
164
- --amsterdam-unordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
165
- --amsterdam-unordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
166
- --amsterdam-unordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
149
+ --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-5-line-height);
167
150
  --amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
151
+ --amsterdam-unordered-list-font-size: var(--amsterdam-typography-text-level-5-font-size);
168
152
  --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
169
153
  --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
170
154
  --amsterdam-top-task-link-outline-offset: var(--amsterdam-focus-outline-offset);
171
- --amsterdam-top-task-link-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
172
- --amsterdam-top-task-link-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
173
- --amsterdam-top-task-link-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
174
- --amsterdam-top-task-link-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
175
155
  --amsterdam-top-task-link-label-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
176
156
  --amsterdam-top-task-link-label-hover-color: var(--amsterdam-color-dark-blue);
177
157
  --amsterdam-top-task-link-label-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
178
158
  --amsterdam-top-task-link-label-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
179
159
  --amsterdam-top-task-link-label-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
160
+ --amsterdam-top-task-link-label-line-height: var(--amsterdam-typography-text-level-4-line-height);
180
161
  --amsterdam-top-task-link-label-font-weight: var(--amsterdam-typography-font-weight-bold);
162
+ --amsterdam-top-task-link-label-font-size: var(--amsterdam-typography-text-level-4-font-size);
181
163
  --amsterdam-top-task-link-label-font-family: var(--amsterdam-typography-font-family);
182
- --amsterdam-top-task-link-description-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
183
- --amsterdam-top-task-link-description-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
184
- --amsterdam-top-task-link-description-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
185
- --amsterdam-top-task-link-description-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
164
+ --amsterdam-top-task-link-description-line-height: var(--amsterdam-typography-text-level-6-line-height);
186
165
  --amsterdam-top-task-link-description-font-weight: var(--amsterdam-typography-font-weight-normal);
166
+ --amsterdam-top-task-link-description-font-size: var(--amsterdam-typography-text-level-6-font-size);
187
167
  --amsterdam-top-task-link-description-font-family: var(--amsterdam-typography-font-family);
188
168
  --amsterdam-top-task-link-description-color: var(--amsterdam-color-primary-black);
189
- --amsterdam-text-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
190
- --amsterdam-text-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
191
- --amsterdam-text-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
192
- --amsterdam-text-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
193
169
  --amsterdam-text-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
194
170
  --amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-red);
195
171
  --amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-red);
@@ -198,15 +174,17 @@
198
174
  --amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px var(--amsterdam-color-neutral-grey2);
199
175
  --amsterdam-text-input-disabled-background-color: var(--amsterdam-color-primary-white);
200
176
  --amsterdam-text-input-outline-offset: var(--amsterdam-focus-outline-offset);
177
+ --amsterdam-text-input-line-height: var(--amsterdam-typography-text-level-6-line-height);
201
178
  --amsterdam-text-input-font-weight: var(--amsterdam-typography-font-weight-normal);
179
+ --amsterdam-text-input-font-size: var(--amsterdam-typography-text-level-6-font-size);
202
180
  --amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
203
181
  --amsterdam-text-input-color: var(--amsterdam-color-primary-black);
204
182
  --amsterdam-text-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
205
183
  --amsterdam-table-header-cell-font-weight: var(--amsterdam-typography-font-weight-bold);
206
184
  --amsterdam-table-cell-border-bottom: 1px solid var(--amsterdam-color-neutral-grey1);
207
185
  --amsterdam-table-caption-font-weight: var(--amsterdam-typography-font-weight-bold);
208
- --amsterdam-table-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
209
- --amsterdam-table-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
186
+ --amsterdam-table-line-height: var(--amsterdam-typography-text-level-5-line-height);
187
+ --amsterdam-table-font-size: var(--amsterdam-typography-text-level-5-font-size);
210
188
  --amsterdam-table-font-weight: var(--amsterdam-typography-font-weight-normal);
211
189
  --amsterdam-table-font-family: var(--amsterdam-typography-font-family);
212
190
  --amsterdam-table-color: var(--amsterdam-color-primary-black);
@@ -226,26 +204,22 @@
226
204
  --amsterdam-spotlight-dark-blue-background-color: var(--amsterdam-color-primary-blue);
227
205
  --amsterdam-spotlight-blue-background-color: var(--amsterdam-color-blue);
228
206
  --amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
229
- --amsterdam-skip-link-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
230
- --amsterdam-skip-link-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
231
207
  --amsterdam-skip-link-outline-offset: var(--amsterdam-focus-outline-offset);
232
- --amsterdam-skip-link-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
233
- --amsterdam-skip-link-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
208
+ --amsterdam-skip-link-line-height: var(--amsterdam-typography-text-level-6-line-height);
209
+ --amsterdam-skip-link-font-size: var(--amsterdam-typography-text-level-6-font-size);
234
210
  --amsterdam-skip-link-font-weight: var(--amsterdam-typography-font-weight-normal);
235
211
  --amsterdam-skip-link-font-family: var(--amsterdam-typography-font-family);
236
212
  --amsterdam-skip-link-color: var(--amsterdam-color-primary-white);
237
213
  --amsterdam-skip-link-background-color: var(--amsterdam-color-primary-blue);
238
- --amsterdam-search-field-input-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
239
- --amsterdam-search-field-input-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
240
- --amsterdam-search-field-input-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
241
- --amsterdam-search-field-input-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
242
214
  --amsterdam-search-field-input-placeholder-color: var(--amsterdam-color-neutral-grey3);
243
215
  --amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
244
- --amsterdam-search-field-input-cancel-button-width: var(--amsterdam-typography-spacious-text-level-6-font-size);
245
- --amsterdam-search-field-input-cancel-button-height: var(--amsterdam-typography-spacious-text-level-6-font-size);
216
+ --amsterdam-search-field-input-cancel-button-width: var(--amsterdam-typography-text-level-6-font-size);
217
+ --amsterdam-search-field-input-cancel-button-height: var(--amsterdam-typography-text-level-6-font-size);
246
218
  --amsterdam-search-field-input-cancel-button-color: var(--amsterdam-color-primary-blue);
247
219
  --amsterdam-search-field-input-outline-offset: var(--amsterdam-focus-outline-offset);
220
+ --amsterdam-search-field-input-line-height: var(--amsterdam-typography-text-level-6-line-height);
248
221
  --amsterdam-search-field-input-font-weight: var(--amsterdam-typography-font-weight-normal);
222
+ --amsterdam-search-field-input-font-size: var(--amsterdam-typography-text-level-6-font-size);
249
223
  --amsterdam-search-field-input-font-family: var(--amsterdam-typography-font-family);
250
224
  --amsterdam-search-field-input-color: var(--amsterdam-color-primary-black);
251
225
  --amsterdam-search-field-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
@@ -253,18 +227,12 @@
253
227
  --amsterdam-search-field-button-outline-offset: var(--amsterdam-focus-outline-offset);
254
228
  --amsterdam-search-field-button-color: var(--amsterdam-color-primary-white);
255
229
  --amsterdam-search-field-button-background-color: var(--amsterdam-color-primary-blue);
256
- --amsterdam-paragraph-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
257
- --amsterdam-paragraph-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
258
- --amsterdam-paragraph-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
259
- --amsterdam-paragraph-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
260
- --amsterdam-paragraph-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
261
- --amsterdam-paragraph-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
262
- --amsterdam-paragraph-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
263
- --amsterdam-paragraph-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
264
- --amsterdam-paragraph-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
265
- --amsterdam-paragraph-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
266
- --amsterdam-paragraph-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
267
- --amsterdam-paragraph-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
230
+ --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-4-line-height);
231
+ --amsterdam-paragraph-large-font-size: var(--amsterdam-typography-text-level-4-font-size);
232
+ --amsterdam-paragraph-medium-line-height: var(--amsterdam-typography-text-level-5-line-height);
233
+ --amsterdam-paragraph-medium-font-size: var(--amsterdam-typography-text-level-5-font-size);
234
+ --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-6-line-height);
235
+ --amsterdam-paragraph-small-font-size: var(--amsterdam-typography-text-level-6-font-size);
268
236
  --amsterdam-paragraph-inverse-color: var(--amsterdam-color-primary-white);
269
237
  --amsterdam-paragraph-font-weight: var(--amsterdam-typography-font-weight-normal);
270
238
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
@@ -275,60 +243,42 @@
275
243
  --amsterdam-pagination-button-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
276
244
  --amsterdam-pagination-button-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
277
245
  --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
278
- --amsterdam-pagination-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
279
- --amsterdam-pagination-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
280
- --amsterdam-pagination-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
281
- --amsterdam-pagination-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
246
+ --amsterdam-pagination-line-height: var(--amsterdam-typography-text-level-5-line-height);
282
247
  --amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
248
+ --amsterdam-pagination-font-size: var(--amsterdam-typography-text-level-5-font-size);
283
249
  --amsterdam-pagination-font-family: var(--amsterdam-typography-font-family);
284
250
  --amsterdam-page-menu-item-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
285
- --amsterdam-page-menu-item-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
286
- --amsterdam-page-menu-item-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
287
- --amsterdam-page-menu-item-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
288
- --amsterdam-page-menu-item-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
289
251
  --amsterdam-page-menu-item-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
290
252
  --amsterdam-page-menu-item-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
291
253
  --amsterdam-page-menu-item-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
292
254
  --amsterdam-page-menu-item-outline-offset: var(--amsterdam-focus-outline-offset);
255
+ --amsterdam-page-menu-item-line-height: var(--amsterdam-typography-text-level-6-line-height);
293
256
  --amsterdam-page-menu-item-font-weight: var(--amsterdam-typography-font-weight-normal);
257
+ --amsterdam-page-menu-item-font-size: var(--amsterdam-typography-text-level-6-font-size);
294
258
  --amsterdam-page-menu-item-font-family: var(--amsterdam-typography-font-family);
295
- --amsterdam-page-heading-compact-line-height: var(--amsterdam-typography-compact-text-level-0-font-size);
296
- --amsterdam-page-heading-compact-font-size: var(--amsterdam-typography-compact-text-level-0-font-size);
297
- --amsterdam-page-heading-spacious-line-height: var(--amsterdam-typography-spacious-text-level-0-font-size);
298
- --amsterdam-page-heading-spacious-font-size: var(--amsterdam-typography-spacious-text-level-0-font-size);
259
+ --amsterdam-page-heading-line-height: var(--amsterdam-typography-text-level-0-font-size);
299
260
  --amsterdam-page-heading-inverse-color: var(--amsterdam-color-primary-white);
300
261
  --amsterdam-page-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
262
+ --amsterdam-page-heading-font-size: var(--amsterdam-typography-text-level-0-font-size);
301
263
  --amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
302
264
  --amsterdam-page-heading-color: var(--amsterdam-color-primary-black);
303
- --amsterdam-ordered-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
304
- --amsterdam-ordered-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
305
- --amsterdam-ordered-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
306
- --amsterdam-ordered-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
265
+ --amsterdam-ordered-list-line-height: var(--amsterdam-typography-text-level-5-line-height);
307
266
  --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
267
+ --amsterdam-ordered-list-font-size: var(--amsterdam-typography-text-level-5-font-size);
308
268
  --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
309
269
  --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
310
- --amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-grid-spacious-gap);
311
- --amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-grid-spacious-gap);
270
+ --amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-grid-gap);
271
+ --amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-grid-gap);
312
272
  --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
313
273
  --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
314
274
  --amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
315
- --amsterdam-link-standalone-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
316
- --amsterdam-link-standalone-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
317
- --amsterdam-link-standalone-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
318
- --amsterdam-link-standalone-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
319
275
  --amsterdam-link-standalone-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
320
276
  --amsterdam-link-standalone-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
321
277
  --amsterdam-link-standalone-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
322
278
  --amsterdam-link-standalone-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
323
279
  --amsterdam-link-standalone-text-decoration-line: var(--amsterdam-link-appearance-regular-text-decoration-line);
324
- --amsterdam-link-in-list-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
325
- --amsterdam-link-in-list-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
326
- --amsterdam-link-in-list-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
327
- --amsterdam-link-in-list-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
328
- --amsterdam-link-in-list-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
329
- --amsterdam-link-in-list-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
330
- --amsterdam-link-in-list-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
331
- --amsterdam-link-in-list-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
280
+ --amsterdam-link-standalone-line-height: var(--amsterdam-typography-text-level-5-line-height);
281
+ --amsterdam-link-standalone-font-size: var(--amsterdam-typography-text-level-5-font-size);
332
282
  --amsterdam-link-inline-visited-color: var(--amsterdam-color-purple);
333
283
  --amsterdam-link-inline-hover-text-underline-offset: var(--amsterdam-link-appearance-regular-hover-text-underline-offset);
334
284
  --amsterdam-link-inline-hover-text-decoration-thickness: var(--amsterdam-link-appearance-regular-hover-text-decoration-thickness);
@@ -339,40 +289,26 @@
339
289
  --amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
340
290
  --amsterdam-link-font-family: var(--amsterdam-typography-font-family);
341
291
  --amsterdam-link-list-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
342
- --amsterdam-link-list-link-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
343
- --amsterdam-link-list-link-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
344
- --amsterdam-link-list-link-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
345
- --amsterdam-link-list-link-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
346
- --amsterdam-link-list-link-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
347
- --amsterdam-link-list-link-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
348
- --amsterdam-link-list-link-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
349
- --amsterdam-link-list-link-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
350
- --amsterdam-link-list-link-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
351
- --amsterdam-link-list-link-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
352
- --amsterdam-link-list-link-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
353
- --amsterdam-link-list-link-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
292
+ --amsterdam-link-list-link-large-line-height: var(--amsterdam-typography-text-level-4-line-height);
293
+ --amsterdam-link-list-link-large-font-size: var(--amsterdam-typography-text-level-4-font-size);
294
+ --amsterdam-link-list-link-medium-line-height: var(--amsterdam-typography-text-level-5-line-height);
295
+ --amsterdam-link-list-link-medium-font-size: var(--amsterdam-typography-text-level-5-font-size);
296
+ --amsterdam-link-list-link-small-line-height: var(--amsterdam-typography-text-level-6-line-height);
297
+ --amsterdam-link-list-link-small-font-size: var(--amsterdam-typography-text-level-6-font-size);
354
298
  --amsterdam-link-list-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
355
299
  --amsterdam-link-list-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
356
300
  --amsterdam-link-list-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
357
301
  --amsterdam-link-list-link-outline-offset: var(--amsterdam-focus-outline-offset);
358
302
  --amsterdam-link-list-link-font-weight: var(--amsterdam-typography-font-weight-normal);
359
303
  --amsterdam-link-list-link-font-family: var(--amsterdam-typography-font-family);
360
- --amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
361
- --amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
362
- --amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
363
- --amsterdam-icon-compact-size-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
364
- --amsterdam-icon-compact-size-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
365
- --amsterdam-icon-compact-size-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
366
- --amsterdam-icon-compact-size-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
367
- --amsterdam-icon-compact-size-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
368
- --amsterdam-icon-spacious-size-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
369
- --amsterdam-icon-spacious-size-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
370
- --amsterdam-icon-spacious-size-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
371
- --amsterdam-icon-spacious-size-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
372
- --amsterdam-icon-spacious-size-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
373
- --amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
374
- --amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
375
- --amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
304
+ --amsterdam-icon-size-6-line-height: var(--amsterdam-typography-text-level-6-line-height);
305
+ --amsterdam-icon-size-6-font-size: var(--amsterdam-typography-text-level-6-font-size);
306
+ --amsterdam-icon-size-5-line-height: var(--amsterdam-typography-text-level-5-line-height);
307
+ --amsterdam-icon-size-5-font-size: var(--amsterdam-typography-text-level-5-font-size);
308
+ --amsterdam-icon-size-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
309
+ --amsterdam-icon-size-4-font-size: var(--amsterdam-typography-text-level-4-font-size);
310
+ --amsterdam-icon-size-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
311
+ --amsterdam-icon-size-3-font-size: var(--amsterdam-typography-text-level-3-font-size);
376
312
  --amsterdam-icon-button-on-background-dark-disabled-background-color: var(--amsterdam-color-neutral-grey2);
377
313
  --amsterdam-icon-button-on-background-dark-disabled-color: var(--amsterdam-color-primary-white);
378
314
  --amsterdam-icon-button-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
@@ -386,58 +322,35 @@
386
322
  --amsterdam-icon-button-hover-color: var(--amsterdam-color-dark-blue);
387
323
  --amsterdam-icon-button-outline-offset: var(--amsterdam-focus-outline-offset);
388
324
  --amsterdam-icon-button-color: var(--amsterdam-color-primary-blue);
389
- --amsterdam-heading-compact-level-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
390
- --amsterdam-heading-compact-level-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
391
- --amsterdam-heading-compact-level-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
392
- --amsterdam-heading-compact-level-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
393
- --amsterdam-heading-compact-level-4-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
394
- --amsterdam-heading-compact-level-4-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
395
- --amsterdam-heading-compact-level-3-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
396
- --amsterdam-heading-compact-level-3-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
397
- --amsterdam-heading-compact-level-2-font-size: var(--amsterdam-typography-compact-text-level-2-font-size);
398
- --amsterdam-heading-compact-level-2-line-height: var(--amsterdam-typography-compact-text-level-2-line-height);
399
- --amsterdam-heading-compact-level-1-font-size: var(--amsterdam-typography-compact-text-level-1-font-size);
400
- --amsterdam-heading-compact-level-1-line-height: var(--amsterdam-typography-compact-text-level-1-line-height);
401
- --amsterdam-heading-spacious-level-6-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
402
- --amsterdam-heading-spacious-level-6-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
403
- --amsterdam-heading-spacious-level-5-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
404
- --amsterdam-heading-spacious-level-5-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
405
- --amsterdam-heading-spacious-level-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
406
- --amsterdam-heading-spacious-level-4-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
407
- --amsterdam-heading-spacious-level-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
408
- --amsterdam-heading-spacious-level-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
409
- --amsterdam-heading-spacious-level-2-font-size: var(--amsterdam-typography-spacious-text-level-2-font-size);
410
- --amsterdam-heading-spacious-level-2-line-height: var(--amsterdam-typography-spacious-text-level-2-line-height);
411
- --amsterdam-heading-spacious-level-1-font-size: var(--amsterdam-typography-spacious-text-level-1-font-size);
412
- --amsterdam-heading-spacious-level-1-line-height: var(--amsterdam-typography-spacious-text-level-1-line-height);
325
+ --amsterdam-heading-level-6-line-height: var(--amsterdam-typography-text-level-6-line-height);
326
+ --amsterdam-heading-level-6-font-size: var(--amsterdam-typography-text-level-6-font-size);
327
+ --amsterdam-heading-level-5-line-height: var(--amsterdam-typography-text-level-5-line-height);
328
+ --amsterdam-heading-level-5-font-size: var(--amsterdam-typography-text-level-5-font-size);
329
+ --amsterdam-heading-level-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
330
+ --amsterdam-heading-level-4-font-size: var(--amsterdam-typography-text-level-4-font-size);
331
+ --amsterdam-heading-level-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
332
+ --amsterdam-heading-level-3-font-size: var(--amsterdam-typography-text-level-3-font-size);
333
+ --amsterdam-heading-level-2-line-height: var(--amsterdam-typography-text-level-2-line-height);
334
+ --amsterdam-heading-level-2-font-size: var(--amsterdam-typography-text-level-2-font-size);
335
+ --amsterdam-heading-level-1-line-height: var(--amsterdam-typography-text-level-1-line-height);
336
+ --amsterdam-heading-level-1-font-size: var(--amsterdam-typography-text-level-1-font-size);
413
337
  --amsterdam-heading-inverse-color: var(--amsterdam-color-primary-white);
414
338
  --amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
415
339
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
416
340
  --amsterdam-heading-color: var(--amsterdam-color-primary-black);
417
- --amsterdam-header-column-gap: var(--amsterdam-grid-spacious-gap);
418
- --amsterdam-form-label-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
419
- --amsterdam-form-label-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
420
- --amsterdam-form-label-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
421
- --amsterdam-form-label-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
341
+ --amsterdam-header-column-gap: var(--amsterdam-grid-gap);
342
+ --amsterdam-form-label-line-height: var(--amsterdam-typography-text-level-4-line-height);
422
343
  --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
344
+ --amsterdam-form-label-font-size: var(--amsterdam-typography-text-level-4-font-size);
423
345
  --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
424
346
  --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
425
- --amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
426
- --amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
427
- --amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
428
- --amsterdam-dialog-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
347
+ --amsterdam-dialog-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
429
348
  --amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
349
+ --amsterdam-dialog-title-font-size: var(--amsterdam-typography-text-level-5-font-size);
430
350
  --amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
431
351
  --amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
432
352
  --amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
433
- --amsterdam-checkbox-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
434
- --amsterdam-checkbox-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
435
- --amsterdam-checkbox-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
436
- --amsterdam-checkbox-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
437
- --amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
438
353
  --amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
439
- --amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
440
- --amsterdam-checkbox-font-family: var(--amsterdam-typography-font-family);
441
354
  --amsterdam-checkbox-disabled-color: var(--amsterdam-color-neutral-grey3);
442
355
  --amsterdam-checkbox-checkmark-indeterminate-hover-background-color: var(--amsterdam-color-dark-blue);
443
356
  --amsterdam-checkbox-checkmark-indeterminate-background-color: var(--amsterdam-color-primary-blue);
@@ -456,6 +369,11 @@
456
369
  --amsterdam-checkbox-checkmark-checked-hover-background-color: var(--amsterdam-color-dark-blue);
457
370
  --amsterdam-checkbox-checkmark-checked-background-color: var(--amsterdam-color-primary-blue);
458
371
  --amsterdam-checkbox-checkmark-border-color: var(--amsterdam-color-primary-blue);
372
+ --amsterdam-checkbox-outline-offset: var(--amsterdam-focus-outline-offset);
373
+ --amsterdam-checkbox-line-height: var(--amsterdam-typography-text-level-5-line-height);
374
+ --amsterdam-checkbox-font-weight: var(--amsterdam-typography-font-weight-normal);
375
+ --amsterdam-checkbox-font-size: var(--amsterdam-typography-text-level-5-font-size);
376
+ --amsterdam-checkbox-font-family: var(--amsterdam-typography-font-family);
459
377
  --amsterdam-checkbox-color: var(--amsterdam-color-primary-black);
460
378
  --amsterdam-card-outline-offset: var(--amsterdam-focus-outline-offset);
461
379
  --amsterdam-card-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
@@ -467,28 +385,22 @@
467
385
  --amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
468
386
  --amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
469
387
  --amsterdam-button-secondary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
470
- --amsterdam-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
471
- --amsterdam-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
472
- --amsterdam-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
473
- --amsterdam-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
474
- --amsterdam-breadcrumb-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
475
- --amsterdam-breadcrumb-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
476
- --amsterdam-breadcrumb-spacious-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
477
- --amsterdam-breadcrumb-spacious-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
388
+ --amsterdam-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
389
+ --amsterdam-button-font-size: var(--amsterdam-typography-text-level-5-font-size);
478
390
  --amsterdam-breadcrumb-item-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
479
391
  --amsterdam-breadcrumb-item-link-hover-color: var(--amsterdam-color-dark-blue);
480
392
  --amsterdam-breadcrumb-item-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
481
393
  --amsterdam-breadcrumb-item-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
482
394
  --amsterdam-breadcrumb-item-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
483
395
  --amsterdam-breadcrumb-item-link-outline-offset: var(--amsterdam-focus-outline-offset);
396
+ --amsterdam-breadcrumb-line-height: var(--amsterdam-typography-text-level-6-line-height);
484
397
  --amsterdam-breadcrumb-font-weight: var(--amsterdam-typography-font-weight-normal);
398
+ --amsterdam-breadcrumb-font-size: var(--amsterdam-typography-text-level-6-font-size);
485
399
  --amsterdam-breadcrumb-font-family: var(--amsterdam-typography-font-family);
486
- --amsterdam-blockquote-compact-line-height: var(--amsterdam-typography-compact-text-level-3-line-height);
487
- --amsterdam-blockquote-compact-font-size: var(--amsterdam-typography-compact-text-level-3-font-size);
488
- --amsterdam-blockquote-spacious-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
489
- --amsterdam-blockquote-spacious-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
490
400
  --amsterdam-blockquote-inverse-color: var(--amsterdam-color-primary-white);
401
+ --amsterdam-blockquote-line-height: var(--amsterdam-typography-text-level-3-line-height);
491
402
  --amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
403
+ --amsterdam-blockquote-font-size: var(--amsterdam-typography-text-level-3-font-size);
492
404
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
493
405
  --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
494
406
  --amsterdam-badge-yellow-color: var(--amsterdam-color-primary-black);
@@ -507,11 +419,9 @@
507
419
  --amsterdam-badge-dark-blue-background-color: var(--amsterdam-color-primary-blue);
508
420
  --amsterdam-badge-blue-color: var(--amsterdam-color-primary-black);
509
421
  --amsterdam-badge-blue-background-color: var(--amsterdam-color-blue);
510
- --amsterdam-badge-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
511
- --amsterdam-badge-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
512
- --amsterdam-badge-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
513
- --amsterdam-badge-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
422
+ --amsterdam-badge-line-height: var(--amsterdam-typography-text-level-5-line-height);
514
423
  --amsterdam-badge-font-weight: var(--amsterdam-typography-font-weight-bold);
424
+ --amsterdam-badge-font-size: var(--amsterdam-typography-text-level-5-font-size);
515
425
  --amsterdam-badge-font-family: var(--amsterdam-typography-font-family);
516
426
  --amsterdam-aspect-ratio-2x-wide: var(--amsterdam-proportion-2x-wide);
517
427
  --amsterdam-aspect-ratio-x-wide: var(--amsterdam-proportion-x-wide);
@@ -525,25 +435,16 @@
525
435
  --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
526
436
  --amsterdam-alert-info-border-color: var(--amsterdam-color-primary-blue);
527
437
  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
528
- --amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
529
- --amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
530
- --amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
531
- --amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
532
- --amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
533
- --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
534
- --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
535
438
  --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
536
439
  --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
537
440
  --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
538
441
  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
539
- --amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
540
- --amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
541
- --amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
542
- --amsterdam-accordion-button-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
543
442
  --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
443
+ --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
444
+ --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
544
445
  --amsterdam-accordion-button-font-weight: var(--amsterdam-typography-font-weight-bold);
446
+ --amsterdam-accordion-button-font-size: var(--amsterdam-typography-text-level-5-font-size);
545
447
  --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
546
- --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
547
448
  --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
548
449
  --amsterdam-link-appearance-on-background-light-color: var(--amsterdam-color-primary-black);
549
450
  --amsterdam-link-appearance-on-background-dark-color: var(--amsterdam-color-primary-white);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.4.0",
2
+ "version": "0.5.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",
@@ -16,17 +16,14 @@
16
16
  "url": "https://github.com/Amsterdam/design-system.git",
17
17
  "directory": "proprietary/tokens"
18
18
  },
19
- "scripts": {
20
- "clean": "rimraf dist/",
21
- "build": "npm-run-all build:**",
22
- "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.json",
23
- "watch": "npm-run-all watch:**",
24
- "watch:style-dictionary": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
25
- },
26
19
  "devDependencies": {
27
20
  "chokidar-cli": "3.0.0",
28
21
  "npm-run-all": "4.1.5",
29
22
  "style-dictionary": "3.9.2"
30
23
  },
31
- "gitHead": "3bc9765e9de9553db5b643d2ed79735837d4d7b6"
32
- }
24
+ "scripts": {
25
+ "clean": "rimraf dist/",
26
+ "build": "node build.js",
27
+ "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
28
+ }
29
+ }
package/src/brand/amsterdam/typography.compact.tokens.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "amsterdam": {
3
+ "typography": {
4
+ "text-level": {
5
+ "0": {
6
+ "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
7
+ },
8
+ "1": {
9
+ "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }
10
+ },
11
+ "2": {
12
+ "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }
13
+ },
14
+ "3": {
15
+ "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }
16
+ },
17
+ "4": {
18
+ "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }
19
+ },
20
+ "5": {
21
+ "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }
22
+ },
23
+ "6": {
24
+ "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }