@amsterdam/design-system-tokens 0.12.0 → 0.14.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 +34 -0
- package/README.md +14 -8
- package/build.js +6 -0
- package/dist/compact.d.ts +38 -38
- package/dist/compact.mjs +20 -10
- package/dist/index.css +95 -63
- package/dist/index.d.ts +1510 -1442
- package/dist/index.json +146 -78
- package/dist/index.mjs +486 -246
- package/dist/index.scss +95 -63
- package/dist/index.theme.css +95 -63
- package/package.json +2 -2
- package/src/brand/ams/{proportion.tokens.json → aspect-ratio.tokens.json} +1 -1
- package/src/components/ams/alert.tokens.json +2 -7
- package/src/components/ams/avatar.tokens.json +1 -1
- package/src/components/ams/button.tokens.json +5 -5
- package/src/components/ams/date-input.tokens.json +2 -2
- package/src/components/ams/description-list.tokens.json +1 -1
- package/src/components/ams/error-message.tokens.json +1 -0
- package/src/components/ams/figure.tokens.json +15 -0
- package/src/components/ams/file-input.tokens.json +3 -3
- package/src/components/ams/file-list.tokens.json +21 -0
- package/src/components/ams/footer.tokens.json +9 -0
- package/src/components/ams/header.tokens.json +46 -4
- package/src/components/ams/icon-button.tokens.json +3 -3
- package/src/components/ams/icon.tokens.json +3 -0
- package/src/components/ams/image.tokens.json +7 -0
- package/src/components/ams/logo.tokens.json +7 -3
- package/src/components/ams/password-input.tokens.json +2 -2
- package/src/components/ams/radio.tokens.json +13 -0
- package/src/components/ams/search-field.tokens.json +0 -10
- package/src/components/ams/select.tokens.json +3 -3
- package/src/components/ams/spotlight.tokens.json +1 -6
- package/src/components/ams/switch.tokens.json +1 -1
- package/src/components/ams/table.tokens.json +4 -1
- package/src/components/ams/tabs.tokens.json +9 -6
- 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/aspect-ratio.tokens.json +0 -12
package/dist/index.mjs
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
export const amsAspectRatioXTall = "9 / 16";
|
|
6
|
+
export const amsAspectRatioTall = "3 / 4";
|
|
7
|
+
export const amsAspectRatioSquare = "1 / 1";
|
|
8
|
+
export const amsAspectRatioWide = "4 / 3";
|
|
9
|
+
export const amsAspectRatioXWide = "16 / 9";
|
|
10
|
+
export const amsAspectRatio2xWide = "16 / 5";
|
|
5
11
|
export const amsBorderWidthSm = "0.0625rem";
|
|
6
12
|
export const amsBorderWidthMd = "0.125rem";
|
|
7
13
|
export const amsBorderWidthLg = "0.1875rem";
|
|
@@ -21,38 +27,42 @@ export const amsColorMagenta = "#E50082";
|
|
|
21
27
|
export const amsColorNeutralGrey1 = "#E8E8E8";
|
|
22
28
|
export const amsColorNeutralGrey2 = "#BEBEBE";
|
|
23
29
|
export const amsColorNeutralGrey3 = "#767676";
|
|
24
|
-
export const amsProportionXTall = "9 / 16";
|
|
25
|
-
export const amsProportionTall = "3 / 4";
|
|
26
|
-
export const amsProportionSquare = "1 / 1";
|
|
27
|
-
export const amsProportionWide = "4 / 3";
|
|
28
|
-
export const amsProportionXWide = "16 / 9";
|
|
29
|
-
export const amsProportion2xWide = "16 / 5";
|
|
30
30
|
export const amsSpaceXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
31
31
|
export const amsSpaceSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
32
32
|
export const amsSpaceMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
33
33
|
export const amsSpaceLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
34
34
|
export const amsSpaceXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
35
|
-
export const amsSpaceGridXs =
|
|
36
|
-
|
|
35
|
+
export const amsSpaceGridXs =
|
|
36
|
+
"clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
37
|
+
export const amsSpaceGridSm =
|
|
38
|
+
"clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
37
39
|
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 =
|
|
40
|
+
export const amsSpaceGridLg =
|
|
41
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
39
42
|
export const amsSpaceGridXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
40
43
|
export const amsTextFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
41
44
|
export const amsTextFontWeightNormal = 400;
|
|
42
45
|
export const amsTextFontWeightBold = 800;
|
|
43
|
-
export const amsTextLevel0FontSize =
|
|
46
|
+
export const amsTextLevel0FontSize =
|
|
47
|
+
"clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
44
48
|
export const amsTextLevel0LineHeight = "1.15";
|
|
45
|
-
export const amsTextLevel1FontSize =
|
|
49
|
+
export const amsTextLevel1FontSize =
|
|
50
|
+
"clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)";
|
|
46
51
|
export const amsTextLevel1LineHeight = "1.2";
|
|
47
|
-
export const amsTextLevel2FontSize =
|
|
52
|
+
export const amsTextLevel2FontSize =
|
|
53
|
+
"clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)";
|
|
48
54
|
export const amsTextLevel2LineHeight = "1.25";
|
|
49
|
-
export const amsTextLevel3FontSize =
|
|
55
|
+
export const amsTextLevel3FontSize =
|
|
56
|
+
"clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
50
57
|
export const amsTextLevel3LineHeight = "1.3";
|
|
51
|
-
export const amsTextLevel4FontSize =
|
|
58
|
+
export const amsTextLevel4FontSize =
|
|
59
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
52
60
|
export const amsTextLevel4LineHeight = "1.5";
|
|
53
|
-
export const amsTextLevel5FontSize =
|
|
61
|
+
export const amsTextLevel5FontSize =
|
|
62
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
54
63
|
export const amsTextLevel5LineHeight = "1.6";
|
|
55
|
-
export const amsTextLevel6FontSize =
|
|
64
|
+
export const amsTextLevel6FontSize =
|
|
65
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
56
66
|
export const amsTextLevel6LineHeight = "1.6";
|
|
57
67
|
export const amsActionActivateCursor = "pointer";
|
|
58
68
|
export const amsActionBusyCursor = "wait";
|
|
@@ -81,43 +91,47 @@ export const amsLinkAppearanceInverseHoverColor = "#FFFFFF";
|
|
|
81
91
|
export const amsLinkAppearanceInverseVisitedColor = "#FFFFFF";
|
|
82
92
|
export const amsAccordionGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
83
93
|
export const amsAccordionButtonColor = "#004699";
|
|
84
|
-
export const amsAccordionButtonFontFamily =
|
|
85
|
-
|
|
94
|
+
export const amsAccordionButtonFontFamily =
|
|
95
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
96
|
+
export const amsAccordionButtonFontSize =
|
|
97
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
86
98
|
export const amsAccordionButtonFontWeight = 800;
|
|
87
|
-
export const amsAccordionButtonGap =
|
|
99
|
+
export const amsAccordionButtonGap =
|
|
100
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
88
101
|
export const amsAccordionButtonLineHeight = "1.6";
|
|
89
|
-
export const amsAccordionButtonPaddingBlock =
|
|
102
|
+
export const amsAccordionButtonPaddingBlock =
|
|
103
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
90
104
|
export const amsAccordionButtonPaddingInline = "0";
|
|
91
105
|
export const amsAccordionButtonFocusOutlineOffset = "0.125rem";
|
|
92
106
|
export const amsAccordionButtonHoverColor = "#102E62";
|
|
93
107
|
export const amsAccordionPanelPaddingBlock = "0";
|
|
94
108
|
export const amsAccordionPanelPaddingInline = "0";
|
|
95
|
-
export const amsActionGroupGap =
|
|
109
|
+
export const amsActionGroupGap =
|
|
110
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
111
|
+
export const amsAlertBackgroundColor = "#FFFFFF";
|
|
96
112
|
export const amsAlertBorderWidth = "0.25rem";
|
|
97
113
|
export const amsAlertBorderStyle = "solid";
|
|
98
114
|
export const amsAlertGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
99
|
-
export const amsAlertPaddingBlock =
|
|
100
|
-
|
|
115
|
+
export const amsAlertPaddingBlock =
|
|
116
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
117
|
+
export const amsAlertPaddingInline =
|
|
118
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
101
119
|
export const amsAlertErrorBorderColor = "#EC0000";
|
|
102
|
-
export const amsAlertInfoBorderColor = "#
|
|
120
|
+
export const amsAlertInfoBorderColor = "#009DE6";
|
|
103
121
|
export const amsAlertSuccessBorderColor = "#00A03C";
|
|
104
122
|
export const amsAlertWarningBorderColor = "#FF9100";
|
|
105
|
-
export const
|
|
106
|
-
|
|
107
|
-
export const amsAlertContentGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
108
|
-
export const amsAspectRatioXTall = "9 / 16";
|
|
109
|
-
export const amsAspectRatioTall = "3 / 4";
|
|
110
|
-
export const amsAspectRatioSquare = "1 / 1";
|
|
111
|
-
export const amsAspectRatioWide = "4 / 3";
|
|
112
|
-
export const amsAspectRatioXWide = "16 / 9";
|
|
113
|
-
export const amsAspectRatio2xWide = "16 / 5";
|
|
123
|
+
export const amsAlertContentGap =
|
|
124
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
114
125
|
export const amsAvatarAspectRatio = "1 / 1";
|
|
115
126
|
export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
116
|
-
export const amsAvatarFontSize =
|
|
127
|
+
export const amsAvatarFontSize =
|
|
128
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
117
129
|
export const amsAvatarFontWeight = 400;
|
|
118
130
|
export const amsAvatarLineHeight = "1.6";
|
|
119
|
-
export const amsAvatarPaddingBlock =
|
|
120
|
-
|
|
131
|
+
export const amsAvatarPaddingBlock =
|
|
132
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
133
|
+
export const amsAvatarPaddingInline =
|
|
134
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
121
135
|
export const amsAvatarBlackBackgroundColor = "#000000";
|
|
122
136
|
export const amsAvatarBlackColor = "#FFFFFF";
|
|
123
137
|
export const amsAvatarBlueBackgroundColor = "#004699";
|
|
@@ -148,10 +162,12 @@ export const amsAvatarWhiteColor = "#000000";
|
|
|
148
162
|
export const amsAvatarYellowBackgroundColor = "#FFE600";
|
|
149
163
|
export const amsAvatarYellowColor = "#000000";
|
|
150
164
|
export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
151
|
-
export const amsBadgeFontSize =
|
|
165
|
+
export const amsBadgeFontSize =
|
|
166
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
152
167
|
export const amsBadgeFontWeight = 800;
|
|
153
168
|
export const amsBadgeLineHeight = "1.6";
|
|
154
|
-
export const amsBadgePaddingInline =
|
|
169
|
+
export const amsBadgePaddingInline =
|
|
170
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
155
171
|
export const amsBadgeBlackBackgroundColor = "#000000";
|
|
156
172
|
export const amsBadgeBlackColor = "#FFFFFF";
|
|
157
173
|
export const amsBadgeBlueBackgroundColor = "#004699";
|
|
@@ -182,18 +198,22 @@ export const amsBadgeYellowBackgroundColor = "#FFE600";
|
|
|
182
198
|
export const amsBadgeYellowColor = "#000000";
|
|
183
199
|
export const amsBlockquoteColor = "#000000";
|
|
184
200
|
export const amsBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
185
|
-
export const amsBlockquoteFontSize =
|
|
201
|
+
export const amsBlockquoteFontSize =
|
|
202
|
+
"clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
186
203
|
export const amsBlockquoteFontWeight = 800;
|
|
187
204
|
export const amsBlockquoteLineHeight = "1.3";
|
|
188
205
|
export const amsBlockquoteInverseColor = "#FFFFFF";
|
|
189
206
|
export const amsBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
190
|
-
export const amsBreadcrumbFontSize =
|
|
207
|
+
export const amsBreadcrumbFontSize =
|
|
208
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
191
209
|
export const amsBreadcrumbFontWeight = 400;
|
|
192
210
|
export const amsBreadcrumbLineHeight = "1.6";
|
|
193
|
-
export const amsBreadcrumbSeparatorBackgroundImage =
|
|
211
|
+
export const amsBreadcrumbSeparatorBackgroundImage =
|
|
212
|
+
"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
213
|
export const amsBreadcrumbSeparatorBlockSize = "1ex";
|
|
195
214
|
export const amsBreadcrumbSeparatorInlineSize = "1ex";
|
|
196
|
-
export const amsBreadcrumbSeparatorMarginInline =
|
|
215
|
+
export const amsBreadcrumbSeparatorMarginInline =
|
|
216
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
197
217
|
export const amsBreadcrumbLinkColor = "#004699";
|
|
198
218
|
export const amsBreadcrumbLinkOutlineOffset = "0.125rem";
|
|
199
219
|
export const amsBreadcrumbLinkTextDecorationLine = "none";
|
|
@@ -201,24 +221,30 @@ export const amsBreadcrumbLinkTextDecorationThickness = "0.125rem";
|
|
|
201
221
|
export const amsBreadcrumbLinkTextUnderlineOffset = "0.3333em";
|
|
202
222
|
export const amsBreadcrumbLinkHoverColor = "#102E62";
|
|
203
223
|
export const amsBreadcrumbLinkHoverTextDecorationLine = "underline";
|
|
204
|
-
export const amsBreakoutRowGapSm =
|
|
205
|
-
|
|
206
|
-
export const
|
|
224
|
+
export const amsBreakoutRowGapSm =
|
|
225
|
+
"clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
226
|
+
export const amsBreakoutRowGapMd =
|
|
227
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
228
|
+
export const amsBreakoutRowGapLg =
|
|
229
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
207
230
|
export const amsButtonCursor = "pointer";
|
|
208
231
|
export const amsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
209
|
-
export const amsButtonFontSize =
|
|
232
|
+
export const amsButtonFontSize =
|
|
233
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
210
234
|
export const amsButtonLineHeight = "1.6";
|
|
211
235
|
export const amsButtonGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
212
236
|
export const amsButtonOutlineOffset = "0.125rem";
|
|
213
|
-
export const amsButtonPaddingBlock =
|
|
214
|
-
|
|
237
|
+
export const amsButtonPaddingBlock =
|
|
238
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
239
|
+
export const amsButtonPaddingInline =
|
|
240
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
215
241
|
export const amsButtonDisabledCursor = "not-allowed";
|
|
216
242
|
export const amsButtonForcedColorModeBorder = "0.125rem solid";
|
|
217
243
|
export const amsButtonPrimaryBackgroundColor = "#004699";
|
|
218
244
|
export const amsButtonPrimaryBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
219
245
|
export const amsButtonPrimaryColor = "#FFFFFF";
|
|
220
|
-
export const amsButtonPrimaryDisabledBackgroundColor = "#
|
|
221
|
-
export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0 0.125rem #
|
|
246
|
+
export const amsButtonPrimaryDisabledBackgroundColor = "#767676";
|
|
247
|
+
export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0 0.125rem #767676";
|
|
222
248
|
export const amsButtonPrimaryHoverBackgroundColor = "#102E62";
|
|
223
249
|
export const amsButtonPrimaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
224
250
|
export const amsButtonSecondaryBackgroundColor = "#FFFFFF";
|
|
@@ -227,19 +253,23 @@ export const amsButtonSecondaryBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
|
227
253
|
export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
|
|
228
254
|
export const amsButtonSecondaryHoverColor = "#102E62";
|
|
229
255
|
export const amsButtonSecondaryDisabledBackgroundColor = "#FFFFFF";
|
|
230
|
-
export const amsButtonSecondaryDisabledBoxShadow =
|
|
231
|
-
|
|
256
|
+
export const amsButtonSecondaryDisabledBoxShadow =
|
|
257
|
+
"inset 0 0 0 0.125rem #767676";
|
|
258
|
+
export const amsButtonSecondaryDisabledColor = "#767676";
|
|
232
259
|
export const amsButtonSecondaryFocusBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
233
260
|
export const amsButtonTertiaryBackgroundColor = "transparent";
|
|
234
261
|
export const amsButtonTertiaryColor = "#004699";
|
|
235
262
|
export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
236
263
|
export const amsButtonTertiaryHoverColor = "#102E62";
|
|
237
264
|
export const amsButtonTertiaryDisabledBackgroundColor = "transparent";
|
|
238
|
-
export const amsButtonTertiaryDisabledColor = "#
|
|
239
|
-
export const amsButtonIconOnlyPaddingBlock =
|
|
240
|
-
|
|
265
|
+
export const amsButtonTertiaryDisabledColor = "#767676";
|
|
266
|
+
export const amsButtonIconOnlyPaddingBlock =
|
|
267
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
268
|
+
export const amsButtonIconOnlyPaddingInline =
|
|
269
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
241
270
|
export const amsCardGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
242
|
-
export const amsCardHeadingGroupGap =
|
|
271
|
+
export const amsCardHeadingGroupGap =
|
|
272
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
243
273
|
export const amsCardLinkColor = "#004699";
|
|
244
274
|
export const amsCardLinkTextDecorationLine = "none";
|
|
245
275
|
export const amsCardLinkTextDecorationThickness = "0.125rem";
|
|
@@ -248,14 +278,17 @@ export const amsCardLinkHoverColor = "#102E62";
|
|
|
248
278
|
export const amsCardLinkHoverTextDecorationLine = "underline";
|
|
249
279
|
export const amsCardOutlineOffset = "0.125rem";
|
|
250
280
|
export const amsCharacterCountColor = "#000000";
|
|
251
|
-
export const amsCharacterCountFontFamily =
|
|
252
|
-
|
|
281
|
+
export const amsCharacterCountFontFamily =
|
|
282
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
283
|
+
export const amsCharacterCountFontSize =
|
|
284
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
253
285
|
export const amsCharacterCountFontWeight = 400;
|
|
254
286
|
export const amsCharacterCountLineHeight = "1.6";
|
|
255
287
|
export const amsCharacterCountErrorColor = "#EC0000";
|
|
256
288
|
export const amsCheckboxColor = "#000000";
|
|
257
289
|
export const amsCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
258
|
-
export const amsCheckboxFontSize =
|
|
290
|
+
export const amsCheckboxFontSize =
|
|
291
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
259
292
|
export const amsCheckboxFontWeight = 400;
|
|
260
293
|
export const amsCheckboxGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
261
294
|
export const amsCheckboxLineHeight = "1.6";
|
|
@@ -263,30 +296,38 @@ export const amsCheckboxOutlineOffset = "0.125rem";
|
|
|
263
296
|
export const amsCheckboxCheckmarkBorderColor = "#004699";
|
|
264
297
|
export const amsCheckboxCheckmarkBorderWidth = "0.125rem";
|
|
265
298
|
export const amsCheckboxCheckmarkCheckedBackgroundColor = "#004699";
|
|
266
|
-
export const amsCheckboxCheckmarkCheckedBackgroundImage =
|
|
299
|
+
export const amsCheckboxCheckmarkCheckedBackgroundImage =
|
|
300
|
+
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")";
|
|
267
301
|
export const amsCheckboxCheckmarkCheckedHoverBackgroundColor = "#102E62";
|
|
268
302
|
export const amsCheckboxCheckmarkDisabledBorderColor = "#767676";
|
|
269
303
|
export const amsCheckboxCheckmarkDisabledBorderWidth = "0.125rem";
|
|
270
304
|
export const amsCheckboxCheckmarkDisabledCheckedBackgroundColor = "#767676";
|
|
271
|
-
export const amsCheckboxCheckmarkDisabledCheckedHoverBackgroundColor =
|
|
272
|
-
|
|
273
|
-
export const
|
|
305
|
+
export const amsCheckboxCheckmarkDisabledCheckedHoverBackgroundColor =
|
|
306
|
+
"#767676";
|
|
307
|
+
export const amsCheckboxCheckmarkDisabledIndeterminateBackgroundColor =
|
|
308
|
+
"#767676";
|
|
309
|
+
export const amsCheckboxCheckmarkDisabledIndeterminateHoverBackgroundColor =
|
|
310
|
+
"#767676";
|
|
274
311
|
export const amsCheckboxCheckmarkHoverBorderColor = "#102E62";
|
|
275
312
|
export const amsCheckboxCheckmarkHoverBorderWidth = "0.1875rem";
|
|
276
313
|
export const amsCheckboxCheckmarkInvalidBorderColor = "#EC0000";
|
|
277
314
|
export const amsCheckboxCheckmarkInvalidCheckedBackgroundColor = "#EC0000";
|
|
278
315
|
export const amsCheckboxCheckmarkInvalidCheckedHoverBackgroundColor = "#EC0000";
|
|
279
316
|
export const amsCheckboxCheckmarkInvalidHoverBorderColor = "#EC0000";
|
|
280
|
-
export const amsCheckboxCheckmarkInvalidIndeterminateBackgroundColor =
|
|
281
|
-
|
|
317
|
+
export const amsCheckboxCheckmarkInvalidIndeterminateBackgroundColor =
|
|
318
|
+
"#EC0000";
|
|
319
|
+
export const amsCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor =
|
|
320
|
+
"#EC0000";
|
|
282
321
|
export const amsCheckboxCheckmarkIndeterminateBackgroundColor = "#004699";
|
|
283
|
-
export const amsCheckboxCheckmarkIndeterminateBackgroundImage =
|
|
322
|
+
export const amsCheckboxCheckmarkIndeterminateBackgroundImage =
|
|
323
|
+
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")";
|
|
284
324
|
export const amsCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
|
|
285
325
|
export const amsCheckboxDisabledColor = "#767676";
|
|
286
326
|
export const amsCheckboxHoverColor = "#102E62";
|
|
287
327
|
export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
|
|
288
328
|
export const amsColumnGapNo = "0";
|
|
289
|
-
export const amsColumnGapXs =
|
|
329
|
+
export const amsColumnGapXs =
|
|
330
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
290
331
|
export const amsColumnGapSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
291
332
|
export const amsColumnGapMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
292
333
|
export const amsColumnGapLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
@@ -295,171 +336,286 @@ export const amsDateInputBackgroundColor = "#FFFFFF";
|
|
|
295
336
|
export const amsDateInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
296
337
|
export const amsDateInputColor = "#000000";
|
|
297
338
|
export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
298
|
-
export const amsDateInputFontSize =
|
|
339
|
+
export const amsDateInputFontSize =
|
|
340
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
299
341
|
export const amsDateInputFontWeight = 400;
|
|
300
342
|
export const amsDateInputLineHeight = "1.6";
|
|
301
343
|
export const amsDateInputOutlineOffset = "0.125rem";
|
|
302
|
-
export const amsDateInputPaddingBlock =
|
|
303
|
-
|
|
304
|
-
export const
|
|
344
|
+
export const amsDateInputPaddingBlock =
|
|
345
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
346
|
+
export const amsDateInputPaddingInline =
|
|
347
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
348
|
+
export const amsDateInputCalenderPickerIndicatorBackgroundImage =
|
|
349
|
+
"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>\")";
|
|
305
350
|
export const amsDateInputDisabledBackgroundColor = "#FFFFFF";
|
|
306
|
-
export const amsDateInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #
|
|
307
|
-
export const amsDateInputDisabledColor = "#
|
|
308
|
-
export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
351
|
+
export const amsDateInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #767676";
|
|
352
|
+
export const amsDateInputDisabledColor = "#767676";
|
|
353
|
+
export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
354
|
+
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
|
|
309
355
|
export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
310
|
-
export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
356
|
+
export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
357
|
+
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
|
|
311
358
|
export const amsDateInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
312
359
|
export const amsDateInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
313
360
|
export const amsDescriptionListColor = "#000000";
|
|
314
|
-
export const amsDescriptionListColumnGap =
|
|
315
|
-
|
|
316
|
-
export const
|
|
361
|
+
export const amsDescriptionListColumnGap =
|
|
362
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
363
|
+
export const amsDescriptionListFontFamily =
|
|
364
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
365
|
+
export const amsDescriptionListFontSize =
|
|
366
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
317
367
|
export const amsDescriptionListInverseColor = "#FFFFFF";
|
|
318
368
|
export const amsDescriptionListLineHeight = "1.6";
|
|
319
|
-
export const amsDescriptionListRowGap =
|
|
369
|
+
export const amsDescriptionListRowGap =
|
|
370
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
320
371
|
export const amsDescriptionListTermFontWeight = 800;
|
|
321
|
-
export const
|
|
322
|
-
export const
|
|
372
|
+
export const amsDescriptionListDescriptionFontWeight = 400;
|
|
373
|
+
export const amsDescriptionListDescriptionPaddingInlineStart =
|
|
374
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
323
375
|
export const amsDialogBackgroundColor = "#FFFFFF";
|
|
324
376
|
export const amsDialogBorder = "0";
|
|
325
377
|
export const amsDialogGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
326
|
-
export const amsDialogInlineSize =
|
|
327
|
-
|
|
378
|
+
export const amsDialogInlineSize =
|
|
379
|
+
"calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
380
|
+
export const amsDialogMaxBlockSize =
|
|
381
|
+
"calc(100dvh - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
328
382
|
export const amsDialogMaxInlineSize = "48rem";
|
|
329
|
-
export const amsDialogPaddingBlock =
|
|
330
|
-
|
|
331
|
-
export const
|
|
383
|
+
export const amsDialogPaddingBlock =
|
|
384
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
385
|
+
export const amsDialogPaddingInline =
|
|
386
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
387
|
+
export const amsDialogHeaderGap =
|
|
388
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
332
389
|
export const amsErrorMessageColor = "#EC0000";
|
|
333
390
|
export const amsErrorMessageFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
334
|
-
export const amsErrorMessageFontSize =
|
|
391
|
+
export const amsErrorMessageFontSize =
|
|
392
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
335
393
|
export const amsErrorMessageFontWeight = 400;
|
|
394
|
+
export const amsErrorMessageGap =
|
|
395
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
336
396
|
export const amsErrorMessageLineHeight = "1.6";
|
|
337
397
|
export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
338
|
-
export const amsFieldSetInvalidPaddingInlineStart =
|
|
398
|
+
export const amsFieldSetInvalidPaddingInlineStart =
|
|
399
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
339
400
|
export const amsFieldSetLegendColor = "#000000";
|
|
340
|
-
export const amsFieldSetLegendFontFamily =
|
|
341
|
-
|
|
401
|
+
export const amsFieldSetLegendFontFamily =
|
|
402
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
403
|
+
export const amsFieldSetLegendFontSize =
|
|
404
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
342
405
|
export const amsFieldSetLegendFontWeight = 800;
|
|
343
406
|
export const amsFieldSetLegendLineHeight = "1.5";
|
|
344
|
-
export const amsFieldSetLegendMarginBlockEnd =
|
|
407
|
+
export const amsFieldSetLegendMarginBlockEnd =
|
|
408
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
345
409
|
export const amsFieldGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
346
410
|
export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
347
|
-
export const amsFieldInvalidPaddingInlineStart =
|
|
411
|
+
export const amsFieldInvalidPaddingInlineStart =
|
|
412
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
413
|
+
export const amsFigureGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
414
|
+
export const amsFigureCaptionColor = "#000000";
|
|
415
|
+
export const amsFigureCaptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
416
|
+
export const amsFigureCaptionFontSize =
|
|
417
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
418
|
+
export const amsFigureCaptionFontWeight = 400;
|
|
419
|
+
export const amsFigureCaptionLineHeight = "1.6";
|
|
420
|
+
export const amsFigureCaptionInverseColor = "#FFFFFF";
|
|
348
421
|
export const amsFileInputBackgroundColor = "#FFFFFF";
|
|
349
422
|
export const amsFileInputBorder = "0.0625rem dashed #767676";
|
|
350
423
|
export const amsFileInputColor = "#000000";
|
|
351
424
|
export const amsFileInputCursor = "pointer";
|
|
352
425
|
export const amsFileInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
353
|
-
export const amsFileInputFontSize =
|
|
426
|
+
export const amsFileInputFontSize =
|
|
427
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
354
428
|
export const amsFileInputFontWeight = 400;
|
|
355
429
|
export const amsFileInputLineHeight = "1.6";
|
|
356
430
|
export const amsFileInputOutlineOffset = "0.125rem";
|
|
357
|
-
export const amsFileInputPaddingBlock =
|
|
358
|
-
|
|
359
|
-
export const
|
|
431
|
+
export const amsFileInputPaddingBlock =
|
|
432
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
433
|
+
export const amsFileInputPaddingInline =
|
|
434
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
435
|
+
export const amsFileInputDisabledColor = "#767676";
|
|
360
436
|
export const amsFileInputDisabledCursor = "not-allowed";
|
|
361
437
|
export const amsFileInputFileSelectorButtonBackgroundColor = "#FFFFFF";
|
|
362
|
-
export const amsFileInputFileSelectorButtonBoxShadow =
|
|
438
|
+
export const amsFileInputFileSelectorButtonBoxShadow =
|
|
439
|
+
"inset 0 0 0 0.125rem #004699";
|
|
363
440
|
export const amsFileInputFileSelectorButtonColor = "#004699";
|
|
364
441
|
export const amsFileInputFileSelectorButtonCursor = "pointer";
|
|
365
|
-
export const amsFileInputFileSelectorButtonMarginInlineEnd =
|
|
366
|
-
|
|
367
|
-
export const
|
|
368
|
-
|
|
442
|
+
export const amsFileInputFileSelectorButtonMarginInlineEnd =
|
|
443
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
444
|
+
export const amsFileInputFileSelectorButtonPaddingBlock =
|
|
445
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
446
|
+
export const amsFileInputFileSelectorButtonPaddingInline =
|
|
447
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
448
|
+
export const amsFileInputFileSelectorButtonHoverBoxShadow =
|
|
449
|
+
"inset 0 0 0 0.1875rem #102E62";
|
|
369
450
|
export const amsFileInputFileSelectorButtonHoverColor = "#102E62";
|
|
370
|
-
export const amsFileInputFileSelectorButtonDisabledBoxShadow =
|
|
371
|
-
|
|
451
|
+
export const amsFileInputFileSelectorButtonDisabledBoxShadow =
|
|
452
|
+
"inset 0 0 0 0.125rem #767676";
|
|
453
|
+
export const amsFileInputFileSelectorButtonDisabledColor = "#767676";
|
|
372
454
|
export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
|
|
373
|
-
export const amsFileInputFileSelectorButtonForcedColorModeBorder =
|
|
455
|
+
export const amsFileInputFileSelectorButtonForcedColorModeBorder =
|
|
456
|
+
"0.125rem solid";
|
|
457
|
+
export const amsFileListGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
458
|
+
export const amsFileListPaddingBlock =
|
|
459
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
460
|
+
export const amsFileListFileFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
461
|
+
export const amsFileListFileFontSize =
|
|
462
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
463
|
+
export const amsFileListFileFontWeight = 400;
|
|
464
|
+
export const amsFileListFileGap =
|
|
465
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
466
|
+
export const amsFileListFileLineHeight = "1.6";
|
|
467
|
+
export const amsFileListFileDetailsColor = "#767676";
|
|
468
|
+
export const amsFileListFilePreviewWidth = "clamp(2.5rem, 10vw, 5rem)";
|
|
469
|
+
export const amsFooterTopBackgroundColor = "#004699";
|
|
374
470
|
export const amsFormErrorListOutlineOffset = "0.125rem";
|
|
375
|
-
export const amsGapXs =
|
|
471
|
+
export const amsGapXs =
|
|
472
|
+
"clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
376
473
|
export const amsGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
377
474
|
export const amsGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
378
475
|
export const amsGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
379
476
|
export const amsGapXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
380
477
|
export const amsGridColumnCount = "4";
|
|
381
478
|
export const amsGridColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
382
|
-
export const amsGridPaddingBlockSm =
|
|
383
|
-
|
|
384
|
-
export const
|
|
385
|
-
|
|
386
|
-
export const
|
|
479
|
+
export const amsGridPaddingBlockSm =
|
|
480
|
+
"clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
481
|
+
export const amsGridPaddingBlockMd =
|
|
482
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
483
|
+
export const amsGridPaddingBlockLg =
|
|
484
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
485
|
+
export const amsGridPaddingInline =
|
|
486
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
487
|
+
export const amsGridRowGapSm =
|
|
488
|
+
"clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
387
489
|
export const amsGridRowGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
388
|
-
export const amsGridRowGapLg =
|
|
490
|
+
export const amsGridRowGapLg =
|
|
491
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
389
492
|
export const amsGridMediumColumnCount = "8";
|
|
390
493
|
export const amsGridWideColumnCount = "12";
|
|
391
|
-
export const
|
|
392
|
-
|
|
494
|
+
export const amsHeaderPaddingBlock =
|
|
495
|
+
"clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
496
|
+
export const amsHeaderPaddingInline =
|
|
497
|
+
"clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)"; // Must be the Grid inline padding, to make sure Header and Grid line up
|
|
498
|
+
export const amsHeaderBrandingColumnGap =
|
|
499
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
500
|
+
export const amsHeaderBrandingRowGap =
|
|
501
|
+
"clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
393
502
|
export const amsHeaderLogoLinkOutlineOffset = "0.125rem";
|
|
503
|
+
export const amsHeaderMegaMenuButtonLabelOpenFontWeight = 800;
|
|
504
|
+
export const amsHeaderMenuColumnGap =
|
|
505
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
506
|
+
export const amsHeaderMenuRowGap =
|
|
507
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
508
|
+
export const amsHeaderMenuItemColor = "#004699";
|
|
509
|
+
export const amsHeaderMenuItemColumnGap =
|
|
510
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
511
|
+
export const amsHeaderMenuItemFontFamily =
|
|
512
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
513
|
+
export const amsHeaderMenuItemFontSize =
|
|
514
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
515
|
+
export const amsHeaderMenuItemFontWeight = 400;
|
|
516
|
+
export const amsHeaderMenuItemLineHeight = "1.6";
|
|
517
|
+
export const amsHeaderMenuItemOutlineOffset = "0.125rem";
|
|
518
|
+
export const amsHeaderMenuItemPaddingBlock =
|
|
519
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
520
|
+
export const amsHeaderMenuItemHoverColor = "#102E62";
|
|
521
|
+
export const amsHeaderMenuLinkTextDecorationLine = "none";
|
|
522
|
+
export const amsHeaderMenuLinkTextDecorationThickness = "0.125rem";
|
|
523
|
+
export const amsHeaderMenuLinkTextUnderlineOffset = "0.3333em";
|
|
524
|
+
export const amsHeaderMenuLinkHoverTextDecorationLine = "underline";
|
|
525
|
+
export const amsHeaderNavigationColumnGap =
|
|
526
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
527
|
+
export const amsHeaderNavigationRowGap =
|
|
528
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
394
529
|
export const amsHeadingColor = "#000000";
|
|
395
530
|
export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
396
531
|
export const amsHeadingFontWeight = 800;
|
|
397
532
|
export const amsHeadingInverseColor = "#FFFFFF";
|
|
398
|
-
export const amsHeadingLevel1FontSize =
|
|
533
|
+
export const amsHeadingLevel1FontSize =
|
|
534
|
+
"clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)";
|
|
399
535
|
export const amsHeadingLevel1LineHeight = "1.2";
|
|
400
|
-
export const amsHeadingLevel2FontSize =
|
|
536
|
+
export const amsHeadingLevel2FontSize =
|
|
537
|
+
"clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)";
|
|
401
538
|
export const amsHeadingLevel2LineHeight = "1.25";
|
|
402
|
-
export const amsHeadingLevel3FontSize =
|
|
539
|
+
export const amsHeadingLevel3FontSize =
|
|
540
|
+
"clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
403
541
|
export const amsHeadingLevel3LineHeight = "1.3";
|
|
404
|
-
export const amsHeadingLevel4FontSize =
|
|
542
|
+
export const amsHeadingLevel4FontSize =
|
|
543
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
405
544
|
export const amsHeadingLevel4LineHeight = "1.5";
|
|
406
|
-
export const amsHeadingLevel5FontSize =
|
|
545
|
+
export const amsHeadingLevel5FontSize =
|
|
546
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
407
547
|
export const amsHeadingLevel5LineHeight = "1.6";
|
|
408
|
-
export const amsHeadingLevel6FontSize =
|
|
548
|
+
export const amsHeadingLevel6FontSize =
|
|
549
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
409
550
|
export const amsHeadingLevel6LineHeight = "1.6";
|
|
410
551
|
export const amsHintColor = "#767676";
|
|
411
552
|
export const amsIconButtonColor = "#004699";
|
|
412
553
|
export const amsIconButtonOutlineOffset = "0.125rem";
|
|
413
554
|
export const amsIconButtonHoverBackgroundColor = "rgba(0, 70, 153, 0.125)";
|
|
414
555
|
export const amsIconButtonHoverColor = "#102E62";
|
|
415
|
-
export const amsIconButtonDisabledColor = "#
|
|
556
|
+
export const amsIconButtonDisabledColor = "#767676";
|
|
416
557
|
export const amsIconButtonContrastColorColor = "#000000";
|
|
417
|
-
export const amsIconButtonContrastColorHoverBackgroundColor =
|
|
558
|
+
export const amsIconButtonContrastColorHoverBackgroundColor =
|
|
559
|
+
"rgba(0, 0, 0, 0.125)";
|
|
418
560
|
export const amsIconButtonContrastColorHoverColor = "#000000";
|
|
419
|
-
export const amsIconButtonContrastColorDisabledColor = "#
|
|
561
|
+
export const amsIconButtonContrastColorDisabledColor = "#767676";
|
|
420
562
|
export const amsIconButtonInverseColorBackgroundColor = "#004699";
|
|
421
563
|
export const amsIconButtonInverseColorColor = "#FFFFFF";
|
|
422
564
|
export const amsIconButtonInverseColorHoverBackgroundColor = "#102E62";
|
|
423
565
|
export const amsIconButtonInverseColorHoverColor = "#FFFFFF";
|
|
424
566
|
export const amsIconButtonInverseColorDisabledColor = "#FFFFFF";
|
|
425
|
-
export const amsIconButtonInverseColorDisabledBackgroundColor = "#
|
|
426
|
-
export const
|
|
567
|
+
export const amsIconButtonInverseColorDisabledBackgroundColor = "#767676";
|
|
568
|
+
export const amsIconInverseColor = "#FFFFFF";
|
|
569
|
+
export const amsIconSize3FontSize =
|
|
570
|
+
"clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
427
571
|
export const amsIconSize3LineHeight = "1.3";
|
|
428
|
-
export const amsIconSize4FontSize =
|
|
572
|
+
export const amsIconSize4FontSize =
|
|
573
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
429
574
|
export const amsIconSize4LineHeight = "1.5";
|
|
430
|
-
export const amsIconSize5FontSize =
|
|
575
|
+
export const amsIconSize5FontSize =
|
|
576
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
431
577
|
export const amsIconSize5LineHeight = "1.6";
|
|
432
|
-
export const amsIconSize6FontSize =
|
|
578
|
+
export const amsIconSize6FontSize =
|
|
579
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
433
580
|
export const amsIconSize6LineHeight = "1.6";
|
|
434
|
-
export const amsImageSliderGap =
|
|
435
|
-
|
|
581
|
+
export const amsImageSliderGap =
|
|
582
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
583
|
+
export const amsImageSliderScrollerGap =
|
|
584
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
436
585
|
export const amsImageSliderScrollerOutlineOffset = "0.125rem";
|
|
437
|
-
export const amsImageSliderThumbnailsGap =
|
|
586
|
+
export const amsImageSliderThumbnailsGap =
|
|
587
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
438
588
|
export const amsImageSliderThumbnailsThumbnailBackgroundColor = "transparent";
|
|
439
589
|
export const amsImageSliderThumbnailsThumbnailCursor = "pointer";
|
|
440
590
|
export const amsImageSliderThumbnailsThumbnailOpacity = "40%";
|
|
441
591
|
export const amsImageSliderThumbnailsThumbnailOutlineOffset = "0.125rem";
|
|
442
592
|
export const amsImageSliderThumbnailsThumbnailInViewOpacity = "100%";
|
|
443
593
|
export const amsImageSliderThumbnailsThumbnailHoverOpacity = "100%";
|
|
594
|
+
export const amsImageAspectRatio = "16 / 9";
|
|
444
595
|
export const amsLabelColor = "#000000";
|
|
445
596
|
export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
446
|
-
export const amsLabelFontSize =
|
|
597
|
+
export const amsLabelFontSize =
|
|
598
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
447
599
|
export const amsLabelFontWeight = 800;
|
|
448
600
|
export const amsLabelLineHeight = "1.5";
|
|
449
601
|
export const amsLinkListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
450
602
|
export const amsLinkListLinkColor = "#004699";
|
|
451
603
|
export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
452
|
-
export const amsLinkListLinkFontSize =
|
|
604
|
+
export const amsLinkListLinkFontSize =
|
|
605
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
453
606
|
export const amsLinkListLinkFontWeight = 400;
|
|
454
|
-
export const amsLinkListLinkGap =
|
|
607
|
+
export const amsLinkListLinkGap =
|
|
608
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
455
609
|
export const amsLinkListLinkLineHeight = "1.6";
|
|
456
610
|
export const amsLinkListLinkOutlineOffset = "0.125rem";
|
|
457
611
|
export const amsLinkListLinkTextDecorationLine = "none";
|
|
458
612
|
export const amsLinkListLinkTextDecorationThickness = "0.125rem";
|
|
459
613
|
export const amsLinkListLinkTextUnderlineOffset = "0.3333em";
|
|
460
|
-
export const amsLinkListLinkSmallFontSize =
|
|
614
|
+
export const amsLinkListLinkSmallFontSize =
|
|
615
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
461
616
|
export const amsLinkListLinkSmallLineHeight = "1.6";
|
|
462
|
-
export const amsLinkListLinkLargeFontSize =
|
|
617
|
+
export const amsLinkListLinkLargeFontSize =
|
|
618
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
463
619
|
export const amsLinkListLinkLargeLineHeight = "1.5";
|
|
464
620
|
export const amsLinkListLinkHoverColor = "#102E62";
|
|
465
621
|
export const amsLinkListLinkHoverTextDecorationLine = "underline";
|
|
@@ -481,7 +637,8 @@ export const amsLinkInlineLineHeight = "inherit";
|
|
|
481
637
|
export const amsLinkInlineHoverTextDecorationThickness = "0.1875rem";
|
|
482
638
|
export const amsLinkInlineHoverTextUnderlineOffset = "0.2778em";
|
|
483
639
|
export const amsLinkInlineVisitedColor = "#A00078";
|
|
484
|
-
export const amsLinkStandaloneFontSize =
|
|
640
|
+
export const amsLinkStandaloneFontSize =
|
|
641
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
485
642
|
export const amsLinkStandaloneLineHeight = "1.6";
|
|
486
643
|
export const amsLinkStandaloneTextDecorationLine = "underline";
|
|
487
644
|
export const amsLinkStandaloneTextDecorationThickness = "0.125rem";
|
|
@@ -494,51 +651,67 @@ export const amsLinkContrastColorVisitedColor = "#000000";
|
|
|
494
651
|
export const amsLinkInverseColorColor = "#FFFFFF";
|
|
495
652
|
export const amsLinkInverseColorHoverColor = "#FFFFFF";
|
|
496
653
|
export const amsLinkInverseColorVisitedColor = "#FFFFFF";
|
|
497
|
-
export const amsLogoBlockSize = "
|
|
654
|
+
export const amsLogoBlockSize = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // This is the same size as Grid space medium
|
|
498
655
|
export const amsLogoEmblemColor = "#EC0000";
|
|
499
|
-
export const
|
|
656
|
+
export const amsLogoMinBlockSize = "2.5rem";
|
|
500
657
|
export const amsLogoSubsiteColor = "#000000";
|
|
501
|
-
export const
|
|
658
|
+
export const amsLogoTitleColor = "#EC0000";
|
|
659
|
+
export const amsMarginXs =
|
|
660
|
+
"clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
502
661
|
export const amsMarginSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
503
662
|
export const amsMarginMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
504
663
|
export const amsMarginLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
505
664
|
export const amsMarginXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
506
665
|
export const amsMarkBackgroundColor = "#FFE600";
|
|
507
|
-
export const amsMegaMenuListCategoryColumnGap =
|
|
666
|
+
export const amsMegaMenuListCategoryColumnGap =
|
|
667
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
|
|
508
668
|
export const amsMegaMenuListCategoryColumnWidth = "20rem";
|
|
509
|
-
export const amsMegaMenuListCategoryPaddingBlockStart =
|
|
510
|
-
|
|
669
|
+
export const amsMegaMenuListCategoryPaddingBlockStart =
|
|
670
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
671
|
+
export const amsMegaMenuListCategoryPaddingBlockEnd =
|
|
672
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.row-gap.md`.
|
|
511
673
|
export const amsOrderedListColor = "#000000";
|
|
512
674
|
export const amsOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
513
|
-
export const amsOrderedListFontSize =
|
|
675
|
+
export const amsOrderedListFontSize =
|
|
676
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
514
677
|
export const amsOrderedListFontWeight = 400;
|
|
515
|
-
export const amsOrderedListGap =
|
|
678
|
+
export const amsOrderedListGap =
|
|
679
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
516
680
|
export const amsOrderedListInverseColor = "#FFFFFF";
|
|
517
681
|
export const amsOrderedListLineHeight = "1.6";
|
|
518
682
|
export const amsOrderedListListStyleType = "decimal";
|
|
519
|
-
export const amsOrderedListSmallFontSize =
|
|
683
|
+
export const amsOrderedListSmallFontSize =
|
|
684
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
520
685
|
export const amsOrderedListSmallLineHeight = "1.6";
|
|
521
686
|
export const amsOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
|
|
522
687
|
export const amsOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
|
|
523
|
-
export const amsOrderedListOrderedListGap =
|
|
688
|
+
export const amsOrderedListOrderedListGap =
|
|
689
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
524
690
|
export const amsOrderedListOrderedListListStyleType = "lower-alpha";
|
|
525
691
|
export const amsOrderedListOrderedListPaddingBlockEnd = "0";
|
|
526
|
-
export const amsOrderedListOrderedListPaddingBlockStart =
|
|
692
|
+
export const amsOrderedListOrderedListPaddingBlockStart =
|
|
693
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
527
694
|
export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
528
695
|
export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
529
696
|
export const amsPageHeadingColor = "#000000";
|
|
530
697
|
export const amsPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
531
|
-
export const amsPageHeadingFontSize =
|
|
698
|
+
export const amsPageHeadingFontSize =
|
|
699
|
+
"clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
532
700
|
export const amsPageHeadingFontWeight = 800;
|
|
533
701
|
export const amsPageHeadingInverseColor = "#FFFFFF";
|
|
534
|
-
export const amsPageHeadingLineHeight =
|
|
535
|
-
|
|
536
|
-
export const
|
|
702
|
+
export const amsPageHeadingLineHeight =
|
|
703
|
+
"clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
704
|
+
export const amsPageMenuColumnGap =
|
|
705
|
+
"clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
706
|
+
export const amsPageMenuRowGap =
|
|
707
|
+
"clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
537
708
|
export const amsPageMenuItemColor = "#004699";
|
|
538
709
|
export const amsPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
539
|
-
export const amsPageMenuItemFontSize =
|
|
710
|
+
export const amsPageMenuItemFontSize =
|
|
711
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
540
712
|
export const amsPageMenuItemFontWeight = 400;
|
|
541
|
-
export const amsPageMenuItemGap =
|
|
713
|
+
export const amsPageMenuItemGap =
|
|
714
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
542
715
|
export const amsPageMenuItemLineHeight = "1.6";
|
|
543
716
|
export const amsPageMenuItemOutlineOffset = "0.125rem";
|
|
544
717
|
export const amsPageMenuItemTextDecorationLine = "none";
|
|
@@ -548,12 +721,15 @@ export const amsPageMenuItemHoverColor = "#102E62";
|
|
|
548
721
|
export const amsPageMenuItemHoverTextDecorationLine = "underline";
|
|
549
722
|
export const amsPaginationColor = "#004699";
|
|
550
723
|
export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
551
|
-
export const amsPaginationFontSize =
|
|
724
|
+
export const amsPaginationFontSize =
|
|
725
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
552
726
|
export const amsPaginationFontWeight = 400;
|
|
553
727
|
export const amsPaginationLineHeight = "1.6";
|
|
554
|
-
export const amsPaginationButtonGap =
|
|
728
|
+
export const amsPaginationButtonGap =
|
|
729
|
+
"clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
555
730
|
export const amsPaginationButtonOutlineOffset = "0.125rem";
|
|
556
|
-
export const amsPaginationButtonPaddingInline =
|
|
731
|
+
export const amsPaginationButtonPaddingInline =
|
|
732
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
557
733
|
export const amsPaginationButtonTextDecorationLine = "none";
|
|
558
734
|
export const amsPaginationButtonTextDecorationThickness = "0.125rem";
|
|
559
735
|
export const amsPaginationButtonTextUnderlineOffset = "0.3333em";
|
|
@@ -562,34 +738,43 @@ export const amsPaginationButtonHoverColor = "#102E62";
|
|
|
562
738
|
export const amsPaginationButtonHoverTextDecorationLine = "underline";
|
|
563
739
|
export const amsParagraphColor = "#000000";
|
|
564
740
|
export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
565
|
-
export const amsParagraphFontSize =
|
|
741
|
+
export const amsParagraphFontSize =
|
|
742
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
566
743
|
export const amsParagraphFontWeight = 400;
|
|
567
744
|
export const amsParagraphLineHeight = "1.6";
|
|
568
745
|
export const amsParagraphInverseColor = "#FFFFFF";
|
|
569
|
-
export const amsParagraphSmallFontSize =
|
|
746
|
+
export const amsParagraphSmallFontSize =
|
|
747
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
570
748
|
export const amsParagraphSmallLineHeight = "1.6";
|
|
571
|
-
export const amsParagraphLargeFontSize =
|
|
749
|
+
export const amsParagraphLargeFontSize =
|
|
750
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
572
751
|
export const amsParagraphLargeLineHeight = "1.5";
|
|
573
752
|
export const amsPasswordInputBackgroundColor = "#FFFFFF";
|
|
574
753
|
export const amsPasswordInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
575
754
|
export const amsPasswordInputColor = "#000000";
|
|
576
755
|
export const amsPasswordInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
577
|
-
export const amsPasswordInputFontSize =
|
|
756
|
+
export const amsPasswordInputFontSize =
|
|
757
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
578
758
|
export const amsPasswordInputFontWeight = 400;
|
|
579
759
|
export const amsPasswordInputLineHeight = "1.6";
|
|
580
760
|
export const amsPasswordInputOutlineOffset = "0.125rem";
|
|
581
|
-
export const amsPasswordInputPaddingBlock =
|
|
582
|
-
|
|
761
|
+
export const amsPasswordInputPaddingBlock =
|
|
762
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
763
|
+
export const amsPasswordInputPaddingInline =
|
|
764
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
583
765
|
export const amsPasswordInputDisabledBackgroundColor = "#FFFFFF";
|
|
584
|
-
export const amsPasswordInputDisabledBoxShadow =
|
|
585
|
-
|
|
766
|
+
export const amsPasswordInputDisabledBoxShadow =
|
|
767
|
+
"inset 0 0 0 0.0625rem #767676";
|
|
768
|
+
export const amsPasswordInputDisabledColor = "#767676";
|
|
586
769
|
export const amsPasswordInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
587
770
|
export const amsPasswordInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
588
|
-
export const amsPasswordInputInvalidHoverBoxShadow =
|
|
771
|
+
export const amsPasswordInputInvalidHoverBoxShadow =
|
|
772
|
+
"inset 0 0 0 0.125rem #EC0000";
|
|
589
773
|
export const amsPasswordInputPlaceholderColor = "#767676";
|
|
590
774
|
export const amsRadioColor = "#000000";
|
|
591
775
|
export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
592
|
-
export const amsRadioFontSize =
|
|
776
|
+
export const amsRadioFontSize =
|
|
777
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
593
778
|
export const amsRadioFontWeight = 400;
|
|
594
779
|
export const amsRadioGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
595
780
|
export const amsRadioLineHeight = "1.6";
|
|
@@ -603,7 +788,12 @@ export const amsRadioCheckedIndicatorDisabledInvalidHoverFill = "#767676";
|
|
|
603
788
|
export const amsRadioCheckedIndicatorHoverFill = "#102E62";
|
|
604
789
|
export const amsRadioCheckedIndicatorInvalidFill = "#EC0000";
|
|
605
790
|
export const amsRadioCheckedIndicatorInvalidHoverFill = "#EC0000";
|
|
791
|
+
export const amsRadioHoverIndicatorStrokeWidth = "3px";
|
|
792
|
+
export const amsRadioHoverIndicatorHoverStroke = "#004699";
|
|
793
|
+
export const amsRadioHoverIndicatorInvalidHoverStroke = "#EC0000";
|
|
794
|
+
export const amsRadioCircleFill = "#FFFFFF";
|
|
606
795
|
export const amsRadioCircleStroke = "#004699";
|
|
796
|
+
export const amsRadioCircleStrokeWidth = "2px";
|
|
607
797
|
export const amsRadioCircleDisabledStroke = "#767676";
|
|
608
798
|
export const amsRadioCircleDisabledInvalidStroke = "#767676";
|
|
609
799
|
export const amsRadioCircleDisabledInvalidHoverStroke = "#767676";
|
|
@@ -613,7 +803,8 @@ export const amsRadioCircleInvalidHoverStroke = "#EC0000";
|
|
|
613
803
|
export const amsRadioDisabledColor = "#767676";
|
|
614
804
|
export const amsRadioHoverColor = "#102E62";
|
|
615
805
|
export const amsRadioHoverTextDecorationLine = "underline";
|
|
616
|
-
export const amsRadioIconContainerBlockSize =
|
|
806
|
+
export const amsRadioIconContainerBlockSize =
|
|
807
|
+
"calc(clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem) * 1.6)";
|
|
617
808
|
export const amsRadioIconContainerInlineSize = "1.5rem";
|
|
618
809
|
export const amsRowGapNo = "0";
|
|
619
810
|
export const amsRowGapXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
@@ -624,66 +815,77 @@ export const amsRowGapXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
|
624
815
|
export const amsScreenBackgroundColor = "#FFFFFF";
|
|
625
816
|
export const amsScreenWideMaxInlineSize = "100rem";
|
|
626
817
|
export const amsScreenXWideMaxInlineSize = "132rem";
|
|
627
|
-
export const amsSearchFieldButtonBackgroundColor = "#004699";
|
|
628
|
-
export const amsSearchFieldButtonColor = "#FFFFFF";
|
|
629
|
-
export const amsSearchFieldButtonOutlineOffset = "0.125rem";
|
|
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)";
|
|
632
|
-
export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
|
|
633
818
|
export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
|
|
634
819
|
export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
635
820
|
export const amsSearchFieldInputColor = "#000000";
|
|
636
|
-
export const amsSearchFieldInputFontFamily =
|
|
637
|
-
|
|
821
|
+
export const amsSearchFieldInputFontFamily =
|
|
822
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
823
|
+
export const amsSearchFieldInputFontSize =
|
|
824
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
638
825
|
export const amsSearchFieldInputFontWeight = 400;
|
|
639
826
|
export const amsSearchFieldInputLineHeight = "1.6";
|
|
640
827
|
export const amsSearchFieldInputOutlineOffset = "0.125rem";
|
|
641
|
-
export const amsSearchFieldInputPaddingBlock =
|
|
642
|
-
|
|
643
|
-
export const
|
|
644
|
-
|
|
828
|
+
export const amsSearchFieldInputPaddingBlock =
|
|
829
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
830
|
+
export const amsSearchFieldInputPaddingInline =
|
|
831
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
832
|
+
export const amsSearchFieldInputCancelButtonBackgroundImage =
|
|
833
|
+
"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>\")";
|
|
834
|
+
export const amsSearchFieldInputCancelButtonBlockSize =
|
|
835
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
645
836
|
export const amsSearchFieldInputCancelButtonColor = "#004699";
|
|
646
|
-
export const amsSearchFieldInputCancelButtonInlineSize =
|
|
837
|
+
export const amsSearchFieldInputCancelButtonInlineSize =
|
|
838
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
647
839
|
export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
648
|
-
export const amsSearchFieldInputInvalidBoxShadow =
|
|
649
|
-
|
|
840
|
+
export const amsSearchFieldInputInvalidBoxShadow =
|
|
841
|
+
"inset 0 0 0 0.0625rem #EC0000";
|
|
842
|
+
export const amsSearchFieldInputInvalidHoverBoxShadow =
|
|
843
|
+
"inset 0 0 0 0.125rem #EC0000";
|
|
650
844
|
export const amsSearchFieldInputPlaceholderColor = "#767676";
|
|
651
845
|
export const amsSelectBackgroundColor = "#FFFFFF";
|
|
652
|
-
export const amsSelectBackgroundImage =
|
|
653
|
-
|
|
846
|
+
export const amsSelectBackgroundImage =
|
|
847
|
+
"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>\")";
|
|
848
|
+
export const amsSelectBackgroundPosition =
|
|
849
|
+
"right clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) center";
|
|
654
850
|
export const amsSelectBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
655
851
|
export const amsSelectColor = "#000000";
|
|
656
852
|
export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
657
|
-
export const amsSelectFontSize =
|
|
853
|
+
export const amsSelectFontSize =
|
|
854
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
658
855
|
export const amsSelectFontWeight = 400;
|
|
659
856
|
export const amsSelectLineHeight = "1.6";
|
|
660
857
|
export const amsSelectOutlineOffset = "0.125rem";
|
|
661
|
-
export const amsSelectPaddingBlock =
|
|
662
|
-
|
|
663
|
-
export const
|
|
664
|
-
|
|
665
|
-
export const
|
|
858
|
+
export const amsSelectPaddingBlock =
|
|
859
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
860
|
+
export const amsSelectPaddingInline =
|
|
861
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) calc(2 * clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) + 1em)";
|
|
862
|
+
export const amsSelectDisabledBackgroundImage =
|
|
863
|
+
"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>\")";
|
|
864
|
+
export const amsSelectDisabledBoxShadow = "inset 0 0 0 0.0625rem #767676";
|
|
865
|
+
export const amsSelectDisabledColor = "#767676";
|
|
666
866
|
export const amsSelectHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
667
867
|
export const amsSelectInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
668
868
|
export const amsSelectInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
669
|
-
export const amsSelectOptionDisabledColor = "#
|
|
869
|
+
export const amsSelectOptionDisabledColor = "#767676";
|
|
670
870
|
export const amsSkipLinkBackgroundColor = "#004699";
|
|
671
871
|
export const amsSkipLinkColor = "#FFFFFF";
|
|
672
872
|
export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
673
|
-
export const amsSkipLinkFontSize =
|
|
873
|
+
export const amsSkipLinkFontSize =
|
|
874
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
674
875
|
export const amsSkipLinkFontWeight = 400;
|
|
675
876
|
export const amsSkipLinkLineHeight = "1.6";
|
|
676
877
|
export const amsSkipLinkOutlineOffset = "0.125rem";
|
|
677
|
-
export const amsSkipLinkPaddingBlock =
|
|
678
|
-
|
|
878
|
+
export const amsSkipLinkPaddingBlock =
|
|
879
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
880
|
+
export const amsSkipLinkPaddingInline =
|
|
881
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
679
882
|
export const amsSkipLinkHoverBackgroundColor = "#102E62";
|
|
883
|
+
export const amsSpotlightBackgroundColor = "#A00078";
|
|
680
884
|
export const amsSpotlightBlueBackgroundColor = "#009DE6";
|
|
681
|
-
export const amsSpotlightDarkBlueBackgroundColor = "#004699";
|
|
682
885
|
export const amsSpotlightDarkGreenBackgroundColor = "#00A03C";
|
|
683
886
|
export const amsSpotlightGreenBackgroundColor = "#BED200";
|
|
684
887
|
export const amsSpotlightMagentaBackgroundColor = "#E50082";
|
|
685
888
|
export const amsSpotlightOrangeBackgroundColor = "#FF9100";
|
|
686
|
-
export const amsSpotlightPurpleBackgroundColor = "#A00078";
|
|
687
889
|
export const amsSpotlightYellowBackgroundColor = "#FFE600";
|
|
688
890
|
export const amsSwitchBackgroundColor = "#767676";
|
|
689
891
|
export const amsSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
@@ -695,11 +897,14 @@ export const amsSwitchThumbBlockSize = "1.75rem";
|
|
|
695
897
|
export const amsSwitchThumbHoverBoxShadow = "0 0 0 0.125rem #102E62";
|
|
696
898
|
export const amsSwitchThumbHoverColor = "#102E62";
|
|
697
899
|
export const amsSwitchCheckedBackgroundColor = "#004699";
|
|
698
|
-
export const amsSwitchDisabledBackgroundColor = "#
|
|
699
|
-
export const amsTableOfContentsFontFamily =
|
|
700
|
-
|
|
900
|
+
export const amsSwitchDisabledBackgroundColor = "#767676";
|
|
901
|
+
export const amsTableOfContentsFontFamily =
|
|
902
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
903
|
+
export const amsTableOfContentsFontSize =
|
|
904
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
701
905
|
export const amsTableOfContentsFontWeight = 400;
|
|
702
|
-
export const amsTableOfContentsGap =
|
|
906
|
+
export const amsTableOfContentsGap =
|
|
907
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
703
908
|
export const amsTableOfContentsLineHeight = "1.6";
|
|
704
909
|
export const amsTableOfContentsLinkColor = "#004699";
|
|
705
910
|
export const amsTableOfContentsLinkOutlineOffset = "0.125rem";
|
|
@@ -708,54 +913,70 @@ export const amsTableOfContentsLinkTextDecorationThickness = "0.125rem";
|
|
|
708
913
|
export const amsTableOfContentsLinkTextUnderlineOffset = "0.3333em";
|
|
709
914
|
export const amsTableOfContentsLinkHoverColor = "#102E62";
|
|
710
915
|
export const amsTableOfContentsLinkHoverTextDecorationLine = "underline";
|
|
711
|
-
export const amsTableOfContentsListGap =
|
|
712
|
-
|
|
713
|
-
export const
|
|
916
|
+
export const amsTableOfContentsListGap =
|
|
917
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
918
|
+
export const amsTableOfContentsListListPaddingBlockStart =
|
|
919
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
920
|
+
export const amsTableOfContentsListListPaddingInlineStart =
|
|
921
|
+
"clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
714
922
|
export const amsTableOfContentsHeadingFontWeight = 800;
|
|
715
|
-
export const amsTableOfContentsHeadingFontSize =
|
|
923
|
+
export const amsTableOfContentsHeadingFontSize =
|
|
924
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
716
925
|
export const amsTableOfContentsHeadingLineHeight = "1.5";
|
|
717
926
|
export const amsTableColor = "#000000";
|
|
718
927
|
export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
719
|
-
export const amsTableFontSize =
|
|
928
|
+
export const amsTableFontSize =
|
|
929
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
720
930
|
export const amsTableFontWeight = 400;
|
|
721
931
|
export const amsTableLineHeight = "1.6";
|
|
722
932
|
export const amsTableCaptionFontWeight = 800;
|
|
723
|
-
export const amsTableCellBorderBlockEnd = "0.0625rem solid #
|
|
724
|
-
export const amsTableCellPaddingBlock =
|
|
725
|
-
|
|
933
|
+
export const amsTableCellBorderBlockEnd = "0.0625rem solid #d1d1d1"; // TODO: replace with color token
|
|
934
|
+
export const amsTableCellPaddingBlock =
|
|
935
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
936
|
+
export const amsTableCellPaddingInline =
|
|
937
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
726
938
|
export const amsTableHeaderCellFontWeight = 800;
|
|
727
939
|
export const amsTabsGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
728
|
-
export const
|
|
729
|
-
export const amsTabsListBorderBlockEnd = "0.125rem solid #004699";
|
|
940
|
+
export const amsTabsListBoxShadow = "inset 0 calc(0.125rem * -1) #d1d1d1"; // TODO: replace with color token
|
|
730
941
|
export const amsTabsButtonColor = "#004699";
|
|
731
942
|
export const amsTabsButtonCursor = "pointer";
|
|
732
943
|
export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
733
|
-
export const amsTabsButtonFontSize =
|
|
944
|
+
export const amsTabsButtonFontSize =
|
|
945
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
734
946
|
export const amsTabsButtonFontWeight = 400;
|
|
735
947
|
export const amsTabsButtonLineHeight = "1.6";
|
|
736
948
|
export const amsTabsButtonOutlineOffset = "-0.25rem";
|
|
737
|
-
export const amsTabsButtonPaddingBlock =
|
|
738
|
-
|
|
949
|
+
export const amsTabsButtonPaddingBlock =
|
|
950
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
951
|
+
export const amsTabsButtonPaddingInline =
|
|
952
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
739
953
|
export const amsTabsButtonHoverColor = "#102E62";
|
|
740
|
-
export const amsTabsButtonHoverBoxShadow =
|
|
741
|
-
|
|
742
|
-
export const
|
|
743
|
-
|
|
954
|
+
export const amsTabsButtonHoverBoxShadow =
|
|
955
|
+
"inset 0 calc(0.125rem * -1) #102E62";
|
|
956
|
+
export const amsTabsButtonSelectedBoxShadow =
|
|
957
|
+
"inset 0 calc(0.25rem * -1) #004699";
|
|
958
|
+
export const amsTabsButtonSelectedColor = "#004699";
|
|
959
|
+
export const amsTabsButtonSelectedFontWeight = 800;
|
|
960
|
+
export const amsTabsButtonDisabledColor = "#767676";
|
|
744
961
|
export const amsTabsButtonDisabledCursor = "not-allowed";
|
|
745
962
|
export const amsTextAreaBackgroundColor = "#FFFFFF";
|
|
746
963
|
export const amsTextAreaBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
747
964
|
export const amsTextAreaColor = "#000000";
|
|
748
965
|
export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
749
|
-
export const amsTextAreaFontSize =
|
|
966
|
+
export const amsTextAreaFontSize =
|
|
967
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
750
968
|
export const amsTextAreaFontWeight = 400;
|
|
751
969
|
export const amsTextAreaLineHeight = "1.6";
|
|
752
|
-
export const amsTextAreaMinBlockSize =
|
|
970
|
+
export const amsTextAreaMinBlockSize =
|
|
971
|
+
"calc(1.6 * 1em + 2 * clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem))";
|
|
753
972
|
export const amsTextAreaOutlineOffset = "0.125rem";
|
|
754
|
-
export const amsTextAreaPaddingBlock =
|
|
755
|
-
|
|
973
|
+
export const amsTextAreaPaddingBlock =
|
|
974
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
975
|
+
export const amsTextAreaPaddingInline =
|
|
976
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
756
977
|
export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
|
|
757
|
-
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #
|
|
758
|
-
export const amsTextAreaDisabledColor = "#
|
|
978
|
+
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #767676";
|
|
979
|
+
export const amsTextAreaDisabledColor = "#767676";
|
|
759
980
|
export const amsTextAreaDisabledCursor = "not-allowed";
|
|
760
981
|
export const amsTextAreaHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
761
982
|
export const amsTextAreaInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
@@ -765,15 +986,18 @@ export const amsTextInputBackgroundColor = "#FFFFFF";
|
|
|
765
986
|
export const amsTextInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
766
987
|
export const amsTextInputColor = "#000000";
|
|
767
988
|
export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
768
|
-
export const amsTextInputFontSize =
|
|
989
|
+
export const amsTextInputFontSize =
|
|
990
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
769
991
|
export const amsTextInputFontWeight = 400;
|
|
770
992
|
export const amsTextInputLineHeight = "1.6";
|
|
771
993
|
export const amsTextInputOutlineOffset = "0.125rem";
|
|
772
|
-
export const amsTextInputPaddingBlock =
|
|
773
|
-
|
|
994
|
+
export const amsTextInputPaddingBlock =
|
|
995
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
996
|
+
export const amsTextInputPaddingInline =
|
|
997
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
774
998
|
export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
|
|
775
|
-
export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #
|
|
776
|
-
export const amsTextInputDisabledColor = "#
|
|
999
|
+
export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #767676";
|
|
1000
|
+
export const amsTextInputDisabledColor = "#767676";
|
|
777
1001
|
export const amsTextInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
778
1002
|
export const amsTextInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
779
1003
|
export const amsTextInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
@@ -782,30 +1006,41 @@ export const amsTimeInputBackgroundColor = "#FFFFFF";
|
|
|
782
1006
|
export const amsTimeInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
783
1007
|
export const amsTimeInputColor = "#000000";
|
|
784
1008
|
export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
785
|
-
export const amsTimeInputFontSize =
|
|
1009
|
+
export const amsTimeInputFontSize =
|
|
1010
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
786
1011
|
export const amsTimeInputFontWeight = 400;
|
|
787
1012
|
export const amsTimeInputLineHeight = "1.6";
|
|
788
1013
|
export const amsTimeInputOutlineOffset = "0.125rem";
|
|
789
|
-
export const amsTimeInputPaddingBlock =
|
|
790
|
-
|
|
791
|
-
export const
|
|
1014
|
+
export const amsTimeInputPaddingBlock =
|
|
1015
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
1016
|
+
export const amsTimeInputPaddingInline =
|
|
1017
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
1018
|
+
export const amsTimeInputCalenderPickerIndicatorBackgroundImage =
|
|
1019
|
+
"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>\")";
|
|
792
1020
|
export const amsTimeInputDisabledBackgroundColor = "#FFFFFF";
|
|
793
|
-
export const amsTimeInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #
|
|
794
|
-
export const amsTimeInputDisabledColor = "#
|
|
795
|
-
export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
1021
|
+
export const amsTimeInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #767676";
|
|
1022
|
+
export const amsTimeInputDisabledColor = "#767676";
|
|
1023
|
+
export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
|
|
1024
|
+
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><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>\")";
|
|
796
1025
|
export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
797
|
-
export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
1026
|
+
export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
|
|
1027
|
+
"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>\")";
|
|
798
1028
|
export const amsTimeInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
799
1029
|
export const amsTimeInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
800
|
-
export const amsTopTaskLinkGap =
|
|
1030
|
+
export const amsTopTaskLinkGap =
|
|
1031
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
801
1032
|
export const amsTopTaskLinkDescriptionColor = "#000000";
|
|
802
|
-
export const amsTopTaskLinkDescriptionFontFamily =
|
|
803
|
-
|
|
1033
|
+
export const amsTopTaskLinkDescriptionFontFamily =
|
|
1034
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
1035
|
+
export const amsTopTaskLinkDescriptionFontSize =
|
|
1036
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
804
1037
|
export const amsTopTaskLinkDescriptionFontWeight = 400;
|
|
805
1038
|
export const amsTopTaskLinkDescriptionLineHeight = "1.6";
|
|
806
1039
|
export const amsTopTaskLinkLabelColor = "#004699";
|
|
807
|
-
export const amsTopTaskLinkLabelFontFamily =
|
|
808
|
-
|
|
1040
|
+
export const amsTopTaskLinkLabelFontFamily =
|
|
1041
|
+
"'Amsterdam Sans', Arial, sans-serif";
|
|
1042
|
+
export const amsTopTaskLinkLabelFontSize =
|
|
1043
|
+
"clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
809
1044
|
export const amsTopTaskLinkLabelFontWeight = 800;
|
|
810
1045
|
export const amsTopTaskLinkLabelLineHeight = "1.5";
|
|
811
1046
|
export const amsTopTaskLinkLabelTextDecorationLine = "none";
|
|
@@ -816,19 +1051,24 @@ export const amsTopTaskLinkLabelHoverTextDecorationLine = "underline";
|
|
|
816
1051
|
export const amsTopTaskLinkOutlineOffset = "0.125rem";
|
|
817
1052
|
export const amsUnorderedListColor = "#000000";
|
|
818
1053
|
export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
819
|
-
export const amsUnorderedListFontSize =
|
|
1054
|
+
export const amsUnorderedListFontSize =
|
|
1055
|
+
"clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
820
1056
|
export const amsUnorderedListFontWeight = 400;
|
|
821
|
-
export const amsUnorderedListGap =
|
|
1057
|
+
export const amsUnorderedListGap =
|
|
1058
|
+
"clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
822
1059
|
export const amsUnorderedListInverseColor = "#FFFFFF";
|
|
823
1060
|
export const amsUnorderedListLineHeight = "1.6";
|
|
824
1061
|
export const amsUnorderedListListStyleType = "'\\2022'";
|
|
825
1062
|
export const amsUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
|
|
826
1063
|
export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
|
|
827
|
-
export const amsUnorderedListUnorderedListGap =
|
|
1064
|
+
export const amsUnorderedListUnorderedListGap =
|
|
1065
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
828
1066
|
export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
|
|
829
1067
|
export const amsUnorderedListUnorderedListPaddingBlockEnd = "0";
|
|
830
|
-
export const amsUnorderedListUnorderedListPaddingBlockStart =
|
|
1068
|
+
export const amsUnorderedListUnorderedListPaddingBlockStart =
|
|
1069
|
+
"clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
831
1070
|
export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
832
1071
|
export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
833
|
-
export const amsUnorderedListSmallFontSize =
|
|
1072
|
+
export const amsUnorderedListSmallFontSize =
|
|
1073
|
+
"clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
834
1074
|
export const amsUnorderedListSmallLineHeight = "1.6";
|