@amsterdam/design-system-tokens 0.7.0 → 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.
Files changed (37) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/compact.css +1 -1
  3. package/dist/compact.d.ts +1 -1
  4. package/dist/compact.mjs +1 -1
  5. package/dist/compact.scss +1 -1
  6. package/dist/compact.theme.css +1 -1
  7. package/dist/index.css +176 -69
  8. package/dist/index.d.ts +209 -24
  9. package/dist/index.json +243 -58
  10. package/dist/index.mjs +160 -53
  11. package/dist/index.scss +176 -69
  12. package/dist/index.theme.css +176 -69
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/accordion.tokens.json +6 -4
  17. package/src/components/ams/alert.tokens.json +1 -1
  18. package/src/components/ams/avatar.tokens.json +49 -0
  19. package/src/components/ams/button.tokens.json +11 -8
  20. package/src/components/ams/checkbox.tokens.json +6 -2
  21. package/src/components/ams/date-input.tokens.json +45 -0
  22. package/src/components/ams/description-list.tokens.json +20 -0
  23. package/src/components/ams/dialog.tokens.json +0 -7
  24. package/src/components/ams/form-field-character-counter.tokens.json +14 -0
  25. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  26. package/src/components/ams/page-menu.tokens.json +2 -2
  27. package/src/components/ams/radio.tokens.json +4 -1
  28. package/src/components/ams/screen.tokens.json +1 -0
  29. package/src/components/ams/search-field.tokens.json +7 -6
  30. package/src/components/ams/select.tokens.json +41 -0
  31. package/src/components/ams/skip-link.tokens.json +1 -1
  32. package/src/components/ams/table.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -4
  34. package/src/components/ams/text-area.tokens.json +9 -8
  35. package/src/components/ams/text-input.tokens.json +8 -7
  36. package/src/components/ams/time-input.tokens.json +45 -0
  37. 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 Tue, 12 Mar 2024 14:50:53 GMT
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 = "1rem";
92
+ export const amsAccordionButtonPaddingInline = "0";
90
93
  export const amsAccordionButtonFocusOutlineOffset = "2px";
91
- export const amsAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
92
- export const amsAccordionPanelPaddingBlock = "1rem";
93
- export const amsAccordionPanelPaddingInline = "1rem";
94
- export const amsAlertBorderWidth = "4px";
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";
@@ -108,6 +111,31 @@ export const amsAspectRatioSquare = "1 / 1";
108
111
  export const amsAspectRatioWide = "5 / 4";
109
112
  export const amsAspectRatioXWide = "16 / 9";
110
113
  export const amsAspectRatio2xWide = "32 / 9";
114
+ export const amsAvatarAspectRatio = "1 / 1";
115
+ export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
116
+ export const amsAvatarFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
117
+ export const amsAvatarFontWeight = 400;
118
+ export const amsAvatarLineHeight = "1.6";
119
+ export const amsAvatarPaddingBlock = "0.25rem";
120
+ export const amsAvatarPaddingInline = "0.25rem";
121
+ export const amsAvatarBlueBackgroundColor = "#009DE6";
122
+ export const amsAvatarBlueColor = "#000000";
123
+ export const amsAvatarDarkBlueBackgroundColor = "#004699";
124
+ export const amsAvatarDarkBlueColor = "#FFFFFF";
125
+ export const amsAvatarDarkGreenBackgroundColor = "#00A03C";
126
+ export const amsAvatarDarkGreenColor = "#FFFFFF";
127
+ export const amsAvatarGreenBackgroundColor = "#BED200";
128
+ export const amsAvatarGreenColor = "#000000";
129
+ export const amsAvatarMagentaBackgroundColor = "#E50082";
130
+ export const amsAvatarMagentaColor = "#FFFFFF";
131
+ export const amsAvatarOrangeBackgroundColor = "#FF9100";
132
+ export const amsAvatarOrangeColor = "#000000";
133
+ export const amsAvatarPurpleBackgroundColor = "#A00078";
134
+ export const amsAvatarPurpleColor = "#FFFFFF";
135
+ export const amsAvatarRedBackgroundColor = "#EC0000";
136
+ export const amsAvatarRedColor = "#FFFFFF";
137
+ export const amsAvatarYellowBackgroundColor = "#FFE600";
138
+ export const amsAvatarYellowColor = "#000000";
111
139
  export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
112
140
  export const amsBadgeFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
113
141
  export const amsBadgeFontWeight = 800;
@@ -156,25 +184,26 @@ export const amsButtonPaddingBlock = ".5rem";
156
184
  export const amsButtonPaddingInline = "1rem";
157
185
  export const amsButtonOutlineOffset = "2px";
158
186
  export const amsButtonDisabledCursor = "not-allowed";
187
+ export const amsButtonForcedColorModeBorder = "0.125rem solid";
159
188
  export const amsButtonPrimaryBackgroundColor = "#004699";
160
- export const amsButtonPrimaryBoxShadow = "inset 0 0 0 2px #004699";
189
+ export const amsButtonPrimaryBoxShadow = "inset 0 0 0 0.125rem #004699";
161
190
  export const amsButtonPrimaryColor = "#FFFFFF";
162
191
  export const amsButtonPrimaryDisabledBackgroundColor = "#BEBEBE";
163
- export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0 2px #BEBEBE";
192
+ export const amsButtonPrimaryDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
164
193
  export const amsButtonPrimaryHoverBackgroundColor = "#102E62";
165
- export const amsButtonPrimaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
194
+ export const amsButtonPrimaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
166
195
  export const amsButtonSecondaryBackgroundColor = "#FFFFFF";
167
196
  export const amsButtonSecondaryColor = "#004699";
168
- export const amsButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
169
- export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
197
+ export const amsButtonSecondaryBoxShadow = "inset 0 0 0 0.125rem #004699";
198
+ export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
170
199
  export const amsButtonSecondaryHoverColor = "#102E62";
171
200
  export const amsButtonSecondaryDisabledBackgroundColor = "#FFFFFF";
172
- export const amsButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #BEBEBE";
201
+ export const amsButtonSecondaryDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
173
202
  export const amsButtonSecondaryDisabledColor = "#BEBEBE";
174
- export const amsButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
203
+ export const amsButtonSecondaryFocusBoxShadow = "inset 0 0 0 0.125rem #004699";
175
204
  export const amsButtonTertiaryBackgroundColor = "transparent";
176
205
  export const amsButtonTertiaryColor = "#004699";
177
- export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
206
+ export const amsButtonTertiaryHoverBoxShadow = "inset 0 0 0 0.125rem #102E62";
178
207
  export const amsButtonTertiaryHoverColor = "#102E62";
179
208
  export const amsButtonTertiaryDisabledBackgroundColor = "transparent";
180
209
  export const amsButtonTertiaryDisabledColor = "#BEBEBE";
@@ -192,15 +221,18 @@ export const amsCheckboxFontWeight = 400;
192
221
  export const amsCheckboxLineHeight = "1.6";
193
222
  export const amsCheckboxOutlineOffset = "2px";
194
223
  export const amsCheckboxCheckmarkBorderColor = "#004699";
224
+ export const amsCheckboxCheckmarkBorderWidth = "0.125rem";
195
225
  export const amsCheckboxCheckmarkCheckedBackgroundColor = "#004699";
196
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\")";
197
227
  export const amsCheckboxCheckmarkCheckedHoverBackgroundColor = "#102E62";
198
228
  export const amsCheckboxCheckmarkDisabledBorderColor = "#767676";
229
+ export const amsCheckboxCheckmarkDisabledBorderWidth = "0.125rem";
199
230
  export const amsCheckboxCheckmarkDisabledCheckedBackgroundColor = "#767676";
200
231
  export const amsCheckboxCheckmarkDisabledCheckedHoverBackgroundColor = "#767676";
201
232
  export const amsCheckboxCheckmarkDisabledIndeterminateBackgroundColor = "#767676";
202
233
  export const amsCheckboxCheckmarkDisabledIndeterminateHoverBackgroundColor = "#767676";
203
234
  export const amsCheckboxCheckmarkHoverBorderColor = "#102E62";
235
+ export const amsCheckboxCheckmarkHoverBorderWidth = "0.1875rem";
204
236
  export const amsCheckboxCheckmarkInvalidBorderColor = "#EC0000";
205
237
  export const amsCheckboxCheckmarkInvalidCheckedBackgroundColor = "#EC0000";
206
238
  export const amsCheckboxCheckmarkInvalidCheckedHoverBackgroundColor = "#EC0000";
@@ -212,19 +244,44 @@ export const amsCheckboxCheckmarkIndeterminateBackgroundImage = "url(\"data:imag
212
244
  export const amsCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
213
245
  export const amsCheckboxDisabledColor = "#767676";
214
246
  export const amsCheckboxHoverColor = "#102E62";
247
+ export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
215
248
  export const amsColumnGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
216
249
  export const amsColumnGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
217
250
  export const amsColumnGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
218
251
  export const amsColumnGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
219
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";
220
282
  export const amsDialogBackgroundColor = "#FFFFFF";
221
283
  export const amsDialogBorder = "0";
222
284
  export const amsDialogMaxInlineSize = "min(87.69vw, 45rem)";
223
- export const amsDialogTitleColor = "#000000";
224
- export const amsDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
225
- export const amsDialogTitleFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
226
- export const amsDialogTitleFontWeight = 800;
227
- export const amsDialogTitleLineHeight = "1.6";
228
285
  export const amsDialogFormGap = "1.5rem";
229
286
  export const amsDialogFormPaddingBlock = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
230
287
  export const amsDialogFormPaddingInline = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
@@ -236,11 +293,12 @@ export const amsFieldsetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif"
236
293
  export const amsFieldsetLegendFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
237
294
  export const amsFieldsetLegendFontWeight = 800;
238
295
  export const amsFieldsetLegendLineHeight = "1.5";
239
- export const amsFormLabelColor = "#000000";
240
- export const amsFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
241
- export const amsFormLabelFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
242
- export const amsFormLabelFontWeight = 800;
243
- export const amsFormLabelLineHeight = "1.5";
296
+ export const amsFormFieldCharacterCounterColor = "#000000";
297
+ export const amsFormFieldCharacterCounterFontFamily = "'Amsterdam Sans', Arial, sans-serif";
298
+ export const amsFormFieldCharacterCounterFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
299
+ export const amsFormFieldCharacterCounterFontWeight = 400;
300
+ export const amsFormFieldCharacterCounterLineHeight = "1.6";
301
+ export const amsFormFieldCharacterCounterErrorColor = "#EC0000";
244
302
  export const amsGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
245
303
  export const amsGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
246
304
  export const amsGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
@@ -299,6 +357,11 @@ export const amsIconSize5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1
299
357
  export const amsIconSize5LineHeight = "1.6";
300
358
  export const amsIconSize6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
301
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";
302
365
  export const amsLinkListGap = "0.5em";
303
366
  export const amsLinkListLinkColor = "#004699";
304
367
  export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -380,8 +443,8 @@ export const amsPageHeadingFontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem),
380
443
  export const amsPageHeadingFontWeight = 800;
381
444
  export const amsPageHeadingInverseColor = "#FFFFFF";
382
445
  export const amsPageHeadingLineHeight = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
383
- export const amsPageMenuColumnGap = "2.5rem";
384
- export const amsPageMenuRowGap = "0.5rem";
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)";
385
448
  export const amsPageMenuItemColor = "#004699";
386
449
  export const amsPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
387
450
  export const amsPageMenuItemFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
@@ -424,9 +487,11 @@ export const amsRadioFontWeight = 400;
424
487
  export const amsRadioLineHeight = "1.6";
425
488
  export const amsRadioOutlineOffset = "2px";
426
489
  export const amsRadioCircleBorderColor = "#004699";
490
+ export const amsRadioCircleBorderWidth = "0.125rem";
427
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\")";
428
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\")";
429
493
  export const amsRadioCircleDisabledBorderColor = "#767676";
494
+ export const amsRadioCircleDisabledBorderWidth = "0.125rem";
430
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\")";
431
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\")";
432
497
  export const amsRadioCircleHoverBorderColor = "#102E62";
@@ -436,11 +501,13 @@ export const amsRadioCircleInvalidCheckedHoverBackgroundImage = "url(\"data:imag
436
501
  export const amsRadioCircleInvalidHoverBorderColor = "#EC0000";
437
502
  export const amsRadioDisabledColor = "#767676";
438
503
  export const amsRadioHoverColor = "#102E62";
504
+ export const amsRadioHoverTextDecorationThickness = "0.125rem";
439
505
  export const amsRowGapXs = ".5rem";
440
506
  export const amsRowGapSm = ".75rem";
441
507
  export const amsRowGapMd = "1rem";
442
508
  export const amsRowGapLg = "1.5rem";
443
509
  export const amsRowGapXl = "2rem";
510
+ export const amsScreenBackgroundColor = "#FFFFFF";
444
511
  export const amsScreenWideMaxWidth = "100rem";
445
512
  export const amsScreenXWideMaxWidth = "132rem";
446
513
  export const amsSearchFieldButtonBackgroundColor = "#004699";
@@ -449,10 +516,11 @@ export const amsSearchFieldButtonOutlineOffset = "2px";
449
516
  export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
450
517
  export const amsSearchFieldButtonPaddingBlock = ".5rem";
451
518
  export const amsSearchFieldButtonPaddingInline = ".5rem";
452
- export const amsSearchFieldInputBoxShadow = "inset 0 0 0 1px #000000";
519
+ export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
520
+ export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
453
521
  export const amsSearchFieldInputColor = "#000000";
454
522
  export const amsSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
455
- export const amsSearchFieldInputFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
523
+ export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
456
524
  export const amsSearchFieldInputFontWeight = 400;
457
525
  export const amsSearchFieldInputLineHeight = "1.6";
458
526
  export const amsSearchFieldInputOutlineOffset = "2px";
@@ -460,15 +528,34 @@ export const amsSearchFieldInputPaddingBlock = ".5rem";
460
528
  export const amsSearchFieldInputPaddingInline = "1rem";
461
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>\")";
462
530
  export const amsSearchFieldInputCancelButtonColor = "#004699";
463
- export const amsSearchFieldInputCancelButtonHeight = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
464
- export const amsSearchFieldInputCancelButtonWidth = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
465
- export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 2px #000000";
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";
466
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";
467
554
  export const amsSkipLinkBackgroundColor = "#004699";
468
555
  export const amsSkipLinkColor = "#FFFFFF";
469
556
  export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
470
- export const amsSkipLinkFontWeight = 400;
471
557
  export const amsSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
558
+ export const amsSkipLinkFontWeight = 400;
472
559
  export const amsSkipLinkLineHeight = "1.6";
473
560
  export const amsSkipLinkOutlineOffset = "2px";
474
561
  export const amsSkipLinkPaddingBlock = ".5rem";
@@ -494,22 +581,21 @@ export const amsSwitchOutlineOffset = "2px";
494
581
  export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
495
582
  export const amsTableColor = "#000000";
496
583
  export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
497
- export const amsTableFontWeight = 400;
498
584
  export const amsTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
585
+ export const amsTableFontWeight = 400;
499
586
  export const amsTableLineHeight = "1.6";
500
587
  export const amsTableCaptionFontWeight = 800;
501
- export const amsTableCellBorderBottom = "1px solid #E8E8E8";
588
+ export const amsTableCellBorderBottom = "0.0625rem solid #E8E8E8";
502
589
  export const amsTableCellPaddingBlock = "1rem";
503
590
  export const amsTableCellPaddingInline = "1rem";
504
591
  export const amsTableHeaderCellFontWeight = 800;
505
- export const amsTabsListBorderBottom = ".125rem solid #004699";
506
- export const amsTabsButtonBackgroundColor = "transparent";
507
- export const amsTabsButtonBorder = "none";
592
+ export const amsTabsListBackgroundColor = "#FFFFFF";
593
+ export const amsTabsListBorderBottom = "0.125rem solid #004699";
508
594
  export const amsTabsButtonColor = "#004699";
509
595
  export const amsTabsButtonCursor = "pointer";
510
596
  export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
511
- export const amsTabsButtonFontWeight = 400;
512
597
  export const amsTabsButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
598
+ export const amsTabsButtonFontWeight = 400;
513
599
  export const amsTabsButtonLineHeight = "1.6";
514
600
  export const amsTabsButtonOutlineOffset = "-0.25rem";
515
601
  export const amsTabsButtonPaddingBlock = ".5rem";
@@ -520,10 +606,11 @@ export const amsTabsButtonSelectedBackgroundColor = "#004699";
520
606
  export const amsTabsButtonSelectedColor = "#FFFFFF";
521
607
  export const amsTabsButtonDisabledColor = "#BEBEBE";
522
608
  export const amsTabsButtonDisabledCursor = "not-allowed";
523
- export const amsTextAreaBoxShadow = "inset 0 0 0 1px #000000";
609
+ export const amsTextAreaBackgroundColor = "#FFFFFF";
610
+ export const amsTextAreaBoxShadow = "inset 0 0 0 0.0625rem #000000";
524
611
  export const amsTextAreaColor = "#000000";
525
612
  export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
526
- export const amsTextAreaFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
613
+ export const amsTextAreaFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
527
614
  export const amsTextAreaFontWeight = 400;
528
615
  export const amsTextAreaLineHeight = "1.6";
529
616
  export const amsTextAreaMinHeight = "calc(1.6 * 1em + 2 * 0.5rem)";
@@ -531,29 +618,49 @@ export const amsTextAreaOutlineOffset = "2px";
531
618
  export const amsTextAreaPaddingBlock = "0.5rem";
532
619
  export const amsTextAreaPaddingInline = "1rem";
533
620
  export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
534
- export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 1px #BEBEBE";
621
+ export const amsTextAreaDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
535
622
  export const amsTextAreaDisabledColor = "#BEBEBE";
536
623
  export const amsTextAreaDisabledCursor = "not-allowed";
537
- export const amsTextAreaHoverBoxShadow = "inset 0 0 0 2px #000000";
538
- export const amsTextAreaInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
539
- export const amsTextAreaInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
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";
540
627
  export const amsTextAreaPlaceholderColor = "#767676";
541
- export const amsTextInputBoxShadow = "inset 0 0 0 1px #000000";
628
+ export const amsTextInputBackgroundColor = "#FFFFFF";
629
+ export const amsTextInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
542
630
  export const amsTextInputColor = "#000000";
543
631
  export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
544
- export const amsTextInputFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
632
+ export const amsTextInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
545
633
  export const amsTextInputFontWeight = 400;
546
634
  export const amsTextInputLineHeight = "1.6";
547
635
  export const amsTextInputOutlineOffset = "2px";
548
636
  export const amsTextInputPaddingBlock = ".5rem";
549
637
  export const amsTextInputPaddingInline = "1rem";
550
638
  export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
551
- export const amsTextInputDisabledBoxShadow = "inset 0 0 0 1px #BEBEBE";
639
+ export const amsTextInputDisabledBoxShadow = "inset 0 0 0 0.0625rem #BEBEBE";
552
640
  export const amsTextInputDisabledColor = "#BEBEBE";
553
- export const amsTextInputHoverBoxShadow = "inset 0 0 0 2px #000000";
554
- export const amsTextInputInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
555
- export const amsTextInputInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
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";
556
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";
557
664
  export const amsTopTaskLinkDescriptionColor = "#000000";
558
665
  export const amsTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
559
666
  export const amsTopTaskLinkDescriptionFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";