@amsterdam/design-system-tokens 0.1.4 → 0.1.6

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.
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 08 Sep 2023 12:12:54 GMT
3
+ // Generated on Tue, 10 Oct 2023 11:59:10 GMT
4
4
 
5
5
  $utrecht-button-subtle-disabled-background-color: transparent;
6
6
  $utrecht-button-subtle-background-color: transparent;
@@ -18,6 +18,7 @@ $amsterdam-unordered-list-item-padding-inline-start: 0.875rem; // The total leve
18
18
  $amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
19
19
  $amsterdam-unordered-list-list-style-type: '\2022';
20
20
  $amsterdam-unordered-list-gap: 0.75rem;
21
+ $amsterdam-page-menu-item-hover-text-decoration: underline;
21
22
  $amsterdam-page-menu-item-text-decoration: none;
22
23
  $amsterdam-page-menu-item-gap: 0.5rem;
23
24
  $amsterdam-page-menu-row-gap: 0.5rem;
@@ -49,6 +50,8 @@ $amsterdam-link-inline-font-family: inherit;
49
50
  $amsterdam-link-inline-focus-text-underline-offset: 3px;
50
51
  $amsterdam-link-inline-focus-text-decoration: underline;
51
52
  $amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
53
+ $amsterdam-alert-close-background-color: transparent;
54
+ $amsterdam-alert-gap: 1rem;
52
55
  $amsterdam-spacing-inset-xl: 2.5rem;
53
56
  $amsterdam-spacing-inset-lg: 1.5rem;
54
57
  $amsterdam-spacing-inset-md: 1rem;
@@ -58,32 +61,37 @@ $amsterdam-border-width-lg: 3px;
58
61
  $amsterdam-border-width-md: 2px;
59
62
  $amsterdam-border-width-sm: 1px;
60
63
  $amsterdam-typography-text-level-7-line-height: 1.6;
61
- $amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
62
- $amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
64
+ $amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
65
+ $amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
63
66
  $amsterdam-typography-text-level-6-line-height: 1.6;
64
- $amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
65
- $amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
67
+ $amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
68
+ $amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
66
69
  $amsterdam-typography-text-level-5-line-height: 1.5;
67
- $amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
68
- $amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
70
+ $amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
71
+ $amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
69
72
  $amsterdam-typography-text-level-4-line-height: 1.4;
70
- $amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
71
- $amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
73
+ $amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
74
+ $amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
72
75
  $amsterdam-typography-text-level-3-line-height: 1.4;
73
- $amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
74
- $amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
76
+ $amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
77
+ $amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
75
78
  $amsterdam-typography-text-level-2-line-height: 1.3;
76
- $amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
77
- $amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
79
+ $amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
80
+ $amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
78
81
  $amsterdam-typography-text-level-1-line-height: 1.2;
79
- $amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
80
- $amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
82
+ $amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
83
+ $amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
81
84
  $amsterdam-typography-text-level-0-line-height: 1.1;
82
- $amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
83
- $amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
85
+ $amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
86
+ $amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem);
84
87
  $amsterdam-typography-font-weight-bold: 800;
85
88
  $amsterdam-typography-font-weight-normal: 400;
86
89
  $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
90
+ $amsterdam-proportion-extra-wide: 16 / 9;
91
+ $amsterdam-proportion-wide: 5 / 4;
92
+ $amsterdam-proportion-square: 1 / 1;
93
+ $amsterdam-proportion-tall: 4 / 5;
94
+ $amsterdam-proportion-extra-tall: 9 / 16;
87
95
  $amsterdam-color-neutral-grey4: #323232;
88
96
  $amsterdam-color-neutral-grey3: #767676;
89
97
  $amsterdam-color-neutral-grey2: #B4B4B4;
@@ -157,7 +165,7 @@ $amsterdam-paragraph-inverse-color: $amsterdam-color-primary-white;
157
165
  $amsterdam-paragraph-font-weight: 400;
158
166
  $amsterdam-paragraph-font-family: $amsterdam-typography-font-family;
159
167
  $amsterdam-paragraph-color: $amsterdam-color-primary-black;
160
- $amsterdam-page-menu-item-hover-color: $amsterdam-color-dark-blue;
168
+ $amsterdam-page-menu-item-hover-color: $amsterdam-color-primary-black;
161
169
  $amsterdam-page-menu-item-wide-font-size: $amsterdam-typography-text-level-7-wide-font-size;
162
170
  $amsterdam-page-menu-item-narrow-font-size: $amsterdam-typography-text-level-7-narrow-font-size;
163
171
  $amsterdam-page-menu-item-line-height: $amsterdam-typography-text-level-7-line-height;
@@ -287,6 +295,29 @@ $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
287
295
  $amsterdam-blockquote-font-weight: 800;
288
296
  $amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
289
297
  $amsterdam-blockquote-color: $amsterdam-color-primary-black;
298
+ $amsterdam-aspect-ratio-extra-wide: $amsterdam-proportion-extra-wide;
299
+ $amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
300
+ $amsterdam-aspect-ratio-square: $amsterdam-proportion-square;
301
+ $amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
302
+ $amsterdam-aspect-ratio-extra-tall: $amsterdam-proportion-extra-tall;
303
+ $amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
304
+ $amsterdam-alert-close-fill: $amsterdam-color-primary-black;
305
+ $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
306
+ $amsterdam-alert-success-background-color: $amsterdam-color-primary-white;
307
+ $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
308
+ $amsterdam-alert-error-background-color: $amsterdam-color-primary-white;
309
+ $amsterdam-alert-title-wide-font-size: $amsterdam-typography-text-level-5-wide-font-size;
310
+ $amsterdam-alert-title-narrow-font-size: $amsterdam-typography-text-level-5-narrow-font-size;
311
+ $amsterdam-alert-title-line-height: $amsterdam-typography-text-level-5-line-height;
312
+ $amsterdam-alert-title-font-weight: 800;
313
+ $amsterdam-alert-title-font-family: $amsterdam-typography-font-family;
314
+ $amsterdam-alert-title-color: $amsterdam-color-primary-black;
315
+ $amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
316
+ $amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
317
+ $amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
318
+ $amsterdam-alert-padding-block-start: $amsterdam-spacing-inset-md;
319
+ $amsterdam-alert-border: 4px solid $amsterdam-color-yellow;
320
+ $amsterdam-alert-background-color: $amsterdam-color-yellow;
290
321
  $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
291
322
  $amsterdam-accordion-button-wide-font-size: $amsterdam-typography-text-level-5-wide-font-size;
292
323
  $amsterdam-accordion-button-narrow-font-size: $amsterdam-typography-text-level-5-narrow-font-size;
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 08 Sep 2023 12:12:54 GMT
3
+ * Generated on Tue, 10 Oct 2023 11:59:10 GMT
4
4
  */
5
5
 
6
6
  .amsterdam-theme {
@@ -20,6 +20,7 @@
20
20
  --amsterdam-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
21
21
  --amsterdam-unordered-list-list-style-type: '\2022';
22
22
  --amsterdam-unordered-list-gap: 0.75rem;
23
+ --amsterdam-page-menu-item-hover-text-decoration: underline;
23
24
  --amsterdam-page-menu-item-text-decoration: none;
24
25
  --amsterdam-page-menu-item-gap: 0.5rem;
25
26
  --amsterdam-page-menu-row-gap: 0.5rem;
@@ -51,6 +52,8 @@
51
52
  --amsterdam-link-inline-focus-text-underline-offset: 3px;
52
53
  --amsterdam-link-inline-focus-text-decoration: underline;
53
54
  --amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
55
+ --amsterdam-alert-close-background-color: transparent;
56
+ --amsterdam-alert-gap: 1rem;
54
57
  --amsterdam-spacing-inset-xl: 2.5rem;
55
58
  --amsterdam-spacing-inset-lg: 1.5rem;
56
59
  --amsterdam-spacing-inset-md: 1rem;
@@ -60,32 +63,37 @@
60
63
  --amsterdam-border-width-md: 2px;
61
64
  --amsterdam-border-width-sm: 1px;
62
65
  --amsterdam-typography-text-level-7-line-height: 1.6;
63
- --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
64
- --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
66
+ --amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
67
+ --amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
65
68
  --amsterdam-typography-text-level-6-line-height: 1.6;
66
- --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
67
- --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
69
+ --amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
70
+ --amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
68
71
  --amsterdam-typography-text-level-5-line-height: 1.5;
69
- --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
70
- --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
72
+ --amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
73
+ --amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
71
74
  --amsterdam-typography-text-level-4-line-height: 1.4;
72
- --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
73
- --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
75
+ --amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
76
+ --amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
74
77
  --amsterdam-typography-text-level-3-line-height: 1.4;
75
- --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
76
- --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
78
+ --amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
79
+ --amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
77
80
  --amsterdam-typography-text-level-2-line-height: 1.3;
78
- --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
79
- --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
81
+ --amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
82
+ --amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
80
83
  --amsterdam-typography-text-level-1-line-height: 1.2;
81
- --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
82
- --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
84
+ --amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
85
+ --amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
83
86
  --amsterdam-typography-text-level-0-line-height: 1.1;
84
- --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
85
- --amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
87
+ --amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
88
+ --amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem);
86
89
  --amsterdam-typography-font-weight-bold: 800;
87
90
  --amsterdam-typography-font-weight-normal: 400;
88
91
  --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
92
+ --amsterdam-proportion-extra-wide: 16 / 9;
93
+ --amsterdam-proportion-wide: 5 / 4;
94
+ --amsterdam-proportion-square: 1 / 1;
95
+ --amsterdam-proportion-tall: 4 / 5;
96
+ --amsterdam-proportion-extra-tall: 9 / 16;
89
97
  --amsterdam-color-neutral-grey4: #323232;
90
98
  --amsterdam-color-neutral-grey3: #767676;
91
99
  --amsterdam-color-neutral-grey2: #B4B4B4;
@@ -159,7 +167,7 @@
159
167
  --amsterdam-paragraph-font-weight: 400;
160
168
  --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
161
169
  --amsterdam-paragraph-color: var(--amsterdam-color-primary-black);
162
- --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-dark-blue);
170
+ --amsterdam-page-menu-item-hover-color: var(--amsterdam-color-primary-black);
163
171
  --amsterdam-page-menu-item-wide-font-size: var(--amsterdam-typography-text-level-7-wide-font-size);
164
172
  --amsterdam-page-menu-item-narrow-font-size: var(--amsterdam-typography-text-level-7-narrow-font-size);
165
173
  --amsterdam-page-menu-item-line-height: var(--amsterdam-typography-text-level-7-line-height);
@@ -289,6 +297,29 @@
289
297
  --amsterdam-blockquote-font-weight: 800;
290
298
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
291
299
  --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
300
+ --amsterdam-aspect-ratio-extra-wide: var(--amsterdam-proportion-extra-wide);
301
+ --amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
302
+ --amsterdam-aspect-ratio-square: var(--amsterdam-proportion-square);
303
+ --amsterdam-aspect-ratio-tall: var(--amsterdam-proportion-tall);
304
+ --amsterdam-aspect-ratio-extra-tall: var(--amsterdam-proportion-extra-tall);
305
+ --amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
306
+ --amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
307
+ --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
308
+ --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
309
+ --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
310
+ --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
311
+ --amsterdam-alert-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
312
+ --amsterdam-alert-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
313
+ --amsterdam-alert-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
314
+ --amsterdam-alert-title-font-weight: 800;
315
+ --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
316
+ --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
317
+ --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
318
+ --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
319
+ --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
320
+ --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
321
+ --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
322
+ --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
292
323
  --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
293
324
  --amsterdam-accordion-button-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
294
325
  --amsterdam-accordion-button-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 08 Sep 2023 12:12:55 GMT
3
+ * Generated on Tue, 10 Oct 2023 11:59:10 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack : string;
@@ -19,6 +19,11 @@ export const amsterdamColorNeutralGrey1 : string;
19
19
  export const amsterdamColorNeutralGrey2 : string;
20
20
  export const amsterdamColorNeutralGrey3 : string;
21
21
  export const amsterdamColorNeutralGrey4 : string;
22
+ export const amsterdamProportionExtraTall : string;
23
+ export const amsterdamProportionTall : string;
24
+ export const amsterdamProportionSquare : string;
25
+ export const amsterdamProportionWide : string;
26
+ export const amsterdamProportionExtraWide : string;
22
27
  export const amsterdamTypographyFontFamily : string;
23
28
  export const amsterdamTypographyFontWeightNormal : number;
24
29
  export const amsterdamTypographyFontWeightBold : number;
@@ -62,6 +67,31 @@ export const amsterdamAccordionButtonLineHeight : string;
62
67
  export const amsterdamAccordionButtonNarrowFontSize : string;
63
68
  export const amsterdamAccordionButtonWideFontSize : string;
64
69
  export const amsterdamAccordionButtonHoverBoxShadow : string;
70
+ export const amsterdamAlertBackgroundColor : string;
71
+ export const amsterdamAlertBorder : string;
72
+ export const amsterdamAlertGap : string;
73
+ export const amsterdamAlertPaddingBlockStart : string;
74
+ export const amsterdamAlertPaddingBlockEnd : string;
75
+ export const amsterdamAlertPaddingInlineStart : string;
76
+ export const amsterdamAlertPaddingInlineEnd : string;
77
+ export const amsterdamAlertTitleColor : string;
78
+ export const amsterdamAlertTitleFontFamily : string;
79
+ export const amsterdamAlertTitleFontWeight : number;
80
+ export const amsterdamAlertTitleLineHeight : string;
81
+ export const amsterdamAlertTitleNarrowFontSize : string;
82
+ export const amsterdamAlertTitleWideFontSize : string;
83
+ export const amsterdamAlertErrorBackgroundColor : string;
84
+ export const amsterdamAlertErrorBorderColor : string;
85
+ export const amsterdamAlertSuccessBackgroundColor : string;
86
+ export const amsterdamAlertSuccessBorderColor : string;
87
+ export const amsterdamAlertCloseBackgroundColor : string;
88
+ export const amsterdamAlertCloseFill : string;
89
+ export const amsterdamAlertCloseHoverFill : string;
90
+ export const amsterdamAspectRatioExtraTall : string;
91
+ export const amsterdamAspectRatioTall : string;
92
+ export const amsterdamAspectRatioSquare : string;
93
+ export const amsterdamAspectRatioWide : string;
94
+ export const amsterdamAspectRatioExtraWide : string;
65
95
  export const amsterdamBlockquoteColor : string;
66
96
  export const amsterdamBlockquoteFontFamily : string;
67
97
  export const amsterdamBlockquoteFontWeight : number;
@@ -227,6 +257,7 @@ export const amsterdamPageMenuItemTextDecoration : string;
227
257
  export const amsterdamPageMenuItemNarrowFontSize : string;
228
258
  export const amsterdamPageMenuItemWideFontSize : string;
229
259
  export const amsterdamPageMenuItemHoverColor : string;
260
+ export const amsterdamPageMenuItemHoverTextDecoration : string;
230
261
  export const amsterdamParagraphColor : string;
231
262
  export const amsterdamParagraphFontFamily : string;
232
263
  export const amsterdamParagraphFontWeight : number;
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 08 Sep 2023 12:12:54 GMT
3
+ * Generated on Tue, 10 Oct 2023 11:59:09 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack = "#000000";
@@ -19,32 +19,37 @@ export const amsterdamColorNeutralGrey1 = "#E6E6E6";
19
19
  export const amsterdamColorNeutralGrey2 = "#B4B4B4";
20
20
  export const amsterdamColorNeutralGrey3 = "#767676";
21
21
  export const amsterdamColorNeutralGrey4 = "#323232";
22
+ export const amsterdamProportionExtraTall = "9 / 16";
23
+ export const amsterdamProportionTall = "4 / 5";
24
+ export const amsterdamProportionSquare = "1 / 1";
25
+ export const amsterdamProportionWide = "5 / 4";
26
+ export const amsterdamProportionExtraWide = "16 / 9";
22
27
  export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
23
28
  export const amsterdamTypographyFontWeightNormal = 400;
24
29
  export const amsterdamTypographyFontWeightBold = 800;
25
- export const amsterdamTypographyTextLevel0NarrowFontSize = "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)";
26
- export const amsterdamTypographyTextLevel0WideFontSize = "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)";
30
+ export const amsterdamTypographyTextLevel0NarrowFontSize = "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)";
31
+ export const amsterdamTypographyTextLevel0WideFontSize = "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)";
27
32
  export const amsterdamTypographyTextLevel0LineHeight = "1.1";
28
- export const amsterdamTypographyTextLevel1NarrowFontSize = "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)";
29
- export const amsterdamTypographyTextLevel1WideFontSize = "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)";
33
+ export const amsterdamTypographyTextLevel1NarrowFontSize = "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)";
34
+ export const amsterdamTypographyTextLevel1WideFontSize = "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)";
30
35
  export const amsterdamTypographyTextLevel1LineHeight = "1.2";
31
- export const amsterdamTypographyTextLevel2NarrowFontSize = "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)";
32
- export const amsterdamTypographyTextLevel2WideFontSize = "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)";
36
+ export const amsterdamTypographyTextLevel2NarrowFontSize = "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)";
37
+ export const amsterdamTypographyTextLevel2WideFontSize = "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)";
33
38
  export const amsterdamTypographyTextLevel2LineHeight = "1.3";
34
- export const amsterdamTypographyTextLevel3NarrowFontSize = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
35
- export const amsterdamTypographyTextLevel3WideFontSize = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
39
+ export const amsterdamTypographyTextLevel3NarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
40
+ export const amsterdamTypographyTextLevel3WideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
36
41
  export const amsterdamTypographyTextLevel3LineHeight = "1.4";
37
- export const amsterdamTypographyTextLevel4NarrowFontSize = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
38
- export const amsterdamTypographyTextLevel4WideFontSize = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
42
+ export const amsterdamTypographyTextLevel4NarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
43
+ export const amsterdamTypographyTextLevel4WideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
39
44
  export const amsterdamTypographyTextLevel4LineHeight = "1.4";
40
- export const amsterdamTypographyTextLevel5NarrowFontSize = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
41
- export const amsterdamTypographyTextLevel5WideFontSize = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
45
+ export const amsterdamTypographyTextLevel5NarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
46
+ export const amsterdamTypographyTextLevel5WideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
42
47
  export const amsterdamTypographyTextLevel5LineHeight = "1.5";
43
- export const amsterdamTypographyTextLevel6NarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
44
- export const amsterdamTypographyTextLevel6WideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
48
+ export const amsterdamTypographyTextLevel6NarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
49
+ export const amsterdamTypographyTextLevel6WideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
45
50
  export const amsterdamTypographyTextLevel6LineHeight = "1.6";
46
- export const amsterdamTypographyTextLevel7NarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
47
- export const amsterdamTypographyTextLevel7WideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
51
+ export const amsterdamTypographyTextLevel7NarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
52
+ export const amsterdamTypographyTextLevel7WideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
48
53
  export const amsterdamTypographyTextLevel7LineHeight = "1.6";
49
54
  export const amsterdamBorderWidthSm = "1px";
50
55
  export const amsterdamBorderWidthMd = "2px";
@@ -59,28 +64,53 @@ export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
59
64
  export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
60
65
  export const amsterdamAccordionButtonFontWeight = 800;
61
66
  export const amsterdamAccordionButtonLineHeight = "1.5";
62
- export const amsterdamAccordionButtonNarrowFontSize = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
63
- export const amsterdamAccordionButtonWideFontSize = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
67
+ export const amsterdamAccordionButtonNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
68
+ export const amsterdamAccordionButtonWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
64
69
  export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
70
+ export const amsterdamAlertBackgroundColor = "#FFE600";
71
+ export const amsterdamAlertBorder = "4px solid #FFE600";
72
+ export const amsterdamAlertGap = "1rem";
73
+ export const amsterdamAlertPaddingBlockStart = "1rem";
74
+ export const amsterdamAlertPaddingBlockEnd = "1rem";
75
+ export const amsterdamAlertPaddingInlineStart = "1.5rem";
76
+ export const amsterdamAlertPaddingInlineEnd = "1.5rem";
77
+ export const amsterdamAlertTitleColor = "#000000";
78
+ export const amsterdamAlertTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
79
+ export const amsterdamAlertTitleFontWeight = 800;
80
+ export const amsterdamAlertTitleLineHeight = "1.5";
81
+ export const amsterdamAlertTitleNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
82
+ export const amsterdamAlertTitleWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
83
+ export const amsterdamAlertErrorBackgroundColor = "#ffffff";
84
+ export const amsterdamAlertErrorBorderColor = "#EC0000";
85
+ export const amsterdamAlertSuccessBackgroundColor = "#ffffff";
86
+ export const amsterdamAlertSuccessBorderColor = "#00A03C";
87
+ export const amsterdamAlertCloseBackgroundColor = "transparent";
88
+ export const amsterdamAlertCloseFill = "#000000";
89
+ export const amsterdamAlertCloseHoverFill = "#004699";
90
+ export const amsterdamAspectRatioExtraTall = "9 / 16";
91
+ export const amsterdamAspectRatioTall = "4 / 5";
92
+ export const amsterdamAspectRatioSquare = "1 / 1";
93
+ export const amsterdamAspectRatioWide = "5 / 4";
94
+ export const amsterdamAspectRatioExtraWide = "16 / 9";
65
95
  export const amsterdamBlockquoteColor = "#000000";
66
96
  export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
67
97
  export const amsterdamBlockquoteFontWeight = 800;
68
98
  export const amsterdamBlockquoteInverseColor = "#ffffff";
69
99
  export const amsterdamBlockquoteLineHeight = "1.4";
70
- export const amsterdamBlockquoteNarrowFontSize = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
71
- export const amsterdamBlockquoteWideFontSize = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
100
+ export const amsterdamBlockquoteNarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
101
+ export const amsterdamBlockquoteWideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
72
102
  export const amsterdamBreadcrumbColor = "#004699";
73
103
  export const amsterdamBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
74
104
  export const amsterdamBreadcrumbLineHeight = "1.6";
75
- export const amsterdamBreadcrumbNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
76
- export const amsterdamBreadcrumbWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
105
+ export const amsterdamBreadcrumbNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
106
+ export const amsterdamBreadcrumbWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
77
107
  export const amsterdamBreadcrumbItemLinkOutlineOffset = "2px";
78
108
  export const amsterdamBreadcrumbItemLinkHoverColor = "#00387A";
79
109
  export const amsterdamBreadcrumbItemLinkHoverBoxShadow = "inset 0 -2px 0 0 #00387A";
80
110
  export const amsterdamBreadcrumbItemLinkFocusColor = "#00387A";
81
111
  export const amsterdamBreadcrumbItemLinkFocusTextDecoration = "underline";
82
- export const amsterdamButtonNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
83
- export const amsterdamButtonWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
112
+ export const amsterdamButtonNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
113
+ export const amsterdamButtonWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
84
114
  export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
85
115
  export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #00387A";
86
116
  export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #B4B4B4";
@@ -106,8 +136,8 @@ export const amsterdamCheckboxCheckmarkInvalidIndeterminateBackgroundColor = "#E
106
136
  export const amsterdamCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor = "#EC0000";
107
137
  export const amsterdamCheckboxCheckmarkIndeterminateBackgroundColor = "#004699";
108
138
  export const amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#00387A";
109
- export const amsterdamCheckboxCheckmarkNarrowSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
110
- export const amsterdamCheckboxCheckmarkWideSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
139
+ export const amsterdamCheckboxCheckmarkNarrowSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
140
+ export const amsterdamCheckboxCheckmarkWideSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
111
141
  export const amsterdamCheckboxCheckmarkMultiplier = "1.6";
112
142
  export const amsterdamCheckboxDisabledColor = "#767676";
113
143
  export const amsterdamCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -115,45 +145,45 @@ export const amsterdamCheckboxFontWeight = 400;
115
145
  export const amsterdamCheckboxHoverColor = "#00387A";
116
146
  export const amsterdamCheckboxOutlineOffset = "2px";
117
147
  export const amsterdamCheckboxLineHeight = "1.6";
118
- export const amsterdamCheckboxNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
119
- export const amsterdamCheckboxWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
148
+ export const amsterdamCheckboxNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
149
+ export const amsterdamCheckboxWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
120
150
  export const amsterdamFooterTopBackgroundColor = "#004699";
121
151
  export const amsterdamFormLabelColor = "#000000";
122
152
  export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
123
153
  export const amsterdamFormLabelFontWeight = 800;
124
154
  export const amsterdamFormLabelLineHeight = "1.6";
125
- export const amsterdamFormLabelNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
126
- export const amsterdamFormLabelWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
155
+ export const amsterdamFormLabelNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
156
+ export const amsterdamFormLabelWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
127
157
  export const amsterdamHeading1LineHeight = "1.2";
128
- export const amsterdamHeading1NarrowFontSize = "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)";
129
- export const amsterdamHeading1WideFontSize = "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)";
158
+ export const amsterdamHeading1NarrowFontSize = "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)";
159
+ export const amsterdamHeading1WideFontSize = "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)";
130
160
  export const amsterdamHeading2LineHeight = "1.3";
131
- export const amsterdamHeading2NarrowFontSize = "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)";
132
- export const amsterdamHeading2WideFontSize = "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)";
161
+ export const amsterdamHeading2NarrowFontSize = "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)";
162
+ export const amsterdamHeading2WideFontSize = "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)";
133
163
  export const amsterdamHeading3LineHeight = "1.4";
134
- export const amsterdamHeading3NarrowFontSize = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
135
- export const amsterdamHeading3WideFontSize = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
164
+ export const amsterdamHeading3NarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
165
+ export const amsterdamHeading3WideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
136
166
  export const amsterdamHeading4LineHeight = "1.4";
137
- export const amsterdamHeading4NarrowFontSize = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
138
- export const amsterdamHeading4WideFontSize = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
167
+ export const amsterdamHeading4NarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
168
+ export const amsterdamHeading4WideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
139
169
  export const amsterdamHeadingColor = "#000000";
140
170
  export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
141
171
  export const amsterdamHeadingFontWeight = 800;
142
172
  export const amsterdamHeadingInverseColor = "#ffffff";
143
- export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
144
- export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
173
+ export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
174
+ export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
145
175
  export const amsterdamIconSize3ContainerMultiplier = "1.4";
146
- export const amsterdamIconSize4IconSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
147
- export const amsterdamIconSize4IconSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
176
+ export const amsterdamIconSize4IconSizeNarrow = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
177
+ export const amsterdamIconSize4IconSizeWide = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
148
178
  export const amsterdamIconSize4ContainerMultiplier = "1.4";
149
- export const amsterdamIconSize5IconSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
150
- export const amsterdamIconSize5IconSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
179
+ export const amsterdamIconSize5IconSizeNarrow = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
180
+ export const amsterdamIconSize5IconSizeWide = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
151
181
  export const amsterdamIconSize5ContainerMultiplier = "1.5";
152
- export const amsterdamIconSize6IconSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
153
- export const amsterdamIconSize6IconSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
182
+ export const amsterdamIconSize6IconSizeNarrow = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
183
+ export const amsterdamIconSize6IconSizeWide = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
154
184
  export const amsterdamIconSize6ContainerMultiplier = "1.6";
155
- export const amsterdamIconSize7IconSizeNarrow = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
156
- export const amsterdamIconSize7IconSizeWide = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
185
+ export const amsterdamIconSize7IconSizeNarrow = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
186
+ export const amsterdamIconSize7IconSizeWide = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
157
187
  export const amsterdamIconSize7ContainerMultiplier = "1.6";
158
188
  export const amsterdamLinkColor = "#004699";
159
189
  export const amsterdamLinkOutlineOffset = "2px";
@@ -173,15 +203,15 @@ export const amsterdamLinkInListFocusTextDecorationThickness = "2px";
173
203
  export const amsterdamLinkInListFocusTextUnderlineOffset = "7px";
174
204
  export const amsterdamLinkInListTextDecoration = "none";
175
205
  export const amsterdamLinkInListLineHeight = "1.6";
176
- export const amsterdamLinkInListNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
177
- export const amsterdamLinkInListWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
206
+ export const amsterdamLinkInListNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
207
+ export const amsterdamLinkInListWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
178
208
  export const amsterdamLinkStandaloneTextUnderlineOffset = "8px";
179
209
  export const amsterdamLinkStandaloneTextDecorationThickness = "2px";
180
210
  export const amsterdamLinkStandaloneFocusTextDecorationThickness = "3px";
181
211
  export const amsterdamLinkStandaloneFocusTextUnderlineOffset = "7px";
182
212
  export const amsterdamLinkStandaloneLineHeight = "1.6";
183
- export const amsterdamLinkStandaloneNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
184
- export const amsterdamLinkStandaloneWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
213
+ export const amsterdamLinkStandaloneNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
214
+ export const amsterdamLinkStandaloneWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
185
215
  export const amsterdamLinkOnBackgroundDarkColor = "#ffffff";
186
216
  export const amsterdamLinkOnBackgroundDarkHoverColor = "#ffffff";
187
217
  export const amsterdamLinkOnBackgroundDarkVisitedColor = "#ffffff";
@@ -194,8 +224,8 @@ export const amsterdamOrderedListFontWeight = 400;
194
224
  export const amsterdamOrderedListGap = "0.75rem";
195
225
  export const amsterdamOrderedListLineHeight = "1.6";
196
226
  export const amsterdamOrderedListListStyleType = "decimal";
197
- export const amsterdamOrderedListNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
198
- export const amsterdamOrderedListWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
227
+ export const amsterdamOrderedListNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
228
+ export const amsterdamOrderedListWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
199
229
  export const amsterdamOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
200
230
  export const amsterdamOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
201
231
  export const amsterdamOrderedListOrderedListListStyleType = "lower-alpha";
@@ -208,8 +238,8 @@ export const amsterdamPageGridMaxWidth = "1440px";
208
238
  export const amsterdamPageHeadingColor = "#000000";
209
239
  export const amsterdamPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
210
240
  export const amsterdamPageHeadingLineHeight = "1.1";
211
- export const amsterdamPageHeadingNarrowFontSize = "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)";
212
- export const amsterdamPageHeadingWideFontSize = "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)";
241
+ export const amsterdamPageHeadingNarrowFontSize = "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)";
242
+ export const amsterdamPageHeadingWideFontSize = "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)";
213
243
  export const amsterdamPageHeadingFontWeight = 800;
214
244
  export const amsterdamPageHeadingInverseColor = "#ffffff";
215
245
  export const amsterdamPageMenuColumnGap = "2.5rem";
@@ -220,35 +250,36 @@ export const amsterdamPageMenuItemFontWeight = 400;
220
250
  export const amsterdamPageMenuItemGap = "0.5rem";
221
251
  export const amsterdamPageMenuItemLineHeight = "1.6";
222
252
  export const amsterdamPageMenuItemTextDecoration = "none";
223
- export const amsterdamPageMenuItemNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
224
- export const amsterdamPageMenuItemWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
225
- export const amsterdamPageMenuItemHoverColor = "#00387A";
253
+ export const amsterdamPageMenuItemNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
254
+ export const amsterdamPageMenuItemWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
255
+ export const amsterdamPageMenuItemHoverColor = "#000000";
256
+ export const amsterdamPageMenuItemHoverTextDecoration = "underline";
226
257
  export const amsterdamParagraphColor = "#000000";
227
258
  export const amsterdamParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
228
259
  export const amsterdamParagraphFontWeight = 400;
229
260
  export const amsterdamParagraphInverseColor = "#ffffff";
230
261
  export const amsterdamParagraphLineHeight = "1.6";
231
- export const amsterdamParagraphNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
232
- export const amsterdamParagraphWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
262
+ export const amsterdamParagraphNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
263
+ export const amsterdamParagraphWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
233
264
  export const amsterdamParagraphSmallLineHeight = "1.6";
234
- export const amsterdamParagraphSmallNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
235
- export const amsterdamParagraphSmallWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
265
+ export const amsterdamParagraphSmallNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
266
+ export const amsterdamParagraphSmallWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
236
267
  export const amsterdamParagraphLargeLineHeight = "1.5";
237
- export const amsterdamParagraphLargeNarrowFontSize = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
238
- export const amsterdamParagraphLargeWideFontSize = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
268
+ export const amsterdamParagraphLargeNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
269
+ export const amsterdamParagraphLargeWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
239
270
  export const amsterdamTopTaskLinkDescriptionColor = "#000000";
240
271
  export const amsterdamTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
241
272
  export const amsterdamTopTaskLinkDescriptionFontWeight = 400;
242
273
  export const amsterdamTopTaskLinkDescriptionLineHeight = "1.6";
243
- export const amsterdamTopTaskLinkDescriptionNarrowFontSize = "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)";
244
- export const amsterdamTopTaskLinkDescriptionWideFontSize = "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)";
274
+ export const amsterdamTopTaskLinkDescriptionNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
275
+ export const amsterdamTopTaskLinkDescriptionWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
245
276
  export const amsterdamTopTaskLinkLabelColor = "#004699";
246
277
  export const amsterdamTopTaskLinkLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
247
278
  export const amsterdamTopTaskLinkLabelFontWeight = 800;
248
279
  export const amsterdamTopTaskLinkLabelHoverColor = "#00387A";
249
280
  export const amsterdamTopTaskLinkLabelLineHeight = "1.4";
250
- export const amsterdamTopTaskLinkLabelNarrowFontSize = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
251
- export const amsterdamTopTaskLinkLabelWideFontSize = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
281
+ export const amsterdamTopTaskLinkLabelNarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
282
+ export const amsterdamTopTaskLinkLabelWideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
252
283
  export const amsterdamTopTaskLinkOutlineOffset = "2px";
253
284
  export const amsterdamUnorderedListColor = "#000000";
254
285
  export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -256,8 +287,8 @@ export const amsterdamUnorderedListFontWeight = 400;
256
287
  export const amsterdamUnorderedListGap = "0.75rem";
257
288
  export const amsterdamUnorderedListLineHeight = "1.6";
258
289
  export const amsterdamUnorderedListListStyleType = "'\\2022'";
259
- export const amsterdamUnorderedListNarrowFontSize = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
260
- export const amsterdamUnorderedListWideFontSize = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
290
+ export const amsterdamUnorderedListNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
291
+ export const amsterdamUnorderedListWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
261
292
  export const amsterdamUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
262
293
  export const amsterdamUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
263
294
  export const amsterdamUnorderedListUnorderedListListStyleType = "'\\2013'";