@amsterdam/design-system-tokens 0.9.0 → 0.11.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/build.js +15 -14
- package/dist/compact.css +13 -9
- package/dist/compact.d.ts +10 -12
- package/dist/compact.json +12 -7
- package/dist/compact.mjs +13 -9
- package/dist/compact.scss +13 -9
- package/dist/compact.theme.css +13 -9
- package/dist/index.css +145 -108
- package/dist/index.d.ts +96 -41
- package/dist/index.json +254 -192
- package/dist/index.mjs +223 -186
- package/dist/index.scss +145 -108
- package/dist/index.theme.css +145 -108
- package/package.json +3 -2
- package/src/brand/ams/proportion.tokens.json +3 -3
- 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/components/ams/accordion.tokens.json +4 -4
- package/src/components/ams/alert.tokens.json +6 -3
- package/src/components/ams/avatar.tokens.json +26 -6
- package/src/components/ams/badge.tokens.json +1 -1
- package/src/components/ams/breadcrumb.tokens.json +4 -1
- package/src/components/ams/button.tokens.json +3 -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 +3 -3
- package/src/components/ams/dialog.tokens.json +8 -7
- 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/link-list.tokens.json +2 -2
- package/src/components/ams/mega-menu.tokens.json +1 -1
- package/src/components/ams/ordered-list.tokens.json +1 -1
- package/src/components/ams/page-menu.tokens.json +1 -1
- package/src/components/ams/pagination.tokens.json +2 -1
- package/src/components/ams/radio.tokens.json +1 -0
- package/src/components/ams/row.tokens.json +6 -5
- package/src/components/ams/search-field.tokens.json +4 -4
- 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 +34 -0
- 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 +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 05 Jun 2024 11:22:10 GMT
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
5
|
export const amsBorderWidthSm = "0.0625rem";
|
|
@@ -23,42 +22,37 @@ export const amsColorNeutralGrey1 = "#E8E8E8";
|
|
|
23
22
|
export const amsColorNeutralGrey2 = "#BEBEBE";
|
|
24
23
|
export const amsColorNeutralGrey3 = "#767676";
|
|
25
24
|
export const amsProportionXTall = "9 / 16";
|
|
26
|
-
export const amsProportionTall = "
|
|
25
|
+
export const amsProportionTall = "3 / 4";
|
|
27
26
|
export const amsProportionSquare = "1 / 1";
|
|
28
|
-
export const amsProportionWide = "
|
|
27
|
+
export const amsProportionWide = "4 / 3";
|
|
29
28
|
export const amsProportionXWide = "16 / 9";
|
|
30
|
-
export const amsProportion2xWide = "
|
|
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";
|
|
29
|
+
export const amsProportion2xWide = "16 / 5";
|
|
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";
|
|
@@ -81,51 +75,60 @@ export const amsLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
|
|
|
81
75
|
export const amsLinkAppearanceRegularHoverTextUnderlineOffset = "0.2778em";
|
|
82
76
|
export const amsLinkAppearanceSubtleTextDecorationLine = "none";
|
|
83
77
|
export const amsLinkAppearanceSubtleHoverTextDecorationLine = "underline";
|
|
84
|
-
export const amsAccordionGap = ".5rem";
|
|
78
|
+
export const amsAccordionGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
85
79
|
export const amsAccordionButtonColor = "#004699";
|
|
86
80
|
export const amsAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
87
|
-
export const amsAccordionButtonFontSize = "clamp(1.125rem, calc(
|
|
81
|
+
export const amsAccordionButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
88
82
|
export const amsAccordionButtonFontWeight = 800;
|
|
89
|
-
export const amsAccordionButtonGap = "
|
|
83
|
+
export const amsAccordionButtonGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
90
84
|
export const amsAccordionButtonLineHeight = "1.6";
|
|
91
|
-
export const amsAccordionButtonPaddingBlock = ".75rem";
|
|
85
|
+
export const amsAccordionButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
92
86
|
export const amsAccordionButtonPaddingInline = "0";
|
|
93
87
|
export const amsAccordionButtonFocusOutlineOffset = "0.125rem";
|
|
94
88
|
export const amsAccordionButtonHoverColor = "#102E62";
|
|
95
|
-
export const amsAccordionPanelPaddingBlock = "0
|
|
89
|
+
export const amsAccordionPanelPaddingBlock = "0";
|
|
96
90
|
export const amsAccordionPanelPaddingInline = "0";
|
|
97
91
|
export const amsAlertBorderWidth = "0.25rem";
|
|
98
92
|
export const amsAlertBorderStyle = "solid";
|
|
99
|
-
export const amsAlertGap = "
|
|
100
|
-
export const amsAlertPaddingBlock = "
|
|
101
|
-
export const amsAlertPaddingInline = "1.
|
|
93
|
+
export const amsAlertGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
94
|
+
export const amsAlertPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
95
|
+
export const amsAlertPaddingInline = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
102
96
|
export const amsAlertErrorBorderColor = "#EC0000";
|
|
103
97
|
export const amsAlertInfoBorderColor = "#004699";
|
|
104
98
|
export const amsAlertSuccessBorderColor = "#00A03C";
|
|
105
99
|
export const amsAlertWarningBorderColor = "#FF9100";
|
|
106
100
|
export const amsAlertCloseFill = "#000000";
|
|
107
101
|
export const amsAlertCloseHoverFill = "#004699";
|
|
102
|
+
export const amsAlertContentGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
108
103
|
export const amsAspectRatioXTall = "9 / 16";
|
|
109
|
-
export const amsAspectRatioTall = "
|
|
104
|
+
export const amsAspectRatioTall = "3 / 4";
|
|
110
105
|
export const amsAspectRatioSquare = "1 / 1";
|
|
111
|
-
export const amsAspectRatioWide = "
|
|
106
|
+
export const amsAspectRatioWide = "4 / 3";
|
|
112
107
|
export const amsAspectRatioXWide = "16 / 9";
|
|
113
|
-
export const amsAspectRatio2xWide = "
|
|
108
|
+
export const amsAspectRatio2xWide = "16 / 5";
|
|
114
109
|
export const amsAvatarAspectRatio = "1 / 1";
|
|
115
110
|
export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
116
|
-
export const amsAvatarFontSize = "clamp(0.
|
|
111
|
+
export const amsAvatarFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
117
112
|
export const amsAvatarFontWeight = 400;
|
|
118
113
|
export const amsAvatarLineHeight = "1.6";
|
|
119
|
-
export const amsAvatarPaddingBlock = "0.
|
|
120
|
-
export const amsAvatarPaddingInline = "0.
|
|
121
|
-
export const
|
|
122
|
-
export const
|
|
123
|
-
export const
|
|
124
|
-
export const
|
|
114
|
+
export const amsAvatarPaddingBlock = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
115
|
+
export const amsAvatarPaddingInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
116
|
+
export const amsAvatarBlackBackgroundColor = "#000000";
|
|
117
|
+
export const amsAvatarBlackColor = "#FFFFFF";
|
|
118
|
+
export const amsAvatarBlueBackgroundColor = "#004699";
|
|
119
|
+
export const amsAvatarBlueColor = "#FFFFFF";
|
|
125
120
|
export const amsAvatarDarkGreenBackgroundColor = "#00A03C";
|
|
126
121
|
export const amsAvatarDarkGreenColor = "#FFFFFF";
|
|
127
122
|
export const amsAvatarGreenBackgroundColor = "#BED200";
|
|
128
123
|
export const amsAvatarGreenColor = "#000000";
|
|
124
|
+
export const amsAvatarGrey1BackgroundColor = "#E8E8E8";
|
|
125
|
+
export const amsAvatarGrey1Color = "#000000";
|
|
126
|
+
export const amsAvatarGrey2BackgroundColor = "#BEBEBE";
|
|
127
|
+
export const amsAvatarGrey2Color = "#000000";
|
|
128
|
+
export const amsAvatarGrey3BackgroundColor = "#767676";
|
|
129
|
+
export const amsAvatarGrey3Color = "#FFFFFF";
|
|
130
|
+
export const amsAvatarLightBlueBackgroundColor = "#009DE6";
|
|
131
|
+
export const amsAvatarLightBlueColor = "#000000";
|
|
129
132
|
export const amsAvatarMagentaBackgroundColor = "#E50082";
|
|
130
133
|
export const amsAvatarMagentaColor = "#FFFFFF";
|
|
131
134
|
export const amsAvatarOrangeBackgroundColor = "#FF9100";
|
|
@@ -134,13 +137,15 @@ export const amsAvatarPurpleBackgroundColor = "#A00078";
|
|
|
134
137
|
export const amsAvatarPurpleColor = "#FFFFFF";
|
|
135
138
|
export const amsAvatarRedBackgroundColor = "#EC0000";
|
|
136
139
|
export const amsAvatarRedColor = "#FFFFFF";
|
|
140
|
+
export const amsAvatarWhiteBackgroundColor = "#FFFFFF";
|
|
141
|
+
export const amsAvatarWhiteColor = "#000000";
|
|
137
142
|
export const amsAvatarYellowBackgroundColor = "#FFE600";
|
|
138
143
|
export const amsAvatarYellowColor = "#000000";
|
|
139
144
|
export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
140
|
-
export const amsBadgeFontSize = "clamp(1.125rem, calc(
|
|
145
|
+
export const amsBadgeFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
141
146
|
export const amsBadgeFontWeight = 800;
|
|
142
147
|
export const amsBadgeLineHeight = "1.6";
|
|
143
|
-
export const amsBadgePaddingInline = ".
|
|
148
|
+
export const amsBadgePaddingInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
144
149
|
export const amsBadgeBlackBackgroundColor = "#000000";
|
|
145
150
|
export const amsBadgeBlackColor = "#FFFFFF";
|
|
146
151
|
export const amsBadgeBlueBackgroundColor = "#004699";
|
|
@@ -171,15 +176,18 @@ export const amsBadgeYellowBackgroundColor = "#FFE600";
|
|
|
171
176
|
export const amsBadgeYellowColor = "#000000";
|
|
172
177
|
export const amsBlockquoteColor = "#000000";
|
|
173
178
|
export const amsBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
174
|
-
export const amsBlockquoteFontSize = "clamp(1.
|
|
179
|
+
export const amsBlockquoteFontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
175
180
|
export const amsBlockquoteFontWeight = 800;
|
|
176
181
|
export const amsBlockquoteLineHeight = "1.3";
|
|
177
182
|
export const amsBlockquoteInverseColor = "#FFFFFF";
|
|
178
183
|
export const amsBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
179
|
-
export const amsBreadcrumbFontSize = "clamp(0.
|
|
184
|
+
export const amsBreadcrumbFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
180
185
|
export const amsBreadcrumbFontWeight = 400;
|
|
181
186
|
export const amsBreadcrumbLineHeight = "1.6";
|
|
182
187
|
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>\")";
|
|
188
|
+
export const amsBreadcrumbSeparatorBlockSize = "1ex";
|
|
189
|
+
export const amsBreadcrumbSeparatorInlineSize = "1ex";
|
|
190
|
+
export const amsBreadcrumbSeparatorMarginInline = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
183
191
|
export const amsBreadcrumbLinkColor = "#004699";
|
|
184
192
|
export const amsBreadcrumbLinkOutlineOffset = "0.125rem";
|
|
185
193
|
export const amsBreadcrumbLinkTextDecorationLine = "none";
|
|
@@ -189,12 +197,12 @@ export const amsBreadcrumbLinkHoverColor = "#102E62";
|
|
|
189
197
|
export const amsBreadcrumbLinkHoverTextDecorationLine = "underline";
|
|
190
198
|
export const amsButtonCursor = "pointer";
|
|
191
199
|
export const amsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
192
|
-
export const amsButtonFontSize = "clamp(1.125rem, calc(
|
|
200
|
+
export const amsButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
193
201
|
export const amsButtonLineHeight = "1.6";
|
|
194
|
-
export const amsButtonGap = "
|
|
195
|
-
export const amsButtonPaddingBlock = ".5rem";
|
|
196
|
-
export const amsButtonPaddingInline = "1rem";
|
|
202
|
+
export const amsButtonGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
197
203
|
export const amsButtonOutlineOffset = "0.125rem";
|
|
204
|
+
export const amsButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
205
|
+
export const amsButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
198
206
|
export const amsButtonDisabledCursor = "not-allowed";
|
|
199
207
|
export const amsButtonForcedColorModeBorder = "0.125rem solid";
|
|
200
208
|
export const amsButtonPrimaryBackgroundColor = "#004699";
|
|
@@ -219,6 +227,8 @@ export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
|
219
227
|
export const amsButtonTertiaryHoverColor = "#102E62";
|
|
220
228
|
export const amsButtonTertiaryDisabledBackgroundColor = "transparent";
|
|
221
229
|
export const amsButtonTertiaryDisabledColor = "#BEBEBE";
|
|
230
|
+
export const amsCardGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
231
|
+
export const amsCardHeadingGroupGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
222
232
|
export const amsCardLinkColor = "#004699";
|
|
223
233
|
export const amsCardLinkTextDecorationLine = "none";
|
|
224
234
|
export const amsCardLinkTextDecorationThickness = "0.125rem";
|
|
@@ -226,10 +236,17 @@ export const amsCardLinkTextUnderlineOffset = "0.3333em";
|
|
|
226
236
|
export const amsCardLinkHoverColor = "#102E62";
|
|
227
237
|
export const amsCardLinkHoverTextDecorationLine = "underline";
|
|
228
238
|
export const amsCardOutlineOffset = "0.125rem";
|
|
239
|
+
export const amsCharacterCountColor = "#000000";
|
|
240
|
+
export const amsCharacterCountFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
241
|
+
export const amsCharacterCountFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
242
|
+
export const amsCharacterCountFontWeight = 400;
|
|
243
|
+
export const amsCharacterCountLineHeight = "1.6";
|
|
244
|
+
export const amsCharacterCountErrorColor = "#EC0000";
|
|
229
245
|
export const amsCheckboxColor = "#000000";
|
|
230
246
|
export const amsCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
231
|
-
export const amsCheckboxFontSize = "clamp(1.125rem, calc(
|
|
247
|
+
export const amsCheckboxFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
232
248
|
export const amsCheckboxFontWeight = 400;
|
|
249
|
+
export const amsCheckboxGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
233
250
|
export const amsCheckboxLineHeight = "1.6";
|
|
234
251
|
export const amsCheckboxOutlineOffset = "0.125rem";
|
|
235
252
|
export const amsCheckboxCheckmarkBorderColor = "#004699";
|
|
@@ -257,21 +274,22 @@ export const amsCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
|
|
|
257
274
|
export const amsCheckboxDisabledColor = "#767676";
|
|
258
275
|
export const amsCheckboxHoverColor = "#102E62";
|
|
259
276
|
export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
|
|
260
|
-
export const
|
|
261
|
-
export const
|
|
262
|
-
export const
|
|
263
|
-
export const
|
|
264
|
-
export const
|
|
277
|
+
export const amsColumnGapNo = "0";
|
|
278
|
+
export const amsColumnGapXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
279
|
+
export const amsColumnGapSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
280
|
+
export const amsColumnGapMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
281
|
+
export const amsColumnGapLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
282
|
+
export const amsColumnGapXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
265
283
|
export const amsDateInputBackgroundColor = "#FFFFFF";
|
|
266
284
|
export const amsDateInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
267
285
|
export const amsDateInputColor = "#000000";
|
|
268
286
|
export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
269
|
-
export const amsDateInputFontSize = "clamp(1.125rem, calc(
|
|
287
|
+
export const amsDateInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
270
288
|
export const amsDateInputFontWeight = 400;
|
|
271
289
|
export const amsDateInputLineHeight = "1.6";
|
|
272
290
|
export const amsDateInputOutlineOffset = "0.125rem";
|
|
273
|
-
export const amsDateInputPaddingBlock = ".
|
|
274
|
-
export const amsDateInputPaddingInline = "1.5rem";
|
|
291
|
+
export const amsDateInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
292
|
+
export const amsDateInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
275
293
|
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>\")";
|
|
276
294
|
export const amsDateInputDisabledBackgroundColor = "#FFFFFF";
|
|
277
295
|
export const amsDateInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
@@ -283,105 +301,101 @@ export const amsDateInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
|
283
301
|
export const amsDateInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
284
302
|
export const amsDescriptionListColor = "#000000";
|
|
285
303
|
export const amsDescriptionListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
286
|
-
export const amsDescriptionListFontSize = "clamp(1.125rem, calc(
|
|
304
|
+
export const amsDescriptionListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
287
305
|
export const amsDescriptionListFontWeight = 400;
|
|
288
|
-
export const amsDescriptionListGap = "
|
|
306
|
+
export const amsDescriptionListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
289
307
|
export const amsDescriptionListInverseColor = "#FFFFFF";
|
|
290
308
|
export const amsDescriptionListLineHeight = "1.6";
|
|
291
|
-
export const amsDescriptionListRowGap = "
|
|
309
|
+
export const amsDescriptionListRowGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
292
310
|
export const amsDescriptionListDetailsFontWeight = 800;
|
|
293
|
-
export const amsDescriptionListDetailsPaddingInlineStart = "
|
|
311
|
+
export const amsDescriptionListDetailsPaddingInlineStart = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
294
312
|
export const amsDialogBackgroundColor = "#FFFFFF";
|
|
295
313
|
export const amsDialogBorder = "0";
|
|
296
|
-
export const
|
|
297
|
-
export const
|
|
298
|
-
export const
|
|
299
|
-
export const
|
|
300
|
-
export const
|
|
301
|
-
export const
|
|
302
|
-
export const
|
|
314
|
+
export const amsDialogInlineSize = "calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
315
|
+
export const amsDialogMaxBlockSize = "calc(100% - 2 * clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem))";
|
|
316
|
+
export const amsDialogMaxInlineSize = "48rem";
|
|
317
|
+
export const amsDialogFormGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
318
|
+
export const amsDialogFormPaddingBlock = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
319
|
+
export const amsDialogFormPaddingInline = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
320
|
+
export const amsDialogHeaderGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
321
|
+
export const amsDialogFooterGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
303
322
|
export const amsErrorMessageColor = "#EC0000";
|
|
304
323
|
export const amsErrorMessageFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
305
|
-
export const amsErrorMessageFontSize = "clamp(0.
|
|
324
|
+
export const amsErrorMessageFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
306
325
|
export const amsErrorMessageFontWeight = 400;
|
|
307
326
|
export const amsErrorMessageLineHeight = "1.6";
|
|
308
327
|
export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
309
|
-
export const amsFieldSetInvalidPaddingInlineStart = "
|
|
328
|
+
export const amsFieldSetInvalidPaddingInlineStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
310
329
|
export const amsFieldSetLegendColor = "#000000";
|
|
311
330
|
export const amsFieldSetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
312
|
-
export const amsFieldSetLegendFontSize = "clamp(1.
|
|
331
|
+
export const amsFieldSetLegendFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
313
332
|
export const amsFieldSetLegendFontWeight = 800;
|
|
314
333
|
export const amsFieldSetLegendLineHeight = "1.5";
|
|
315
|
-
export const amsFieldSetLegendMarginBlockEnd = "
|
|
316
|
-
export const amsFieldGap = ".75rem";
|
|
334
|
+
export const amsFieldSetLegendMarginBlockEnd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
335
|
+
export const amsFieldGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
317
336
|
export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #EC0000";
|
|
318
|
-
export const amsFieldInvalidPaddingInlineStart = "
|
|
337
|
+
export const amsFieldInvalidPaddingInlineStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
319
338
|
export const amsFileInputBackgroundColor = "#FFFFFF";
|
|
320
339
|
export const amsFileInputBorder = "0.0625rem dashed #767676";
|
|
321
340
|
export const amsFileInputColor = "#000000";
|
|
322
341
|
export const amsFileInputCursor = "pointer";
|
|
323
342
|
export const amsFileInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
324
|
-
export const amsFileInputFontSize = "clamp(1.125rem, calc(
|
|
343
|
+
export const amsFileInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
325
344
|
export const amsFileInputFontWeight = 400;
|
|
326
345
|
export const amsFileInputLineHeight = "1.6";
|
|
327
346
|
export const amsFileInputOutlineOffset = "0.125rem";
|
|
328
|
-
export const amsFileInputPaddingBlock = "
|
|
329
|
-
export const amsFileInputPaddingInline = "
|
|
347
|
+
export const amsFileInputPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
348
|
+
export const amsFileInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
330
349
|
export const amsFileInputDisabledColor = "#BEBEBE";
|
|
331
350
|
export const amsFileInputDisabledCursor = "not-allowed";
|
|
332
351
|
export const amsFileInputFileSelectorButtonBackgroundColor = "#FFFFFF";
|
|
333
352
|
export const amsFileInputFileSelectorButtonBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
334
353
|
export const amsFileInputFileSelectorButtonColor = "#004699";
|
|
335
354
|
export const amsFileInputFileSelectorButtonCursor = "pointer";
|
|
336
|
-
export const amsFileInputFileSelectorButtonMarginInlineEnd = "
|
|
337
|
-
export const amsFileInputFileSelectorButtonPaddingBlock = ".
|
|
338
|
-
export const amsFileInputFileSelectorButtonPaddingInline = "
|
|
355
|
+
export const amsFileInputFileSelectorButtonMarginInlineEnd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
356
|
+
export const amsFileInputFileSelectorButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
357
|
+
export const amsFileInputFileSelectorButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
339
358
|
export const amsFileInputFileSelectorButtonHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
|
|
340
359
|
export const amsFileInputFileSelectorButtonHoverColor = "#102E62";
|
|
341
360
|
export const amsFileInputFileSelectorButtonDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
|
|
342
361
|
export const amsFileInputFileSelectorButtonDisabledColor = "#BEBEBE";
|
|
343
362
|
export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
|
|
344
363
|
export const amsFileInputFileSelectorButtonForcedColorModeBorder = "0.125rem solid";
|
|
345
|
-
export const
|
|
346
|
-
export const
|
|
347
|
-
export const
|
|
348
|
-
export const
|
|
349
|
-
export const
|
|
350
|
-
export const
|
|
351
|
-
export const amsGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
|
|
352
|
-
export const amsGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
|
|
353
|
-
export const amsGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
|
|
354
|
-
export const amsGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
|
|
355
|
-
export const amsGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
|
|
364
|
+
export const amsFormErrorListOutlineOffset = "0.125rem";
|
|
365
|
+
export const amsGapXs = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
366
|
+
export const amsGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
367
|
+
export const amsGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
368
|
+
export const amsGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
369
|
+
export const amsGapXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
356
370
|
export const amsGridColumnCount = "4";
|
|
357
|
-
export const amsGridColumnGap = "clamp(1rem, calc(
|
|
358
|
-
export const amsGridPaddingBlockSm = "clamp(0.5rem, calc(
|
|
359
|
-
export const amsGridPaddingBlockMd = "clamp(1rem, calc(
|
|
360
|
-
export const amsGridPaddingBlockLg = "clamp(1.5rem, calc(
|
|
361
|
-
export const amsGridPaddingInline = "clamp(1.5rem, calc(
|
|
362
|
-
export const amsGridRowGapSm = "clamp(0.5rem, calc(
|
|
363
|
-
export const amsGridRowGapMd = "clamp(1rem, calc(
|
|
364
|
-
export const amsGridRowGapLg = "clamp(1.5rem, calc(
|
|
371
|
+
export const amsGridColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
372
|
+
export const amsGridPaddingBlockSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
373
|
+
export const amsGridPaddingBlockMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
374
|
+
export const amsGridPaddingBlockLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
375
|
+
export const amsGridPaddingInline = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
376
|
+
export const amsGridRowGapSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
377
|
+
export const amsGridRowGapMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
378
|
+
export const amsGridRowGapLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
365
379
|
export const amsGridMediumColumnCount = "8";
|
|
366
380
|
export const amsGridWideColumnCount = "12";
|
|
367
|
-
export const amsHeaderColumnGap = "clamp(1rem, calc(
|
|
368
|
-
export const amsHeaderPaddingBlock = "
|
|
381
|
+
export const amsHeaderColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
|
|
382
|
+
export const amsHeaderPaddingBlock = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
369
383
|
export const amsHeaderLogoLinkOutlineOffset = "0.125rem";
|
|
370
384
|
export const amsHeadingColor = "#000000";
|
|
371
385
|
export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
372
386
|
export const amsHeadingFontWeight = 800;
|
|
373
387
|
export const amsHeadingInverseColor = "#FFFFFF";
|
|
374
|
-
export const amsHeadingLevel1FontSize = "clamp(2.
|
|
388
|
+
export const amsHeadingLevel1FontSize = "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)";
|
|
375
389
|
export const amsHeadingLevel1LineHeight = "1.2";
|
|
376
|
-
export const amsHeadingLevel2FontSize = "clamp(1.
|
|
390
|
+
export const amsHeadingLevel2FontSize = "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)";
|
|
377
391
|
export const amsHeadingLevel2LineHeight = "1.25";
|
|
378
|
-
export const amsHeadingLevel3FontSize = "clamp(1.
|
|
392
|
+
export const amsHeadingLevel3FontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
379
393
|
export const amsHeadingLevel3LineHeight = "1.3";
|
|
380
|
-
export const amsHeadingLevel4FontSize = "clamp(1.
|
|
394
|
+
export const amsHeadingLevel4FontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
381
395
|
export const amsHeadingLevel4LineHeight = "1.5";
|
|
382
|
-
export const amsHeadingLevel5FontSize = "clamp(1.125rem, calc(
|
|
396
|
+
export const amsHeadingLevel5FontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
383
397
|
export const amsHeadingLevel5LineHeight = "1.6";
|
|
384
|
-
export const amsHeadingLevel6FontSize = "clamp(0.
|
|
398
|
+
export const amsHeadingLevel6FontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
385
399
|
export const amsHeadingLevel6LineHeight = "1.6";
|
|
386
400
|
export const amsIconButtonColor = "#004699";
|
|
387
401
|
export const amsIconButtonOutlineOffset = "0.125rem";
|
|
@@ -398,33 +412,33 @@ export const amsIconButtonOnBackgroundDarkHoverBackgroundColor = "#102E62";
|
|
|
398
412
|
export const amsIconButtonOnBackgroundDarkHoverColor = "#FFFFFF";
|
|
399
413
|
export const amsIconButtonOnBackgroundDarkDisabledColor = "#FFFFFF";
|
|
400
414
|
export const amsIconButtonOnBackgroundDarkDisabledBackgroundColor = "#BEBEBE";
|
|
401
|
-
export const amsIconSize3FontSize = "clamp(1.
|
|
415
|
+
export const amsIconSize3FontSize = "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)";
|
|
402
416
|
export const amsIconSize3LineHeight = "1.3";
|
|
403
|
-
export const amsIconSize4FontSize = "clamp(1.
|
|
417
|
+
export const amsIconSize4FontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
404
418
|
export const amsIconSize4LineHeight = "1.5";
|
|
405
|
-
export const amsIconSize5FontSize = "clamp(1.125rem, calc(
|
|
419
|
+
export const amsIconSize5FontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
406
420
|
export const amsIconSize5LineHeight = "1.6";
|
|
407
|
-
export const amsIconSize6FontSize = "clamp(0.
|
|
421
|
+
export const amsIconSize6FontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
408
422
|
export const amsIconSize6LineHeight = "1.6";
|
|
409
423
|
export const amsLabelColor = "#000000";
|
|
410
424
|
export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
411
|
-
export const amsLabelFontSize = "clamp(1.
|
|
425
|
+
export const amsLabelFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
412
426
|
export const amsLabelFontWeight = 800;
|
|
413
427
|
export const amsLabelLineHeight = "1.5";
|
|
414
|
-
export const amsLinkListGap = "0.
|
|
428
|
+
export const amsLinkListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
415
429
|
export const amsLinkListLinkColor = "#004699";
|
|
416
430
|
export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
417
|
-
export const amsLinkListLinkFontSize = "clamp(1.125rem, calc(
|
|
431
|
+
export const amsLinkListLinkFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
418
432
|
export const amsLinkListLinkFontWeight = 400;
|
|
419
|
-
export const amsLinkListLinkGap = "0.
|
|
433
|
+
export const amsLinkListLinkGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
420
434
|
export const amsLinkListLinkLineHeight = "1.6";
|
|
421
435
|
export const amsLinkListLinkOutlineOffset = "0.125rem";
|
|
422
436
|
export const amsLinkListLinkTextDecorationLine = "none";
|
|
423
437
|
export const amsLinkListLinkTextDecorationThickness = "0.125rem";
|
|
424
438
|
export const amsLinkListLinkTextUnderlineOffset = "0.3333em";
|
|
425
|
-
export const amsLinkListLinkSmallFontSize = "clamp(0.
|
|
439
|
+
export const amsLinkListLinkSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
426
440
|
export const amsLinkListLinkSmallLineHeight = "1.6";
|
|
427
|
-
export const amsLinkListLinkLargeFontSize = "clamp(1.
|
|
441
|
+
export const amsLinkListLinkLargeFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
428
442
|
export const amsLinkListLinkLargeLineHeight = "1.5";
|
|
429
443
|
export const amsLinkListLinkHoverColor = "#102E62";
|
|
430
444
|
export const amsLinkListLinkHoverTextDecorationLine = "underline";
|
|
@@ -446,7 +460,7 @@ export const amsLinkInlineLineHeight = "inherit";
|
|
|
446
460
|
export const amsLinkInlineHoverTextDecorationThickness = "0.1875rem";
|
|
447
461
|
export const amsLinkInlineHoverTextUnderlineOffset = "0.2778em";
|
|
448
462
|
export const amsLinkInlineVisitedColor = "#A00078";
|
|
449
|
-
export const amsLinkStandaloneFontSize = "clamp(1.125rem, calc(
|
|
463
|
+
export const amsLinkStandaloneFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
450
464
|
export const amsLinkStandaloneLineHeight = "1.6";
|
|
451
465
|
export const amsLinkStandaloneTextDecorationLine = "underline";
|
|
452
466
|
export const amsLinkStandaloneTextDecorationThickness = "0.125rem";
|
|
@@ -463,25 +477,25 @@ export const amsLogoBlockSize = "2.5rem";
|
|
|
463
477
|
export const amsLogoEmblemColor = "#EC0000";
|
|
464
478
|
export const amsLogoTitleColor = "#EC0000";
|
|
465
479
|
export const amsLogoSubsiteColor = "#000000";
|
|
466
|
-
export const amsMarginXs = "clamp(0.25rem, calc(0.
|
|
467
|
-
export const amsMarginSm = "clamp(0.5rem, calc(
|
|
468
|
-
export const amsMarginMd = "clamp(1rem, calc(
|
|
469
|
-
export const amsMarginLg = "clamp(1.5rem, calc(
|
|
470
|
-
export const amsMarginXl = "clamp(2rem, calc(
|
|
480
|
+
export const amsMarginXs = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
481
|
+
export const amsMarginSm = "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)";
|
|
482
|
+
export const amsMarginMd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
483
|
+
export const amsMarginLg = "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)";
|
|
484
|
+
export const amsMarginXl = "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)";
|
|
471
485
|
export const amsMarkBackgroundColor = "#FFE600";
|
|
472
|
-
export const amsMegaMenuListCategoryColumnGap = "clamp(1rem, calc(
|
|
486
|
+
export const amsMegaMenuListCategoryColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
|
|
473
487
|
export const amsMegaMenuListCategoryColumnWidth = "20rem";
|
|
474
|
-
export const amsMegaMenuListCategoryPaddingBlockStart = "
|
|
475
|
-
export const amsMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(
|
|
488
|
+
export const amsMegaMenuListCategoryPaddingBlockStart = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
489
|
+
export const amsMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)"; // Must have the same value as `ams.grid.row-gap.md`.
|
|
476
490
|
export const amsOrderedListColor = "#000000";
|
|
477
491
|
export const amsOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
478
|
-
export const amsOrderedListFontSize = "clamp(1.125rem, calc(
|
|
492
|
+
export const amsOrderedListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
479
493
|
export const amsOrderedListFontWeight = 400;
|
|
480
|
-
export const amsOrderedListGap = "0.75rem";
|
|
494
|
+
export const amsOrderedListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
481
495
|
export const amsOrderedListInverseColor = "#FFFFFF";
|
|
482
496
|
export const amsOrderedListLineHeight = "1.6";
|
|
483
497
|
export const amsOrderedListListStyleType = "decimal";
|
|
484
|
-
export const amsOrderedListSmallFontSize = "clamp(0.
|
|
498
|
+
export const amsOrderedListSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
485
499
|
export const amsOrderedListSmallLineHeight = "1.6";
|
|
486
500
|
export const amsOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
|
|
487
501
|
export const amsOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
|
|
@@ -490,17 +504,17 @@ export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Inden
|
|
|
490
504
|
export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
491
505
|
export const amsPageHeadingColor = "#000000";
|
|
492
506
|
export const amsPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
493
|
-
export const amsPageHeadingFontSize = "clamp(2.
|
|
507
|
+
export const amsPageHeadingFontSize = "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
494
508
|
export const amsPageHeadingFontWeight = 800;
|
|
495
509
|
export const amsPageHeadingInverseColor = "#FFFFFF";
|
|
496
|
-
export const amsPageHeadingLineHeight = "clamp(2.
|
|
497
|
-
export const amsPageMenuColumnGap = "clamp(1rem, calc(
|
|
498
|
-
export const amsPageMenuRowGap = "clamp(0.25rem, calc(0.
|
|
510
|
+
export const amsPageHeadingLineHeight = "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)";
|
|
511
|
+
export const amsPageMenuColumnGap = "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)";
|
|
512
|
+
export const amsPageMenuRowGap = "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)";
|
|
499
513
|
export const amsPageMenuItemColor = "#004699";
|
|
500
514
|
export const amsPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
501
|
-
export const amsPageMenuItemFontSize = "clamp(0.
|
|
515
|
+
export const amsPageMenuItemFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
502
516
|
export const amsPageMenuItemFontWeight = 400;
|
|
503
|
-
export const amsPageMenuItemGap = "0.
|
|
517
|
+
export const amsPageMenuItemGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
504
518
|
export const amsPageMenuItemLineHeight = "1.6";
|
|
505
519
|
export const amsPageMenuItemOutlineOffset = "0.125rem";
|
|
506
520
|
export const amsPageMenuItemTextDecorationLine = "none";
|
|
@@ -510,11 +524,12 @@ export const amsPageMenuItemHoverColor = "#102E62";
|
|
|
510
524
|
export const amsPageMenuItemHoverTextDecorationLine = "underline";
|
|
511
525
|
export const amsPaginationColor = "#004699";
|
|
512
526
|
export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
513
|
-
export const amsPaginationFontSize = "clamp(1.125rem, calc(
|
|
527
|
+
export const amsPaginationFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
514
528
|
export const amsPaginationFontWeight = 400;
|
|
515
529
|
export const amsPaginationLineHeight = "1.6";
|
|
530
|
+
export const amsPaginationButtonGap = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
516
531
|
export const amsPaginationButtonOutlineOffset = "0.125rem";
|
|
517
|
-
export const amsPaginationButtonPaddingInline = ".75rem";
|
|
532
|
+
export const amsPaginationButtonPaddingInline = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
518
533
|
export const amsPaginationButtonTextDecorationLine = "none";
|
|
519
534
|
export const amsPaginationButtonTextDecorationThickness = "0.125rem";
|
|
520
535
|
export const amsPaginationButtonTextUnderlineOffset = "0.3333em";
|
|
@@ -523,18 +538,19 @@ export const amsPaginationButtonHoverColor = "#102E62";
|
|
|
523
538
|
export const amsPaginationButtonHoverTextDecorationLine = "underline";
|
|
524
539
|
export const amsParagraphColor = "#000000";
|
|
525
540
|
export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
526
|
-
export const amsParagraphFontSize = "clamp(1.125rem, calc(
|
|
541
|
+
export const amsParagraphFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
527
542
|
export const amsParagraphFontWeight = 400;
|
|
528
543
|
export const amsParagraphLineHeight = "1.6";
|
|
529
544
|
export const amsParagraphInverseColor = "#FFFFFF";
|
|
530
|
-
export const amsParagraphSmallFontSize = "clamp(0.
|
|
545
|
+
export const amsParagraphSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
531
546
|
export const amsParagraphSmallLineHeight = "1.6";
|
|
532
|
-
export const amsParagraphLargeFontSize = "clamp(1.
|
|
547
|
+
export const amsParagraphLargeFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
533
548
|
export const amsParagraphLargeLineHeight = "1.5";
|
|
534
549
|
export const amsRadioColor = "#000000";
|
|
535
550
|
export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
536
|
-
export const amsRadioFontSize = "clamp(1.125rem, calc(
|
|
551
|
+
export const amsRadioFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
537
552
|
export const amsRadioFontWeight = 400;
|
|
553
|
+
export const amsRadioGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
538
554
|
export const amsRadioLineHeight = "1.6";
|
|
539
555
|
export const amsRadioOutlineOffset = "0.125rem";
|
|
540
556
|
export const amsRadioCircleBorderColor = "#004699";
|
|
@@ -553,50 +569,51 @@ export const amsRadioCircleInvalidHoverBorderColor = "#EC0000";
|
|
|
553
569
|
export const amsRadioDisabledColor = "#767676";
|
|
554
570
|
export const amsRadioHoverColor = "#102E62";
|
|
555
571
|
export const amsRadioHoverTextDecorationThickness = "0.125rem";
|
|
556
|
-
export const
|
|
557
|
-
export const
|
|
558
|
-
export const
|
|
559
|
-
export const
|
|
560
|
-
export const
|
|
572
|
+
export const amsRowGapNo = "0";
|
|
573
|
+
export const amsRowGapXs = "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
|
|
574
|
+
export const amsRowGapSm = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
575
|
+
export const amsRowGapMd = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
576
|
+
export const amsRowGapLg = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
577
|
+
export const amsRowGapXl = "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)";
|
|
561
578
|
export const amsScreenBackgroundColor = "#FFFFFF";
|
|
562
579
|
export const amsScreenWideMaxInlineSize = "100rem";
|
|
563
580
|
export const amsScreenXWideMaxInlineSize = "132rem";
|
|
564
581
|
export const amsSearchFieldButtonBackgroundColor = "#004699";
|
|
565
582
|
export const amsSearchFieldButtonColor = "#FFFFFF";
|
|
566
583
|
export const amsSearchFieldButtonOutlineOffset = "0.125rem";
|
|
567
|
-
export const amsSearchFieldButtonPaddingBlock = ".
|
|
568
|
-
export const amsSearchFieldButtonPaddingInline = ".
|
|
584
|
+
export const amsSearchFieldButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
585
|
+
export const amsSearchFieldButtonPaddingInline = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
569
586
|
export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
|
|
570
587
|
export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
|
|
571
588
|
export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
572
589
|
export const amsSearchFieldInputColor = "#000000";
|
|
573
590
|
export const amsSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
574
|
-
export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(
|
|
591
|
+
export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
575
592
|
export const amsSearchFieldInputFontWeight = 400;
|
|
576
593
|
export const amsSearchFieldInputLineHeight = "1.6";
|
|
577
594
|
export const amsSearchFieldInputOutlineOffset = "0.125rem";
|
|
578
|
-
export const amsSearchFieldInputPaddingBlock = ".
|
|
579
|
-
export const amsSearchFieldInputPaddingInline = "
|
|
595
|
+
export const amsSearchFieldInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
596
|
+
export const amsSearchFieldInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
580
597
|
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>\")";
|
|
581
|
-
export const amsSearchFieldInputCancelButtonBlockSize = "clamp(1.125rem, calc(
|
|
598
|
+
export const amsSearchFieldInputCancelButtonBlockSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
582
599
|
export const amsSearchFieldInputCancelButtonColor = "#004699";
|
|
583
|
-
export const amsSearchFieldInputCancelButtonInlineSize = "clamp(1.125rem, calc(
|
|
600
|
+
export const amsSearchFieldInputCancelButtonInlineSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
584
601
|
export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
585
602
|
export const amsSearchFieldInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
586
603
|
export const amsSearchFieldInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
587
604
|
export const amsSearchFieldInputPlaceholderColor = "#767676";
|
|
588
605
|
export const amsSelectBackgroundColor = "#FFFFFF";
|
|
589
606
|
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>\")";
|
|
590
|
-
export const amsSelectBackgroundPosition = "right
|
|
607
|
+
export const amsSelectBackgroundPosition = "right clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) center";
|
|
591
608
|
export const amsSelectBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
592
609
|
export const amsSelectColor = "#000000";
|
|
593
610
|
export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
594
|
-
export const amsSelectFontSize = "clamp(1.125rem, calc(
|
|
611
|
+
export const amsSelectFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
595
612
|
export const amsSelectFontWeight = 400;
|
|
596
613
|
export const amsSelectLineHeight = "1.6";
|
|
597
614
|
export const amsSelectOutlineOffset = "0.125rem";
|
|
598
|
-
export const amsSelectPaddingBlock = ".
|
|
599
|
-
export const amsSelectPaddingInline = "
|
|
615
|
+
export const amsSelectPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
616
|
+
export const amsSelectPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) calc(2 * clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem) + 1em)";
|
|
600
617
|
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>\")";
|
|
601
618
|
export const amsSelectDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
602
619
|
export const amsSelectDisabledColor = "#BEBEBE";
|
|
@@ -607,12 +624,12 @@ export const amsSelectOptionDisabledColor = "#BEBEBE";
|
|
|
607
624
|
export const amsSkipLinkBackgroundColor = "#004699";
|
|
608
625
|
export const amsSkipLinkColor = "#FFFFFF";
|
|
609
626
|
export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
610
|
-
export const amsSkipLinkFontSize = "clamp(0.
|
|
627
|
+
export const amsSkipLinkFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
611
628
|
export const amsSkipLinkFontWeight = 400;
|
|
612
629
|
export const amsSkipLinkLineHeight = "1.6";
|
|
613
630
|
export const amsSkipLinkOutlineOffset = "0.125rem";
|
|
614
|
-
export const amsSkipLinkPaddingBlock = ".
|
|
615
|
-
export const amsSkipLinkPaddingInline = "
|
|
631
|
+
export const amsSkipLinkPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
632
|
+
export const amsSkipLinkPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
616
633
|
export const amsSkipLinkHoverBackgroundColor = "#102E62";
|
|
617
634
|
export const amsSpotlightBlueBackgroundColor = "#009DE6";
|
|
618
635
|
export const amsSpotlightDarkBlueBackgroundColor = "#004699";
|
|
@@ -633,27 +650,46 @@ export const amsSwitchThumbHoverBoxShadow = "0 0 0 0.125rem #102E62";
|
|
|
633
650
|
export const amsSwitchThumbHoverColor = "#102E62";
|
|
634
651
|
export const amsSwitchCheckedBackgroundColor = "#004699";
|
|
635
652
|
export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
|
|
653
|
+
export const amsTableOfContentsFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
654
|
+
export const amsTableOfContentsFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
655
|
+
export const amsTableOfContentsFontWeight = 400;
|
|
656
|
+
export const amsTableOfContentsGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
657
|
+
export const amsTableOfContentsLineHeight = "1.6";
|
|
658
|
+
export const amsTableOfContentsLinkColor = "#004699";
|
|
659
|
+
export const amsTableOfContentsLinkOutlineOffset = "0.125rem";
|
|
660
|
+
export const amsTableOfContentsLinkTextDecorationLine = "none";
|
|
661
|
+
export const amsTableOfContentsLinkTextDecorationThickness = "0.125rem";
|
|
662
|
+
export const amsTableOfContentsLinkTextUnderlineOffset = "0.3333em";
|
|
663
|
+
export const amsTableOfContentsLinkHoverColor = "#102E62";
|
|
664
|
+
export const amsTableOfContentsLinkHoverTextDecorationLine = "underline";
|
|
665
|
+
export const amsTableOfContentsListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
666
|
+
export const amsTableOfContentsListListPaddingBlockStart = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
667
|
+
export const amsTableOfContentsListListPaddingInlineStart = "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)";
|
|
668
|
+
export const amsTableOfContentsHeadingFontWeight = 800;
|
|
669
|
+
export const amsTableOfContentsHeadingFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
670
|
+
export const amsTableOfContentsHeadingLineHeight = "1.5";
|
|
636
671
|
export const amsTableColor = "#000000";
|
|
637
672
|
export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
638
|
-
export const amsTableFontSize = "clamp(1.125rem, calc(
|
|
673
|
+
export const amsTableFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
639
674
|
export const amsTableFontWeight = 400;
|
|
640
675
|
export const amsTableLineHeight = "1.6";
|
|
641
676
|
export const amsTableCaptionFontWeight = 800;
|
|
642
677
|
export const amsTableCellBorderBlockEnd = "0.0625rem solid #E8E8E8";
|
|
643
|
-
export const amsTableCellPaddingBlock = "
|
|
644
|
-
export const amsTableCellPaddingInline = "
|
|
678
|
+
export const amsTableCellPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
679
|
+
export const amsTableCellPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
645
680
|
export const amsTableHeaderCellFontWeight = 800;
|
|
681
|
+
export const amsTabsGap = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
646
682
|
export const amsTabsListBackgroundColor = "#FFFFFF";
|
|
647
683
|
export const amsTabsListBorderBlockEnd = "0.125rem solid #004699";
|
|
648
684
|
export const amsTabsButtonColor = "#004699";
|
|
649
685
|
export const amsTabsButtonCursor = "pointer";
|
|
650
686
|
export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
651
|
-
export const amsTabsButtonFontSize = "clamp(1.125rem, calc(
|
|
687
|
+
export const amsTabsButtonFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
652
688
|
export const amsTabsButtonFontWeight = 400;
|
|
653
689
|
export const amsTabsButtonLineHeight = "1.6";
|
|
654
690
|
export const amsTabsButtonOutlineOffset = "-0.25rem";
|
|
655
|
-
export const amsTabsButtonPaddingBlock = ".
|
|
656
|
-
export const amsTabsButtonPaddingInline = "
|
|
691
|
+
export const amsTabsButtonPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
692
|
+
export const amsTabsButtonPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
657
693
|
export const amsTabsButtonHoverColor = "#102E62";
|
|
658
694
|
export const amsTabsButtonHoverBoxShadow = "inset 0 -0.125rem 0 0 #102E62";
|
|
659
695
|
export const amsTabsButtonSelectedBackgroundColor = "#004699";
|
|
@@ -664,13 +700,13 @@ export const amsTextAreaBackgroundColor = "#FFFFFF";
|
|
|
664
700
|
export const amsTextAreaBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
665
701
|
export const amsTextAreaColor = "#000000";
|
|
666
702
|
export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
667
|
-
export const amsTextAreaFontSize = "clamp(1.125rem, calc(
|
|
703
|
+
export const amsTextAreaFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
668
704
|
export const amsTextAreaFontWeight = 400;
|
|
669
705
|
export const amsTextAreaLineHeight = "1.6";
|
|
670
|
-
export const amsTextAreaMinBlockSize = "calc(1.6 * 1em + 2 * 0.
|
|
706
|
+
export const amsTextAreaMinBlockSize = "calc(1.6 * 1em + 2 * clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem))";
|
|
671
707
|
export const amsTextAreaOutlineOffset = "0.125rem";
|
|
672
|
-
export const amsTextAreaPaddingBlock = "0.
|
|
673
|
-
export const amsTextAreaPaddingInline = "
|
|
708
|
+
export const amsTextAreaPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
709
|
+
export const amsTextAreaPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
674
710
|
export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
|
|
675
711
|
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
676
712
|
export const amsTextAreaDisabledColor = "#BEBEBE";
|
|
@@ -683,12 +719,12 @@ export const amsTextInputBackgroundColor = "#FFFFFF";
|
|
|
683
719
|
export const amsTextInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
684
720
|
export const amsTextInputColor = "#000000";
|
|
685
721
|
export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
686
|
-
export const amsTextInputFontSize = "clamp(1.125rem, calc(
|
|
722
|
+
export const amsTextInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
687
723
|
export const amsTextInputFontWeight = 400;
|
|
688
724
|
export const amsTextInputLineHeight = "1.6";
|
|
689
725
|
export const amsTextInputOutlineOffset = "0.125rem";
|
|
690
|
-
export const amsTextInputPaddingBlock = ".
|
|
691
|
-
export const amsTextInputPaddingInline = "
|
|
726
|
+
export const amsTextInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
727
|
+
export const amsTextInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
692
728
|
export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
|
|
693
729
|
export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
694
730
|
export const amsTextInputDisabledColor = "#BEBEBE";
|
|
@@ -700,12 +736,12 @@ export const amsTimeInputBackgroundColor = "#FFFFFF";
|
|
|
700
736
|
export const amsTimeInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
701
737
|
export const amsTimeInputColor = "#000000";
|
|
702
738
|
export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
703
|
-
export const amsTimeInputFontSize = "clamp(1.125rem, calc(
|
|
739
|
+
export const amsTimeInputFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
704
740
|
export const amsTimeInputFontWeight = 400;
|
|
705
741
|
export const amsTimeInputLineHeight = "1.6";
|
|
706
742
|
export const amsTimeInputOutlineOffset = "0.125rem";
|
|
707
|
-
export const amsTimeInputPaddingBlock = ".
|
|
708
|
-
export const amsTimeInputPaddingInline = "
|
|
743
|
+
export const amsTimeInputPaddingBlock = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
744
|
+
export const amsTimeInputPaddingInline = "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
|
|
709
745
|
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>\")";
|
|
710
746
|
export const amsTimeInputDisabledBackgroundColor = "#FFFFFF";
|
|
711
747
|
export const amsTimeInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
@@ -715,14 +751,15 @@ export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
|
715
751
|
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>\")";
|
|
716
752
|
export const amsTimeInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
717
753
|
export const amsTimeInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
754
|
+
export const amsTopTaskLinkGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
718
755
|
export const amsTopTaskLinkDescriptionColor = "#000000";
|
|
719
756
|
export const amsTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
720
|
-
export const amsTopTaskLinkDescriptionFontSize = "clamp(0.
|
|
757
|
+
export const amsTopTaskLinkDescriptionFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
721
758
|
export const amsTopTaskLinkDescriptionFontWeight = 400;
|
|
722
759
|
export const amsTopTaskLinkDescriptionLineHeight = "1.6";
|
|
723
760
|
export const amsTopTaskLinkLabelColor = "#004699";
|
|
724
761
|
export const amsTopTaskLinkLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
725
|
-
export const amsTopTaskLinkLabelFontSize = "clamp(1.
|
|
762
|
+
export const amsTopTaskLinkLabelFontSize = "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)";
|
|
726
763
|
export const amsTopTaskLinkLabelFontWeight = 800;
|
|
727
764
|
export const amsTopTaskLinkLabelLineHeight = "1.5";
|
|
728
765
|
export const amsTopTaskLinkLabelTextDecorationLine = "none";
|
|
@@ -733,9 +770,9 @@ export const amsTopTaskLinkLabelHoverTextDecorationLine = "underline";
|
|
|
733
770
|
export const amsTopTaskLinkOutlineOffset = "0.125rem";
|
|
734
771
|
export const amsUnorderedListColor = "#000000";
|
|
735
772
|
export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
736
|
-
export const amsUnorderedListFontSize = "clamp(1.125rem, calc(
|
|
773
|
+
export const amsUnorderedListFontSize = "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)";
|
|
737
774
|
export const amsUnorderedListFontWeight = 400;
|
|
738
|
-
export const amsUnorderedListGap = "0.75rem";
|
|
775
|
+
export const amsUnorderedListGap = "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
|
|
739
776
|
export const amsUnorderedListInverseColor = "#FFFFFF";
|
|
740
777
|
export const amsUnorderedListLineHeight = "1.6";
|
|
741
778
|
export const amsUnorderedListListStyleType = "'\\2022'";
|
|
@@ -744,5 +781,5 @@ export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total l
|
|
|
744
781
|
export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
|
|
745
782
|
export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
746
783
|
export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
747
|
-
export const amsUnorderedListSmallFontSize = "clamp(0.
|
|
784
|
+
export const amsUnorderedListSmallFontSize = "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)";
|
|
748
785
|
export const amsUnorderedListSmallLineHeight = "1.6";
|