@amsterdam/design-system-tokens 0.10.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -13
- package/README.md +197 -1
- package/build.js +15 -14
- package/dist/compact.css +17 -13
- package/dist/compact.d.ts +10 -12
- package/dist/compact.json +12 -7
- package/dist/compact.mjs +13 -9
- package/dist/compact.scss +17 -13
- package/dist/compact.theme.css +17 -13
- package/dist/index.css +828 -770
- package/dist/index.d.ts +187 -85
- package/dist/index.json +349 -240
- package/dist/index.mjs +278 -220
- package/dist/index.scss +828 -770
- package/dist/index.theme.css +828 -770
- package/package.json +11 -5
- package/src/brand/ams/space.compact.tokens.json +5 -0
- package/src/brand/ams/space.tokens.json +10 -19
- package/src/brand/ams/text.compact.tokens.json +7 -7
- package/src/brand/ams/text.tokens.json +7 -7
- package/src/common/ams/link-appearance.tokens.json +18 -6
- package/src/components/ams/accordion.tokens.json +4 -4
- package/src/components/ams/action-group.tokens.json +7 -0
- package/src/components/ams/alert.tokens.json +6 -3
- package/src/components/ams/avatar.tokens.json +5 -2
- package/src/components/ams/badge.tokens.json +1 -1
- package/src/components/ams/breadcrumb.tokens.json +4 -1
- package/src/components/ams/breakout.tokens.json +11 -0
- package/src/components/ams/button.tokens.json +7 -3
- package/src/components/ams/card.tokens.json +4 -0
- package/src/components/ams/{form-field-character-counter.tokens.json → character-count.tokens.json} +1 -1
- package/src/components/ams/checkbox.tokens.json +1 -0
- package/src/components/ams/column.tokens.json +6 -5
- package/src/components/ams/date-input.tokens.json +2 -2
- package/src/components/ams/description-list.tokens.json +6 -6
- package/src/components/ams/dialog.tokens.json +7 -11
- package/src/components/ams/field-set.tokens.json +3 -7
- package/src/components/ams/field.tokens.json +3 -9
- package/src/components/ams/file-input.tokens.json +5 -5
- package/src/components/ams/form-error-list.tokens.json +7 -0
- package/src/components/ams/header.tokens.json +1 -1
- package/src/components/ams/hint.tokens.json +7 -0
- package/src/components/ams/icon-button.tokens.json +2 -2
- package/src/components/ams/image-slider.tokens.json +26 -0
- package/src/components/ams/link-list.tokens.json +8 -8
- package/src/components/ams/link.tokens.json +8 -8
- package/src/components/ams/mega-menu.tokens.json +1 -1
- package/src/components/ams/ordered-list.tokens.json +4 -1
- package/src/components/ams/page-menu.tokens.json +1 -1
- package/src/components/ams/pagination.tokens.json +2 -1
- package/src/components/ams/password-input.tokens.json +33 -0
- package/src/components/ams/radio.tokens.json +37 -35
- package/src/components/ams/row.tokens.json +6 -5
- package/src/components/ams/search-field.tokens.json +5 -7
- package/src/components/ams/select.tokens.json +3 -3
- package/src/components/ams/skip-link.tokens.json +2 -2
- package/src/components/ams/table-of-contents.tokens.json +4 -4
- package/src/components/ams/table.tokens.json +2 -2
- package/src/components/ams/tabs.tokens.json +3 -2
- package/src/components/ams/text-area.tokens.json +2 -2
- package/src/components/ams/text-input.tokens.json +2 -2
- package/src/components/ams/time-input.tokens.json +2 -2
- package/src/components/ams/top-task-link.tokens.json +1 -0
- package/src/components/ams/unordered-list.tokens.json +4 -1
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Fri, 28 Jun 2024 12:13:40 GMT
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
5
|
export const amsBorderWidthSm = "0.0625rem";
|
|
@@ -28,37 +27,32 @@ export const amsProportionSquare = "1 / 1";
|
|
|
28
27
|
export const amsProportionWide = "4 / 3";
|
|
29
28
|
export const amsProportionXWide = "16 / 9";
|
|
30
29
|
export const amsProportion2xWide = "16 / 5";
|
|
31
|
-
export const
|
|
32
|
-
export const
|
|
33
|
-
export const
|
|
34
|
-
export const
|
|
35
|
-
export const
|
|
36
|
-
export const
|
|
37
|
-
export const
|
|
38
|
-
export const
|
|
39
|
-
export const
|
|
40
|
-
export const
|
|
41
|
-
export const amsSpaceStackXs = ".5rem";
|
|
42
|
-
export const amsSpaceStackSm = ".75rem";
|
|
43
|
-
export const amsSpaceStackMd = "1rem";
|
|
44
|
-
export const amsSpaceStackLg = "1.5rem";
|
|
45
|
-
export const amsSpaceStackXl = "2rem";
|
|
30
|
+
export const amsSpaceXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
31
|
+
export const amsSpaceSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
32
|
+
export const amsSpaceMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
33
|
+
export const amsSpaceLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
34
|
+
export const amsSpaceXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
35
|
+
export const amsSpaceGridXs = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
36
|
+
export const amsSpaceGridSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
37
|
+
export const amsSpaceGridMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
38
|
+
export const amsSpaceGridLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
39
|
+
export const amsSpaceGridXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
46
40
|
export const amsTextFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
47
41
|
export const amsTextFontWeightNormal = 400;
|
|
48
42
|
export const amsTextFontWeightBold = 800;
|
|
49
|
-
export const amsTextLevel0FontSize = "clamp(2.
|
|
43
|
+
export const amsTextLevel0FontSize = "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
50
44
|
export const amsTextLevel0LineHeight = "1.15";
|
|
51
|
-
export const amsTextLevel1FontSize = "clamp(2.
|
|
45
|
+
export const amsTextLevel1FontSize = "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)";
|
|
52
46
|
export const amsTextLevel1LineHeight = "1.2";
|
|
53
|
-
export const amsTextLevel2FontSize = "clamp(1.
|
|
47
|
+
export const amsTextLevel2FontSize = "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)";
|
|
54
48
|
export const amsTextLevel2LineHeight = "1.25";
|
|
55
|
-
export const amsTextLevel3FontSize = "clamp(1.
|
|
49
|
+
export const amsTextLevel3FontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
56
50
|
export const amsTextLevel3LineHeight = "1.3";
|
|
57
|
-
export const amsTextLevel4FontSize = "clamp(1.
|
|
51
|
+
export const amsTextLevel4FontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
58
52
|
export const amsTextLevel4LineHeight = "1.5";
|
|
59
|
-
export const amsTextLevel5FontSize = "clamp(1.125rem, calc(
|
|
53
|
+
export const amsTextLevel5FontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
60
54
|
export const amsTextLevel5LineHeight = "1.6";
|
|
61
|
-
export const amsTextLevel6FontSize = "clamp(0.
|
|
55
|
+
export const amsTextLevel6FontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
62
56
|
export const amsTextLevel6LineHeight = "1.6";
|
|
63
57
|
export const amsActionActivateCursor = "pointer";
|
|
64
58
|
export const amsActionBusyCursor = "wait";
|
|
@@ -74,37 +68,43 @@ export const amsLinkAppearanceColor = "#004699";
|
|
|
74
68
|
export const amsLinkAppearanceTextDecorationThickness = "0.125rem";
|
|
75
69
|
export const amsLinkAppearanceTextUnderlineOffset = "0.3333em";
|
|
76
70
|
export const amsLinkAppearanceHoverColor = "#102E62";
|
|
77
|
-
export const amsLinkAppearanceOnBackgroundDarkColor = "#FFFFFF";
|
|
78
|
-
export const amsLinkAppearanceOnBackgroundLightColor = "#000000";
|
|
79
71
|
export const amsLinkAppearanceRegularTextDecorationLine = "underline";
|
|
80
72
|
export const amsLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
|
|
81
73
|
export const amsLinkAppearanceRegularHoverTextUnderlineOffset = "0.2778em";
|
|
82
74
|
export const amsLinkAppearanceSubtleTextDecorationLine = "none";
|
|
83
75
|
export const amsLinkAppearanceSubtleHoverTextDecorationLine = "underline";
|
|
84
|
-
export const
|
|
76
|
+
export const amsLinkAppearanceContrastColor = "#000000";
|
|
77
|
+
export const amsLinkAppearanceContrastHoverColor = "#000000";
|
|
78
|
+
export const amsLinkAppearanceContrastVisitedColor = "#000000";
|
|
79
|
+
export const amsLinkAppearanceInverseColor = "#FFFFFF";
|
|
80
|
+
export const amsLinkAppearanceInverseHoverColor = "#FFFFFF";
|
|
81
|
+
export const amsLinkAppearanceInverseVisitedColor = "#FFFFFF";
|
|
82
|
+
export const amsAccordionGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
85
83
|
export const amsAccordionButtonColor = "#004699";
|
|
86
84
|
export const amsAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
87
|
-
export const amsAccordionButtonFontSize = "clamp(1.125rem, calc(
|
|
85
|
+
export const amsAccordionButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
88
86
|
export const amsAccordionButtonFontWeight = 800;
|
|
89
|
-
export const amsAccordionButtonGap = "
|
|
87
|
+
export const amsAccordionButtonGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
90
88
|
export const amsAccordionButtonLineHeight = "1.6";
|
|
91
|
-
export const amsAccordionButtonPaddingBlock = ".75rem";
|
|
89
|
+
export const amsAccordionButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
92
90
|
export const amsAccordionButtonPaddingInline = "0";
|
|
93
91
|
export const amsAccordionButtonFocusOutlineOffset = "0.125rem";
|
|
94
92
|
export const amsAccordionButtonHoverColor = "#102E62";
|
|
95
|
-
export const amsAccordionPanelPaddingBlock = "0
|
|
93
|
+
export const amsAccordionPanelPaddingBlock = "0";
|
|
96
94
|
export const amsAccordionPanelPaddingInline = "0";
|
|
95
|
+
export const amsActionGroupGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
97
96
|
export const amsAlertBorderWidth = "0.25rem";
|
|
98
97
|
export const amsAlertBorderStyle = "solid";
|
|
99
|
-
export const amsAlertGap = "
|
|
100
|
-
export const amsAlertPaddingBlock = "
|
|
101
|
-
export const amsAlertPaddingInline = "1.
|
|
98
|
+
export const amsAlertGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
99
|
+
export const amsAlertPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
100
|
+
export const amsAlertPaddingInline = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
102
101
|
export const amsAlertErrorBorderColor = "#EC0000";
|
|
103
102
|
export const amsAlertInfoBorderColor = "#004699";
|
|
104
103
|
export const amsAlertSuccessBorderColor = "#00A03C";
|
|
105
104
|
export const amsAlertWarningBorderColor = "#FF9100";
|
|
106
105
|
export const amsAlertCloseFill = "#000000";
|
|
107
106
|
export const amsAlertCloseHoverFill = "#004699";
|
|
107
|
+
export const amsAlertContentGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
108
108
|
export const amsAspectRatioXTall = "9 / 16";
|
|
109
109
|
export const amsAspectRatioTall = "3 / 4";
|
|
110
110
|
export const amsAspectRatioSquare = "1 / 1";
|
|
@@ -113,17 +113,18 @@ export const amsAspectRatioXWide = "16 / 9";
|
|
|
113
113
|
export const amsAspectRatio2xWide = "16 / 5";
|
|
114
114
|
export const amsAvatarAspectRatio = "1 / 1";
|
|
115
115
|
export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
116
|
-
export const amsAvatarFontSize = "clamp(0.
|
|
116
|
+
export const amsAvatarFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
117
117
|
export const amsAvatarFontWeight = 400;
|
|
118
118
|
export const amsAvatarLineHeight = "1.6";
|
|
119
|
-
export const amsAvatarPaddingBlock = "0.
|
|
120
|
-
export const amsAvatarPaddingInline = "0.
|
|
119
|
+
export const amsAvatarPaddingBlock = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
120
|
+
export const amsAvatarPaddingInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
121
121
|
export const amsAvatarBlackBackgroundColor = "#000000";
|
|
122
122
|
export const amsAvatarBlackColor = "#FFFFFF";
|
|
123
123
|
export const amsAvatarBlueBackgroundColor = "#004699";
|
|
124
124
|
export const amsAvatarBlueColor = "#FFFFFF";
|
|
125
125
|
export const amsAvatarDarkGreenBackgroundColor = "#00A03C";
|
|
126
126
|
export const amsAvatarDarkGreenColor = "#FFFFFF";
|
|
127
|
+
export const amsAvatarForcedColorsBorderWidth = "0.125rem";
|
|
127
128
|
export const amsAvatarGreenBackgroundColor = "#BED200";
|
|
128
129
|
export const amsAvatarGreenColor = "#000000";
|
|
129
130
|
export const amsAvatarGrey1BackgroundColor = "#E8E8E8";
|
|
@@ -147,10 +148,10 @@ export const amsAvatarWhiteColor = "#000000";
|
|
|
147
148
|
export const amsAvatarYellowBackgroundColor = "#FFE600";
|
|
148
149
|
export const amsAvatarYellowColor = "#000000";
|
|
149
150
|
export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
150
|
-
export const amsBadgeFontSize = "clamp(1.125rem, calc(
|
|
151
|
+
export const amsBadgeFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
151
152
|
export const amsBadgeFontWeight = 800;
|
|
152
153
|
export const amsBadgeLineHeight = "1.6";
|
|
153
|
-
export const amsBadgePaddingInline = ".
|
|
154
|
+
export const amsBadgePaddingInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
154
155
|
export const amsBadgeBlackBackgroundColor = "#000000";
|
|
155
156
|
export const amsBadgeBlackColor = "#FFFFFF";
|
|
156
157
|
export const amsBadgeBlueBackgroundColor = "#004699";
|
|
@@ -181,15 +182,18 @@ export const amsBadgeYellowBackgroundColor = "#FFE600";
|
|
|
181
182
|
export const amsBadgeYellowColor = "#000000";
|
|
182
183
|
export const amsBlockquoteColor = "#000000";
|
|
183
184
|
export const amsBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
184
|
-
export const amsBlockquoteFontSize = "clamp(1.
|
|
185
|
+
export const amsBlockquoteFontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
185
186
|
export const amsBlockquoteFontWeight = 800;
|
|
186
187
|
export const amsBlockquoteLineHeight = "1.3";
|
|
187
188
|
export const amsBlockquoteInverseColor = "#FFFFFF";
|
|
188
189
|
export const amsBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
189
|
-
export const amsBreadcrumbFontSize = "clamp(0.
|
|
190
|
+
export const amsBreadcrumbFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
190
191
|
export const amsBreadcrumbFontWeight = 400;
|
|
191
192
|
export const amsBreadcrumbLineHeight = "1.6";
|
|
192
193
|
export const amsBreadcrumbSeparatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")";
|
|
194
|
+
export const amsBreadcrumbSeparatorBlockSize = "1ex";
|
|
195
|
+
export const amsBreadcrumbSeparatorInlineSize = "1ex";
|
|
196
|
+
export const amsBreadcrumbSeparatorMarginInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
193
197
|
export const amsBreadcrumbLinkColor = "#004699";
|
|
194
198
|
export const amsBreadcrumbLinkOutlineOffset = "0.125rem";
|
|
195
199
|
export const amsBreadcrumbLinkTextDecorationLine = "none";
|
|
@@ -197,14 +201,17 @@ export const amsBreadcrumbLinkTextDecorationThickness = "0.125rem";
|
|
|
197
201
|
export const amsBreadcrumbLinkTextUnderlineOffset = "0.3333em";
|
|
198
202
|
export const amsBreadcrumbLinkHoverColor = "#102E62";
|
|
199
203
|
export const amsBreadcrumbLinkHoverTextDecorationLine = "underline";
|
|
204
|
+
export const amsBreakoutRowGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
205
|
+
export const amsBreakoutRowGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
206
|
+
export const amsBreakoutRowGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
200
207
|
export const amsButtonCursor = "pointer";
|
|
201
208
|
export const amsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
202
|
-
export const amsButtonFontSize = "clamp(1.125rem, calc(
|
|
209
|
+
export const amsButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
203
210
|
export const amsButtonLineHeight = "1.6";
|
|
204
|
-
export const amsButtonGap = "
|
|
205
|
-
export const amsButtonPaddingBlock = ".5rem";
|
|
206
|
-
export const amsButtonPaddingInline = "1rem";
|
|
211
|
+
export const amsButtonGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
207
212
|
export const amsButtonOutlineOffset = "0.125rem";
|
|
213
|
+
export const amsButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
214
|
+
export const amsButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
208
215
|
export const amsButtonDisabledCursor = "not-allowed";
|
|
209
216
|
export const amsButtonForcedColorModeBorder = "0.125rem solid";
|
|
210
217
|
export const amsButtonPrimaryBackgroundColor = "#004699";
|
|
@@ -229,6 +236,10 @@ export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
|
229
236
|
export const amsButtonTertiaryHoverColor = "#102E62";
|
|
230
237
|
export const amsButtonTertiaryDisabledBackgroundColor = "transparent";
|
|
231
238
|
export const amsButtonTertiaryDisabledColor = "#BEBEBE";
|
|
239
|
+
export const amsButtonIconOnlyPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
240
|
+
export const amsButtonIconOnlyPaddingInline = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
241
|
+
export const amsCardGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
242
|
+
export const amsCardHeadingGroupGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
232
243
|
export const amsCardLinkColor = "#004699";
|
|
233
244
|
export const amsCardLinkTextDecorationLine = "none";
|
|
234
245
|
export const amsCardLinkTextDecorationThickness = "0.125rem";
|
|
@@ -236,10 +247,17 @@ export const amsCardLinkTextUnderlineOffset = "0.3333em";
|
|
|
236
247
|
export const amsCardLinkHoverColor = "#102E62";
|
|
237
248
|
export const amsCardLinkHoverTextDecorationLine = "underline";
|
|
238
249
|
export const amsCardOutlineOffset = "0.125rem";
|
|
250
|
+
export const amsCharacterCountColor = "#000000";
|
|
251
|
+
export const amsCharacterCountFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
252
|
+
export const amsCharacterCountFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
253
|
+
export const amsCharacterCountFontWeight = 400;
|
|
254
|
+
export const amsCharacterCountLineHeight = "1.6";
|
|
255
|
+
export const amsCharacterCountErrorColor = "#EC0000";
|
|
239
256
|
export const amsCheckboxColor = "#000000";
|
|
240
257
|
export const amsCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
241
|
-
export const amsCheckboxFontSize = "clamp(1.125rem, calc(
|
|
258
|
+
export const amsCheckboxFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
242
259
|
export const amsCheckboxFontWeight = 400;
|
|
260
|
+
export const amsCheckboxGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
243
261
|
export const amsCheckboxLineHeight = "1.6";
|
|
244
262
|
export const amsCheckboxOutlineOffset = "0.125rem";
|
|
245
263
|
export const amsCheckboxCheckmarkBorderColor = "#004699";
|
|
@@ -267,21 +285,22 @@ export const amsCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
|
|
|
267
285
|
export const amsCheckboxDisabledColor = "#767676";
|
|
268
286
|
export const amsCheckboxHoverColor = "#102E62";
|
|
269
287
|
export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
|
|
270
|
-
export const
|
|
271
|
-
export const
|
|
272
|
-
export const
|
|
273
|
-
export const
|
|
274
|
-
export const
|
|
288
|
+
export const amsColumnGapNo = "0";
|
|
289
|
+
export const amsColumnGapXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
290
|
+
export const amsColumnGapSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
291
|
+
export const amsColumnGapMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
292
|
+
export const amsColumnGapLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
293
|
+
export const amsColumnGapXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
275
294
|
export const amsDateInputBackgroundColor = "#FFFFFF";
|
|
276
295
|
export const amsDateInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
277
296
|
export const amsDateInputColor = "#000000";
|
|
278
297
|
export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
279
|
-
export const amsDateInputFontSize = "clamp(1.125rem, calc(
|
|
298
|
+
export const amsDateInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
280
299
|
export const amsDateInputFontWeight = 400;
|
|
281
300
|
export const amsDateInputLineHeight = "1.6";
|
|
282
301
|
export const amsDateInputOutlineOffset = "0.125rem";
|
|
283
|
-
export const amsDateInputPaddingBlock = ".
|
|
284
|
-
export const amsDateInputPaddingInline = "1.5rem";
|
|
302
|
+
export const amsDateInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
303
|
+
export const amsDateInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
285
304
|
export const amsDateInputCalenderPickerIndicatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
|
|
286
305
|
export const amsDateInputDisabledBackgroundColor = "#FFFFFF";
|
|
287
306
|
export const amsDateInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
@@ -292,156 +311,162 @@ export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage = "url(\"da
|
|
|
292
311
|
export const amsDateInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
293
312
|
export const amsDateInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
294
313
|
export const amsDescriptionListColor = "#000000";
|
|
314
|
+
export const amsDescriptionListColumnGap = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
295
315
|
export const amsDescriptionListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
296
|
-
export const amsDescriptionListFontSize = "clamp(1.125rem, calc(
|
|
297
|
-
export const amsDescriptionListFontWeight = 400;
|
|
298
|
-
export const amsDescriptionListGap = "1rem";
|
|
316
|
+
export const amsDescriptionListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
299
317
|
export const amsDescriptionListInverseColor = "#FFFFFF";
|
|
300
318
|
export const amsDescriptionListLineHeight = "1.6";
|
|
301
|
-
export const amsDescriptionListRowGap = "
|
|
302
|
-
export const
|
|
303
|
-
export const
|
|
319
|
+
export const amsDescriptionListRowGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
320
|
+
export const amsDescriptionListTermFontWeight = 800;
|
|
321
|
+
export const amsDescriptionListDetailsFontWeight = 400;
|
|
322
|
+
export const amsDescriptionListDetailsPaddingInlineStart = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
304
323
|
export const amsDialogBackgroundColor = "#FFFFFF";
|
|
305
324
|
export const amsDialogBorder = "0";
|
|
306
|
-
export const
|
|
307
|
-
export const
|
|
308
|
-
export const
|
|
309
|
-
export const
|
|
310
|
-
export const
|
|
311
|
-
export const
|
|
312
|
-
export const
|
|
325
|
+
export const amsDialogGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
326
|
+
export const amsDialogInlineSize = "calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
327
|
+
export const amsDialogMaxBlockSize = "calc(100dvh - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
328
|
+
export const amsDialogMaxInlineSize = "48rem";
|
|
329
|
+
export const amsDialogPaddingBlock = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
330
|
+
export const amsDialogPaddingInline = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
331
|
+
export const amsDialogHeaderGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
313
332
|
export const amsErrorMessageColor = "#EC0000";
|
|
314
333
|
export const amsErrorMessageFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
315
|
-
export const amsErrorMessageFontSize = "clamp(0.
|
|
334
|
+
export const amsErrorMessageFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
316
335
|
export const amsErrorMessageFontWeight = 400;
|
|
317
336
|
export const amsErrorMessageLineHeight = "1.6";
|
|
318
337
|
export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
319
|
-
export const amsFieldSetInvalidPaddingInlineStart = "
|
|
338
|
+
export const amsFieldSetInvalidPaddingInlineStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
320
339
|
export const amsFieldSetLegendColor = "#000000";
|
|
321
340
|
export const amsFieldSetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
322
|
-
export const amsFieldSetLegendFontSize = "clamp(1.
|
|
341
|
+
export const amsFieldSetLegendFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
323
342
|
export const amsFieldSetLegendFontWeight = 800;
|
|
324
343
|
export const amsFieldSetLegendLineHeight = "1.5";
|
|
325
|
-
export const amsFieldSetLegendMarginBlockEnd = "
|
|
326
|
-
export const amsFieldGap = ".75rem";
|
|
344
|
+
export const amsFieldSetLegendMarginBlockEnd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
345
|
+
export const amsFieldGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
327
346
|
export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
328
|
-
export const amsFieldInvalidPaddingInlineStart = "
|
|
347
|
+
export const amsFieldInvalidPaddingInlineStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
329
348
|
export const amsFileInputBackgroundColor = "#FFFFFF";
|
|
330
349
|
export const amsFileInputBorder = "0.0625rem dashed #767676";
|
|
331
350
|
export const amsFileInputColor = "#000000";
|
|
332
351
|
export const amsFileInputCursor = "pointer";
|
|
333
352
|
export const amsFileInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
334
|
-
export const amsFileInputFontSize = "clamp(1.125rem, calc(
|
|
353
|
+
export const amsFileInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
335
354
|
export const amsFileInputFontWeight = 400;
|
|
336
355
|
export const amsFileInputLineHeight = "1.6";
|
|
337
356
|
export const amsFileInputOutlineOffset = "0.125rem";
|
|
338
|
-
export const amsFileInputPaddingBlock = "
|
|
339
|
-
export const amsFileInputPaddingInline = "
|
|
357
|
+
export const amsFileInputPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
358
|
+
export const amsFileInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
340
359
|
export const amsFileInputDisabledColor = "#BEBEBE";
|
|
341
360
|
export const amsFileInputDisabledCursor = "not-allowed";
|
|
342
361
|
export const amsFileInputFileSelectorButtonBackgroundColor = "#FFFFFF";
|
|
343
362
|
export const amsFileInputFileSelectorButtonBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
344
363
|
export const amsFileInputFileSelectorButtonColor = "#004699";
|
|
345
364
|
export const amsFileInputFileSelectorButtonCursor = "pointer";
|
|
346
|
-
export const amsFileInputFileSelectorButtonMarginInlineEnd = "
|
|
347
|
-
export const amsFileInputFileSelectorButtonPaddingBlock = ".
|
|
348
|
-
export const amsFileInputFileSelectorButtonPaddingInline = "
|
|
365
|
+
export const amsFileInputFileSelectorButtonMarginInlineEnd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
366
|
+
export const amsFileInputFileSelectorButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
367
|
+
export const amsFileInputFileSelectorButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
349
368
|
export const amsFileInputFileSelectorButtonHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
|
|
350
369
|
export const amsFileInputFileSelectorButtonHoverColor = "#102E62";
|
|
351
370
|
export const amsFileInputFileSelectorButtonDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
|
|
352
371
|
export const amsFileInputFileSelectorButtonDisabledColor = "#BEBEBE";
|
|
353
372
|
export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
|
|
354
373
|
export const amsFileInputFileSelectorButtonForcedColorModeBorder = "0.125rem solid";
|
|
355
|
-
export const
|
|
356
|
-
export const
|
|
357
|
-
export const
|
|
358
|
-
export const
|
|
359
|
-
export const
|
|
360
|
-
export const
|
|
361
|
-
export const amsGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
|
|
362
|
-
export const amsGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
|
|
363
|
-
export const amsGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
|
|
364
|
-
export const amsGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
|
|
365
|
-
export const amsGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
|
|
374
|
+
export const amsFormErrorListOutlineOffset = "0.125rem";
|
|
375
|
+
export const amsGapXs = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
376
|
+
export const amsGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
377
|
+
export const amsGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
378
|
+
export const amsGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
379
|
+
export const amsGapXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
366
380
|
export const amsGridColumnCount = "4";
|
|
367
|
-
export const amsGridColumnGap = "clamp(1rem, calc(
|
|
368
|
-
export const amsGridPaddingBlockSm = "clamp(0.5rem, calc(
|
|
369
|
-
export const amsGridPaddingBlockMd = "clamp(1rem, calc(
|
|
370
|
-
export const amsGridPaddingBlockLg = "clamp(1.5rem, calc(
|
|
371
|
-
export const amsGridPaddingInline = "clamp(1.5rem, calc(
|
|
372
|
-
export const amsGridRowGapSm = "clamp(0.5rem, calc(
|
|
373
|
-
export const amsGridRowGapMd = "clamp(1rem, calc(
|
|
374
|
-
export const amsGridRowGapLg = "clamp(1.5rem, calc(
|
|
381
|
+
export const amsGridColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
382
|
+
export const amsGridPaddingBlockSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
383
|
+
export const amsGridPaddingBlockMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
384
|
+
export const amsGridPaddingBlockLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
385
|
+
export const amsGridPaddingInline = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
386
|
+
export const amsGridRowGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
387
|
+
export const amsGridRowGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
388
|
+
export const amsGridRowGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
375
389
|
export const amsGridMediumColumnCount = "8";
|
|
376
390
|
export const amsGridWideColumnCount = "12";
|
|
377
|
-
export const amsHeaderColumnGap = "clamp(1rem, calc(
|
|
378
|
-
export const amsHeaderPaddingBlock = "
|
|
391
|
+
export const amsHeaderColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
|
|
392
|
+
export const amsHeaderPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
379
393
|
export const amsHeaderLogoLinkOutlineOffset = "0.125rem";
|
|
380
394
|
export const amsHeadingColor = "#000000";
|
|
381
395
|
export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
382
396
|
export const amsHeadingFontWeight = 800;
|
|
383
397
|
export const amsHeadingInverseColor = "#FFFFFF";
|
|
384
|
-
export const amsHeadingLevel1FontSize = "clamp(2.
|
|
398
|
+
export const amsHeadingLevel1FontSize = "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)";
|
|
385
399
|
export const amsHeadingLevel1LineHeight = "1.2";
|
|
386
|
-
export const amsHeadingLevel2FontSize = "clamp(1.
|
|
400
|
+
export const amsHeadingLevel2FontSize = "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)";
|
|
387
401
|
export const amsHeadingLevel2LineHeight = "1.25";
|
|
388
|
-
export const amsHeadingLevel3FontSize = "clamp(1.
|
|
402
|
+
export const amsHeadingLevel3FontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
389
403
|
export const amsHeadingLevel3LineHeight = "1.3";
|
|
390
|
-
export const amsHeadingLevel4FontSize = "clamp(1.
|
|
404
|
+
export const amsHeadingLevel4FontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
391
405
|
export const amsHeadingLevel4LineHeight = "1.5";
|
|
392
|
-
export const amsHeadingLevel5FontSize = "clamp(1.125rem, calc(
|
|
406
|
+
export const amsHeadingLevel5FontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
393
407
|
export const amsHeadingLevel5LineHeight = "1.6";
|
|
394
|
-
export const amsHeadingLevel6FontSize = "clamp(0.
|
|
408
|
+
export const amsHeadingLevel6FontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
395
409
|
export const amsHeadingLevel6LineHeight = "1.6";
|
|
410
|
+
export const amsHintColor = "#767676";
|
|
396
411
|
export const amsIconButtonColor = "#004699";
|
|
397
412
|
export const amsIconButtonOutlineOffset = "0.125rem";
|
|
398
413
|
export const amsIconButtonHoverBackgroundColor = "rgba(0, 70, 153, 0.125)";
|
|
399
414
|
export const amsIconButtonHoverColor = "#102E62";
|
|
400
415
|
export const amsIconButtonDisabledColor = "#BEBEBE";
|
|
401
|
-
export const
|
|
402
|
-
export const
|
|
403
|
-
export const
|
|
404
|
-
export const
|
|
405
|
-
export const
|
|
406
|
-
export const
|
|
407
|
-
export const
|
|
408
|
-
export const
|
|
409
|
-
export const
|
|
410
|
-
export const
|
|
411
|
-
export const amsIconSize3FontSize = "clamp(1.
|
|
416
|
+
export const amsIconButtonContrastColorColor = "#000000";
|
|
417
|
+
export const amsIconButtonContrastColorHoverBackgroundColor = "rgba(0, 0, 0, 0.125)";
|
|
418
|
+
export const amsIconButtonContrastColorHoverColor = "#000000";
|
|
419
|
+
export const amsIconButtonContrastColorDisabledColor = "#BEBEBE";
|
|
420
|
+
export const amsIconButtonInverseColorBackgroundColor = "#004699";
|
|
421
|
+
export const amsIconButtonInverseColorColor = "#FFFFFF";
|
|
422
|
+
export const amsIconButtonInverseColorHoverBackgroundColor = "#102E62";
|
|
423
|
+
export const amsIconButtonInverseColorHoverColor = "#FFFFFF";
|
|
424
|
+
export const amsIconButtonInverseColorDisabledColor = "#FFFFFF";
|
|
425
|
+
export const amsIconButtonInverseColorDisabledBackgroundColor = "#BEBEBE";
|
|
426
|
+
export const amsIconSize3FontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
412
427
|
export const amsIconSize3LineHeight = "1.3";
|
|
413
|
-
export const amsIconSize4FontSize = "clamp(1.
|
|
428
|
+
export const amsIconSize4FontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
414
429
|
export const amsIconSize4LineHeight = "1.5";
|
|
415
|
-
export const amsIconSize5FontSize = "clamp(1.125rem, calc(
|
|
430
|
+
export const amsIconSize5FontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
416
431
|
export const amsIconSize5LineHeight = "1.6";
|
|
417
|
-
export const amsIconSize6FontSize = "clamp(0.
|
|
432
|
+
export const amsIconSize6FontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
418
433
|
export const amsIconSize6LineHeight = "1.6";
|
|
434
|
+
export const amsImageSliderGap = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
435
|
+
export const amsImageSliderScrollerGap = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
436
|
+
export const amsImageSliderScrollerOutlineOffset = "0.125rem";
|
|
437
|
+
export const amsImageSliderThumbnailsGap = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
438
|
+
export const amsImageSliderThumbnailsThumbnailBackgroundColor = "transparent";
|
|
439
|
+
export const amsImageSliderThumbnailsThumbnailCursor = "pointer";
|
|
440
|
+
export const amsImageSliderThumbnailsThumbnailOpacity = "40%";
|
|
441
|
+
export const amsImageSliderThumbnailsThumbnailOutlineOffset = "0.125rem";
|
|
442
|
+
export const amsImageSliderThumbnailsThumbnailInViewOpacity = "100%";
|
|
443
|
+
export const amsImageSliderThumbnailsThumbnailHoverOpacity = "100%";
|
|
419
444
|
export const amsLabelColor = "#000000";
|
|
420
445
|
export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
421
|
-
export const amsLabelFontSize = "clamp(1.
|
|
446
|
+
export const amsLabelFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
422
447
|
export const amsLabelFontWeight = 800;
|
|
423
448
|
export const amsLabelLineHeight = "1.5";
|
|
424
|
-
export const amsLinkListGap = "0.
|
|
449
|
+
export const amsLinkListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
425
450
|
export const amsLinkListLinkColor = "#004699";
|
|
426
451
|
export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
427
|
-
export const amsLinkListLinkFontSize = "clamp(1.125rem, calc(
|
|
452
|
+
export const amsLinkListLinkFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
428
453
|
export const amsLinkListLinkFontWeight = 400;
|
|
429
|
-
export const amsLinkListLinkGap = "0.
|
|
454
|
+
export const amsLinkListLinkGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
430
455
|
export const amsLinkListLinkLineHeight = "1.6";
|
|
431
456
|
export const amsLinkListLinkOutlineOffset = "0.125rem";
|
|
432
457
|
export const amsLinkListLinkTextDecorationLine = "none";
|
|
433
458
|
export const amsLinkListLinkTextDecorationThickness = "0.125rem";
|
|
434
459
|
export const amsLinkListLinkTextUnderlineOffset = "0.3333em";
|
|
435
|
-
export const amsLinkListLinkSmallFontSize = "clamp(0.
|
|
460
|
+
export const amsLinkListLinkSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
436
461
|
export const amsLinkListLinkSmallLineHeight = "1.6";
|
|
437
|
-
export const amsLinkListLinkLargeFontSize = "clamp(1.
|
|
462
|
+
export const amsLinkListLinkLargeFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
438
463
|
export const amsLinkListLinkLargeLineHeight = "1.5";
|
|
439
464
|
export const amsLinkListLinkHoverColor = "#102E62";
|
|
440
465
|
export const amsLinkListLinkHoverTextDecorationLine = "underline";
|
|
441
|
-
export const
|
|
442
|
-
export const
|
|
443
|
-
export const
|
|
444
|
-
export const
|
|
466
|
+
export const amsLinkListLinkContrastColorColor = "#000000";
|
|
467
|
+
export const amsLinkListLinkContrastColorHoverColor = "#000000";
|
|
468
|
+
export const amsLinkListLinkInverseColorColor = "#FFFFFF";
|
|
469
|
+
export const amsLinkListLinkInverseColorHoverColor = "#FFFFFF";
|
|
445
470
|
export const amsLinkColor = "#004699";
|
|
446
471
|
export const amsLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
447
472
|
export const amsLinkFontWeight = 400;
|
|
@@ -456,61 +481,64 @@ export const amsLinkInlineLineHeight = "inherit";
|
|
|
456
481
|
export const amsLinkInlineHoverTextDecorationThickness = "0.1875rem";
|
|
457
482
|
export const amsLinkInlineHoverTextUnderlineOffset = "0.2778em";
|
|
458
483
|
export const amsLinkInlineVisitedColor = "#A00078";
|
|
459
|
-
export const amsLinkStandaloneFontSize = "clamp(1.125rem, calc(
|
|
484
|
+
export const amsLinkStandaloneFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
460
485
|
export const amsLinkStandaloneLineHeight = "1.6";
|
|
461
486
|
export const amsLinkStandaloneTextDecorationLine = "underline";
|
|
462
487
|
export const amsLinkStandaloneTextDecorationThickness = "0.125rem";
|
|
463
488
|
export const amsLinkStandaloneTextUnderlineOffset = "0.3333em";
|
|
464
489
|
export const amsLinkStandaloneHoverTextDecorationThickness = "0.1875rem";
|
|
465
490
|
export const amsLinkStandaloneHoverTextUnderlineOffset = "0.2778em";
|
|
466
|
-
export const
|
|
467
|
-
export const
|
|
468
|
-
export const
|
|
469
|
-
export const
|
|
470
|
-
export const
|
|
471
|
-
export const
|
|
491
|
+
export const amsLinkContrastColorColor = "#000000";
|
|
492
|
+
export const amsLinkContrastColorHoverColor = "#000000";
|
|
493
|
+
export const amsLinkContrastColorVisitedColor = "#000000";
|
|
494
|
+
export const amsLinkInverseColorColor = "#FFFFFF";
|
|
495
|
+
export const amsLinkInverseColorHoverColor = "#FFFFFF";
|
|
496
|
+
export const amsLinkInverseColorVisitedColor = "#FFFFFF";
|
|
472
497
|
export const amsLogoBlockSize = "2.5rem";
|
|
473
498
|
export const amsLogoEmblemColor = "#EC0000";
|
|
474
499
|
export const amsLogoTitleColor = "#EC0000";
|
|
475
500
|
export const amsLogoSubsiteColor = "#000000";
|
|
476
|
-
export const amsMarginXs = "clamp(0.25rem, calc(0.
|
|
477
|
-
export const amsMarginSm = "clamp(0.5rem, calc(
|
|
478
|
-
export const amsMarginMd = "clamp(1rem, calc(
|
|
479
|
-
export const amsMarginLg = "clamp(1.5rem, calc(
|
|
480
|
-
export const amsMarginXl = "clamp(2rem, calc(
|
|
501
|
+
export const amsMarginXs = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
502
|
+
export const amsMarginSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
503
|
+
export const amsMarginMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
504
|
+
export const amsMarginLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
505
|
+
export const amsMarginXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
481
506
|
export const amsMarkBackgroundColor = "#FFE600";
|
|
482
|
-
export const amsMegaMenuListCategoryColumnGap = "clamp(1rem, calc(
|
|
507
|
+
export const amsMegaMenuListCategoryColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
|
|
483
508
|
export const amsMegaMenuListCategoryColumnWidth = "20rem";
|
|
484
|
-
export const amsMegaMenuListCategoryPaddingBlockStart = "
|
|
485
|
-
export const amsMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(
|
|
509
|
+
export const amsMegaMenuListCategoryPaddingBlockStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
510
|
+
export const amsMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.row-gap.md`.
|
|
486
511
|
export const amsOrderedListColor = "#000000";
|
|
487
512
|
export const amsOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
488
|
-
export const amsOrderedListFontSize = "clamp(1.125rem, calc(
|
|
513
|
+
export const amsOrderedListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
489
514
|
export const amsOrderedListFontWeight = 400;
|
|
490
|
-
export const amsOrderedListGap = "0.
|
|
515
|
+
export const amsOrderedListGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
491
516
|
export const amsOrderedListInverseColor = "#FFFFFF";
|
|
492
517
|
export const amsOrderedListLineHeight = "1.6";
|
|
493
518
|
export const amsOrderedListListStyleType = "decimal";
|
|
494
|
-
export const amsOrderedListSmallFontSize = "clamp(0.
|
|
519
|
+
export const amsOrderedListSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
495
520
|
export const amsOrderedListSmallLineHeight = "1.6";
|
|
496
521
|
export const amsOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
|
|
497
522
|
export const amsOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
|
|
523
|
+
export const amsOrderedListOrderedListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
498
524
|
export const amsOrderedListOrderedListListStyleType = "lower-alpha";
|
|
525
|
+
export const amsOrderedListOrderedListPaddingBlockEnd = "0";
|
|
526
|
+
export const amsOrderedListOrderedListPaddingBlockStart = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
499
527
|
export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
500
528
|
export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
501
529
|
export const amsPageHeadingColor = "#000000";
|
|
502
530
|
export const amsPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
503
|
-
export const amsPageHeadingFontSize = "clamp(2.
|
|
531
|
+
export const amsPageHeadingFontSize = "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
504
532
|
export const amsPageHeadingFontWeight = 800;
|
|
505
533
|
export const amsPageHeadingInverseColor = "#FFFFFF";
|
|
506
|
-
export const amsPageHeadingLineHeight = "clamp(2.
|
|
507
|
-
export const amsPageMenuColumnGap = "clamp(1rem, calc(
|
|
508
|
-
export const amsPageMenuRowGap = "clamp(0.25rem, calc(0.
|
|
534
|
+
export const amsPageHeadingLineHeight = "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
535
|
+
export const amsPageMenuColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
536
|
+
export const amsPageMenuRowGap = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
509
537
|
export const amsPageMenuItemColor = "#004699";
|
|
510
538
|
export const amsPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
511
|
-
export const amsPageMenuItemFontSize = "clamp(0.
|
|
539
|
+
export const amsPageMenuItemFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
512
540
|
export const amsPageMenuItemFontWeight = 400;
|
|
513
|
-
export const amsPageMenuItemGap = "0.
|
|
541
|
+
export const amsPageMenuItemGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
514
542
|
export const amsPageMenuItemLineHeight = "1.6";
|
|
515
543
|
export const amsPageMenuItemOutlineOffset = "0.125rem";
|
|
516
544
|
export const amsPageMenuItemTextDecorationLine = "none";
|
|
@@ -520,11 +548,12 @@ export const amsPageMenuItemHoverColor = "#102E62";
|
|
|
520
548
|
export const amsPageMenuItemHoverTextDecorationLine = "underline";
|
|
521
549
|
export const amsPaginationColor = "#004699";
|
|
522
550
|
export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
523
|
-
export const amsPaginationFontSize = "clamp(1.125rem, calc(
|
|
551
|
+
export const amsPaginationFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
524
552
|
export const amsPaginationFontWeight = 400;
|
|
525
553
|
export const amsPaginationLineHeight = "1.6";
|
|
554
|
+
export const amsPaginationButtonGap = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
526
555
|
export const amsPaginationButtonOutlineOffset = "0.125rem";
|
|
527
|
-
export const amsPaginationButtonPaddingInline = ".75rem";
|
|
556
|
+
export const amsPaginationButtonPaddingInline = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
528
557
|
export const amsPaginationButtonTextDecorationLine = "none";
|
|
529
558
|
export const amsPaginationButtonTextDecorationThickness = "0.125rem";
|
|
530
559
|
export const amsPaginationButtonTextUnderlineOffset = "0.3333em";
|
|
@@ -533,80 +562,104 @@ export const amsPaginationButtonHoverColor = "#102E62";
|
|
|
533
562
|
export const amsPaginationButtonHoverTextDecorationLine = "underline";
|
|
534
563
|
export const amsParagraphColor = "#000000";
|
|
535
564
|
export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
536
|
-
export const amsParagraphFontSize = "clamp(1.125rem, calc(
|
|
565
|
+
export const amsParagraphFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
537
566
|
export const amsParagraphFontWeight = 400;
|
|
538
567
|
export const amsParagraphLineHeight = "1.6";
|
|
539
568
|
export const amsParagraphInverseColor = "#FFFFFF";
|
|
540
|
-
export const amsParagraphSmallFontSize = "clamp(0.
|
|
569
|
+
export const amsParagraphSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
541
570
|
export const amsParagraphSmallLineHeight = "1.6";
|
|
542
|
-
export const amsParagraphLargeFontSize = "clamp(1.
|
|
571
|
+
export const amsParagraphLargeFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
543
572
|
export const amsParagraphLargeLineHeight = "1.5";
|
|
573
|
+
export const amsPasswordInputBackgroundColor = "#FFFFFF";
|
|
574
|
+
export const amsPasswordInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
575
|
+
export const amsPasswordInputColor = "#000000";
|
|
576
|
+
export const amsPasswordInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
577
|
+
export const amsPasswordInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
578
|
+
export const amsPasswordInputFontWeight = 400;
|
|
579
|
+
export const amsPasswordInputLineHeight = "1.6";
|
|
580
|
+
export const amsPasswordInputOutlineOffset = "0.125rem";
|
|
581
|
+
export const amsPasswordInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
582
|
+
export const amsPasswordInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
583
|
+
export const amsPasswordInputDisabledBackgroundColor = "#FFFFFF";
|
|
584
|
+
export const amsPasswordInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
585
|
+
export const amsPasswordInputDisabledColor = "#BEBEBE";
|
|
586
|
+
export const amsPasswordInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
587
|
+
export const amsPasswordInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
588
|
+
export const amsPasswordInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
589
|
+
export const amsPasswordInputPlaceholderColor = "#767676";
|
|
544
590
|
export const amsRadioColor = "#000000";
|
|
545
591
|
export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
546
|
-
export const amsRadioFontSize = "clamp(1.125rem, calc(
|
|
592
|
+
export const amsRadioFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
547
593
|
export const amsRadioFontWeight = 400;
|
|
594
|
+
export const amsRadioGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
548
595
|
export const amsRadioLineHeight = "1.6";
|
|
549
596
|
export const amsRadioOutlineOffset = "0.125rem";
|
|
550
|
-
export const
|
|
551
|
-
export const
|
|
552
|
-
export const
|
|
553
|
-
export const
|
|
554
|
-
export const
|
|
555
|
-
export const
|
|
556
|
-
export const
|
|
557
|
-
export const
|
|
558
|
-
export const
|
|
559
|
-
export const
|
|
560
|
-
export const
|
|
561
|
-
export const
|
|
562
|
-
export const
|
|
597
|
+
export const amsRadioTextDecorationThickness = "0.125rem";
|
|
598
|
+
export const amsRadioTextUnderlineOffset = "0.3333em";
|
|
599
|
+
export const amsRadioCheckedIndicatorFill = "#004699";
|
|
600
|
+
export const amsRadioCheckedIndicatorDisabledFill = "#767676";
|
|
601
|
+
export const amsRadioCheckedIndicatorDisabledInvalidFill = "#767676";
|
|
602
|
+
export const amsRadioCheckedIndicatorDisabledInvalidHoverFill = "#767676";
|
|
603
|
+
export const amsRadioCheckedIndicatorHoverFill = "#102E62";
|
|
604
|
+
export const amsRadioCheckedIndicatorInvalidFill = "#EC0000";
|
|
605
|
+
export const amsRadioCheckedIndicatorInvalidHoverFill = "#EC0000";
|
|
606
|
+
export const amsRadioCircleStroke = "#004699";
|
|
607
|
+
export const amsRadioCircleDisabledStroke = "#767676";
|
|
608
|
+
export const amsRadioCircleDisabledInvalidStroke = "#767676";
|
|
609
|
+
export const amsRadioCircleDisabledInvalidHoverStroke = "#767676";
|
|
610
|
+
export const amsRadioCircleHoverStroke = "#102E62";
|
|
611
|
+
export const amsRadioCircleInvalidStroke = "#EC0000";
|
|
612
|
+
export const amsRadioCircleInvalidHoverStroke = "#EC0000";
|
|
563
613
|
export const amsRadioDisabledColor = "#767676";
|
|
564
614
|
export const amsRadioHoverColor = "#102E62";
|
|
565
|
-
export const
|
|
566
|
-
export const
|
|
567
|
-
export const
|
|
568
|
-
export const
|
|
569
|
-
export const
|
|
570
|
-
export const
|
|
615
|
+
export const amsRadioHoverTextDecorationLine = "underline";
|
|
616
|
+
export const amsRadioIconContainerBlockSize = "calc(clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem) * 1.6)";
|
|
617
|
+
export const amsRadioIconContainerInlineSize = "1.5rem";
|
|
618
|
+
export const amsRowGapNo = "0";
|
|
619
|
+
export const amsRowGapXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
620
|
+
export const amsRowGapSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
621
|
+
export const amsRowGapMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
622
|
+
export const amsRowGapLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
623
|
+
export const amsRowGapXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
571
624
|
export const amsScreenBackgroundColor = "#FFFFFF";
|
|
572
625
|
export const amsScreenWideMaxInlineSize = "100rem";
|
|
573
626
|
export const amsScreenXWideMaxInlineSize = "132rem";
|
|
574
627
|
export const amsSearchFieldButtonBackgroundColor = "#004699";
|
|
575
628
|
export const amsSearchFieldButtonColor = "#FFFFFF";
|
|
576
629
|
export const amsSearchFieldButtonOutlineOffset = "0.125rem";
|
|
577
|
-
export const amsSearchFieldButtonPaddingBlock = ".
|
|
578
|
-
export const amsSearchFieldButtonPaddingInline = ".
|
|
630
|
+
export const amsSearchFieldButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
631
|
+
export const amsSearchFieldButtonPaddingInline = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
579
632
|
export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
|
|
580
633
|
export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
|
|
581
634
|
export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
582
635
|
export const amsSearchFieldInputColor = "#000000";
|
|
583
636
|
export const amsSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
584
|
-
export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(
|
|
637
|
+
export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
585
638
|
export const amsSearchFieldInputFontWeight = 400;
|
|
586
639
|
export const amsSearchFieldInputLineHeight = "1.6";
|
|
587
640
|
export const amsSearchFieldInputOutlineOffset = "0.125rem";
|
|
588
|
-
export const amsSearchFieldInputPaddingBlock = ".
|
|
589
|
-
export const amsSearchFieldInputPaddingInline = "
|
|
641
|
+
export const amsSearchFieldInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
642
|
+
export const amsSearchFieldInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
590
643
|
export const amsSearchFieldInputCancelButtonBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")";
|
|
591
|
-
export const amsSearchFieldInputCancelButtonBlockSize = "clamp(1.125rem, calc(
|
|
644
|
+
export const amsSearchFieldInputCancelButtonBlockSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
592
645
|
export const amsSearchFieldInputCancelButtonColor = "#004699";
|
|
593
|
-
export const amsSearchFieldInputCancelButtonInlineSize = "clamp(1.125rem, calc(
|
|
646
|
+
export const amsSearchFieldInputCancelButtonInlineSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
594
647
|
export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
595
648
|
export const amsSearchFieldInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
596
649
|
export const amsSearchFieldInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
597
650
|
export const amsSearchFieldInputPlaceholderColor = "#767676";
|
|
598
651
|
export const amsSelectBackgroundColor = "#FFFFFF";
|
|
599
652
|
export const amsSelectBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")";
|
|
600
|
-
export const amsSelectBackgroundPosition = "right
|
|
653
|
+
export const amsSelectBackgroundPosition = "right clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) center";
|
|
601
654
|
export const amsSelectBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
602
655
|
export const amsSelectColor = "#000000";
|
|
603
656
|
export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
604
|
-
export const amsSelectFontSize = "clamp(1.125rem, calc(
|
|
657
|
+
export const amsSelectFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
605
658
|
export const amsSelectFontWeight = 400;
|
|
606
659
|
export const amsSelectLineHeight = "1.6";
|
|
607
660
|
export const amsSelectOutlineOffset = "0.125rem";
|
|
608
|
-
export const amsSelectPaddingBlock = ".
|
|
609
|
-
export const amsSelectPaddingInline = "
|
|
661
|
+
export const amsSelectPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
662
|
+
export const amsSelectPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) calc(2 * clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) + 1em)";
|
|
610
663
|
export const amsSelectDisabledBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")";
|
|
611
664
|
export const amsSelectDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
612
665
|
export const amsSelectDisabledColor = "#BEBEBE";
|
|
@@ -617,12 +670,12 @@ export const amsSelectOptionDisabledColor = "#BEBEBE";
|
|
|
617
670
|
export const amsSkipLinkBackgroundColor = "#004699";
|
|
618
671
|
export const amsSkipLinkColor = "#FFFFFF";
|
|
619
672
|
export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
620
|
-
export const amsSkipLinkFontSize = "clamp(0.
|
|
673
|
+
export const amsSkipLinkFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
621
674
|
export const amsSkipLinkFontWeight = 400;
|
|
622
675
|
export const amsSkipLinkLineHeight = "1.6";
|
|
623
676
|
export const amsSkipLinkOutlineOffset = "0.125rem";
|
|
624
|
-
export const amsSkipLinkPaddingBlock = ".
|
|
625
|
-
export const amsSkipLinkPaddingInline = "
|
|
677
|
+
export const amsSkipLinkPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
678
|
+
export const amsSkipLinkPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
626
679
|
export const amsSkipLinkHoverBackgroundColor = "#102E62";
|
|
627
680
|
export const amsSpotlightBlueBackgroundColor = "#009DE6";
|
|
628
681
|
export const amsSpotlightDarkBlueBackgroundColor = "#004699";
|
|
@@ -644,9 +697,9 @@ export const amsSwitchThumbHoverColor = "#102E62";
|
|
|
644
697
|
export const amsSwitchCheckedBackgroundColor = "#004699";
|
|
645
698
|
export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
|
|
646
699
|
export const amsTableOfContentsFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
647
|
-
export const amsTableOfContentsFontSize = "clamp(1.125rem, calc(
|
|
700
|
+
export const amsTableOfContentsFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
648
701
|
export const amsTableOfContentsFontWeight = 400;
|
|
649
|
-
export const amsTableOfContentsGap = "
|
|
702
|
+
export const amsTableOfContentsGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
650
703
|
export const amsTableOfContentsLineHeight = "1.6";
|
|
651
704
|
export const amsTableOfContentsLinkColor = "#004699";
|
|
652
705
|
export const amsTableOfContentsLinkOutlineOffset = "0.125rem";
|
|
@@ -655,33 +708,34 @@ export const amsTableOfContentsLinkTextDecorationThickness = "0.125rem";
|
|
|
655
708
|
export const amsTableOfContentsLinkTextUnderlineOffset = "0.3333em";
|
|
656
709
|
export const amsTableOfContentsLinkHoverColor = "#102E62";
|
|
657
710
|
export const amsTableOfContentsLinkHoverTextDecorationLine = "underline";
|
|
658
|
-
export const amsTableOfContentsListGap = "
|
|
659
|
-
export const amsTableOfContentsListListPaddingBlockStart = "
|
|
660
|
-
export const amsTableOfContentsListListPaddingInlineStart = "1.
|
|
711
|
+
export const amsTableOfContentsListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
712
|
+
export const amsTableOfContentsListListPaddingBlockStart = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
713
|
+
export const amsTableOfContentsListListPaddingInlineStart = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
661
714
|
export const amsTableOfContentsHeadingFontWeight = 800;
|
|
662
|
-
export const amsTableOfContentsHeadingFontSize = "clamp(1.
|
|
715
|
+
export const amsTableOfContentsHeadingFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
663
716
|
export const amsTableOfContentsHeadingLineHeight = "1.5";
|
|
664
717
|
export const amsTableColor = "#000000";
|
|
665
718
|
export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
666
|
-
export const amsTableFontSize = "clamp(1.125rem, calc(
|
|
719
|
+
export const amsTableFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
667
720
|
export const amsTableFontWeight = 400;
|
|
668
721
|
export const amsTableLineHeight = "1.6";
|
|
669
722
|
export const amsTableCaptionFontWeight = 800;
|
|
670
723
|
export const amsTableCellBorderBlockEnd = "0.0625rem solid #E8E8E8";
|
|
671
|
-
export const amsTableCellPaddingBlock = "
|
|
672
|
-
export const amsTableCellPaddingInline = "
|
|
724
|
+
export const amsTableCellPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
725
|
+
export const amsTableCellPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
673
726
|
export const amsTableHeaderCellFontWeight = 800;
|
|
727
|
+
export const amsTabsGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
674
728
|
export const amsTabsListBackgroundColor = "#FFFFFF";
|
|
675
729
|
export const amsTabsListBorderBlockEnd = "0.125rem solid #004699";
|
|
676
730
|
export const amsTabsButtonColor = "#004699";
|
|
677
731
|
export const amsTabsButtonCursor = "pointer";
|
|
678
732
|
export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
679
|
-
export const amsTabsButtonFontSize = "clamp(1.125rem, calc(
|
|
733
|
+
export const amsTabsButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
680
734
|
export const amsTabsButtonFontWeight = 400;
|
|
681
735
|
export const amsTabsButtonLineHeight = "1.6";
|
|
682
736
|
export const amsTabsButtonOutlineOffset = "-0.25rem";
|
|
683
|
-
export const amsTabsButtonPaddingBlock = ".
|
|
684
|
-
export const amsTabsButtonPaddingInline = "
|
|
737
|
+
export const amsTabsButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
738
|
+
export const amsTabsButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
685
739
|
export const amsTabsButtonHoverColor = "#102E62";
|
|
686
740
|
export const amsTabsButtonHoverBoxShadow = "inset 0 -0.125rem 0 0 #102E62";
|
|
687
741
|
export const amsTabsButtonSelectedBackgroundColor = "#004699";
|
|
@@ -692,13 +746,13 @@ export const amsTextAreaBackgroundColor = "#FFFFFF";
|
|
|
692
746
|
export const amsTextAreaBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
693
747
|
export const amsTextAreaColor = "#000000";
|
|
694
748
|
export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
695
|
-
export const amsTextAreaFontSize = "clamp(1.125rem, calc(
|
|
749
|
+
export const amsTextAreaFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
696
750
|
export const amsTextAreaFontWeight = 400;
|
|
697
751
|
export const amsTextAreaLineHeight = "1.6";
|
|
698
|
-
export const amsTextAreaMinBlockSize = "calc(1.6 * 1em + 2 * 0.
|
|
752
|
+
export const amsTextAreaMinBlockSize = "calc(1.6 * 1em + 2 * clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem))";
|
|
699
753
|
export const amsTextAreaOutlineOffset = "0.125rem";
|
|
700
|
-
export const amsTextAreaPaddingBlock = "0.
|
|
701
|
-
export const amsTextAreaPaddingInline = "
|
|
754
|
+
export const amsTextAreaPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
755
|
+
export const amsTextAreaPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
702
756
|
export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
|
|
703
757
|
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
704
758
|
export const amsTextAreaDisabledColor = "#BEBEBE";
|
|
@@ -711,12 +765,12 @@ export const amsTextInputBackgroundColor = "#FFFFFF";
|
|
|
711
765
|
export const amsTextInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
712
766
|
export const amsTextInputColor = "#000000";
|
|
713
767
|
export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
714
|
-
export const amsTextInputFontSize = "clamp(1.125rem, calc(
|
|
768
|
+
export const amsTextInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
715
769
|
export const amsTextInputFontWeight = 400;
|
|
716
770
|
export const amsTextInputLineHeight = "1.6";
|
|
717
771
|
export const amsTextInputOutlineOffset = "0.125rem";
|
|
718
|
-
export const amsTextInputPaddingBlock = ".
|
|
719
|
-
export const amsTextInputPaddingInline = "
|
|
772
|
+
export const amsTextInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
773
|
+
export const amsTextInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
720
774
|
export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
|
|
721
775
|
export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
722
776
|
export const amsTextInputDisabledColor = "#BEBEBE";
|
|
@@ -728,12 +782,12 @@ export const amsTimeInputBackgroundColor = "#FFFFFF";
|
|
|
728
782
|
export const amsTimeInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
729
783
|
export const amsTimeInputColor = "#000000";
|
|
730
784
|
export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
731
|
-
export const amsTimeInputFontSize = "clamp(1.125rem, calc(
|
|
785
|
+
export const amsTimeInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
732
786
|
export const amsTimeInputFontWeight = 400;
|
|
733
787
|
export const amsTimeInputLineHeight = "1.6";
|
|
734
788
|
export const amsTimeInputOutlineOffset = "0.125rem";
|
|
735
|
-
export const amsTimeInputPaddingBlock = ".
|
|
736
|
-
export const amsTimeInputPaddingInline = "
|
|
789
|
+
export const amsTimeInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
790
|
+
export const amsTimeInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
737
791
|
export const amsTimeInputCalenderPickerIndicatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")";
|
|
738
792
|
export const amsTimeInputDisabledBackgroundColor = "#FFFFFF";
|
|
739
793
|
export const amsTimeInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
@@ -743,14 +797,15 @@ export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
|
743
797
|
export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")";
|
|
744
798
|
export const amsTimeInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
745
799
|
export const amsTimeInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
800
|
+
export const amsTopTaskLinkGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
746
801
|
export const amsTopTaskLinkDescriptionColor = "#000000";
|
|
747
802
|
export const amsTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
748
|
-
export const amsTopTaskLinkDescriptionFontSize = "clamp(0.
|
|
803
|
+
export const amsTopTaskLinkDescriptionFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
749
804
|
export const amsTopTaskLinkDescriptionFontWeight = 400;
|
|
750
805
|
export const amsTopTaskLinkDescriptionLineHeight = "1.6";
|
|
751
806
|
export const amsTopTaskLinkLabelColor = "#004699";
|
|
752
807
|
export const amsTopTaskLinkLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
753
|
-
export const amsTopTaskLinkLabelFontSize = "clamp(1.
|
|
808
|
+
export const amsTopTaskLinkLabelFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
754
809
|
export const amsTopTaskLinkLabelFontWeight = 800;
|
|
755
810
|
export const amsTopTaskLinkLabelLineHeight = "1.5";
|
|
756
811
|
export const amsTopTaskLinkLabelTextDecorationLine = "none";
|
|
@@ -761,16 +816,19 @@ export const amsTopTaskLinkLabelHoverTextDecorationLine = "underline";
|
|
|
761
816
|
export const amsTopTaskLinkOutlineOffset = "0.125rem";
|
|
762
817
|
export const amsUnorderedListColor = "#000000";
|
|
763
818
|
export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
764
|
-
export const amsUnorderedListFontSize = "clamp(1.125rem, calc(
|
|
819
|
+
export const amsUnorderedListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
765
820
|
export const amsUnorderedListFontWeight = 400;
|
|
766
|
-
export const amsUnorderedListGap = "0.
|
|
821
|
+
export const amsUnorderedListGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
767
822
|
export const amsUnorderedListInverseColor = "#FFFFFF";
|
|
768
823
|
export const amsUnorderedListLineHeight = "1.6";
|
|
769
824
|
export const amsUnorderedListListStyleType = "'\\2022'";
|
|
770
825
|
export const amsUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
|
|
771
826
|
export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
|
|
827
|
+
export const amsUnorderedListUnorderedListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
772
828
|
export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
|
|
829
|
+
export const amsUnorderedListUnorderedListPaddingBlockEnd = "0";
|
|
830
|
+
export const amsUnorderedListUnorderedListPaddingBlockStart = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
773
831
|
export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
774
832
|
export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
775
|
-
export const amsUnorderedListSmallFontSize = "clamp(0.
|
|
833
|
+
export const amsUnorderedListSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
776
834
|
export const amsUnorderedListSmallLineHeight = "1.6";
|