@amsterdam/design-system-tokens 3.0.0 → 3.2.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 (107) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +118 -47
  10. package/dist/index.d.ts +174 -9
  11. package/dist/index.json +197 -32
  12. package/dist/index.mjs +176 -70
  13. package/dist/index.scss +118 -47
  14. package/dist/index.theme.css +118 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +106 -23
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -21
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +14 -8
  47. package/src/components/ams/date-input.tokens.json +92 -25
  48. package/src/components/ams/description-list.tokens.json +86 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +372 -0
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +14 -8
  101. package/src/components/ams/time-input.tokens.json +90 -25
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
package/dist/index.mjs CHANGED
@@ -12,7 +12,7 @@ export const amsBorderWidthS = "0.0625rem";
12
12
  export const amsBorderWidthM = "0.125rem";
13
13
  export const amsBorderWidthL = "0.1875rem";
14
14
  export const amsBorderWidthXl = "0.25rem";
15
- export const amsColorInteractiveSecondary = "#202020"; // Use `currentColor` instead
15
+ export const amsColorInteractiveSecondary = "#202020";
16
16
  export const amsColorInteractiveContrast = "#202020";
17
17
  export const amsColorInteractive = "#004699";
18
18
  export const amsColorInteractiveDisabled = "#767676";
@@ -32,6 +32,9 @@ export const amsColorHighlightMagenta = "#e50082";
32
32
  export const amsColorHighlightOrange = "#ff9100";
33
33
  export const amsColorHighlightPurple = "#a00078";
34
34
  export const amsColorHighlightYellow = "#ffe600";
35
+ export const amsColorProgressCurrent = "#00893c";
36
+ export const amsColorProgressCompleted = "#00893c";
37
+ export const amsColorProgressUpcoming = "#767676";
35
38
  export const amsColorSeparator = "#d1d1d1";
36
39
  export const amsColorText = "#202020";
37
40
  export const amsColorTextInverse = "#ffffff";
@@ -46,8 +49,8 @@ export const amsSpaceL = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
46
49
  export const amsSpaceXl = "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
47
50
  export const amsSpace_2xl = "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
48
51
  export const amsTypographyHeading_0FontSize =
49
- "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)"; // Use Heading size 1 instead.
50
- export const amsTypographyHeading_0LineHeight = "1.1"; // Use Heading size 1 instead.
52
+ "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)";
53
+ export const amsTypographyHeading_0LineHeight = "1.1";
51
54
  export const amsTypographyHeading_1FontSize =
52
55
  "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)";
53
56
  export const amsTypographyHeading_1LineHeight = "1.2";
@@ -62,12 +65,12 @@ export const amsTypographyHeading_4FontSize =
62
65
  export const amsTypographyHeading_4LineHeight = "1.4";
63
66
  export const amsTypographyHeading_5FontSize = "1rem";
64
67
  export const amsTypographyHeading_5LineHeight = "1.4";
65
- export const amsTypographyHeading_6FontSize = "1rem"; // Use Heading size 5 instead.
66
- export const amsTypographyHeading_6LineHeight = "1.4"; // Use Heading size 5 instead.
68
+ export const amsTypographyHeading_6FontSize = "1rem";
69
+ export const amsTypographyHeading_6LineHeight = "1.4";
67
70
  export const amsTypographyHeadingFontWeight = "800";
68
71
  export const amsTypographyHeadingTextWrap = "balance";
69
72
  export const amsTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
70
- export const amsTypographyHyphenateLimitChars = "12 8 4";
73
+ export const amsTypographyHyphenateLimitChars = "auto";
71
74
  export const amsTypographyBodyTextFontSize =
72
75
  "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
73
76
  export const amsTypographyBodyTextFontWeight = "400";
@@ -97,17 +100,19 @@ export const amsInputsPaddingBlock =
97
100
  export const amsInputsPaddingInline =
98
101
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
99
102
  export const amsInputsDisabledColor = "#767676";
100
- export const amsInputsHoverBoxShadow = "inset 0 0 0 0.0625rem";
103
+ export const amsInputsHoverBoxShadow =
104
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
101
105
  export const amsInputsInvalidBorderColor = "#ec0000";
102
106
  export const amsInputsInvalidHoverBorderColor = "#b70000";
103
- export const amsInputsInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
107
+ export const amsInputsInvalidHoverBoxShadow =
108
+ "inset 0rem 0rem 0rem 0.0625rem #b70000";
104
109
  export const amsInputsPlaceholderColor = "#767676";
105
110
  export const amsLinksColor = "#004699";
106
- export const amsLinksTextDecorationThickness = "0.125rem"; // 2px
107
- export const amsLinksTextUnderlineOffset = "0.15625rem"; // 2.5px
111
+ export const amsLinksTextDecorationThickness = "0.125rem";
112
+ export const amsLinksTextUnderlineOffset = "0.15625rem";
108
113
  export const amsLinksHoverColor = "#003677";
109
- export const amsLinksHoverTextDecorationThickness = "0.1875rem"; // 3px
110
- export const amsLinksHoverTextUnderlineOffset = "0.09375rem"; // 1.5px
114
+ export const amsLinksHoverTextDecorationThickness = "0.1875rem";
115
+ export const amsLinksHoverTextUnderlineOffset = "0.09375rem";
111
116
  export const amsLinksSubtleTextDecorationLine = "none";
112
117
  export const amsLinksSubtleHoverTextDecorationLine = "underline";
113
118
  export const amsLinksContrastColor = "#202020";
@@ -194,6 +199,7 @@ export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
194
199
  export const amsBadgeFontSize =
195
200
  "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
196
201
  export const amsBadgeFontWeight = "800";
202
+ export const amsBadgeGap = "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
197
203
  export const amsBadgeLineHeight = "1.8";
198
204
  export const amsBadgePaddingInline =
199
205
  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
@@ -267,7 +273,8 @@ export const amsButtonSecondaryBorderColor = "currentColor";
267
273
  export const amsButtonSecondaryColor = "#004699";
268
274
  export const amsButtonSecondaryDisabledBorderColor = "#767676";
269
275
  export const amsButtonSecondaryDisabledColor = "#767676";
270
- export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.0625rem";
276
+ export const amsButtonSecondaryHoverBoxShadow =
277
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
271
278
  export const amsButtonSecondaryHoverColor = "#003677";
272
279
  export const amsButtonTertiaryBackgroundColor = "transparent";
273
280
  export const amsButtonTertiaryBorderColor = "transparent";
@@ -315,7 +322,7 @@ export const amsCharacterCountFontSize = "1rem";
315
322
  export const amsCharacterCountFontWeight = "400";
316
323
  export const amsCharacterCountLineHeight = "1.6";
317
324
  export const amsCharacterCountErrorColor = "#ec0000";
318
- export const amsCheckboxHoverTextDecorationThickness = "0.125rem"; // Use `ams.checkbox.text-decoration-thickness` instead
325
+ export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
319
326
  export const amsCheckboxHoverColor = "#003677";
320
327
  export const amsCheckboxHoverTextDecorationLine = "underline";
321
328
  export const amsCheckboxRectangleCheckedDisabledHoverFill = "#767676";
@@ -368,20 +375,20 @@ export const amsColumnGapMedium = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
368
375
  export const amsColumnGapLarge = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
369
376
  export const amsColumnGapXLarge =
370
377
  "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
378
+ export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
379
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
371
380
  export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
372
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"; // Use the token with ‘calendar’ spelled correctly instead
381
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
373
382
  export const amsDateInputDisabledColor = "#767676";
374
383
  export const amsDateInputDisabledCursor = "not-allowed";
375
- export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
376
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
377
384
  export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
378
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"; // Use the token with ‘calendar’ spelled correctly instead
379
- export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
385
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
386
+ export const amsDateInputHoverBoxShadow = "0 0 0 #000000";
380
387
  export const amsDateInputHoverCalendarPickerIndicatorBackgroundImage =
381
388
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")";
382
389
  export const amsDateInputCalenderPickerIndicatorBackgroundImage =
383
- "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>\")"; // Use the token with ‘calendar’ spelled correctly instead
384
- export const amsDateInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
390
+ "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>\")";
391
+ export const amsDateInputCalenderPickerIndicatorCursor = "pointer";
385
392
  export const amsDateInputBackgroundColor = "#ffffff";
386
393
  export const amsDateInputBorderColor = "currentColor";
387
394
  export const amsDateInputBorderStyle = "solid";
@@ -399,8 +406,7 @@ export const amsDateInputPaddingInline =
399
406
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
400
407
  export const amsDateInputInvalidBorderColor = "#ec0000";
401
408
  export const amsDateInputInvalidHoverBorderColor = "#b70000";
402
- export const amsDateInputInvalidHoverBoxShadow =
403
- "inset 0 0 0 0.0625rem #b70000";
409
+ export const amsDateInputInvalidHoverBoxShadow = "0 0 0 #000000";
404
410
  export const amsDateInputCalendarPickerIndicatorBackgroundImage =
405
411
  "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>\")";
406
412
  export const amsDateInputCalendarPickerIndicatorCursor = "pointer";
@@ -416,16 +422,23 @@ export const amsDescriptionListRowGap =
416
422
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
417
423
  export const amsDescriptionListInverseColor = "#ffffff";
418
424
  export const amsDescriptionListTermFontWeight = "800";
425
+ export const amsDescriptionListTermMarginBlockEnd =
426
+ "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
419
427
  export const amsDescriptionListDescriptionFontWeight = "400";
420
- export const amsDescriptionListDescriptionPaddingInlineStart =
421
- "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
428
+ export const amsDescriptionListDescriptionMarginBlockEnd =
429
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
430
+ export const amsDescriptionListDescriptionPaddingInlineStart = "0";
431
+ export const amsDescriptionListSectionMarginBlockEnd =
432
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
422
433
  export const amsDescriptionListNarrowGridTemplateColumns = "1fr 4fr";
423
434
  export const amsDescriptionListMediumGridTemplateColumns = "1fr 2fr";
424
435
  export const amsDescriptionListWideGridTemplateColumns = "1fr 1fr";
425
436
  export const amsDialogBackgroundColor = "#ffffff";
426
437
  export const amsDialogBorderColor = "#ffffff";
438
+ export const amsDialogBorderRadius = "initial";
427
439
  export const amsDialogBorderStyle = "solid";
428
440
  export const amsDialogBorderWidth = "0.125rem";
441
+ export const amsDialogBoxShadow = "initial";
429
442
  export const amsDialogGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
430
443
  export const amsDialogInlineSize =
431
444
  "calc(100% - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))";
@@ -538,7 +551,7 @@ export const amsFileInputFileSelectorButtonPaddingInline =
538
551
  export const amsFileInputFileSelectorButtonDisabledColor = "#767676";
539
552
  export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
540
553
  export const amsFileInputFileSelectorButtonHoverBoxShadow =
541
- "inset 0 0 0 0.0625rem";
554
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
542
555
  export const amsFileInputFileSelectorButtonHoverColor = "#003677";
543
556
  export const amsFileListGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
544
557
  export const amsFileListPaddingBlock =
@@ -609,8 +622,8 @@ export const amsIconButtonInverseHoverColor = "#ffffff";
609
622
  export const amsIconButtonInverseDisabledColor = "#ffffff";
610
623
  export const amsIconButtonInverseDisabledBackgroundColor = "#767676";
611
624
  export const amsIconHeading_0FontSize =
612
- "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)"; // Deprecated. Use ‘heading 1’ instead.
613
- export const amsIconHeading_0LineHeight = "1.1"; // Deprecated. Use ‘heading 1’ instead.
625
+ "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)";
626
+ export const amsIconHeading_0LineHeight = "1.1";
614
627
  export const amsIconFontSize = "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
615
628
  export const amsIconLineHeight = "1.8";
616
629
  export const amsIconSmallFontSize = "1rem";
@@ -648,6 +661,8 @@ export const amsImageSliderThumbnailsThumbnailOpacity = "40%";
648
661
  export const amsImageSliderThumbnailsThumbnailOutlineOffset = "0.25rem";
649
662
  export const amsImageSliderThumbnailsThumbnailInViewOpacity = "100%";
650
663
  export const amsImageSliderThumbnailsThumbnailHoverOpacity = "100%";
664
+ export const amsImageSliderFigureMarginBlockEnd =
665
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
651
666
  export const amsImageAspectRatio = "16 / 9";
652
667
  export const amsInvalidFormAlertOutlineOffset = "0.25rem";
653
668
  export const amsLabelColor = "#202020";
@@ -703,10 +718,10 @@ export const amsLogoEmblemColor = "#ec0000";
703
718
  export const amsLogoSubsiteColor = "#202020";
704
719
  export const amsLogoTitleColor = "#ec0000";
705
720
  export const amsMarkBackgroundColor = "#ffe600";
706
- export const amsMenuLinkContrastColor = "#202020"; // The menu has a dark background now, so this is no longer needed.
707
- export const amsMenuLinkContrastHoverColor = "#202020"; // The menu has a dark background now, so this is no longer needed.
708
- export const amsMenuLinkInverseColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
709
- export const amsMenuLinkInverseHoverColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
721
+ export const amsMenuLinkContrastColor = "#202020";
722
+ export const amsMenuLinkContrastHoverColor = "#202020";
723
+ export const amsMenuLinkInverseColor = "#ffffff";
724
+ export const amsMenuLinkInverseHoverColor = "#ffffff";
710
725
  export const amsMenuLinkColor = "#ffffff";
711
726
  export const amsMenuLinkGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
712
727
  export const amsMenuLinkOutlineOffset = "0.25rem";
@@ -744,8 +759,8 @@ export const amsOrderedListListStyleType = "decimal";
744
759
  export const amsOrderedListSmallFontSize = "1rem";
745
760
  export const amsOrderedListSmallLineHeight = "1.6";
746
761
  export const amsOrderedListInverseColor = "#ffffff";
747
- export const amsOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
748
- export const amsOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
762
+ export const amsOrderedListItemMarginInlineStart = "2.25rem";
763
+ export const amsOrderedListItemPaddingInlineStart = "0.25rem";
749
764
  export const amsOrderedListOrderedListGap =
750
765
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
751
766
  export const amsOrderedListOrderedListListStyleType = "lower-alpha";
@@ -753,8 +768,8 @@ export const amsOrderedListOrderedListPaddingBlockEnd =
753
768
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
754
769
  export const amsOrderedListOrderedListPaddingBlockStart =
755
770
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
756
- export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
757
- export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
771
+ export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem";
772
+ export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem";
758
773
  export const amsPageFooterMenuColumnGap =
759
774
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
760
775
  export const amsPageFooterMenuPaddingBlock =
@@ -785,7 +800,7 @@ export const amsPageHeaderFontFamily = "'Amsterdam Sans', Arial, sans-serif";
785
800
  export const amsPageHeaderPaddingBlock =
786
801
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
787
802
  export const amsPageHeaderPaddingInline =
788
- "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Header and Grid line up
803
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
789
804
  export const amsPageHeaderMediumPaddingInline =
790
805
  "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
791
806
  export const amsPageHeaderWidePaddingInline =
@@ -801,8 +816,14 @@ export const amsPageHeaderBrandNameLineHeight = "1.3";
801
816
  export const amsPageHeaderBrandNameTextWrap = "balance";
802
817
  export const amsPageHeaderMegaMenuPaddingBlock =
803
818
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
819
+ export const amsPageHeaderMegaMenuButtonBackgroundColor = "#004699";
820
+ export const amsPageHeaderMegaMenuButtonColor = "#ffffff";
804
821
  export const amsPageHeaderMegaMenuButtonCursor = "pointer";
805
822
  export const amsPageHeaderMegaMenuButtonLabelOpenFontWeight = "800";
823
+ export const amsPageHeaderMegaMenuButtonPaddingInline =
824
+ "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
825
+ export const amsPageHeaderMegaMenuButtonHoverBackgroundColor = "#003677";
826
+ export const amsPageHeaderMegaMenuButtonHoverColor = "#ffffff";
806
827
  export const amsPageHeaderMenuColumnGap =
807
828
  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
808
829
  export const amsPageHeaderMenuRowGap =
@@ -820,6 +841,7 @@ export const amsPageHeaderMenuItemOutlineOffset = "0.25rem";
820
841
  export const amsPageHeaderMenuItemPaddingBlock =
821
842
  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
822
843
  export const amsPageHeaderMenuItemHoverColor = "#003677";
844
+ export const amsPageHeaderMenuLinkColor = "#004699";
823
845
  export const amsPageHeaderMenuLinkGap =
824
846
  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
825
847
  export const amsPageHeaderMenuLinkTextDecorationLine = "none";
@@ -842,7 +864,7 @@ export const amsPageBackgroundColor = "#ffffff";
842
864
  export const amsPageMaxInlineSize = "90rem";
843
865
  export const amsPageWithMenuMaxInlineSize = "120rem";
844
866
  export const amsPageWithMenuAreaSkipLinkMarginInlineEnd =
845
- "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
867
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
846
868
  export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
847
869
  export const amsPaginationFontSize =
848
870
  "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -890,12 +912,90 @@ export const amsPasswordInputPaddingInline =
890
912
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
891
913
  export const amsPasswordInputDisabledColor = "#767676";
892
914
  export const amsPasswordInputDisabledCursor = "not-allowed";
893
- export const amsPasswordInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
915
+ export const amsPasswordInputHoverBoxShadow = "0 0 0 #000000";
894
916
  export const amsPasswordInputInvalidBorderColor = "#ec0000";
895
917
  export const amsPasswordInputInvalidHoverBorderColor = "#b70000";
896
- export const amsPasswordInputInvalidHoverBoxShadow =
897
- "inset 0 0 0 0.0625rem #b70000";
918
+ export const amsPasswordInputInvalidHoverBoxShadow = "0 0 0 #000000";
898
919
  export const amsPasswordInputPlaceholderColor = "#767676";
920
+ export const amsProgressListHeading_2StepMarkerBlockSize =
921
+ "calc(clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) * 1.3)";
922
+ export const amsProgressListHeading_2StepMarkerMarginBlockStart =
923
+ "calc((1.3 * clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)) / 2)";
924
+ export const amsProgressListHeading_3StepMarkerBlockSize =
925
+ "calc(clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem) * 1.3)";
926
+ export const amsProgressListHeading_3StepMarkerMarginBlockStart =
927
+ "calc((1.3 * clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)) / 2)";
928
+ export const amsProgressListHeading_4StepMarkerBlockSize =
929
+ "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.4)";
930
+ export const amsProgressListHeading_4StepMarkerMarginBlockStart =
931
+ "calc((1.4 * clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)) / 2)";
932
+ export const amsProgressListStepGap =
933
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
934
+ export const amsProgressListStepMediumGap =
935
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
936
+ export const amsProgressListStepMarkerShapeBlockSize = "1.5rem";
937
+ export const amsProgressListStepMarkerShapeBackgroundColor = "#ffffff";
938
+ export const amsProgressListStepMarkerShapeBorderColor = "#767676";
939
+ export const amsProgressListStepMarkerShapeBorderStyle = "solid";
940
+ export const amsProgressListStepMarkerShapeBorderWidth = "0.125rem";
941
+ export const amsProgressListStepMarkerShapeOutlineColor = "#ffffff";
942
+ export const amsProgressListStepMarkerShapeOutlineStyle = "solid";
943
+ export const amsProgressListStepMarkerShapeOutlineWidth = "0.125rem";
944
+ export const amsProgressListStepConnectorBorderInlineColor = "#767676";
945
+ export const amsProgressListStepConnectorBorderInlineStyle = "dashed";
946
+ export const amsProgressListStepConnectorBorderInlineWidth = "1px";
947
+ export const amsProgressListStepHeadingMarginBlockEnd =
948
+ "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
949
+ export const amsProgressListStepContentMarginBlockEnd =
950
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
951
+ export const amsProgressListStepCompletedMarkerShapeBackgroundColor = "#00893c";
952
+ export const amsProgressListStepCompletedMarkerShapeBorderColor = "#00893c";
953
+ export const amsProgressListStepCompletedConnectorBorderInlineColor = "#00893c";
954
+ export const amsProgressListStepCompletedConnectorBorderInlineStyle = "solid";
955
+ export const amsProgressListStepCurrentMarkerShapeBackgroundColor = "#00893c";
956
+ export const amsProgressListStepCurrentMarkerShapeBorderColor = "#00893c";
957
+ export const amsProgressListStepCurrentConnectorBorderInlineColor = "#00893c";
958
+ export const amsProgressListSubstepsPaddingBlockStart =
959
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
960
+ export const amsProgressListSubstepsStepIndicatorMarginInlineEnd =
961
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
962
+ export const amsProgressListSubstepsStepIndicatorMediumMarginInlineEnd =
963
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
964
+ export const amsProgressListSubstepsStepMarkerBlockSize =
965
+ "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8)";
966
+ export const amsProgressListSubstepsStepMarkerInlineSize = "1.5rem";
967
+ export const amsProgressListSubstepsStepMarkerShapeBlockSize = "0.75rem";
968
+ export const amsProgressListSubstepsStepMarkerShapeBackgroundColor = "#ffffff";
969
+ export const amsProgressListSubstepsStepMarkerShapeBorderColor = "#767676";
970
+ export const amsProgressListSubstepsStepMarkerShapeBorderStyle = "solid";
971
+ export const amsProgressListSubstepsStepMarkerShapeBorderWidth = "0.125rem";
972
+ export const amsProgressListSubstepsStepMarkerShapeOutlineColor = "#ffffff";
973
+ export const amsProgressListSubstepsStepMarkerShapeOutlineStyle = "solid";
974
+ export const amsProgressListSubstepsStepMarkerShapeOutlineWidth = "0.125rem";
975
+ export const amsProgressListSubstepsStepConnectorBackgroundColor = "#ffffff";
976
+ export const amsProgressListSubstepsStepConnectorBorderInlineColor = "#767676";
977
+ export const amsProgressListSubstepsStepConnectorBorderInlineStyle = "dashed";
978
+ export const amsProgressListSubstepsStepConnectorBorderInlineWidth = "1px";
979
+ export const amsProgressListSubstepsStepConnectorMarginBlockStart =
980
+ "calc(clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem) * 1.8 / 2)";
981
+ export const amsProgressListSubstepsStepConnectorLastChildBorderInlineColor =
982
+ "#ffffff";
983
+ export const amsProgressListSubstepsStepContentMarginBlockEnd =
984
+ "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
985
+ export const amsProgressListSubstepsStepCompletedMarkerShapeBackgroundColor =
986
+ "#00893c";
987
+ export const amsProgressListSubstepsStepCompletedMarkerShapeBorderColor =
988
+ "#00893c";
989
+ export const amsProgressListSubstepsStepCompletedConnectorBorderInlineColor =
990
+ "#00893c";
991
+ export const amsProgressListSubstepsStepCompletedConnectorBorderInlineStyle =
992
+ "solid";
993
+ export const amsProgressListSubstepsStepCurrentMarkerShapeBackgroundColor =
994
+ "#00893c";
995
+ export const amsProgressListSubstepsStepCurrentMarkerShapeBorderColor =
996
+ "#00893c";
997
+ export const amsProgressListSubstepsLastChildContentMarginBlockEnd =
998
+ "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
899
999
  export const amsRadioColor = "#202020";
900
1000
  export const amsRadioCursor = "pointer";
901
1001
  export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -953,11 +1053,10 @@ export const amsSearchFieldInputPaddingBlock =
953
1053
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
954
1054
  export const amsSearchFieldInputPaddingInline =
955
1055
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
956
- export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
1056
+ export const amsSearchFieldInputHoverBoxShadow = "0 0 0 #000000";
957
1057
  export const amsSearchFieldInputInvalidBorderColor = "#ec0000";
958
1058
  export const amsSearchFieldInputInvalidHoverBorderColor = "#b70000";
959
- export const amsSearchFieldInputInvalidHoverBoxShadow =
960
- "inset 0 0 0 0.0625rem #b70000";
1059
+ export const amsSearchFieldInputInvalidHoverBoxShadow = "0 0 0 #000000";
961
1060
  export const amsSearchFieldInputCancelButtonBackgroundImage =
962
1061
  "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>\")";
963
1062
  export const amsSearchFieldInputCancelButtonBlockSize =
@@ -990,12 +1089,14 @@ export const amsSelectDisabledBackgroundImage =
990
1089
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")";
991
1090
  export const amsSelectDisabledColor = "#767676";
992
1091
  export const amsSelectDisabledCursor = "not-allowed";
993
- export const amsSelectHoverBoxShadow = "inset 0 0 0 0.0625rem";
1092
+ export const amsSelectHoverBoxShadow =
1093
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
994
1094
  export const amsSelectHoverBackgroundImage =
995
1095
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")";
996
1096
  export const amsSelectInvalidBorderColor = "#ec0000";
997
1097
  export const amsSelectInvalidHoverBorderColor = "#b70000";
998
- export const amsSelectInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
1098
+ export const amsSelectInvalidHoverBoxShadow =
1099
+ "inset 0rem 0rem 0rem 0.0625rem #b70000";
999
1100
  export const amsSelectOptionDisabledColor = "#767676";
1000
1101
  export const amsSkipLinkBackgroundColor = "#004699";
1001
1102
  export const amsSkipLinkColor = "#ffffff";
@@ -1017,13 +1118,13 @@ export const amsSpotlightLimeBackgroundColor = "#bed200";
1017
1118
  export const amsSpotlightMagentaBackgroundColor = "#e50082";
1018
1119
  export const amsSpotlightOrangeBackgroundColor = "#ff9100";
1019
1120
  export const amsSpotlightYellowBackgroundColor = "#ffe600";
1020
- export const amsStandaloneLinkHoverTextDecorationThickness = "0.1875rem"; // Use `ams.standalone-link.text-decoration-thickness` instead
1021
- export const amsStandaloneLinkHoverTextUnderlineOffset = "0.09375rem"; // Use `ams.standalone-link.text-underline-offset` instead
1121
+ export const amsStandaloneLinkHoverTextDecorationThickness = "0.1875rem";
1122
+ export const amsStandaloneLinkHoverTextUnderlineOffset = "0.09375rem";
1022
1123
  export const amsStandaloneLinkHoverColor = "#003677";
1023
1124
  export const amsStandaloneLinkHoverTextDecorationLine = "underline";
1024
- export const amsStandaloneLinkWithIconTextDecorationLine = "none"; // Use `ams.standalone-link.text-decoration-line` instead
1025
- export const amsStandaloneLinkWithIconTextDecorationThickness = "0.125rem"; // Use `ams.standalone-link.text-decoration-thickness` instead
1026
- export const amsStandaloneLinkWithIconHoverTextDecorationLine = "underline"; // Use `ams.standalone-link.hover.text-decoration-line` instead
1125
+ export const amsStandaloneLinkWithIconTextDecorationLine = "none";
1126
+ export const amsStandaloneLinkWithIconTextDecorationThickness = "0.125rem";
1127
+ export const amsStandaloneLinkWithIconHoverTextDecorationLine = "underline";
1027
1128
  export const amsStandaloneLinkColor = "#004699";
1028
1129
  export const amsStandaloneLinkColumnGap =
1029
1130
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
@@ -1092,7 +1193,8 @@ export const amsTableCellPaddingInline =
1092
1193
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
1093
1194
  export const amsTableHeaderCellFontWeight = "800";
1094
1195
  export const amsTabsGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
1095
- export const amsTabsListBoxShadow = "inset 0 calc(0.125rem * -1) #d1d1d1";
1196
+ export const amsTabsListBoxShadow =
1197
+ "inset 0rem calc(0.125rem * -1) 0rem 0rem #d1d1d1";
1096
1198
  export const amsTabsButtonColor = "#004699";
1097
1199
  export const amsTabsButtonCursor = "pointer";
1098
1200
  export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -1105,9 +1207,11 @@ export const amsTabsButtonPaddingBlock =
1105
1207
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
1106
1208
  export const amsTabsButtonPaddingInline =
1107
1209
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
1108
- export const amsTabsButtonHoverBoxShadow = "inset 0 calc(0.125rem * -1)";
1210
+ export const amsTabsButtonHoverBoxShadow =
1211
+ "inset 0rem calc(0.125rem * -1) 0rem 0rem currentColor";
1109
1212
  export const amsTabsButtonHoverColor = "#003677";
1110
- export const amsTabsButtonSelectedBoxShadow = "inset 0 calc(0.25rem * -1)";
1213
+ export const amsTabsButtonSelectedBoxShadow =
1214
+ "inset 0rem calc(0.25rem * -1) 0rem 0rem currentColor";
1111
1215
  export const amsTabsButtonSelectedFontWeight = "800";
1112
1216
  export const amsTabsButtonDisabledColor = "#767676";
1113
1217
  export const amsTabsButtonDisabledCursor = "not-allowed";
@@ -1130,10 +1234,10 @@ export const amsTextAreaPaddingInline =
1130
1234
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
1131
1235
  export const amsTextAreaDisabledColor = "#767676";
1132
1236
  export const amsTextAreaDisabledCursor = "not-allowed";
1133
- export const amsTextAreaHoverBoxShadow = "inset 0 0 0 0.0625rem";
1237
+ export const amsTextAreaHoverBoxShadow = "0 0 0 #000000";
1134
1238
  export const amsTextAreaInvalidBorderColor = "#ec0000";
1135
1239
  export const amsTextAreaInvalidHoverBorderColor = "#b70000";
1136
- export const amsTextAreaInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
1240
+ export const amsTextAreaInvalidHoverBoxShadow = "0 0 0 #000000";
1137
1241
  export const amsTextAreaPlaceholderColor = "#767676";
1138
1242
  export const amsTextInputBackgroundColor = "#ffffff";
1139
1243
  export const amsTextInputBorderColor = "currentColor";
@@ -1152,26 +1256,28 @@ export const amsTextInputPaddingInline =
1152
1256
  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
1153
1257
  export const amsTextInputDisabledColor = "#767676";
1154
1258
  export const amsTextInputDisabledCursor = "not-allowed";
1155
- export const amsTextInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
1259
+ export const amsTextInputHoverBoxShadow =
1260
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
1156
1261
  export const amsTextInputInvalidBorderColor = "#ec0000";
1157
1262
  export const amsTextInputInvalidHoverBorderColor = "#b70000";
1158
1263
  export const amsTextInputInvalidHoverBoxShadow =
1159
- "inset 0 0 0 0.0625rem #b70000";
1264
+ "inset 0rem 0rem 0rem 0.0625rem #b70000";
1160
1265
  export const amsTextInputPlaceholderColor = "#767676";
1266
+ export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
1267
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")";
1161
1268
  export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
1162
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")"; // Use the token with ‘calendar’ spelled correctly instead
1269
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")";
1163
1270
  export const amsTimeInputDisabledColor = "#767676";
1164
1271
  export const amsTimeInputDisabledCursor = "not-allowed";
1165
- export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
1166
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>\")";
1167
1272
  export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
1168
- "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>\")"; // Use the token with ‘calendar’ spelled correctly instead
1169
- export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
1273
+ "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>\")";
1274
+ export const amsTimeInputHoverBoxShadow =
1275
+ "inset 0rem 0rem 0rem 0.0625rem currentColor";
1170
1276
  export const amsTimeInputHoverCalendarPickerIndicatorBackgroundImage =
1171
1277
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>\")";
1172
1278
  export const amsTimeInputCalenderPickerIndicatorBackgroundImage =
1173
- "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>\")"; // Use the token with ‘calendar’ spelled correctly instead
1174
- export const amsTimeInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
1279
+ "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>\")";
1280
+ export const amsTimeInputCalenderPickerIndicatorCursor = "pointer";
1175
1281
  export const amsTimeInputBackgroundColor = "#ffffff";
1176
1282
  export const amsTimeInputBorderColor = "currentColor";
1177
1283
  export const amsTimeInputBorderStyle = "solid";
@@ -1190,7 +1296,7 @@ export const amsTimeInputPaddingInline =
1190
1296
  export const amsTimeInputInvalidBorderColor = "#ec0000";
1191
1297
  export const amsTimeInputInvalidHoverBorderColor = "#b70000";
1192
1298
  export const amsTimeInputInvalidHoverBoxShadow =
1193
- "inset 0 0 0 0.0625rem #b70000";
1299
+ "inset 0rem 0rem 0rem 0.0625rem #b70000";
1194
1300
  export const amsTimeInputCalendarPickerIndicatorBackgroundImage =
1195
1301
  "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>\")";
1196
1302
  export const amsTimeInputCalendarPickerIndicatorCursor = "pointer";
@@ -1206,8 +1312,8 @@ export const amsUnorderedListListStyleType = "'\\2022'";
1206
1312
  export const amsUnorderedListInverseColor = "#ffffff";
1207
1313
  export const amsUnorderedListSmallFontSize = "1rem";
1208
1314
  export const amsUnorderedListSmallLineHeight = "1.6";
1209
- export const amsUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
1210
- export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
1315
+ export const amsUnorderedListItemMarginInlineStart = "1.625rem";
1316
+ export const amsUnorderedListItemPaddingInlineStart = "0.875rem";
1211
1317
  export const amsUnorderedListUnorderedListGap =
1212
1318
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
1213
1319
  export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
@@ -1215,5 +1321,5 @@ export const amsUnorderedListUnorderedListPaddingBlockEnd =
1215
1321
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
1216
1322
  export const amsUnorderedListUnorderedListPaddingBlockStart =
1217
1323
  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
1218
- export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
1219
- export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
1324
+ export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem";
1325
+ export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem";