@amsterdam/design-system-tokens 3.1.0 → 3.3.0

package/dist/index.mjs

@@ -12,7 +12,7 @@ export const amsBorderWidthS = "0.0625rem";
 export const amsBorderWidthM = "0.125rem";
 export const amsBorderWidthL = "0.1875rem";
 export const amsBorderWidthXl = "0.25rem";
-export const amsColorInteractiveSecondary = "#202020"; // Use `currentColor` instead
+export const amsColorInteractiveSecondary = "#202020";
 export const amsColorInteractiveContrast = "#202020";
 export const amsColorInteractive = "#004699";
 export const amsColorInteractiveDisabled = "#767676";
@@ -49,8 +49,8 @@ export const amsSpaceL = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsSpaceXl = "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
 export const amsSpace_2xl = "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)";
 export const amsTypographyHeading_0FontSize =
-  "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)"; // Use Heading size 1 instead.
-export const amsTypographyHeading_0LineHeight = "1.1"; // Use Heading size 1 instead.
+  "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)";
+export const amsTypographyHeading_0LineHeight = "1.1";
 export const amsTypographyHeading_1FontSize =
   "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)";
 export const amsTypographyHeading_1LineHeight = "1.2";
@@ -65,8 +65,8 @@ export const amsTypographyHeading_4FontSize =
 export const amsTypographyHeading_4LineHeight = "1.4";
 export const amsTypographyHeading_5FontSize = "1rem";
 export const amsTypographyHeading_5LineHeight = "1.4";
-export const amsTypographyHeading_6FontSize = "1rem"; // Use Heading size 5 instead.
-export const amsTypographyHeading_6LineHeight = "1.4"; // Use Heading size 5 instead.
+export const amsTypographyHeading_6FontSize = "1rem";
+export const amsTypographyHeading_6LineHeight = "1.4";
 export const amsTypographyHeadingFontWeight = "800";
 export const amsTypographyHeadingTextWrap = "balance";
 export const amsTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -100,17 +100,19 @@ export const amsInputsPaddingBlock =
 export const amsInputsPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsInputsDisabledColor = "#767676";
-export const amsInputsHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsInputsHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsInputsInvalidBorderColor = "#ec0000";
 export const amsInputsInvalidHoverBorderColor = "#b70000";
-export const amsInputsInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
+export const amsInputsInvalidHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem #b70000";
 export const amsInputsPlaceholderColor = "#767676";
 export const amsLinksColor = "#004699";
-export const amsLinksTextDecorationThickness = "0.125rem"; // 2px
-export const amsLinksTextUnderlineOffset = "0.15625rem"; // 2.5px
+export const amsLinksTextDecorationThickness = "0.125rem";
+export const amsLinksTextUnderlineOffset = "0.15625rem";
 export const amsLinksHoverColor = "#003677";
-export const amsLinksHoverTextDecorationThickness = "0.1875rem"; // 3px
-export const amsLinksHoverTextUnderlineOffset = "0.09375rem"; // 1.5px
+export const amsLinksHoverTextDecorationThickness = "0.1875rem";
+export const amsLinksHoverTextUnderlineOffset = "0.09375rem";
 export const amsLinksSubtleTextDecorationLine = "none";
 export const amsLinksSubtleHoverTextDecorationLine = "underline";
 export const amsLinksContrastColor = "#202020";
@@ -271,7 +273,8 @@ export const amsButtonSecondaryBorderColor = "currentColor";
 export const amsButtonSecondaryColor = "#004699";
 export const amsButtonSecondaryDisabledBorderColor = "#767676";
 export const amsButtonSecondaryDisabledColor = "#767676";
-export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsButtonSecondaryHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsButtonSecondaryHoverColor = "#003677";
 export const amsButtonTertiaryBackgroundColor = "transparent";
 export const amsButtonTertiaryBorderColor = "transparent";
@@ -319,7 +322,7 @@ export const amsCharacterCountFontSize = "1rem";
 export const amsCharacterCountFontWeight = "400";
 export const amsCharacterCountLineHeight = "1.6";
 export const amsCharacterCountErrorColor = "#ec0000";
-export const amsCheckboxHoverTextDecorationThickness = "0.125rem"; // Use `ams.checkbox.text-decoration-thickness` instead
+export const amsCheckboxHoverTextDecorationThickness = "0.125rem";
 export const amsCheckboxHoverColor = "#003677";
 export const amsCheckboxHoverTextDecorationLine = "underline";
 export const amsCheckboxRectangleCheckedDisabledHoverFill = "#767676";
@@ -373,19 +376,19 @@ export const amsColumnGapLarge = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsColumnGapXLarge =
   "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
 export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
-  "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>\")"; // This token will be removed in release 6.0.0
+  "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>\")";
 export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
-  "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
+  "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>\")";
 export const amsDateInputDisabledColor = "#767676";
 export const amsDateInputDisabledCursor = "not-allowed";
 export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
-  "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
-export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+  "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>\")";
+export const amsDateInputHoverBoxShadow = "0 0 0 #000000";
 export const amsDateInputHoverCalendarPickerIndicatorBackgroundImage =
   "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>\")";
 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>\")"; // Use the token with ‘calendar’ spelled correctly instead
-export const amsDateInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
+  "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>\")";
+export const amsDateInputCalenderPickerIndicatorCursor = "pointer";
 export const amsDateInputBackgroundColor = "#ffffff";
 export const amsDateInputBorderColor = "currentColor";
 export const amsDateInputBorderStyle = "solid";
@@ -403,8 +406,7 @@ export const amsDateInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsDateInputInvalidBorderColor = "#ec0000";
 export const amsDateInputInvalidHoverBorderColor = "#b70000";
-export const amsDateInputInvalidHoverBoxShadow =
-  "inset 0 0 0 0.0625rem #b70000";
+export const amsDateInputInvalidHoverBoxShadow = "0 0 0 #000000";
 export const amsDateInputCalendarPickerIndicatorBackgroundImage =
   "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>\")";
 export const amsDateInputCalendarPickerIndicatorCursor = "pointer";
@@ -420,16 +422,25 @@ export const amsDescriptionListRowGap =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsDescriptionListInverseColor = "#ffffff";
 export const amsDescriptionListTermFontWeight = "800";
+export const amsDescriptionListTermMarginBlockEnd =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
+export const amsDescriptionListTermViMediumMarginBlockEnd =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsDescriptionListDescriptionFontWeight = "400";
-export const amsDescriptionListDescriptionPaddingInlineStart =
-  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
+export const amsDescriptionListDescriptionMarginBlockEnd =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
+export const amsDescriptionListDescriptionPaddingInlineStart = "0";
+export const amsDescriptionListSectionMarginBlockEnd =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsDescriptionListNarrowGridTemplateColumns = "1fr 4fr";
 export const amsDescriptionListMediumGridTemplateColumns = "1fr 2fr";
 export const amsDescriptionListWideGridTemplateColumns = "1fr 1fr";
 export const amsDialogBackgroundColor = "#ffffff";
 export const amsDialogBorderColor = "#ffffff";
+export const amsDialogBorderRadius = "initial";
 export const amsDialogBorderStyle = "solid";
 export const amsDialogBorderWidth = "0.125rem";
+export const amsDialogBoxShadow = "initial";
 export const amsDialogGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsDialogInlineSize =
   "calc(100% - 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem))";
@@ -542,7 +553,7 @@ export const amsFileInputFileSelectorButtonPaddingInline =
 export const amsFileInputFileSelectorButtonDisabledColor = "#767676";
 export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
 export const amsFileInputFileSelectorButtonHoverBoxShadow =
-  "inset 0 0 0 0.0625rem";
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsFileInputFileSelectorButtonHoverColor = "#003677";
 export const amsFileListGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsFileListPaddingBlock =
@@ -613,8 +624,8 @@ export const amsIconButtonInverseHoverColor = "#ffffff";
 export const amsIconButtonInverseDisabledColor = "#ffffff";
 export const amsIconButtonInverseDisabledBackgroundColor = "#767676";
 export const amsIconHeading_0FontSize =
-  "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)"; // Deprecated. Use ‘heading 1’ instead.
-export const amsIconHeading_0LineHeight = "1.1"; // Deprecated. Use ‘heading 1’ instead.
+  "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)";
+export const amsIconHeading_0LineHeight = "1.1";
 export const amsIconFontSize = "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
 export const amsIconLineHeight = "1.8";
 export const amsIconSmallFontSize = "1rem";
@@ -652,6 +663,8 @@ export const amsImageSliderThumbnailsThumbnailOpacity = "40%";
 export const amsImageSliderThumbnailsThumbnailOutlineOffset = "0.25rem";
 export const amsImageSliderThumbnailsThumbnailInViewOpacity = "100%";
 export const amsImageSliderThumbnailsThumbnailHoverOpacity = "100%";
+export const amsImageSliderFigureMarginBlockEnd =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsImageAspectRatio = "16 / 9";
 export const amsInvalidFormAlertOutlineOffset = "0.25rem";
 export const amsLabelColor = "#202020";
@@ -707,10 +720,10 @@ export const amsLogoEmblemColor = "#ec0000";
 export const amsLogoSubsiteColor = "#202020";
 export const amsLogoTitleColor = "#ec0000";
 export const amsMarkBackgroundColor = "#ffe600";
-export const amsMenuLinkContrastColor = "#202020"; // The menu has a dark background now, so this is no longer needed.
-export const amsMenuLinkContrastHoverColor = "#202020"; // The menu has a dark background now, so this is no longer needed.
-export const amsMenuLinkInverseColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
-export const amsMenuLinkInverseHoverColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
+export const amsMenuLinkContrastColor = "#202020";
+export const amsMenuLinkContrastHoverColor = "#202020";
+export const amsMenuLinkInverseColor = "#ffffff";
+export const amsMenuLinkInverseHoverColor = "#ffffff";
 export const amsMenuLinkColor = "#ffffff";
 export const amsMenuLinkGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsMenuLinkOutlineOffset = "0.25rem";
@@ -748,8 +761,8 @@ export const amsOrderedListListStyleType = "decimal";
 export const amsOrderedListSmallFontSize = "1rem";
 export const amsOrderedListSmallLineHeight = "1.6";
 export const amsOrderedListInverseColor = "#ffffff";
-export const amsOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
-export const amsOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
+export const amsOrderedListItemMarginInlineStart = "2.25rem";
+export const amsOrderedListItemPaddingInlineStart = "0.25rem";
 export const amsOrderedListOrderedListGap =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsOrderedListOrderedListListStyleType = "lower-alpha";
@@ -757,8 +770,8 @@ export const amsOrderedListOrderedListPaddingBlockEnd =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsOrderedListOrderedListPaddingBlockStart =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
-export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
-export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
+export const amsOrderedListOrderedListItemMarginInlineStart = "1.5rem";
+export const amsOrderedListOrderedListItemPaddingInlineStart = "0.25rem";
 export const amsPageFooterMenuColumnGap =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageFooterMenuPaddingBlock =
@@ -789,7 +802,7 @@ export const amsPageHeaderFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPageHeaderPaddingBlock =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderPaddingInline =
-  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Header and Grid line up
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderMediumPaddingInline =
   "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
 export const amsPageHeaderWidePaddingInline =
@@ -805,8 +818,14 @@ export const amsPageHeaderBrandNameLineHeight = "1.3";
 export const amsPageHeaderBrandNameTextWrap = "balance";
 export const amsPageHeaderMegaMenuPaddingBlock =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
+export const amsPageHeaderMegaMenuButtonBackgroundColor = "#004699";
+export const amsPageHeaderMegaMenuButtonColor = "#ffffff";
 export const amsPageHeaderMegaMenuButtonCursor = "pointer";
 export const amsPageHeaderMegaMenuButtonLabelOpenFontWeight = "800";
+export const amsPageHeaderMegaMenuButtonPaddingInline =
+  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
+export const amsPageHeaderMegaMenuButtonHoverBackgroundColor = "#003677";
+export const amsPageHeaderMegaMenuButtonHoverColor = "#ffffff";
 export const amsPageHeaderMenuColumnGap =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderMenuRowGap =
@@ -824,6 +843,7 @@ export const amsPageHeaderMenuItemOutlineOffset = "0.25rem";
 export const amsPageHeaderMenuItemPaddingBlock =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuItemHoverColor = "#003677";
+export const amsPageHeaderMenuLinkColor = "#004699";
 export const amsPageHeaderMenuLinkGap =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuLinkTextDecorationLine = "none";
@@ -846,7 +866,7 @@ export const amsPageBackgroundColor = "#ffffff";
 export const amsPageMaxInlineSize = "90rem";
 export const amsPageWithMenuMaxInlineSize = "120rem";
 export const amsPageWithMenuAreaSkipLinkMarginInlineEnd =
-  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPaginationFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -894,11 +914,10 @@ export const amsPasswordInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsPasswordInputDisabledColor = "#767676";
 export const amsPasswordInputDisabledCursor = "not-allowed";
-export const amsPasswordInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsPasswordInputHoverBoxShadow = "0 0 0 #000000";
 export const amsPasswordInputInvalidBorderColor = "#ec0000";
 export const amsPasswordInputInvalidHoverBorderColor = "#b70000";
-export const amsPasswordInputInvalidHoverBoxShadow =
-  "inset 0 0 0 0.0625rem #b70000";
+export const amsPasswordInputInvalidHoverBoxShadow = "0 0 0 #000000";
 export const amsPasswordInputPlaceholderColor = "#767676";
 export const amsProgressListHeading_2StepMarkerBlockSize =
   "calc(clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem) * 1.3)";
@@ -1036,11 +1055,10 @@ export const amsSearchFieldInputPaddingBlock =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsSearchFieldInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsSearchFieldInputHoverBoxShadow = "0 0 0 #000000";
 export const amsSearchFieldInputInvalidBorderColor = "#ec0000";
 export const amsSearchFieldInputInvalidHoverBorderColor = "#b70000";
-export const amsSearchFieldInputInvalidHoverBoxShadow =
-  "inset 0 0 0 0.0625rem #b70000";
+export const amsSearchFieldInputInvalidHoverBoxShadow = "0 0 0 #000000";
 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>\")";
 export const amsSearchFieldInputCancelButtonBlockSize =
@@ -1073,12 +1091,14 @@ export const amsSelectDisabledBackgroundImage =
   "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>\")";
 export const amsSelectDisabledColor = "#767676";
 export const amsSelectDisabledCursor = "not-allowed";
-export const amsSelectHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsSelectHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsSelectHoverBackgroundImage =
   "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>\")";
 export const amsSelectInvalidBorderColor = "#ec0000";
 export const amsSelectInvalidHoverBorderColor = "#b70000";
-export const amsSelectInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
+export const amsSelectInvalidHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem #b70000";
 export const amsSelectOptionDisabledColor = "#767676";
 export const amsSkipLinkBackgroundColor = "#004699";
 export const amsSkipLinkColor = "#ffffff";
@@ -1100,13 +1120,13 @@ export const amsSpotlightLimeBackgroundColor = "#bed200";
 export const amsSpotlightMagentaBackgroundColor = "#e50082";
 export const amsSpotlightOrangeBackgroundColor = "#ff9100";
 export const amsSpotlightYellowBackgroundColor = "#ffe600";
-export const amsStandaloneLinkHoverTextDecorationThickness = "0.1875rem"; // Use `ams.standalone-link.text-decoration-thickness` instead
-export const amsStandaloneLinkHoverTextUnderlineOffset = "0.09375rem"; // Use `ams.standalone-link.text-underline-offset` instead
+export const amsStandaloneLinkHoverTextDecorationThickness = "0.1875rem";
+export const amsStandaloneLinkHoverTextUnderlineOffset = "0.09375rem";
 export const amsStandaloneLinkHoverColor = "#003677";
 export const amsStandaloneLinkHoverTextDecorationLine = "underline";
-export const amsStandaloneLinkWithIconTextDecorationLine = "none"; // Use `ams.standalone-link.text-decoration-line` instead
-export const amsStandaloneLinkWithIconTextDecorationThickness = "0.125rem"; // Use `ams.standalone-link.text-decoration-thickness` instead
-export const amsStandaloneLinkWithIconHoverTextDecorationLine = "underline"; // Use `ams.standalone-link.hover.text-decoration-line` instead
+export const amsStandaloneLinkWithIconTextDecorationLine = "none";
+export const amsStandaloneLinkWithIconTextDecorationThickness = "0.125rem";
+export const amsStandaloneLinkWithIconHoverTextDecorationLine = "underline";
 export const amsStandaloneLinkColor = "#004699";
 export const amsStandaloneLinkColumnGap =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
@@ -1175,7 +1195,8 @@ export const amsTableCellPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsTableHeaderCellFontWeight = "800";
 export const amsTabsGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsTabsListBoxShadow = "inset 0 calc(0.125rem * -1) #d1d1d1";
+export const amsTabsListBoxShadow =
+  "inset 0rem calc(0.125rem * -1) 0rem 0rem #d1d1d1";
 export const amsTabsButtonColor = "#004699";
 export const amsTabsButtonCursor = "pointer";
 export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -1188,9 +1209,11 @@ export const amsTabsButtonPaddingBlock =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsTabsButtonPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsTabsButtonHoverBoxShadow = "inset 0 calc(0.125rem * -1)";
+export const amsTabsButtonHoverBoxShadow =
+  "inset 0rem calc(0.125rem * -1) 0rem 0rem currentColor";
 export const amsTabsButtonHoverColor = "#003677";
-export const amsTabsButtonSelectedBoxShadow = "inset 0 calc(0.25rem * -1)";
+export const amsTabsButtonSelectedBoxShadow =
+  "inset 0rem calc(0.25rem * -1) 0rem 0rem currentColor";
 export const amsTabsButtonSelectedFontWeight = "800";
 export const amsTabsButtonDisabledColor = "#767676";
 export const amsTabsButtonDisabledCursor = "not-allowed";
@@ -1213,10 +1236,10 @@ export const amsTextAreaPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsTextAreaDisabledColor = "#767676";
 export const amsTextAreaDisabledCursor = "not-allowed";
-export const amsTextAreaHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsTextAreaHoverBoxShadow = "0 0 0 #000000";
 export const amsTextAreaInvalidBorderColor = "#ec0000";
 export const amsTextAreaInvalidHoverBorderColor = "#b70000";
-export const amsTextAreaInvalidHoverBoxShadow = "inset 0 0 0 0.0625rem #b70000";
+export const amsTextAreaInvalidHoverBoxShadow = "0 0 0 #000000";
 export const amsTextAreaPlaceholderColor = "#767676";
 export const amsTextInputBackgroundColor = "#ffffff";
 export const amsTextInputBorderColor = "currentColor";
@@ -1235,26 +1258,28 @@ export const amsTextInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsTextInputDisabledColor = "#767676";
 export const amsTextInputDisabledCursor = "not-allowed";
-export const amsTextInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsTextInputHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsTextInputInvalidBorderColor = "#ec0000";
 export const amsTextInputInvalidHoverBorderColor = "#b70000";
 export const amsTextInputInvalidHoverBoxShadow =
-  "inset 0 0 0 0.0625rem #b70000";
+  "inset 0rem 0rem 0rem 0.0625rem #b70000";
 export const amsTextInputPlaceholderColor = "#767676";
 export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
   "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>\")";
 export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
-  "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
+  "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>\")";
 export const amsTimeInputDisabledColor = "#767676";
 export const amsTimeInputDisabledCursor = "not-allowed";
 export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
-  "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
-export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+  "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>\")";
+export const amsTimeInputHoverBoxShadow =
+  "inset 0rem 0rem 0rem 0.0625rem currentColor";
 export const amsTimeInputHoverCalendarPickerIndicatorBackgroundImage =
   "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>\")";
 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>\")"; // Use the token with ‘calendar’ spelled correctly instead
-export const amsTimeInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
+  "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>\")";
+export const amsTimeInputCalenderPickerIndicatorCursor = "pointer";
 export const amsTimeInputBackgroundColor = "#ffffff";
 export const amsTimeInputBorderColor = "currentColor";
 export const amsTimeInputBorderStyle = "solid";
@@ -1273,7 +1298,7 @@ export const amsTimeInputPaddingInline =
 export const amsTimeInputInvalidBorderColor = "#ec0000";
 export const amsTimeInputInvalidHoverBorderColor = "#b70000";
 export const amsTimeInputInvalidHoverBoxShadow =
-  "inset 0 0 0 0.0625rem #b70000";
+  "inset 0rem 0rem 0rem 0.0625rem #b70000";
 export const amsTimeInputCalendarPickerIndicatorBackgroundImage =
   "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>\")";
 export const amsTimeInputCalendarPickerIndicatorCursor = "pointer";
@@ -1289,8 +1314,8 @@ export const amsUnorderedListListStyleType = "'\\2022'";
 export const amsUnorderedListInverseColor = "#ffffff";
 export const amsUnorderedListSmallFontSize = "1rem";
 export const amsUnorderedListSmallLineHeight = "1.6";
-export const amsUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
-export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
+export const amsUnorderedListItemMarginInlineStart = "1.625rem";
+export const amsUnorderedListItemPaddingInlineStart = "0.875rem";
 export const amsUnorderedListUnorderedListGap =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
@@ -1298,5 +1323,5 @@ export const amsUnorderedListUnorderedListPaddingBlockEnd =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsUnorderedListUnorderedListPaddingBlockStart =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
-export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
-export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
+export const amsUnorderedListUnorderedListItemMarginInlineStart = "0.875rem";
+export const amsUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem";