@amsterdam/design-system-tokens 0.1.7 → 0.1.8
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.
- package/CHANGELOG.md +8 -0
- package/dist/_variables.scss +30 -6
- package/dist/index.css +30 -6
- package/dist/index.d.ts +26 -2
- package/dist/index.js +30 -6
- package/dist/index.json +29 -5
- package/dist/index.tokens.json +57 -7
- package/dist/root.css +30 -6
- package/dist/tokens.d.ts +54 -4
- package/dist/tokens.js +547 -19
- package/dist/variables.less +30 -6
- package/package.json +2 -2
- package/src/components/amsterdam/dialog.tokens.json +47 -0
- package/src/components/amsterdam/grid.tokens.json +4 -4
- package/src/components/amsterdam/logo.tokens.json +10 -0
- package/src/components/amsterdam/footer.tokens.json +0 -11
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
+
|
|
6
|
+
## [0.1.8](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.1.7...@amsterdam/design-system-tokens@0.1.8) (2023-11-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @amsterdam/design-system-tokens
|
package/dist/_variables.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
|
|
5
5
|
$utrecht-button-subtle-disabled-background-color: transparent;
|
|
6
6
|
$utrecht-button-subtle-background-color: transparent;
|
|
@@ -35,6 +35,7 @@ $amsterdam-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1
|
|
|
35
35
|
$amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
|
|
36
36
|
$amsterdam-ordered-list-list-style-type: decimal;
|
|
37
37
|
$amsterdam-ordered-list-gap: 0.75rem;
|
|
38
|
+
$amsterdam-logo-height: 2.5rem;
|
|
38
39
|
$amsterdam-link-standalone-hover-text-underline-offset: 7px;
|
|
39
40
|
$amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
|
|
40
41
|
$amsterdam-link-standalone-text-decoration-thickness: 2px;
|
|
@@ -53,11 +54,23 @@ $amsterdam-link-inline-hover-text-underline-offset: 3px;
|
|
|
53
54
|
$amsterdam-link-inline-hover-text-decoration: underline;
|
|
54
55
|
$amsterdam-grid-wide-column-count: 12;
|
|
55
56
|
$amsterdam-grid-medium-column-count: 8;
|
|
56
|
-
$amsterdam-grid-density-high-padding-inline: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); // Equals the gap.
|
|
57
|
-
$amsterdam-grid-density-high-gap: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
|
|
58
|
-
$amsterdam-grid-density-low-padding-inline: clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem); // Equals 1.5 times the gap.
|
|
59
|
-
$amsterdam-grid-density-low-gap: clamp(1rem, 3.125vw + 0.375rem, 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
57
|
+
$amsterdam-grid-density-high-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
|
|
58
|
+
$amsterdam-grid-density-high-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
|
|
59
|
+
$amsterdam-grid-density-low-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); // Equals 1.5 times the gap.
|
|
60
|
+
$amsterdam-grid-density-low-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
60
61
|
$amsterdam-grid-column-count: 4;
|
|
62
|
+
$amsterdam-dialog-footer-padding-block: 1.5rem 0;
|
|
63
|
+
$amsterdam-dialog-footer-gap: 1rem;
|
|
64
|
+
$amsterdam-dialog-header-gap: 1rem;
|
|
65
|
+
$amsterdam-dialog-article-padding-inline-end: 1.5rem;
|
|
66
|
+
$amsterdam-dialog-form-max-block-size: 75vh;
|
|
67
|
+
$amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
68
|
+
$amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
69
|
+
$amsterdam-dialog-form-gap: 1.5rem;
|
|
70
|
+
$amsterdam-dialog-close-background-color: transparent;
|
|
71
|
+
$amsterdam-dialog-backdrop-background: #0006;
|
|
72
|
+
$amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
73
|
+
$amsterdam-dialog-border: 0;
|
|
61
74
|
$amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
|
|
62
75
|
$amsterdam-alert-close-background-color: transparent;
|
|
63
76
|
$amsterdam-alert-gap: 1rem;
|
|
@@ -210,6 +223,9 @@ $amsterdam-ordered-list-line-height: $amsterdam-typography-text-level-6-line-hei
|
|
|
210
223
|
$amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
|
|
211
224
|
$amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
|
|
212
225
|
$amsterdam-ordered-list-color: $amsterdam-color-primary-black;
|
|
226
|
+
$amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
|
|
227
|
+
$amsterdam-logo-title-color: $amsterdam-color-primary-red;
|
|
228
|
+
$amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
|
|
213
229
|
$amsterdam-link-on-background-light-visited-color: $amsterdam-color-primary-black;
|
|
214
230
|
$amsterdam-link-on-background-light-hover-color: $amsterdam-color-primary-black;
|
|
215
231
|
$amsterdam-link-on-background-light-color: $amsterdam-color-primary-black;
|
|
@@ -273,7 +289,15 @@ $amsterdam-form-label-line-height: $amsterdam-typography-text-level-7-line-heigh
|
|
|
273
289
|
$amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
|
|
274
290
|
$amsterdam-form-label-font-family: $amsterdam-typography-font-family;
|
|
275
291
|
$amsterdam-form-label-color: $amsterdam-color-primary-black;
|
|
276
|
-
$amsterdam-
|
|
292
|
+
$amsterdam-dialog-close-hover-fill: $amsterdam-color-primary-blue;
|
|
293
|
+
$amsterdam-dialog-close-fill: $amsterdam-color-primary-black;
|
|
294
|
+
$amsterdam-dialog-title-wide-font-size: $amsterdam-typography-text-level-5-wide-font-size;
|
|
295
|
+
$amsterdam-dialog-title-narrow-font-size: $amsterdam-typography-text-level-5-narrow-font-size;
|
|
296
|
+
$amsterdam-dialog-title-line-height: $amsterdam-typography-text-level-5-line-height;
|
|
297
|
+
$amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
|
|
298
|
+
$amsterdam-dialog-title-font-family: $amsterdam-typography-font-family;
|
|
299
|
+
$amsterdam-dialog-title-color: $amsterdam-color-primary-black;
|
|
300
|
+
$amsterdam-dialog-background-color: $amsterdam-color-primary-white;
|
|
277
301
|
$amsterdam-checkbox-wide-font-size: $amsterdam-typography-text-level-6-wide-font-size;
|
|
278
302
|
$amsterdam-checkbox-narrow-font-size: $amsterdam-typography-text-level-6-narrow-font-size;
|
|
279
303
|
$amsterdam-checkbox-line-height: $amsterdam-typography-text-level-6-line-height;
|
package/dist/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
.amsterdam-theme {
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
--amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
|
|
38
38
|
--amsterdam-ordered-list-list-style-type: decimal;
|
|
39
39
|
--amsterdam-ordered-list-gap: 0.75rem;
|
|
40
|
+
--amsterdam-logo-height: 2.5rem;
|
|
40
41
|
--amsterdam-link-standalone-hover-text-underline-offset: 7px;
|
|
41
42
|
--amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
|
|
42
43
|
--amsterdam-link-standalone-text-decoration-thickness: 2px;
|
|
@@ -55,11 +56,23 @@
|
|
|
55
56
|
--amsterdam-link-inline-hover-text-decoration: underline;
|
|
56
57
|
--amsterdam-grid-wide-column-count: 12;
|
|
57
58
|
--amsterdam-grid-medium-column-count: 8;
|
|
58
|
-
--amsterdam-grid-density-high-padding-inline: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Equals the gap. */
|
|
59
|
-
--amsterdam-grid-density-high-gap: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
|
|
60
|
-
--amsterdam-grid-density-low-padding-inline: clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem); /* Equals 1.5 times the gap. */
|
|
61
|
-
--amsterdam-grid-density-low-gap: clamp(1rem, 3.125vw + 0.375rem, 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
|
|
59
|
+
--amsterdam-grid-density-high-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
|
|
60
|
+
--amsterdam-grid-density-high-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
|
|
61
|
+
--amsterdam-grid-density-low-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
|
|
62
|
+
--amsterdam-grid-density-low-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
|
|
62
63
|
--amsterdam-grid-column-count: 4;
|
|
64
|
+
--amsterdam-dialog-footer-padding-block: 1.5rem 0;
|
|
65
|
+
--amsterdam-dialog-footer-gap: 1rem;
|
|
66
|
+
--amsterdam-dialog-header-gap: 1rem;
|
|
67
|
+
--amsterdam-dialog-article-padding-inline-end: 1.5rem;
|
|
68
|
+
--amsterdam-dialog-form-max-block-size: 75vh;
|
|
69
|
+
--amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
70
|
+
--amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
71
|
+
--amsterdam-dialog-form-gap: 1.5rem;
|
|
72
|
+
--amsterdam-dialog-close-background-color: transparent;
|
|
73
|
+
--amsterdam-dialog-backdrop-background: #0006;
|
|
74
|
+
--amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
75
|
+
--amsterdam-dialog-border: 0;
|
|
63
76
|
--amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
|
|
64
77
|
--amsterdam-alert-close-background-color: transparent;
|
|
65
78
|
--amsterdam-alert-gap: 1rem;
|
|
@@ -212,6 +225,9 @@
|
|
|
212
225
|
--amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
213
226
|
--amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
|
|
214
227
|
--amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
|
|
228
|
+
--amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
|
|
229
|
+
--amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
|
|
230
|
+
--amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
|
|
215
231
|
--amsterdam-link-on-background-light-visited-color: var(--amsterdam-color-primary-black);
|
|
216
232
|
--amsterdam-link-on-background-light-hover-color: var(--amsterdam-color-primary-black);
|
|
217
233
|
--amsterdam-link-on-background-light-color: var(--amsterdam-color-primary-black);
|
|
@@ -275,7 +291,15 @@
|
|
|
275
291
|
--amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
276
292
|
--amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
|
|
277
293
|
--amsterdam-form-label-color: var(--amsterdam-color-primary-black);
|
|
278
|
-
--amsterdam-
|
|
294
|
+
--amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
295
|
+
--amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
|
|
296
|
+
--amsterdam-dialog-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
|
|
297
|
+
--amsterdam-dialog-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
|
|
298
|
+
--amsterdam-dialog-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
|
|
299
|
+
--amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
300
|
+
--amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
|
|
301
|
+
--amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
|
|
302
|
+
--amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
|
|
279
303
|
--amsterdam-checkbox-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
|
|
280
304
|
--amsterdam-checkbox-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
|
|
281
305
|
--amsterdam-checkbox-line-height: var(--amsterdam-typography-text-level-6-line-height);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const amsterdamColorPrimaryBlack : string;
|
|
@@ -151,7 +151,27 @@ export const amsterdamCheckboxOutlineOffset : string;
|
|
|
151
151
|
export const amsterdamCheckboxLineHeight : string;
|
|
152
152
|
export const amsterdamCheckboxNarrowFontSize : string;
|
|
153
153
|
export const amsterdamCheckboxWideFontSize : string;
|
|
154
|
-
export const
|
|
154
|
+
export const amsterdamDialogBackgroundColor : string;
|
|
155
|
+
export const amsterdamDialogBorder : string;
|
|
156
|
+
export const amsterdamDialogMaxInlineSize : string;
|
|
157
|
+
export const amsterdamDialogTitleColor : string;
|
|
158
|
+
export const amsterdamDialogTitleFontFamily : string;
|
|
159
|
+
export const amsterdamDialogTitleFontWeight : number;
|
|
160
|
+
export const amsterdamDialogTitleLineHeight : string;
|
|
161
|
+
export const amsterdamDialogTitleNarrowFontSize : string;
|
|
162
|
+
export const amsterdamDialogTitleWideFontSize : string;
|
|
163
|
+
export const amsterdamDialogBackdropBackground : string;
|
|
164
|
+
export const amsterdamDialogCloseBackgroundColor : string;
|
|
165
|
+
export const amsterdamDialogCloseFill : string;
|
|
166
|
+
export const amsterdamDialogCloseHoverFill : string;
|
|
167
|
+
export const amsterdamDialogFormGap : string;
|
|
168
|
+
export const amsterdamDialogFormPaddingBlock : string;
|
|
169
|
+
export const amsterdamDialogFormPaddingInline : string;
|
|
170
|
+
export const amsterdamDialogFormMaxBlockSize : string;
|
|
171
|
+
export const amsterdamDialogArticlePaddingInlineEnd : string;
|
|
172
|
+
export const amsterdamDialogHeaderGap : string;
|
|
173
|
+
export const amsterdamDialogFooterGap : string;
|
|
174
|
+
export const amsterdamDialogFooterPaddingBlock : string;
|
|
155
175
|
export const amsterdamFormLabelColor : string;
|
|
156
176
|
export const amsterdamFormLabelFontFamily : string;
|
|
157
177
|
export const amsterdamFormLabelFontWeight : number;
|
|
@@ -242,6 +262,10 @@ export const amsterdamLinkOnBackgroundDarkVisitedColor : string;
|
|
|
242
262
|
export const amsterdamLinkOnBackgroundLightColor : string;
|
|
243
263
|
export const amsterdamLinkOnBackgroundLightHoverColor : string;
|
|
244
264
|
export const amsterdamLinkOnBackgroundLightVisitedColor : string;
|
|
265
|
+
export const amsterdamLogoHeight : string;
|
|
266
|
+
export const amsterdamLogoEmblemColor : string;
|
|
267
|
+
export const amsterdamLogoTitleColor : string;
|
|
268
|
+
export const amsterdamLogoSubsiteColor : string;
|
|
245
269
|
export const amsterdamOrderedListColor : string;
|
|
246
270
|
export const amsterdamOrderedListFontFamily : string;
|
|
247
271
|
export const amsterdamOrderedListFontWeight : number;
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const amsterdamColorPrimaryBlack = "#000000";
|
|
@@ -151,7 +151,27 @@ export const amsterdamCheckboxOutlineOffset = "2px";
|
|
|
151
151
|
export const amsterdamCheckboxLineHeight = "1.6";
|
|
152
152
|
export const amsterdamCheckboxNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
153
153
|
export const amsterdamCheckboxWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
|
|
154
|
-
export const
|
|
154
|
+
export const amsterdamDialogBackgroundColor = "#ffffff";
|
|
155
|
+
export const amsterdamDialogBorder = "0";
|
|
156
|
+
export const amsterdamDialogMaxInlineSize = "min(87.69vw, 45rem)";
|
|
157
|
+
export const amsterdamDialogTitleColor = "#000000";
|
|
158
|
+
export const amsterdamDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
159
|
+
export const amsterdamDialogTitleFontWeight = 800;
|
|
160
|
+
export const amsterdamDialogTitleLineHeight = "1.5";
|
|
161
|
+
export const amsterdamDialogTitleNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
|
|
162
|
+
export const amsterdamDialogTitleWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
|
|
163
|
+
export const amsterdamDialogBackdropBackground = "#0006";
|
|
164
|
+
export const amsterdamDialogCloseBackgroundColor = "transparent";
|
|
165
|
+
export const amsterdamDialogCloseFill = "#000000";
|
|
166
|
+
export const amsterdamDialogCloseHoverFill = "#004699";
|
|
167
|
+
export const amsterdamDialogFormGap = "1.5rem";
|
|
168
|
+
export const amsterdamDialogFormPaddingBlock = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
|
|
169
|
+
export const amsterdamDialogFormPaddingInline = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
|
|
170
|
+
export const amsterdamDialogFormMaxBlockSize = "75vh";
|
|
171
|
+
export const amsterdamDialogArticlePaddingInlineEnd = "1.5rem";
|
|
172
|
+
export const amsterdamDialogHeaderGap = "1rem";
|
|
173
|
+
export const amsterdamDialogFooterGap = "1rem";
|
|
174
|
+
export const amsterdamDialogFooterPaddingBlock = "1.5rem 0";
|
|
155
175
|
export const amsterdamFormLabelColor = "#000000";
|
|
156
176
|
export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
157
177
|
export const amsterdamFormLabelFontWeight = 800;
|
|
@@ -159,10 +179,10 @@ export const amsterdamFormLabelLineHeight = "1.6";
|
|
|
159
179
|
export const amsterdamFormLabelNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
|
|
160
180
|
export const amsterdamFormLabelWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
|
|
161
181
|
export const amsterdamGridColumnCount = "4";
|
|
162
|
-
export const amsterdamGridDensityLowGap = "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
163
|
-
export const amsterdamGridDensityLowPaddingInline = "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)"; // Equals 1.5 times the gap.
|
|
164
|
-
export const amsterdamGridDensityHighGap = "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
|
|
165
|
-
export const amsterdamGridDensityHighPaddingInline = "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"; // Equals the gap.
|
|
182
|
+
export const amsterdamGridDensityLowGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
183
|
+
export const amsterdamGridDensityLowPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
|
|
184
|
+
export const amsterdamGridDensityHighGap = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
|
|
185
|
+
export const amsterdamGridDensityHighPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
|
|
166
186
|
export const amsterdamGridMediumColumnCount = "8";
|
|
167
187
|
export const amsterdamGridWideColumnCount = "12";
|
|
168
188
|
export const amsterdamHeading1LineHeight = "1.2";
|
|
@@ -238,6 +258,10 @@ export const amsterdamLinkOnBackgroundDarkVisitedColor = "#ffffff";
|
|
|
238
258
|
export const amsterdamLinkOnBackgroundLightColor = "#000000";
|
|
239
259
|
export const amsterdamLinkOnBackgroundLightHoverColor = "#000000";
|
|
240
260
|
export const amsterdamLinkOnBackgroundLightVisitedColor = "#000000";
|
|
261
|
+
export const amsterdamLogoHeight = "2.5rem";
|
|
262
|
+
export const amsterdamLogoEmblemColor = "#EC0000";
|
|
263
|
+
export const amsterdamLogoTitleColor = "#EC0000";
|
|
264
|
+
export const amsterdamLogoSubsiteColor = "#000000";
|
|
241
265
|
export const amsterdamOrderedListColor = "#000000";
|
|
242
266
|
export const amsterdamOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
243
267
|
export const amsterdamOrderedListFontWeight = 400;
|
package/dist/index.json
CHANGED
|
@@ -147,7 +147,27 @@
|
|
|
147
147
|
"amsterdamCheckboxLineHeight": "1.6",
|
|
148
148
|
"amsterdamCheckboxNarrowFontSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
|
|
149
149
|
"amsterdamCheckboxWideFontSize": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)",
|
|
150
|
-
"
|
|
150
|
+
"amsterdamDialogBackgroundColor": "#ffffff",
|
|
151
|
+
"amsterdamDialogBorder": "0",
|
|
152
|
+
"amsterdamDialogMaxInlineSize": "min(87.69vw, 45rem)",
|
|
153
|
+
"amsterdamDialogTitleColor": "#000000",
|
|
154
|
+
"amsterdamDialogTitleFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
155
|
+
"amsterdamDialogTitleFontWeight": 800,
|
|
156
|
+
"amsterdamDialogTitleLineHeight": "1.5",
|
|
157
|
+
"amsterdamDialogTitleNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
|
|
158
|
+
"amsterdamDialogTitleWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
|
|
159
|
+
"amsterdamDialogBackdropBackground": "#0006",
|
|
160
|
+
"amsterdamDialogCloseBackgroundColor": "transparent",
|
|
161
|
+
"amsterdamDialogCloseFill": "#000000",
|
|
162
|
+
"amsterdamDialogCloseHoverFill": "#004699",
|
|
163
|
+
"amsterdamDialogFormGap": "1.5rem",
|
|
164
|
+
"amsterdamDialogFormPaddingBlock": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
|
|
165
|
+
"amsterdamDialogFormPaddingInline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
|
|
166
|
+
"amsterdamDialogFormMaxBlockSize": "75vh",
|
|
167
|
+
"amsterdamDialogArticlePaddingInlineEnd": "1.5rem",
|
|
168
|
+
"amsterdamDialogHeaderGap": "1rem",
|
|
169
|
+
"amsterdamDialogFooterGap": "1rem",
|
|
170
|
+
"amsterdamDialogFooterPaddingBlock": "1.5rem 0",
|
|
151
171
|
"amsterdamFormLabelColor": "#000000",
|
|
152
172
|
"amsterdamFormLabelFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
153
173
|
"amsterdamFormLabelFontWeight": 800,
|
|
@@ -155,10 +175,10 @@
|
|
|
155
175
|
"amsterdamFormLabelNarrowFontSize": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
|
|
156
176
|
"amsterdamFormLabelWideFontSize": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)",
|
|
157
177
|
"amsterdamGridColumnCount": "4",
|
|
158
|
-
"amsterdamGridDensityLowGap": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
|
|
159
|
-
"amsterdamGridDensityLowPaddingInline": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
|
|
160
|
-
"amsterdamGridDensityHighGap": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
|
|
161
|
-
"amsterdamGridDensityHighPaddingInline": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
|
|
178
|
+
"amsterdamGridDensityLowGap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
|
|
179
|
+
"amsterdamGridDensityLowPaddingInline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
|
|
180
|
+
"amsterdamGridDensityHighGap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
|
|
181
|
+
"amsterdamGridDensityHighPaddingInline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
|
|
162
182
|
"amsterdamGridMediumColumnCount": "8",
|
|
163
183
|
"amsterdamGridWideColumnCount": "12",
|
|
164
184
|
"amsterdamHeading1LineHeight": "1.2",
|
|
@@ -234,6 +254,10 @@
|
|
|
234
254
|
"amsterdamLinkOnBackgroundLightColor": "#000000",
|
|
235
255
|
"amsterdamLinkOnBackgroundLightHoverColor": "#000000",
|
|
236
256
|
"amsterdamLinkOnBackgroundLightVisitedColor": "#000000",
|
|
257
|
+
"amsterdamLogoHeight": "2.5rem",
|
|
258
|
+
"amsterdamLogoEmblemColor": "#EC0000",
|
|
259
|
+
"amsterdamLogoTitleColor": "#EC0000",
|
|
260
|
+
"amsterdamLogoSubsiteColor": "#000000",
|
|
237
261
|
"amsterdamOrderedListColor": "#000000",
|
|
238
262
|
"amsterdamOrderedListFontFamily": "'Amsterdam Sans', Arial, sans-serif",
|
|
239
263
|
"amsterdamOrderedListFontWeight": 400,
|
package/dist/index.tokens.json
CHANGED
|
@@ -334,9 +334,47 @@
|
|
|
334
334
|
"font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
|
|
335
335
|
}
|
|
336
336
|
},
|
|
337
|
-
"
|
|
338
|
-
"
|
|
339
|
-
|
|
337
|
+
"dialog": {
|
|
338
|
+
"background-color": "#ffffff",
|
|
339
|
+
"border": "0",
|
|
340
|
+
"max-inline-size": "min(87.69vw, 45rem)",
|
|
341
|
+
"title": {
|
|
342
|
+
"color": "#000000",
|
|
343
|
+
"font-family": "'Amsterdam Sans', Arial, sans-serif",
|
|
344
|
+
"font-weight": 800,
|
|
345
|
+
"line-height": "1.5",
|
|
346
|
+
"narrow": {
|
|
347
|
+
"font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
|
|
348
|
+
},
|
|
349
|
+
"wide": {
|
|
350
|
+
"font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
|
|
351
|
+
}
|
|
352
|
+
},
|
|
353
|
+
"backdrop": {
|
|
354
|
+
"background": "#0006"
|
|
355
|
+
},
|
|
356
|
+
"close": {
|
|
357
|
+
"background-color": "transparent",
|
|
358
|
+
"fill": "#000000",
|
|
359
|
+
"hover": {
|
|
360
|
+
"fill": "#004699"
|
|
361
|
+
}
|
|
362
|
+
},
|
|
363
|
+
"form": {
|
|
364
|
+
"gap": "1.5rem",
|
|
365
|
+
"padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
|
|
366
|
+
"padding-inline": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
|
|
367
|
+
"max-block-size": "75vh"
|
|
368
|
+
},
|
|
369
|
+
"article": {
|
|
370
|
+
"padding-inline-end": "1.5rem"
|
|
371
|
+
},
|
|
372
|
+
"header": {
|
|
373
|
+
"gap": "1rem"
|
|
374
|
+
},
|
|
375
|
+
"footer": {
|
|
376
|
+
"gap": "1rem",
|
|
377
|
+
"padding-block": "1.5rem 0"
|
|
340
378
|
}
|
|
341
379
|
},
|
|
342
380
|
"form-label": {
|
|
@@ -354,12 +392,12 @@
|
|
|
354
392
|
"grid": {
|
|
355
393
|
"column-count": "4",
|
|
356
394
|
"density-low": {
|
|
357
|
-
"gap": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
|
|
358
|
-
"padding-inline": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)"
|
|
395
|
+
"gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
|
|
396
|
+
"padding-inline": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"
|
|
359
397
|
},
|
|
360
398
|
"density-high": {
|
|
361
|
-
"gap": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
|
|
362
|
-
"padding-inline": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"
|
|
399
|
+
"gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
|
|
400
|
+
"padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
|
|
363
401
|
},
|
|
364
402
|
"medium": {
|
|
365
403
|
"column-count": "8"
|
|
@@ -545,6 +583,18 @@
|
|
|
545
583
|
}
|
|
546
584
|
}
|
|
547
585
|
},
|
|
586
|
+
"logo": {
|
|
587
|
+
"height": "2.5rem",
|
|
588
|
+
"emblem": {
|
|
589
|
+
"color": "#EC0000"
|
|
590
|
+
},
|
|
591
|
+
"title": {
|
|
592
|
+
"color": "#EC0000"
|
|
593
|
+
},
|
|
594
|
+
"subsite": {
|
|
595
|
+
"color": "#000000"
|
|
596
|
+
}
|
|
597
|
+
},
|
|
548
598
|
"ordered-list": {
|
|
549
599
|
"color": "#000000",
|
|
550
600
|
"font-family": "'Amsterdam Sans', Arial, sans-serif",
|
package/dist/root.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
--amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
|
|
38
38
|
--amsterdam-ordered-list-list-style-type: decimal;
|
|
39
39
|
--amsterdam-ordered-list-gap: 0.75rem;
|
|
40
|
+
--amsterdam-logo-height: 2.5rem;
|
|
40
41
|
--amsterdam-link-standalone-hover-text-underline-offset: 7px;
|
|
41
42
|
--amsterdam-link-standalone-hover-text-decoration-thickness: 3px;
|
|
42
43
|
--amsterdam-link-standalone-text-decoration-thickness: 2px;
|
|
@@ -55,11 +56,23 @@
|
|
|
55
56
|
--amsterdam-link-inline-hover-text-decoration: underline;
|
|
56
57
|
--amsterdam-grid-wide-column-count: 12;
|
|
57
58
|
--amsterdam-grid-medium-column-count: 8;
|
|
58
|
-
--amsterdam-grid-density-high-padding-inline: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Equals the gap. */
|
|
59
|
-
--amsterdam-grid-density-high-gap: clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
|
|
60
|
-
--amsterdam-grid-density-low-padding-inline: clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem); /* Equals 1.5 times the gap. */
|
|
61
|
-
--amsterdam-grid-density-low-gap: clamp(1rem, 3.125vw + 0.375rem, 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
|
|
59
|
+
--amsterdam-grid-density-high-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
|
|
60
|
+
--amsterdam-grid-density-high-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
|
|
61
|
+
--amsterdam-grid-density-low-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
|
|
62
|
+
--amsterdam-grid-density-low-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
|
|
62
63
|
--amsterdam-grid-column-count: 4;
|
|
64
|
+
--amsterdam-dialog-footer-padding-block: 1.5rem 0;
|
|
65
|
+
--amsterdam-dialog-footer-gap: 1rem;
|
|
66
|
+
--amsterdam-dialog-header-gap: 1rem;
|
|
67
|
+
--amsterdam-dialog-article-padding-inline-end: 1.5rem;
|
|
68
|
+
--amsterdam-dialog-form-max-block-size: 75vh;
|
|
69
|
+
--amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
70
|
+
--amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
|
|
71
|
+
--amsterdam-dialog-form-gap: 1.5rem;
|
|
72
|
+
--amsterdam-dialog-close-background-color: transparent;
|
|
73
|
+
--amsterdam-dialog-backdrop-background: #0006;
|
|
74
|
+
--amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
|
|
75
|
+
--amsterdam-dialog-border: 0;
|
|
63
76
|
--amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
|
|
64
77
|
--amsterdam-alert-close-background-color: transparent;
|
|
65
78
|
--amsterdam-alert-gap: 1rem;
|
|
@@ -212,6 +225,9 @@
|
|
|
212
225
|
--amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
|
|
213
226
|
--amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
|
|
214
227
|
--amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
|
|
228
|
+
--amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
|
|
229
|
+
--amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
|
|
230
|
+
--amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
|
|
215
231
|
--amsterdam-link-on-background-light-visited-color: var(--amsterdam-color-primary-black);
|
|
216
232
|
--amsterdam-link-on-background-light-hover-color: var(--amsterdam-color-primary-black);
|
|
217
233
|
--amsterdam-link-on-background-light-color: var(--amsterdam-color-primary-black);
|
|
@@ -275,7 +291,15 @@
|
|
|
275
291
|
--amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
276
292
|
--amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
|
|
277
293
|
--amsterdam-form-label-color: var(--amsterdam-color-primary-black);
|
|
278
|
-
--amsterdam-
|
|
294
|
+
--amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
|
|
295
|
+
--amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
|
|
296
|
+
--amsterdam-dialog-title-wide-font-size: var(--amsterdam-typography-text-level-5-wide-font-size);
|
|
297
|
+
--amsterdam-dialog-title-narrow-font-size: var(--amsterdam-typography-text-level-5-narrow-font-size);
|
|
298
|
+
--amsterdam-dialog-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
|
|
299
|
+
--amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
|
|
300
|
+
--amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
|
|
301
|
+
--amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
|
|
302
|
+
--amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
|
|
279
303
|
--amsterdam-checkbox-wide-font-size: var(--amsterdam-typography-text-level-6-wide-font-size);
|
|
280
304
|
--amsterdam-checkbox-narrow-font-size: var(--amsterdam-typography-text-level-6-narrow-font-size);
|
|
281
305
|
--amsterdam-checkbox-line-height: var(--amsterdam-typography-text-level-6-line-height);
|
package/dist/tokens.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 27 Nov 2023 11:07:10 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export default tokens;
|
|
@@ -357,9 +357,47 @@ declare const tokens: {
|
|
|
357
357
|
"font-size": DesignToken
|
|
358
358
|
}
|
|
359
359
|
},
|
|
360
|
-
"
|
|
361
|
-
"
|
|
362
|
-
|
|
360
|
+
"dialog": {
|
|
361
|
+
"background-color": DesignToken,
|
|
362
|
+
"border": DesignToken,
|
|
363
|
+
"max-inline-size": DesignToken,
|
|
364
|
+
"title": {
|
|
365
|
+
"color": DesignToken,
|
|
366
|
+
"font-family": DesignToken,
|
|
367
|
+
"font-weight": DesignToken,
|
|
368
|
+
"line-height": DesignToken,
|
|
369
|
+
"narrow": {
|
|
370
|
+
"font-size": DesignToken
|
|
371
|
+
},
|
|
372
|
+
"wide": {
|
|
373
|
+
"font-size": DesignToken
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
"backdrop": {
|
|
377
|
+
"background": DesignToken
|
|
378
|
+
},
|
|
379
|
+
"close": {
|
|
380
|
+
"background-color": DesignToken,
|
|
381
|
+
"fill": DesignToken,
|
|
382
|
+
"hover": {
|
|
383
|
+
"fill": DesignToken
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
"form": {
|
|
387
|
+
"gap": DesignToken,
|
|
388
|
+
"padding-block": DesignToken,
|
|
389
|
+
"padding-inline": DesignToken,
|
|
390
|
+
"max-block-size": DesignToken
|
|
391
|
+
},
|
|
392
|
+
"article": {
|
|
393
|
+
"padding-inline-end": DesignToken
|
|
394
|
+
},
|
|
395
|
+
"header": {
|
|
396
|
+
"gap": DesignToken
|
|
397
|
+
},
|
|
398
|
+
"footer": {
|
|
399
|
+
"gap": DesignToken,
|
|
400
|
+
"padding-block": DesignToken
|
|
363
401
|
}
|
|
364
402
|
},
|
|
365
403
|
"form-label": {
|
|
@@ -568,6 +606,18 @@ declare const tokens: {
|
|
|
568
606
|
}
|
|
569
607
|
}
|
|
570
608
|
},
|
|
609
|
+
"logo": {
|
|
610
|
+
"height": DesignToken,
|
|
611
|
+
"emblem": {
|
|
612
|
+
"color": DesignToken
|
|
613
|
+
},
|
|
614
|
+
"title": {
|
|
615
|
+
"color": DesignToken
|
|
616
|
+
},
|
|
617
|
+
"subsite": {
|
|
618
|
+
"color": DesignToken
|
|
619
|
+
}
|
|
620
|
+
},
|
|
571
621
|
"ordered-list": {
|
|
572
622
|
"color": DesignToken,
|
|
573
623
|
"font-family": DesignToken,
|