@amsterdam/design-system-tokens 0.1.2 → 0.1.3

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 (16) hide show
  1. package/dist/_variables.scss +34 -13
  2. package/dist/index.css +34 -13
  3. package/dist/index.d.ts +22 -1
  4. package/dist/index.js +34 -13
  5. package/dist/index.json +33 -12
  6. package/dist/index.tokens.json +53 -12
  7. package/dist/root.css +34 -13
  8. package/dist/tokens.d.ts +42 -1
  9. package/dist/tokens.js +484 -25
  10. package/dist/variables.less +34 -13
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +6 -6
  13. package/src/components/amsterdam/accordion.tokens.json +24 -0
  14. package/src/components/amsterdam/heading.tokens.json +3 -3
  15. package/src/components/amsterdam/paragraph.tokens.json +3 -3
  16. package/src/components/amsterdam/unordered-list.tokens.json +27 -0
package/dist/_variables.scss CHANGED
@@ -1,10 +1,17 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ // Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
 
5
5
  $utrecht-button-subtle-disabled-background-color: transparent;
6
6
  $utrecht-button-subtle-background-color: transparent;
7
7
  $utrecht-button-disabled-border-color: transparent;
8
+ $amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
9
+ $amsterdam-unordered-list-unordered-list-list-style-type: '–';
10
+ $amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
11
+ $amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
12
+ $amsterdam-unordered-list-item-padding-inline: 3px 0;
13
+ $amsterdam-unordered-list-list-style: square;
14
+ $amsterdam-unordered-list-gap: 0.5rem;
8
15
  $amsterdam-link-on-background-light-hover-text-decoration: none;
9
16
  $amsterdam-link-on-background-light-focus-text-decoration: underline;
10
17
  $amsterdam-link-on-background-light-text-underline-offset: 9px;
@@ -38,12 +45,12 @@ $amsterdam-typography-text-level-7-font-size-narrow: clamp(1rem, 1rem + (0.0625
38
45
  $amsterdam-typography-text-level-6-line-height: 1.6;
39
46
  $amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
40
47
  $amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
41
- $amsterdam-typography-text-level-5-line-height: 1.4;
42
- $amsterdam-typography-text-level-5-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
43
- $amsterdam-typography-text-level-5-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
44
- $amsterdam-typography-text-level-4-line-height: 1.5;
45
- $amsterdam-typography-text-level-4-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
46
- $amsterdam-typography-text-level-4-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
48
+ $amsterdam-typography-text-level-5-line-height: 1.5;
49
+ $amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
50
+ $amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
51
+ $amsterdam-typography-text-level-4-line-height: 1.4;
52
+ $amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
53
+ $amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
47
54
  $amsterdam-typography-text-level-3-line-height: 1.4;
48
55
  $amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
49
56
  $amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
@@ -103,9 +110,15 @@ $utrecht-button-line-height: $amsterdam-typography-text-level-6-line-height;
103
110
  $utrecht-button-font-family: $amsterdam-typography-font-family;
104
111
  $utrecht-button-color: $amsterdam-color-primary-white;
105
112
  $utrecht-button-background-color: $amsterdam-color-primary-blue;
106
- $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-4-line-height;
107
- $amsterdam-paragraph-large-font-size-wide: $amsterdam-typography-text-level-4-font-size-wide;
108
- $amsterdam-paragraph-large-font-size-narrow: $amsterdam-typography-text-level-4-font-size-narrow;
113
+ $amsterdam-unordered-list-line-height: $amsterdam-typography-text-level-6-line-height;
114
+ $amsterdam-unordered-list-font-weight: 400;
115
+ $amsterdam-unordered-list-font-size-wide: $amsterdam-typography-text-level-6-font-size-wide;
116
+ $amsterdam-unordered-list-font-size-narrow: $amsterdam-typography-text-level-6-font-size-narrow;
117
+ $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
118
+ $amsterdam-unordered-list-color: $amsterdam-color-primary-black;
119
+ $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-5-line-height;
120
+ $amsterdam-paragraph-large-font-size-wide: $amsterdam-typography-text-level-5-font-size-wide;
121
+ $amsterdam-paragraph-large-font-size-narrow: $amsterdam-typography-text-level-5-font-size-narrow;
109
122
  $amsterdam-paragraph-small-line-height: $amsterdam-typography-text-level-7-line-height;
110
123
  $amsterdam-paragraph-small-font-size-wide: $amsterdam-typography-text-level-7-font-size-wide;
111
124
  $amsterdam-paragraph-small-font-size-narrow: $amsterdam-typography-text-level-7-font-size-narrow;
@@ -158,9 +171,9 @@ $amsterdam-icon-size-3-icon-size-narrow: $amsterdam-typography-text-level-3-font
158
171
  $amsterdam-heading-font-weight: 800;
159
172
  $amsterdam-heading-font-family: $amsterdam-typography-font-family;
160
173
  $amsterdam-heading-color: $amsterdam-color-primary-black;
161
- $amsterdam-heading-4-line-height: $amsterdam-typography-text-level-5-line-height;
162
- $amsterdam-heading-4-font-size-wide: $amsterdam-typography-text-level-5-font-size-wide;
163
- $amsterdam-heading-4-font-size-narrow: $amsterdam-typography-text-level-5-font-size-narrow;
174
+ $amsterdam-heading-4-line-height: $amsterdam-typography-text-level-4-line-height;
175
+ $amsterdam-heading-4-font-size-wide: $amsterdam-typography-text-level-4-font-size-wide;
176
+ $amsterdam-heading-4-font-size-narrow: $amsterdam-typography-text-level-4-font-size-narrow;
164
177
  $amsterdam-heading-3-line-height: $amsterdam-typography-text-level-3-line-height;
165
178
  $amsterdam-heading-3-font-size-wide: $amsterdam-typography-text-level-3-font-size-wide;
166
179
  $amsterdam-heading-3-font-size-narrow: $amsterdam-typography-text-level-3-font-size-narrow;
@@ -179,3 +192,11 @@ $amsterdam-form-label-color: $amsterdam-color-primary-black;
179
192
  $amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px $amsterdam-color-dark-blue;
180
193
  $amsterdam-button-font-size-wide: $amsterdam-typography-text-level-6-font-size-wide;
181
194
  $amsterdam-button-font-size-narrow: $amsterdam-typography-text-level-6-font-size-narrow;
195
+ $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
196
+ $amsterdam-accordion-button-line-height: $amsterdam-typography-text-level-5-line-height;
197
+ $amsterdam-accordion-button-font-weight: 800;
198
+ $amsterdam-accordion-button-font-size-wide: $amsterdam-typography-text-level-5-font-size-wide;
199
+ $amsterdam-accordion-button-font-size-narrow: $amsterdam-typography-text-level-5-font-size-narrow;
200
+ $amsterdam-accordion-button-font-family: $amsterdam-typography-font-family;
201
+ $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
202
+ $amsterdam-accordion-button-color: $amsterdam-color-primary-blue;
package/dist/index.css CHANGED
@@ -1,12 +1,19 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  .amsterdam-theme {
7
7
  --utrecht-button-subtle-disabled-background-color: transparent;
8
8
  --utrecht-button-subtle-background-color: transparent;
9
9
  --utrecht-button-disabled-border-color: transparent;
10
+ --amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
11
+ --amsterdam-unordered-list-unordered-list-list-style-type: '–';
12
+ --amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
13
+ --amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
14
+ --amsterdam-unordered-list-item-padding-inline: 3px 0;
15
+ --amsterdam-unordered-list-list-style: square;
16
+ --amsterdam-unordered-list-gap: 0.5rem;
10
17
  --amsterdam-link-on-background-light-hover-text-decoration: none;
11
18
  --amsterdam-link-on-background-light-focus-text-decoration: underline;
12
19
  --amsterdam-link-on-background-light-text-underline-offset: 9px;
@@ -40,12 +47,12 @@
40
47
  --amsterdam-typography-text-level-6-line-height: 1.6;
41
48
  --amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
42
49
  --amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
43
- --amsterdam-typography-text-level-5-line-height: 1.4;
44
- --amsterdam-typography-text-level-5-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
45
- --amsterdam-typography-text-level-5-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
46
- --amsterdam-typography-text-level-4-line-height: 1.5;
47
- --amsterdam-typography-text-level-4-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
48
- --amsterdam-typography-text-level-4-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
50
+ --amsterdam-typography-text-level-5-line-height: 1.5;
51
+ --amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
52
+ --amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
53
+ --amsterdam-typography-text-level-4-line-height: 1.4;
54
+ --amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
55
+ --amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
49
56
  --amsterdam-typography-text-level-3-line-height: 1.4;
50
57
  --amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
51
58
  --amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
@@ -105,9 +112,15 @@
105
112
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
106
113
  --utrecht-button-color: var(--amsterdam-color-primary-white);
107
114
  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
108
- --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-4-line-height);
109
- --amsterdam-paragraph-large-font-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
110
- --amsterdam-paragraph-large-font-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
115
+ --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-6-line-height);
116
+ --amsterdam-unordered-list-font-weight: 400;
117
+ --amsterdam-unordered-list-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
118
+ --amsterdam-unordered-list-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
119
+ --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
120
+ --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
121
+ --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-5-line-height);
122
+ --amsterdam-paragraph-large-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
123
+ --amsterdam-paragraph-large-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
111
124
  --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-7-line-height);
112
125
  --amsterdam-paragraph-small-font-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
113
126
  --amsterdam-paragraph-small-font-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
@@ -160,9 +173,9 @@
160
173
  --amsterdam-heading-font-weight: 800;
161
174
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
162
175
  --amsterdam-heading-color: var(--amsterdam-color-primary-black);
163
- --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-5-line-height);
164
- --amsterdam-heading-4-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
165
- --amsterdam-heading-4-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
176
+ --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
177
+ --amsterdam-heading-4-font-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
178
+ --amsterdam-heading-4-font-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
166
179
  --amsterdam-heading-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
167
180
  --amsterdam-heading-3-font-size-wide: var(--amsterdam-typography-text-level-3-font-size-wide);
168
181
  --amsterdam-heading-3-font-size-narrow: var(--amsterdam-typography-text-level-3-font-size-narrow);
@@ -181,4 +194,12 @@
181
194
  --amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px var(--amsterdam-color-dark-blue);
182
195
  --amsterdam-button-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
183
196
  --amsterdam-button-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
197
+ --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
198
+ --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
199
+ --amsterdam-accordion-button-font-weight: 800;
200
+ --amsterdam-accordion-button-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
201
+ --amsterdam-accordion-button-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
202
+ --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
203
+ --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
204
+ --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
184
205
  }
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack : string;
@@ -54,6 +54,14 @@ export const amsterdamSpacingInsetSm : string;
54
54
  export const amsterdamSpacingInsetMd : string;
55
55
  export const amsterdamSpacingInsetLg : string;
56
56
  export const amsterdamSpacingInsetXl : string;
57
+ export const amsterdamAccordionButtonColor : string;
58
+ export const amsterdamAccordionButtonFocusOutlineOffset : string;
59
+ export const amsterdamAccordionButtonFontFamily : string;
60
+ export const amsterdamAccordionButtonFontSizeNarrow : string;
61
+ export const amsterdamAccordionButtonFontSizeWide : string;
62
+ export const amsterdamAccordionButtonFontWeight : number;
63
+ export const amsterdamAccordionButtonLineHeight : string;
64
+ export const amsterdamAccordionButtonHoverBoxShadow : string;
57
65
  export const amsterdamButtonFontSizeNarrow : string;
58
66
  export const amsterdamButtonFontSizeWide : string;
59
67
  export const amsterdamButtonSecondaryHoverBoxShadow : string;
@@ -149,6 +157,19 @@ export const amsterdamParagraphSmallLineHeight : string;
149
157
  export const amsterdamParagraphLargeFontSizeNarrow : string;
150
158
  export const amsterdamParagraphLargeFontSizeWide : string;
151
159
  export const amsterdamParagraphLargeLineHeight : string;
160
+ export const amsterdamUnorderedListColor : string;
161
+ export const amsterdamUnorderedListFontFamily : string;
162
+ export const amsterdamUnorderedListFontSizeNarrow : string;
163
+ export const amsterdamUnorderedListFontSizeWide : string;
164
+ export const amsterdamUnorderedListFontWeight : number;
165
+ export const amsterdamUnorderedListGap : string;
166
+ export const amsterdamUnorderedListLineHeight : string;
167
+ export const amsterdamUnorderedListListStyle : string;
168
+ export const amsterdamUnorderedListItemPaddingInline : string;
169
+ export const amsterdamUnorderedListUnorderedListPaddingBlock : string;
170
+ export const amsterdamUnorderedListUnorderedListPaddingInline : string;
171
+ export const amsterdamUnorderedListUnorderedListListStyleType : string;
172
+ export const amsterdamUnorderedListUnorderedListItemPaddingInline : string;
152
173
  export const utrechtButtonBackgroundColor : string;
153
174
  export const utrechtButtonColor : string;
154
175
  export const utrechtButtonFontFamily : string;
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  export const amsterdamColorPrimaryBlack = "#000000";
@@ -34,12 +34,12 @@ export const amsterdamTypographyTextLevel2LineHeight = "1.3";
34
34
  export const amsterdamTypographyTextLevel3FontSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
35
35
  export const amsterdamTypographyTextLevel3FontSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
36
36
  export const amsterdamTypographyTextLevel3LineHeight = "1.4";
37
- export const amsterdamTypographyTextLevel4FontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
38
- export const amsterdamTypographyTextLevel4FontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
39
- export const amsterdamTypographyTextLevel4LineHeight = "1.5";
40
- export const amsterdamTypographyTextLevel5FontSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
41
- export const amsterdamTypographyTextLevel5FontSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
42
- export const amsterdamTypographyTextLevel5LineHeight = "1.4";
37
+ export const amsterdamTypographyTextLevel4FontSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
38
+ export const amsterdamTypographyTextLevel4FontSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
39
+ export const amsterdamTypographyTextLevel4LineHeight = "1.4";
40
+ export const amsterdamTypographyTextLevel5FontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
41
+ export const amsterdamTypographyTextLevel5FontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
42
+ export const amsterdamTypographyTextLevel5LineHeight = "1.5";
43
43
  export const amsterdamTypographyTextLevel6FontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
44
44
  export const amsterdamTypographyTextLevel6FontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
45
45
  export const amsterdamTypographyTextLevel6LineHeight = "1.6";
@@ -54,6 +54,14 @@ export const amsterdamSpacingInsetSm = "0.5rem";
54
54
  export const amsterdamSpacingInsetMd = "1rem";
55
55
  export const amsterdamSpacingInsetLg = "1.5rem";
56
56
  export const amsterdamSpacingInsetXl = "2.5rem";
57
+ export const amsterdamAccordionButtonColor = "#004699";
58
+ export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
59
+ export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
60
+ export const amsterdamAccordionButtonFontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
61
+ export const amsterdamAccordionButtonFontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
62
+ export const amsterdamAccordionButtonFontWeight = 800;
63
+ export const amsterdamAccordionButtonLineHeight = "1.5";
64
+ export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
57
65
  export const amsterdamButtonFontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
58
66
  export const amsterdamButtonFontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
59
67
  export const amsterdamButtonSecondaryHoverBoxShadow = "0 0 0 1px #00387A";
@@ -81,12 +89,12 @@ export const amsterdamHeadingFontWeight = 800;
81
89
  export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)";
82
90
  export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)";
83
91
  export const amsterdamIconSize3ContainerMultiplier = "1.4";
84
- export const amsterdamIconSize4IconSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
85
- export const amsterdamIconSize4IconSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
86
- export const amsterdamIconSize4ContainerMultiplier = "1.5";
87
- export const amsterdamIconSize5IconSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
88
- export const amsterdamIconSize5IconSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
89
- export const amsterdamIconSize5ContainerMultiplier = "1.4";
92
+ export const amsterdamIconSize4IconSizeNarrow = "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)";
93
+ export const amsterdamIconSize4IconSizeWide = "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)";
94
+ export const amsterdamIconSize4ContainerMultiplier = "1.4";
95
+ export const amsterdamIconSize5IconSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
96
+ export const amsterdamIconSize5IconSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
97
+ export const amsterdamIconSize5ContainerMultiplier = "1.5";
90
98
  export const amsterdamIconSize6IconSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
91
99
  export const amsterdamIconSize6IconSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
92
100
  export const amsterdamIconSize6ContainerMultiplier = "1.6";
@@ -149,6 +157,19 @@ export const amsterdamParagraphSmallLineHeight = "1.6";
149
157
  export const amsterdamParagraphLargeFontSizeNarrow = "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)";
150
158
  export const amsterdamParagraphLargeFontSizeWide = "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)";
151
159
  export const amsterdamParagraphLargeLineHeight = "1.5";
160
+ export const amsterdamUnorderedListColor = "#000000";
161
+ export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
162
+ export const amsterdamUnorderedListFontSizeNarrow = "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)";
163
+ export const amsterdamUnorderedListFontSizeWide = "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)";
164
+ export const amsterdamUnorderedListFontWeight = 400;
165
+ export const amsterdamUnorderedListGap = "0.5rem";
166
+ export const amsterdamUnorderedListLineHeight = "1.6";
167
+ export const amsterdamUnorderedListListStyle = "square";
168
+ export const amsterdamUnorderedListItemPaddingInline = "3px 0";
169
+ export const amsterdamUnorderedListUnorderedListPaddingBlock = "4px 0";
170
+ export const amsterdamUnorderedListUnorderedListPaddingInline = "14px 0";
171
+ export const amsterdamUnorderedListUnorderedListListStyleType = "'–'";
172
+ export const amsterdamUnorderedListUnorderedListItemPaddingInline = "11px 0";
152
173
  export const utrechtButtonBackgroundColor = "#004699";
153
174
  export const utrechtButtonColor = "#ffffff";
154
175
  export const utrechtButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
package/dist/index.json CHANGED
@@ -30,12 +30,12 @@
30
30
  "amsterdamTypographyTextLevel3FontSizeNarrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
31
31
  "amsterdamTypographyTextLevel3FontSizeWide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)",
32
32
  "amsterdamTypographyTextLevel3LineHeight": "1.4",
33
- "amsterdamTypographyTextLevel4FontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
34
- "amsterdamTypographyTextLevel4FontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
35
- "amsterdamTypographyTextLevel4LineHeight": "1.5",
36
- "amsterdamTypographyTextLevel5FontSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
37
- "amsterdamTypographyTextLevel5FontSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
38
- "amsterdamTypographyTextLevel5LineHeight": "1.4",
33
+ "amsterdamTypographyTextLevel4FontSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
34
+ "amsterdamTypographyTextLevel4FontSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
35
+ "amsterdamTypographyTextLevel4LineHeight": "1.4",
36
+ "amsterdamTypographyTextLevel5FontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
37
+ "amsterdamTypographyTextLevel5FontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
38
+ "amsterdamTypographyTextLevel5LineHeight": "1.5",
39
39
  "amsterdamTypographyTextLevel6FontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
40
40
  "amsterdamTypographyTextLevel6FontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
41
41
  "amsterdamTypographyTextLevel6LineHeight": "1.6",
@@ -50,6 +50,14 @@
50
50
  "amsterdamSpacingInsetMd": "1rem",
51
51
  "amsterdamSpacingInsetLg": "1.5rem",
52
52
  "amsterdamSpacingInsetXl": "2.5rem",
53
+ "amsterdamAccordionButtonColor": "#004699",
54
+ "amsterdamAccordionButtonFocusOutlineOffset": "2px",
55
+ "amsterdamAccordionButtonFontFamily": "'Amsterdam Sans', Arial, sans-serif",
56
+ "amsterdamAccordionButtonFontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
57
+ "amsterdamAccordionButtonFontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
58
+ "amsterdamAccordionButtonFontWeight": 800,
59
+ "amsterdamAccordionButtonLineHeight": "1.5",
60
+ "amsterdamAccordionButtonHoverBoxShadow": "inset 0 0 0 2px #767676",
53
61
  "amsterdamButtonFontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
54
62
  "amsterdamButtonFontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
55
63
  "amsterdamButtonSecondaryHoverBoxShadow": "0 0 0 1px #00387A",
@@ -77,12 +85,12 @@
77
85
  "amsterdamIconSize3IconSizeNarrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
78
86
  "amsterdamIconSize3IconSizeWide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)",
79
87
  "amsterdamIconSize3ContainerMultiplier": "1.4",
80
- "amsterdamIconSize4IconSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
81
- "amsterdamIconSize4IconSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
82
- "amsterdamIconSize4ContainerMultiplier": "1.5",
83
- "amsterdamIconSize5IconSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
84
- "amsterdamIconSize5IconSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
85
- "amsterdamIconSize5ContainerMultiplier": "1.4",
88
+ "amsterdamIconSize4IconSizeNarrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
89
+ "amsterdamIconSize4IconSizeWide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)",
90
+ "amsterdamIconSize4ContainerMultiplier": "1.4",
91
+ "amsterdamIconSize5IconSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
92
+ "amsterdamIconSize5IconSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
93
+ "amsterdamIconSize5ContainerMultiplier": "1.5",
86
94
  "amsterdamIconSize6IconSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
87
95
  "amsterdamIconSize6IconSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
88
96
  "amsterdamIconSize6ContainerMultiplier": "1.6",
@@ -145,6 +153,19 @@
145
153
  "amsterdamParagraphLargeFontSizeNarrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
146
154
  "amsterdamParagraphLargeFontSizeWide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)",
147
155
  "amsterdamParagraphLargeLineHeight": "1.5",
156
+ "amsterdamUnorderedListColor": "#000000",
157
+ "amsterdamUnorderedListFontFamily": "'Amsterdam Sans', Arial, sans-serif",
158
+ "amsterdamUnorderedListFontSizeNarrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
159
+ "amsterdamUnorderedListFontSizeWide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
160
+ "amsterdamUnorderedListFontWeight": 400,
161
+ "amsterdamUnorderedListGap": "0.5rem",
162
+ "amsterdamUnorderedListLineHeight": "1.6",
163
+ "amsterdamUnorderedListListStyle": "square",
164
+ "amsterdamUnorderedListItemPaddingInline": "3px 0",
165
+ "amsterdamUnorderedListUnorderedListPaddingBlock": "4px 0",
166
+ "amsterdamUnorderedListUnorderedListPaddingInline": "14px 0",
167
+ "amsterdamUnorderedListUnorderedListListStyleType": "'–'",
168
+ "amsterdamUnorderedListUnorderedListItemPaddingInline": "11px 0",
148
169
  "utrechtButtonBackgroundColor": "#004699",
149
170
  "utrechtButtonColor": "#ffffff",
150
171
  "utrechtButtonFontFamily": "'Amsterdam Sans', Arial, sans-serif",
package/dist/index.tokens.json CHANGED
@@ -55,17 +55,17 @@
55
55
  },
56
56
  "4": {
57
57
  "font-size": {
58
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
59
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
58
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
59
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
60
60
  },
61
- "line-height": "1.5"
61
+ "line-height": "1.4"
62
62
  },
63
63
  "5": {
64
64
  "font-size": {
65
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
66
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
65
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
66
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
67
67
  },
68
- "line-height": "1.4"
68
+ "line-height": "1.5"
69
69
  },
70
70
  "6": {
71
71
  "font-size": {
@@ -99,6 +99,24 @@
99
99
  "xl": "2.5rem"
100
100
  }
101
101
  },
102
+ "accordion": {
103
+ "button": {
104
+ "color": "#004699",
105
+ "focus": {
106
+ "outline-offset": "2px"
107
+ },
108
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
109
+ "font-size": {
110
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
111
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
112
+ },
113
+ "font-weight": 800,
114
+ "line-height": "1.5",
115
+ "hover": {
116
+ "box-shadow": "inset 0 0 0 2px #767676"
117
+ }
118
+ }
119
+ },
102
120
  "button": {
103
121
  "font-size": {
104
122
  "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
@@ -163,17 +181,17 @@
163
181
  },
164
182
  "size-4": {
165
183
  "icon-size": {
166
- "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
167
- "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
184
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
185
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
168
186
  },
169
- "container-multiplier": "1.5"
187
+ "container-multiplier": "1.4"
170
188
  },
171
189
  "size-5": {
172
190
  "icon-size": {
173
- "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
174
- "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
191
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
192
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
175
193
  },
176
- "container-multiplier": "1.4"
194
+ "container-multiplier": "1.5"
177
195
  },
178
196
  "size-6": {
179
197
  "icon-size": {
@@ -344,6 +362,29 @@
344
362
  },
345
363
  "line-height": "1.5"
346
364
  }
365
+ },
366
+ "unordered-list": {
367
+ "color": "#000000",
368
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
369
+ "font-size": {
370
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
371
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
372
+ },
373
+ "font-weight": 400,
374
+ "gap": "0.5rem",
375
+ "line-height": "1.6",
376
+ "list-style": "square",
377
+ "item": {
378
+ "padding-inline": "3px 0"
379
+ },
380
+ "unordered-list": {
381
+ "padding-block": "4px 0",
382
+ "padding-inline": "14px 0",
383
+ "list-style-type": "'–'",
384
+ "item": {
385
+ "padding-inline": "11px 0"
386
+ }
387
+ }
347
388
  }
348
389
  },
349
390
  "utrecht": {
package/dist/root.css CHANGED
@@ -1,12 +1,19 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --utrecht-button-subtle-disabled-background-color: transparent;
8
8
  --utrecht-button-subtle-background-color: transparent;
9
9
  --utrecht-button-disabled-border-color: transparent;
10
+ --amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
11
+ --amsterdam-unordered-list-unordered-list-list-style-type: '–';
12
+ --amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
13
+ --amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
14
+ --amsterdam-unordered-list-item-padding-inline: 3px 0;
15
+ --amsterdam-unordered-list-list-style: square;
16
+ --amsterdam-unordered-list-gap: 0.5rem;
10
17
  --amsterdam-link-on-background-light-hover-text-decoration: none;
11
18
  --amsterdam-link-on-background-light-focus-text-decoration: underline;
12
19
  --amsterdam-link-on-background-light-text-underline-offset: 9px;
@@ -40,12 +47,12 @@
40
47
  --amsterdam-typography-text-level-6-line-height: 1.6;
41
48
  --amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
42
49
  --amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
43
- --amsterdam-typography-text-level-5-line-height: 1.4;
44
- --amsterdam-typography-text-level-5-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
45
- --amsterdam-typography-text-level-5-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
46
- --amsterdam-typography-text-level-4-line-height: 1.5;
47
- --amsterdam-typography-text-level-4-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
48
- --amsterdam-typography-text-level-4-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
50
+ --amsterdam-typography-text-level-5-line-height: 1.5;
51
+ --amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
52
+ --amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
53
+ --amsterdam-typography-text-level-4-line-height: 1.4;
54
+ --amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
55
+ --amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
49
56
  --amsterdam-typography-text-level-3-line-height: 1.4;
50
57
  --amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
51
58
  --amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
@@ -105,9 +112,15 @@
105
112
  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
106
113
  --utrecht-button-color: var(--amsterdam-color-primary-white);
107
114
  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
108
- --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-4-line-height);
109
- --amsterdam-paragraph-large-font-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
110
- --amsterdam-paragraph-large-font-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
115
+ --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-6-line-height);
116
+ --amsterdam-unordered-list-font-weight: 400;
117
+ --amsterdam-unordered-list-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
118
+ --amsterdam-unordered-list-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
119
+ --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
120
+ --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
121
+ --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-5-line-height);
122
+ --amsterdam-paragraph-large-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
123
+ --amsterdam-paragraph-large-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
111
124
  --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-7-line-height);
112
125
  --amsterdam-paragraph-small-font-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
113
126
  --amsterdam-paragraph-small-font-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
@@ -160,9 +173,9 @@
160
173
  --amsterdam-heading-font-weight: 800;
161
174
  --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
162
175
  --amsterdam-heading-color: var(--amsterdam-color-primary-black);
163
- --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-5-line-height);
164
- --amsterdam-heading-4-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
165
- --amsterdam-heading-4-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
176
+ --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
177
+ --amsterdam-heading-4-font-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
178
+ --amsterdam-heading-4-font-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
166
179
  --amsterdam-heading-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
167
180
  --amsterdam-heading-3-font-size-wide: var(--amsterdam-typography-text-level-3-font-size-wide);
168
181
  --amsterdam-heading-3-font-size-narrow: var(--amsterdam-typography-text-level-3-font-size-narrow);
@@ -181,4 +194,12 @@
181
194
  --amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px var(--amsterdam-color-dark-blue);
182
195
  --amsterdam-button-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
183
196
  --amsterdam-button-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
197
+ --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
198
+ --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
199
+ --amsterdam-accordion-button-font-weight: 800;
200
+ --amsterdam-accordion-button-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
201
+ --amsterdam-accordion-button-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
202
+ --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
203
+ --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
204
+ --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
184
205
  }
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jul 2023 07:52:43 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -122,6 +122,24 @@ declare const tokens: {
122
122
  "xl": DesignToken
123
123
  }
124
124
  },
125
+ "accordion": {
126
+ "button": {
127
+ "color": DesignToken,
128
+ "focus": {
129
+ "outline-offset": DesignToken
130
+ },
131
+ "font-family": DesignToken,
132
+ "font-size": {
133
+ "narrow": DesignToken,
134
+ "wide": DesignToken
135
+ },
136
+ "font-weight": DesignToken,
137
+ "line-height": DesignToken,
138
+ "hover": {
139
+ "box-shadow": DesignToken
140
+ }
141
+ }
142
+ },
125
143
  "button": {
126
144
  "font-size": {
127
145
  "narrow": DesignToken,
@@ -318,6 +336,29 @@ declare const tokens: {
318
336
  },
319
337
  "line-height": DesignToken
320
338
  }
339
+ },
340
+ "unordered-list": {
341
+ "color": DesignToken,
342
+ "font-family": DesignToken,
343
+ "font-size": {
344
+ "narrow": DesignToken,
345
+ "wide": DesignToken
346
+ },
347
+ "font-weight": DesignToken,
348
+ "gap": DesignToken,
349
+ "line-height": DesignToken,
350
+ "list-style": DesignToken,
351
+ "item": {
352
+ "padding-inline": DesignToken
353
+ },
354
+ "unordered-list": {
355
+ "padding-block": DesignToken,
356
+ "padding-inline": DesignToken,
357
+ "list-style-type": DesignToken,
358
+ "item": {
359
+ "padding-inline": DesignToken
360
+ }
361
+ }
321
362
  }
322
363
  },
323
364
  "utrecht": {