@amsterdam/design-system-tokens 0.7.1 → 0.8.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 +27 -0
- package/dist/compact.css +1 -1
- package/dist/compact.d.ts +1 -1
- package/dist/compact.mjs +1 -1
- package/dist/compact.scss +1 -1
- package/dist/compact.theme.css +1 -1
- package/dist/index.css +145 -64
- package/dist/index.d.ts +159 -22
- package/dist/index.json +191 -54
- package/dist/index.mjs +129 -48
- package/dist/index.scss +145 -64
- package/dist/index.theme.css +145 -64
- package/package.json +1 -1
- package/src/brand/ams/border.tokens.json +12 -0
- package/src/common/ams/link-appearance.tokens.json +2 -2
- package/src/components/ams/accordion.tokens.json +6 -4
- package/src/components/ams/alert.tokens.json +1 -1
- package/src/components/ams/button.tokens.json +11 -8
- package/src/components/ams/checkbox.tokens.json +6 -2
- package/src/components/ams/date-input.tokens.json +45 -0
- package/src/components/ams/description-list.tokens.json +20 -0
- package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
- package/src/components/ams/page-menu.tokens.json +2 -2
- package/src/components/ams/radio.tokens.json +4 -1
- package/src/components/ams/screen.tokens.json +1 -0
- package/src/components/ams/search-field.tokens.json +7 -6
- package/src/components/ams/select.tokens.json +41 -0
- package/src/components/ams/skip-link.tokens.json +1 -1
- package/src/components/ams/table.tokens.json +2 -2
- package/src/components/ams/tabs.tokens.json +3 -4
- package/src/components/ams/text-area.tokens.json +9 -8
- package/src/components/ams/text-input.tokens.json +8 -7
- package/src/components/ams/time-input.tokens.json +45 -0
- package/src/common/ams/border.tokens.json +0 -9
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 22 Apr 2024 09:30:48 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
export const amsBorderWidthSm = "0.0625rem";
|
|
7
|
+
export const amsBorderWidthMd = "0.125rem";
|
|
8
|
+
export const amsBorderWidthLg = "0.1875rem";
|
|
9
|
+
export const amsBorderWidthXl = "0.25rem";
|
|
6
10
|
export const amsColorPrimaryBlack = "#000000";
|
|
7
11
|
export const amsColorPrimaryWhite = "#FFFFFF";
|
|
8
12
|
export const amsColorPrimaryBlue = "#004699";
|
|
@@ -62,9 +66,6 @@ export const amsActionDisabledCursor = "not-allowed";
|
|
|
62
66
|
export const amsActionInertCursor = "default";
|
|
63
67
|
export const amsActionNavigateCursor = "pointer";
|
|
64
68
|
export const amsActionSubmitCursor = "pointer";
|
|
65
|
-
export const amsBorderWidthSm = "1px";
|
|
66
|
-
export const amsBorderWidthMd = "2px";
|
|
67
|
-
export const amsBorderWidthLg = "3px";
|
|
68
69
|
export const amsFocusOutlineOffset = "2px";
|
|
69
70
|
export const amsHyphenationHyphenateLimitChars = "12 8 4";
|
|
70
71
|
export const amsHyphenationHyphens = "auto";
|
|
@@ -80,18 +81,20 @@ export const amsLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
|
|
|
80
81
|
export const amsLinkAppearanceRegularHoverTextUnderlineOffset = "0.3125rem";
|
|
81
82
|
export const amsLinkAppearanceSubtleTextDecorationLine = "none";
|
|
82
83
|
export const amsLinkAppearanceSubtleHoverTextDecorationLine = "underline";
|
|
84
|
+
export const amsAccordionGap = ".5rem";
|
|
83
85
|
export const amsAccordionButtonColor = "#004699";
|
|
84
86
|
export const amsAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
85
87
|
export const amsAccordionButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
86
88
|
export const amsAccordionButtonFontWeight = 800;
|
|
89
|
+
export const amsAccordionButtonGap = "1rem";
|
|
87
90
|
export const amsAccordionButtonLineHeight = "1.6";
|
|
88
91
|
export const amsAccordionButtonPaddingBlock = ".75rem";
|
|
89
|
-
export const amsAccordionButtonPaddingInline = "
|
|
92
|
+
export const amsAccordionButtonPaddingInline = "0";
|
|
90
93
|
export const amsAccordionButtonFocusOutlineOffset = "2px";
|
|
91
|
-
export const
|
|
92
|
-
export const amsAccordionPanelPaddingBlock = "1rem";
|
|
93
|
-
export const amsAccordionPanelPaddingInline = "
|
|
94
|
-
export const amsAlertBorderWidth = "
|
|
94
|
+
export const amsAccordionButtonHoverColor = "#102E62";
|
|
95
|
+
export const amsAccordionPanelPaddingBlock = "0 1rem";
|
|
96
|
+
export const amsAccordionPanelPaddingInline = "0";
|
|
97
|
+
export const amsAlertBorderWidth = "0.25rem";
|
|
95
98
|
export const amsAlertBorderStyle = "solid";
|
|
96
99
|
export const amsAlertGap = "1rem";
|
|
97
100
|
export const amsAlertPaddingBlock = "1rem";
|
|
@@ -181,25 +184,26 @@ export const amsButtonPaddingBlock = ".5rem";
|
|
|
181
184
|
export const amsButtonPaddingInline = "1rem";
|
|
182
185
|
export const amsButtonOutlineOffset = "2px";
|
|
183
186
|
export const amsButtonDisabledCursor = "not-allowed";
|
|
187
|
+
export const amsButtonForcedColorModeBorder = "0.125rem solid";
|
|
184
188
|
export const amsButtonPrimaryBackgroundColor = "#004699";
|
|
185
|
-
export const amsButtonPrimaryBoxShadow = "inset 0 0 0
|
|
189
|
+
export const amsButtonPrimaryBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
186
190
|
export const amsButtonPrimaryColor = "#FFFFFF";
|
|
187
191
|
export const amsButtonPrimaryDisabledBackgroundColor = "#BEBEBE";
|
|
188
|
-
export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0
|
|
192
|
+
export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
|
|
189
193
|
export const amsButtonPrimaryHoverBackgroundColor = "#102E62";
|
|
190
|
-
export const amsButtonPrimaryHoverBoxShadow = "inset 0 0 0
|
|
194
|
+
export const amsButtonPrimaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
191
195
|
export const amsButtonSecondaryBackgroundColor = "#FFFFFF";
|
|
192
196
|
export const amsButtonSecondaryColor = "#004699";
|
|
193
|
-
export const amsButtonSecondaryBoxShadow = "inset 0 0 0
|
|
194
|
-
export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0
|
|
197
|
+
export const amsButtonSecondaryBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
198
|
+
export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
|
|
195
199
|
export const amsButtonSecondaryHoverColor = "#102E62";
|
|
196
200
|
export const amsButtonSecondaryDisabledBackgroundColor = "#FFFFFF";
|
|
197
|
-
export const amsButtonSecondaryDisabledBoxShadow = "inset 0 0 0
|
|
201
|
+
export const amsButtonSecondaryDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
|
|
198
202
|
export const amsButtonSecondaryDisabledColor = "#BEBEBE";
|
|
199
|
-
export const amsButtonSecondaryFocusBoxShadow = "inset 0 0 0
|
|
203
|
+
export const amsButtonSecondaryFocusBoxShadow = "inset 0 0 0 0.125rem #004699";
|
|
200
204
|
export const amsButtonTertiaryBackgroundColor = "transparent";
|
|
201
205
|
export const amsButtonTertiaryColor = "#004699";
|
|
202
|
-
export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0
|
|
206
|
+
export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
|
|
203
207
|
export const amsButtonTertiaryHoverColor = "#102E62";
|
|
204
208
|
export const amsButtonTertiaryDisabledBackgroundColor = "transparent";
|
|
205
209
|
export const amsButtonTertiaryDisabledColor = "#BEBEBE";
|
|
@@ -217,15 +221,18 @@ export const amsCheckboxFontWeight = 400;
|
|
|
217
221
|
export const amsCheckboxLineHeight = "1.6";
|
|
218
222
|
export const amsCheckboxOutlineOffset = "2px";
|
|
219
223
|
export const amsCheckboxCheckmarkBorderColor = "#004699";
|
|
224
|
+
export const amsCheckboxCheckmarkBorderWidth = "0.125rem";
|
|
220
225
|
export const amsCheckboxCheckmarkCheckedBackgroundColor = "#004699";
|
|
221
226
|
export const amsCheckboxCheckmarkCheckedBackgroundImage = "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\")";
|
|
222
227
|
export const amsCheckboxCheckmarkCheckedHoverBackgroundColor = "#102E62";
|
|
223
228
|
export const amsCheckboxCheckmarkDisabledBorderColor = "#767676";
|
|
229
|
+
export const amsCheckboxCheckmarkDisabledBorderWidth = "0.125rem";
|
|
224
230
|
export const amsCheckboxCheckmarkDisabledCheckedBackgroundColor = "#767676";
|
|
225
231
|
export const amsCheckboxCheckmarkDisabledCheckedHoverBackgroundColor = "#767676";
|
|
226
232
|
export const amsCheckboxCheckmarkDisabledIndeterminateBackgroundColor = "#767676";
|
|
227
233
|
export const amsCheckboxCheckmarkDisabledIndeterminateHoverBackgroundColor = "#767676";
|
|
228
234
|
export const amsCheckboxCheckmarkHoverBorderColor = "#102E62";
|
|
235
|
+
export const amsCheckboxCheckmarkHoverBorderWidth = "0.1875rem";
|
|
229
236
|
export const amsCheckboxCheckmarkInvalidBorderColor = "#EC0000";
|
|
230
237
|
export const amsCheckboxCheckmarkInvalidCheckedBackgroundColor = "#EC0000";
|
|
231
238
|
export const amsCheckboxCheckmarkInvalidCheckedHoverBackgroundColor = "#EC0000";
|
|
@@ -237,11 +244,41 @@ export const amsCheckboxCheckmarkIndeterminateBackgroundImage = "url(\"data:imag
|
|
|
237
244
|
export const amsCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
|
|
238
245
|
export const amsCheckboxDisabledColor = "#767676";
|
|
239
246
|
export const amsCheckboxHoverColor = "#102E62";
|
|
247
|
+
export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
|
|
240
248
|
export const amsColumnGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
|
|
241
249
|
export const amsColumnGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
|
|
242
250
|
export const amsColumnGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
|
|
243
251
|
export const amsColumnGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
|
|
244
252
|
export const amsColumnGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
|
|
253
|
+
export const amsDateInputBackgroundColor = "#FFFFFF";
|
|
254
|
+
export const amsDateInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
255
|
+
export const amsDateInputColor = "#000000";
|
|
256
|
+
export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
257
|
+
export const amsDateInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
258
|
+
export const amsDateInputFontWeight = 400;
|
|
259
|
+
export const amsDateInputLineHeight = "1.6";
|
|
260
|
+
export const amsDateInputOutlineOffset = "2px";
|
|
261
|
+
export const amsDateInputPaddingBlock = ".5rem";
|
|
262
|
+
export const amsDateInputPaddingInline = "1.5rem";
|
|
263
|
+
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>\")";
|
|
264
|
+
export const amsDateInputDisabledBackgroundColor = "#FFFFFF";
|
|
265
|
+
export const amsDateInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
266
|
+
export const amsDateInputDisabledColor = "#BEBEBE";
|
|
267
|
+
export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage = "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>\")";
|
|
268
|
+
export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
269
|
+
export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage = "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>\")";
|
|
270
|
+
export const amsDateInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
271
|
+
export const amsDateInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
272
|
+
export const amsDescriptionListColor = "#000000";
|
|
273
|
+
export const amsDescriptionListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
274
|
+
export const amsDescriptionListFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
275
|
+
export const amsDescriptionListFontWeight = 400;
|
|
276
|
+
export const amsDescriptionListGap = "1rem";
|
|
277
|
+
export const amsDescriptionListInverseColor = "#FFFFFF";
|
|
278
|
+
export const amsDescriptionListLineHeight = "1.6";
|
|
279
|
+
export const amsDescriptionListRowGap = "1rem";
|
|
280
|
+
export const amsDescriptionListDetailsFontWeight = 800;
|
|
281
|
+
export const amsDescriptionListDetailsPaddingInlineStart = "2rem";
|
|
245
282
|
export const amsDialogBackgroundColor = "#FFFFFF";
|
|
246
283
|
export const amsDialogBorder = "0";
|
|
247
284
|
export const amsDialogMaxInlineSize = "min(87.69vw, 45rem)";
|
|
@@ -262,11 +299,6 @@ export const amsFormFieldCharacterCounterFontSize = "clamp(0.964rem, calc(0.295v
|
|
|
262
299
|
export const amsFormFieldCharacterCounterFontWeight = 400;
|
|
263
300
|
export const amsFormFieldCharacterCounterLineHeight = "1.6";
|
|
264
301
|
export const amsFormFieldCharacterCounterErrorColor = "#EC0000";
|
|
265
|
-
export const amsFormLabelColor = "#000000";
|
|
266
|
-
export const amsFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
267
|
-
export const amsFormLabelFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
|
|
268
|
-
export const amsFormLabelFontWeight = 800;
|
|
269
|
-
export const amsFormLabelLineHeight = "1.5";
|
|
270
302
|
export const amsGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
|
|
271
303
|
export const amsGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
|
|
272
304
|
export const amsGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
|
|
@@ -325,6 +357,11 @@ export const amsIconSize5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1
|
|
|
325
357
|
export const amsIconSize5LineHeight = "1.6";
|
|
326
358
|
export const amsIconSize6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
|
|
327
359
|
export const amsIconSize6LineHeight = "1.6";
|
|
360
|
+
export const amsLabelColor = "#000000";
|
|
361
|
+
export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
362
|
+
export const amsLabelFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
|
|
363
|
+
export const amsLabelFontWeight = 800;
|
|
364
|
+
export const amsLabelLineHeight = "1.5";
|
|
328
365
|
export const amsLinkListGap = "0.5em";
|
|
329
366
|
export const amsLinkListLinkColor = "#004699";
|
|
330
367
|
export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
@@ -406,8 +443,8 @@ export const amsPageHeadingFontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem),
|
|
|
406
443
|
export const amsPageHeadingFontWeight = 800;
|
|
407
444
|
export const amsPageHeadingInverseColor = "#FFFFFF";
|
|
408
445
|
export const amsPageHeadingLineHeight = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
|
|
409
|
-
export const amsPageMenuColumnGap = "
|
|
410
|
-
export const amsPageMenuRowGap = "0.
|
|
446
|
+
export const amsPageMenuColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
|
|
447
|
+
export const amsPageMenuRowGap = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
|
|
411
448
|
export const amsPageMenuItemColor = "#004699";
|
|
412
449
|
export const amsPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
413
450
|
export const amsPageMenuItemFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
|
|
@@ -450,9 +487,11 @@ export const amsRadioFontWeight = 400;
|
|
|
450
487
|
export const amsRadioLineHeight = "1.6";
|
|
451
488
|
export const amsRadioOutlineOffset = "2px";
|
|
452
489
|
export const amsRadioCircleBorderColor = "#004699";
|
|
490
|
+
export const amsRadioCircleBorderWidth = "0.125rem";
|
|
453
491
|
export const amsRadioCircleCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
|
|
454
492
|
export const amsRadioCircleCheckedHoverBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
|
|
455
493
|
export const amsRadioCircleDisabledBorderColor = "#767676";
|
|
494
|
+
export const amsRadioCircleDisabledBorderWidth = "0.125rem";
|
|
456
495
|
export const amsRadioCircleDisabledCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
|
|
457
496
|
export const amsRadioCircleDisabledCheckedHoverBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
|
|
458
497
|
export const amsRadioCircleHoverBorderColor = "#102E62";
|
|
@@ -462,11 +501,13 @@ export const amsRadioCircleInvalidCheckedHoverBackgroundImage = "url(\"data:imag
|
|
|
462
501
|
export const amsRadioCircleInvalidHoverBorderColor = "#EC0000";
|
|
463
502
|
export const amsRadioDisabledColor = "#767676";
|
|
464
503
|
export const amsRadioHoverColor = "#102E62";
|
|
504
|
+
export const amsRadioHoverTextDecorationThickness = "0.125rem";
|
|
465
505
|
export const amsRowGapXs = ".5rem";
|
|
466
506
|
export const amsRowGapSm = ".75rem";
|
|
467
507
|
export const amsRowGapMd = "1rem";
|
|
468
508
|
export const amsRowGapLg = "1.5rem";
|
|
469
509
|
export const amsRowGapXl = "2rem";
|
|
510
|
+
export const amsScreenBackgroundColor = "#FFFFFF";
|
|
470
511
|
export const amsScreenWideMaxWidth = "100rem";
|
|
471
512
|
export const amsScreenXWideMaxWidth = "132rem";
|
|
472
513
|
export const amsSearchFieldButtonBackgroundColor = "#004699";
|
|
@@ -475,10 +516,11 @@ export const amsSearchFieldButtonOutlineOffset = "2px";
|
|
|
475
516
|
export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
|
|
476
517
|
export const amsSearchFieldButtonPaddingBlock = ".5rem";
|
|
477
518
|
export const amsSearchFieldButtonPaddingInline = ".5rem";
|
|
478
|
-
export const
|
|
519
|
+
export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
|
|
520
|
+
export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
479
521
|
export const amsSearchFieldInputColor = "#000000";
|
|
480
522
|
export const amsSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
481
|
-
export const amsSearchFieldInputFontSize = "clamp(
|
|
523
|
+
export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
482
524
|
export const amsSearchFieldInputFontWeight = 400;
|
|
483
525
|
export const amsSearchFieldInputLineHeight = "1.6";
|
|
484
526
|
export const amsSearchFieldInputOutlineOffset = "2px";
|
|
@@ -486,15 +528,34 @@ export const amsSearchFieldInputPaddingBlock = ".5rem";
|
|
|
486
528
|
export const amsSearchFieldInputPaddingInline = "1rem";
|
|
487
529
|
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>\")";
|
|
488
530
|
export const amsSearchFieldInputCancelButtonColor = "#004699";
|
|
489
|
-
export const amsSearchFieldInputCancelButtonHeight = "clamp(
|
|
490
|
-
export const amsSearchFieldInputCancelButtonWidth = "clamp(
|
|
491
|
-
export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0
|
|
531
|
+
export const amsSearchFieldInputCancelButtonHeight = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
532
|
+
export const amsSearchFieldInputCancelButtonWidth = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
533
|
+
export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
492
534
|
export const amsSearchFieldInputPlaceholderColor = "#767676";
|
|
535
|
+
export const amsSelectBackgroundColor = "#FFFFFF";
|
|
536
|
+
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>\")";
|
|
537
|
+
export const amsSelectBackgroundPosition = "right 1rem center";
|
|
538
|
+
export const amsSelectBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
539
|
+
export const amsSelectColor = "#000000";
|
|
540
|
+
export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
541
|
+
export const amsSelectFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
542
|
+
export const amsSelectFontWeight = 400;
|
|
543
|
+
export const amsSelectLineHeight = "1.6";
|
|
544
|
+
export const amsSelectOutlineOffset = "2px";
|
|
545
|
+
export const amsSelectPaddingBlock = ".5rem";
|
|
546
|
+
export const amsSelectPaddingInline = "1rem calc(2 * 1rem + 1em)";
|
|
547
|
+
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>\")";
|
|
548
|
+
export const amsSelectDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
549
|
+
export const amsSelectDisabledColor = "#BEBEBE";
|
|
550
|
+
export const amsSelectHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
551
|
+
export const amsSelectInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
552
|
+
export const amsSelectInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
553
|
+
export const amsSelectOptionDisabledColor = "#BEBEBE";
|
|
493
554
|
export const amsSkipLinkBackgroundColor = "#004699";
|
|
494
555
|
export const amsSkipLinkColor = "#FFFFFF";
|
|
495
556
|
export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
496
|
-
export const amsSkipLinkFontWeight = 400;
|
|
497
557
|
export const amsSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
|
|
558
|
+
export const amsSkipLinkFontWeight = 400;
|
|
498
559
|
export const amsSkipLinkLineHeight = "1.6";
|
|
499
560
|
export const amsSkipLinkOutlineOffset = "2px";
|
|
500
561
|
export const amsSkipLinkPaddingBlock = ".5rem";
|
|
@@ -520,22 +581,21 @@ export const amsSwitchOutlineOffset = "2px";
|
|
|
520
581
|
export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
|
|
521
582
|
export const amsTableColor = "#000000";
|
|
522
583
|
export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
523
|
-
export const amsTableFontWeight = 400;
|
|
524
584
|
export const amsTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
585
|
+
export const amsTableFontWeight = 400;
|
|
525
586
|
export const amsTableLineHeight = "1.6";
|
|
526
587
|
export const amsTableCaptionFontWeight = 800;
|
|
527
|
-
export const amsTableCellBorderBottom = "
|
|
588
|
+
export const amsTableCellBorderBottom = "0.0625rem solid #E8E8E8";
|
|
528
589
|
export const amsTableCellPaddingBlock = "1rem";
|
|
529
590
|
export const amsTableCellPaddingInline = "1rem";
|
|
530
591
|
export const amsTableHeaderCellFontWeight = 800;
|
|
531
|
-
export const
|
|
532
|
-
export const
|
|
533
|
-
export const amsTabsButtonBorder = "none";
|
|
592
|
+
export const amsTabsListBackgroundColor = "#FFFFFF";
|
|
593
|
+
export const amsTabsListBorderBottom = "0.125rem solid #004699";
|
|
534
594
|
export const amsTabsButtonColor = "#004699";
|
|
535
595
|
export const amsTabsButtonCursor = "pointer";
|
|
536
596
|
export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
537
|
-
export const amsTabsButtonFontWeight = 400;
|
|
538
597
|
export const amsTabsButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
598
|
+
export const amsTabsButtonFontWeight = 400;
|
|
539
599
|
export const amsTabsButtonLineHeight = "1.6";
|
|
540
600
|
export const amsTabsButtonOutlineOffset = "-0.25rem";
|
|
541
601
|
export const amsTabsButtonPaddingBlock = ".5rem";
|
|
@@ -546,10 +606,11 @@ export const amsTabsButtonSelectedBackgroundColor = "#004699";
|
|
|
546
606
|
export const amsTabsButtonSelectedColor = "#FFFFFF";
|
|
547
607
|
export const amsTabsButtonDisabledColor = "#BEBEBE";
|
|
548
608
|
export const amsTabsButtonDisabledCursor = "not-allowed";
|
|
549
|
-
export const
|
|
609
|
+
export const amsTextAreaBackgroundColor = "#FFFFFF";
|
|
610
|
+
export const amsTextAreaBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
550
611
|
export const amsTextAreaColor = "#000000";
|
|
551
612
|
export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
552
|
-
export const amsTextAreaFontSize = "clamp(
|
|
613
|
+
export const amsTextAreaFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
553
614
|
export const amsTextAreaFontWeight = 400;
|
|
554
615
|
export const amsTextAreaLineHeight = "1.6";
|
|
555
616
|
export const amsTextAreaMinHeight = "calc(1.6 * 1em + 2 * 0.5rem)";
|
|
@@ -557,29 +618,49 @@ export const amsTextAreaOutlineOffset = "2px";
|
|
|
557
618
|
export const amsTextAreaPaddingBlock = "0.5rem";
|
|
558
619
|
export const amsTextAreaPaddingInline = "1rem";
|
|
559
620
|
export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
|
|
560
|
-
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0
|
|
621
|
+
export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
561
622
|
export const amsTextAreaDisabledColor = "#BEBEBE";
|
|
562
623
|
export const amsTextAreaDisabledCursor = "not-allowed";
|
|
563
|
-
export const amsTextAreaHoverBoxShadow = "inset 0 0 0
|
|
564
|
-
export const amsTextAreaInvalidBoxShadow = "inset 0 0 0
|
|
565
|
-
export const amsTextAreaInvalidHoverBoxShadow = "inset 0 0 0
|
|
624
|
+
export const amsTextAreaHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
625
|
+
export const amsTextAreaInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
626
|
+
export const amsTextAreaInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
566
627
|
export const amsTextAreaPlaceholderColor = "#767676";
|
|
567
|
-
export const
|
|
628
|
+
export const amsTextInputBackgroundColor = "#FFFFFF";
|
|
629
|
+
export const amsTextInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
568
630
|
export const amsTextInputColor = "#000000";
|
|
569
631
|
export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
570
|
-
export const amsTextInputFontSize = "clamp(
|
|
632
|
+
export const amsTextInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
571
633
|
export const amsTextInputFontWeight = 400;
|
|
572
634
|
export const amsTextInputLineHeight = "1.6";
|
|
573
635
|
export const amsTextInputOutlineOffset = "2px";
|
|
574
636
|
export const amsTextInputPaddingBlock = ".5rem";
|
|
575
637
|
export const amsTextInputPaddingInline = "1rem";
|
|
576
638
|
export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
|
|
577
|
-
export const amsTextInputDisabledBoxShadow = "inset 0 0 0
|
|
639
|
+
export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
578
640
|
export const amsTextInputDisabledColor = "#BEBEBE";
|
|
579
|
-
export const amsTextInputHoverBoxShadow = "inset 0 0 0
|
|
580
|
-
export const amsTextInputInvalidBoxShadow = "inset 0 0 0
|
|
581
|
-
export const amsTextInputInvalidHoverBoxShadow = "inset 0 0 0
|
|
641
|
+
export const amsTextInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
642
|
+
export const amsTextInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
643
|
+
export const amsTextInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
582
644
|
export const amsTextInputPlaceholderColor = "#767676";
|
|
645
|
+
export const amsTimeInputBackgroundColor = "#FFFFFF";
|
|
646
|
+
export const amsTimeInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
|
|
647
|
+
export const amsTimeInputColor = "#000000";
|
|
648
|
+
export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
649
|
+
export const amsTimeInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
|
|
650
|
+
export const amsTimeInputFontWeight = 400;
|
|
651
|
+
export const amsTimeInputLineHeight = "1.6";
|
|
652
|
+
export const amsTimeInputOutlineOffset = "2px";
|
|
653
|
+
export const amsTimeInputPaddingBlock = ".5rem";
|
|
654
|
+
export const amsTimeInputPaddingInline = "1rem";
|
|
655
|
+
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>\")";
|
|
656
|
+
export const amsTimeInputDisabledBackgroundColor = "#FFFFFF";
|
|
657
|
+
export const amsTimeInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
|
|
658
|
+
export const amsTimeInputDisabledColor = "#BEBEBE";
|
|
659
|
+
export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage = "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>\")";
|
|
660
|
+
export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
|
|
661
|
+
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>\")";
|
|
662
|
+
export const amsTimeInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
|
|
663
|
+
export const amsTimeInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
|
|
583
664
|
export const amsTopTaskLinkDescriptionColor = "#000000";
|
|
584
665
|
export const amsTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
585
666
|
export const amsTopTaskLinkDescriptionFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
|