@amsterdam/design-system-tokens 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
+ * Generated on Wed, 05 Jun 2024 11:22:10 GMT
  */
 
 export const amsBorderWidthSm = "0.0625rem";
@@ -66,19 +66,19 @@ export const amsActionDisabledCursor = "not-allowed";
 export const amsActionInertCursor = "default";
 export const amsActionNavigateCursor = "pointer";
 export const amsActionSubmitCursor = "pointer";
-export const amsFocusOutlineOffset = "2px";
+export const amsFocusOutlineOffset = "0.125rem";
 export const amsHyphenationHyphenateLimitChars = "12 8 4";
 export const amsHyphenationHyphens = "auto";
 export const amsHyphenationOverflowWrap = "break-word";
 export const amsLinkAppearanceColor = "#004699";
 export const amsLinkAppearanceTextDecorationThickness = "0.125rem";
-export const amsLinkAppearanceTextUnderlineOffset = "0.375rem";
+export const amsLinkAppearanceTextUnderlineOffset = "0.3333em";
 export const amsLinkAppearanceHoverColor = "#102E62";
 export const amsLinkAppearanceOnBackgroundDarkColor = "#FFFFFF";
 export const amsLinkAppearanceOnBackgroundLightColor = "#000000";
 export const amsLinkAppearanceRegularTextDecorationLine = "underline";
 export const amsLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
-export const amsLinkAppearanceRegularHoverTextUnderlineOffset = "0.3125rem";
+export const amsLinkAppearanceRegularHoverTextUnderlineOffset = "0.2778em";
 export const amsLinkAppearanceSubtleTextDecorationLine = "none";
 export const amsLinkAppearanceSubtleHoverTextDecorationLine = "underline";
 export const amsAccordionGap = ".5rem";
@@ -90,7 +90,7 @@ export const amsAccordionButtonGap = "1rem";
 export const amsAccordionButtonLineHeight = "1.6";
 export const amsAccordionButtonPaddingBlock = ".75rem";
 export const amsAccordionButtonPaddingInline = "0";
-export const amsAccordionButtonFocusOutlineOffset = "2px";
+export const amsAccordionButtonFocusOutlineOffset = "0.125rem";
 export const amsAccordionButtonHoverColor = "#102E62";
 export const amsAccordionPanelPaddingBlock = "0 1rem";
 export const amsAccordionPanelPaddingInline = "0";
@@ -141,20 +141,32 @@ export const amsBadgeFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5re
 export const amsBadgeFontWeight = 800;
 export const amsBadgeLineHeight = "1.6";
 export const amsBadgePaddingInline = ".5rem";
-export const amsBadgeBlueBackgroundColor = "#009DE6";
-export const amsBadgeBlueColor = "#000000";
-export const amsBadgeDarkBlueBackgroundColor = "#004699";
-export const amsBadgeDarkBlueColor = "#FFFFFF";
+export const amsBadgeBlackBackgroundColor = "#000000";
+export const amsBadgeBlackColor = "#FFFFFF";
+export const amsBadgeBlueBackgroundColor = "#004699";
+export const amsBadgeBlueColor = "#FFFFFF";
 export const amsBadgeDarkGreenBackgroundColor = "#00A03C";
 export const amsBadgeDarkGreenColor = "#FFFFFF";
 export const amsBadgeGreenBackgroundColor = "#BED200";
 export const amsBadgeGreenColor = "#000000";
+export const amsBadgeGrey1BackgroundColor = "#E8E8E8";
+export const amsBadgeGrey1Color = "#000000";
+export const amsBadgeGrey2BackgroundColor = "#BEBEBE";
+export const amsBadgeGrey2Color = "#000000";
+export const amsBadgeGrey3BackgroundColor = "#767676";
+export const amsBadgeGrey3Color = "#FFFFFF";
+export const amsBadgeLightBlueBackgroundColor = "#009DE6";
+export const amsBadgeLightBlueColor = "#000000";
 export const amsBadgeMagentaBackgroundColor = "#E50082";
 export const amsBadgeMagentaColor = "#FFFFFF";
 export const amsBadgeOrangeBackgroundColor = "#FF9100";
 export const amsBadgeOrangeColor = "#000000";
 export const amsBadgePurpleBackgroundColor = "#A00078";
 export const amsBadgePurpleColor = "#FFFFFF";
+export const amsBadgeRedBackgroundColor = "#EC0000";
+export const amsBadgeRedColor = "#FFFFFF";
+export const amsBadgeWhiteBackgroundColor = "#FFFFFF";
+export const amsBadgeWhiteColor = "#000000";
 export const amsBadgeYellowBackgroundColor = "#FFE600";
 export const amsBadgeYellowColor = "#000000";
 export const amsBlockquoteColor = "#000000";
@@ -168,13 +180,13 @@ export const amsBreadcrumbFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem),
 export const amsBreadcrumbFontWeight = 400;
 export const amsBreadcrumbLineHeight = "1.6";
 export const amsBreadcrumbSeparatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")";
-export const amsBreadcrumbItemLinkColor = "#004699";
-export const amsBreadcrumbItemLinkOutlineOffset = "2px";
-export const amsBreadcrumbItemLinkTextDecorationLine = "none";
-export const amsBreadcrumbItemLinkTextDecorationThickness = "0.125rem";
-export const amsBreadcrumbItemLinkTextUnderlineOffset = "0.375rem";
-export const amsBreadcrumbItemLinkHoverColor = "#102E62";
-export const amsBreadcrumbItemLinkHoverTextDecorationLine = "underline";
+export const amsBreadcrumbLinkColor = "#004699";
+export const amsBreadcrumbLinkOutlineOffset = "0.125rem";
+export const amsBreadcrumbLinkTextDecorationLine = "none";
+export const amsBreadcrumbLinkTextDecorationThickness = "0.125rem";
+export const amsBreadcrumbLinkTextUnderlineOffset = "0.3333em";
+export const amsBreadcrumbLinkHoverColor = "#102E62";
+export const amsBreadcrumbLinkHoverTextDecorationLine = "underline";
 export const amsButtonCursor = "pointer";
 export const amsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
@@ -182,7 +194,7 @@ export const amsButtonLineHeight = "1.6";
 export const amsButtonGap = "1rem";
 export const amsButtonPaddingBlock = ".5rem";
 export const amsButtonPaddingInline = "1rem";
-export const amsButtonOutlineOffset = "2px";
+export const amsButtonOutlineOffset = "0.125rem";
 export const amsButtonDisabledCursor = "not-allowed";
 export const amsButtonForcedColorModeBorder = "0.125rem solid";
 export const amsButtonPrimaryBackgroundColor = "#004699";
@@ -210,16 +222,16 @@ export const amsButtonTertiaryDisabledColor = "#BEBEBE";
 export const amsCardLinkColor = "#004699";
 export const amsCardLinkTextDecorationLine = "none";
 export const amsCardLinkTextDecorationThickness = "0.125rem";
-export const amsCardLinkTextUnderlineOffset = "0.375rem";
+export const amsCardLinkTextUnderlineOffset = "0.3333em";
 export const amsCardLinkHoverColor = "#102E62";
 export const amsCardLinkHoverTextDecorationLine = "underline";
-export const amsCardOutlineOffset = "2px";
+export const amsCardOutlineOffset = "0.125rem";
 export const amsCheckboxColor = "#000000";
 export const amsCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsCheckboxFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsCheckboxFontWeight = 400;
 export const amsCheckboxLineHeight = "1.6";
-export const amsCheckboxOutlineOffset = "2px";
+export const amsCheckboxOutlineOffset = "0.125rem";
 export const amsCheckboxCheckmarkBorderColor = "#004699";
 export const amsCheckboxCheckmarkBorderWidth = "0.125rem";
 export const amsCheckboxCheckmarkCheckedBackgroundColor = "#004699";
@@ -257,7 +269,7 @@ export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsDateInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsDateInputFontWeight = 400;
 export const amsDateInputLineHeight = "1.6";
-export const amsDateInputOutlineOffset = "2px";
+export const amsDateInputOutlineOffset = "0.125rem";
 export const amsDateInputPaddingBlock = ".5rem";
 export const amsDateInputPaddingInline = "1.5rem";
 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>\")";
@@ -288,11 +300,48 @@ export const amsDialogFormPaddingInline = "clamp(1.5rem, calc(1.5rem + ((1vw - 0
 export const amsDialogFormMaxBlockSize = "75vh";
 export const amsDialogHeaderGap = "1rem";
 export const amsDialogFooterGap = "1rem";
-export const amsFieldsetLegendColor = "#000000";
-export const amsFieldsetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif";
-export const amsFieldsetLegendFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsFieldsetLegendFontWeight = 800;
-export const amsFieldsetLegendLineHeight = "1.5";
+export const amsErrorMessageColor = "#EC0000";
+export const amsErrorMessageFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsErrorMessageFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsErrorMessageFontWeight = 400;
+export const amsErrorMessageLineHeight = "1.6";
+export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #EC0000";
+export const amsFieldSetInvalidPaddingInlineStart = "1rem";
+export const amsFieldSetLegendColor = "#000000";
+export const amsFieldSetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsFieldSetLegendFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsFieldSetLegendFontWeight = 800;
+export const amsFieldSetLegendLineHeight = "1.5";
+export const amsFieldSetLegendMarginBlockEnd = "1rem";
+export const amsFieldGap = ".75rem";
+export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #EC0000";
+export const amsFieldInvalidPaddingInlineStart = "1rem";
+export const amsFileInputBackgroundColor = "#FFFFFF";
+export const amsFileInputBorder = "0.0625rem dashed #767676";
+export const amsFileInputColor = "#000000";
+export const amsFileInputCursor = "pointer";
+export const amsFileInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsFileInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsFileInputFontWeight = 400;
+export const amsFileInputLineHeight = "1.6";
+export const amsFileInputOutlineOffset = "0.125rem";
+export const amsFileInputPaddingBlock = "1rem";
+export const amsFileInputPaddingInline = "1rem";
+export const amsFileInputDisabledColor = "#BEBEBE";
+export const amsFileInputDisabledCursor = "not-allowed";
+export const amsFileInputFileSelectorButtonBackgroundColor = "#FFFFFF";
+export const amsFileInputFileSelectorButtonBoxShadow = "inset 0 0 0 0.125rem #004699";
+export const amsFileInputFileSelectorButtonColor = "#004699";
+export const amsFileInputFileSelectorButtonCursor = "pointer";
+export const amsFileInputFileSelectorButtonMarginInlineEnd = "1rem";
+export const amsFileInputFileSelectorButtonPaddingBlock = ".5rem";
+export const amsFileInputFileSelectorButtonPaddingInline = "1rem";
+export const amsFileInputFileSelectorButtonHoverBoxShadow = "inset 0 0 0 0.1875rem #102E62";
+export const amsFileInputFileSelectorButtonHoverColor = "#102E62";
+export const amsFileInputFileSelectorButtonDisabledBoxShadow = "inset 0 0 0 0.125rem #BEBEBE";
+export const amsFileInputFileSelectorButtonDisabledColor = "#BEBEBE";
+export const amsFileInputFileSelectorButtonDisabledCursor = "not-allowed";
+export const amsFileInputFileSelectorButtonForcedColorModeBorder = "0.125rem solid";
 export const amsFormFieldCharacterCounterColor = "#000000";
 export const amsFormFieldCharacterCounterFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsFormFieldCharacterCounterFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
@@ -317,7 +366,7 @@ export const amsGridMediumColumnCount = "8";
 export const amsGridWideColumnCount = "12";
 export const amsHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Must have the same value as `ams.grid.column-gap`.
 export const amsHeaderPaddingBlock = "1rem";
-export const amsHeaderLogoLinkOutlineOffset = "2px";
+export const amsHeaderLogoLinkOutlineOffset = "0.125rem";
 export const amsHeadingColor = "#000000";
 export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsHeadingFontWeight = 800;
@@ -335,7 +384,7 @@ export const amsHeadingLevel5LineHeight = "1.6";
 export const amsHeadingLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsHeadingLevel6LineHeight = "1.6";
 export const amsIconButtonColor = "#004699";
-export const amsIconButtonOutlineOffset = "2px";
+export const amsIconButtonOutlineOffset = "0.125rem";
 export const amsIconButtonHoverBackgroundColor = "rgba(0, 70, 153, 0.125)";
 export const amsIconButtonHoverColor = "#102E62";
 export const amsIconButtonDisabledColor = "#BEBEBE";
@@ -365,16 +414,16 @@ export const amsLabelLineHeight = "1.5";
 export const amsLinkListGap = "0.5em";
 export const amsLinkListLinkColor = "#004699";
 export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsLinkListLinkFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsLinkListLinkFontWeight = 400;
 export const amsLinkListLinkGap = "0.5em";
-export const amsLinkListLinkOutlineOffset = "2px";
+export const amsLinkListLinkLineHeight = "1.6";
+export const amsLinkListLinkOutlineOffset = "0.125rem";
 export const amsLinkListLinkTextDecorationLine = "none";
 export const amsLinkListLinkTextDecorationThickness = "0.125rem";
-export const amsLinkListLinkTextUnderlineOffset = "0.375rem";
+export const amsLinkListLinkTextUnderlineOffset = "0.3333em";
 export const amsLinkListLinkSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsLinkListLinkSmallLineHeight = "1.6";
-export const amsLinkListLinkMediumFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
-export const amsLinkListLinkMediumLineHeight = "1.6";
 export const amsLinkListLinkLargeFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
 export const amsLinkListLinkLargeLineHeight = "1.5";
 export const amsLinkListLinkHoverColor = "#102E62";
@@ -386,31 +435,31 @@ export const amsLinkListLinkOnBackgroundLightHoverColor = "#000000";
 export const amsLinkColor = "#004699";
 export const amsLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsLinkFontWeight = 400;
-export const amsLinkOutlineOffset = "2px";
+export const amsLinkOutlineOffset = "0.125rem";
 export const amsLinkHoverColor = "#102E62";
 export const amsLinkInlineTextDecorationLine = "underline";
 export const amsLinkInlineTextDecorationThickness = "0.125rem";
-export const amsLinkInlineTextUnderlineOffset = "0.375rem";
+export const amsLinkInlineTextUnderlineOffset = "0.3333em";
 export const amsLinkInlineFontFamily = "inherit";
 export const amsLinkInlineFontSize = "inherit";
 export const amsLinkInlineLineHeight = "inherit";
 export const amsLinkInlineHoverTextDecorationThickness = "0.1875rem";
-export const amsLinkInlineHoverTextUnderlineOffset = "0.3125rem";
+export const amsLinkInlineHoverTextUnderlineOffset = "0.2778em";
 export const amsLinkInlineVisitedColor = "#A00078";
 export const amsLinkStandaloneFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsLinkStandaloneLineHeight = "1.6";
 export const amsLinkStandaloneTextDecorationLine = "underline";
 export const amsLinkStandaloneTextDecorationThickness = "0.125rem";
-export const amsLinkStandaloneTextUnderlineOffset = "0.375rem";
+export const amsLinkStandaloneTextUnderlineOffset = "0.3333em";
 export const amsLinkStandaloneHoverTextDecorationThickness = "0.1875rem";
-export const amsLinkStandaloneHoverTextUnderlineOffset = "0.3125rem";
+export const amsLinkStandaloneHoverTextUnderlineOffset = "0.2778em";
 export const amsLinkOnBackgroundDarkColor = "#FFFFFF";
 export const amsLinkOnBackgroundDarkHoverColor = "#FFFFFF";
 export const amsLinkOnBackgroundDarkVisitedColor = "#FFFFFF";
 export const amsLinkOnBackgroundLightColor = "#000000";
 export const amsLinkOnBackgroundLightHoverColor = "#000000";
 export const amsLinkOnBackgroundLightVisitedColor = "#000000";
-export const amsLogoHeight = "2.5rem";
+export const amsLogoBlockSize = "2.5rem";
 export const amsLogoEmblemColor = "#EC0000";
 export const amsLogoTitleColor = "#EC0000";
 export const amsLogoSubsiteColor = "#000000";
@@ -432,6 +481,8 @@ export const amsOrderedListGap = "0.75rem";
 export const amsOrderedListInverseColor = "#FFFFFF";
 export const amsOrderedListLineHeight = "1.6";
 export const amsOrderedListListStyleType = "decimal";
+export const amsOrderedListSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsOrderedListSmallLineHeight = "1.6";
 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 amsOrderedListOrderedListListStyleType = "lower-alpha";
@@ -451,10 +502,10 @@ export const amsPageMenuItemFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem)
 export const amsPageMenuItemFontWeight = 400;
 export const amsPageMenuItemGap = "0.5rem";
 export const amsPageMenuItemLineHeight = "1.6";
-export const amsPageMenuItemOutlineOffset = "2px";
+export const amsPageMenuItemOutlineOffset = "0.125rem";
 export const amsPageMenuItemTextDecorationLine = "none";
 export const amsPageMenuItemTextDecorationThickness = "0.125rem";
-export const amsPageMenuItemTextUnderlineOffset = "0.375rem";
+export const amsPageMenuItemTextUnderlineOffset = "0.3333em";
 export const amsPageMenuItemHoverColor = "#102E62";
 export const amsPageMenuItemHoverTextDecorationLine = "underline";
 export const amsPaginationColor = "#004699";
@@ -462,22 +513,22 @@ export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPaginationFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsPaginationFontWeight = 400;
 export const amsPaginationLineHeight = "1.6";
-export const amsPaginationButtonOutlineOffset = "2px";
+export const amsPaginationButtonOutlineOffset = "0.125rem";
 export const amsPaginationButtonPaddingInline = ".75rem";
 export const amsPaginationButtonTextDecorationLine = "none";
 export const amsPaginationButtonTextDecorationThickness = "0.125rem";
-export const amsPaginationButtonTextUnderlineOffset = "0.375rem";
+export const amsPaginationButtonTextUnderlineOffset = "0.3333em";
 export const amsPaginationButtonCurrentFontWeight = 800;
 export const amsPaginationButtonHoverColor = "#102E62";
 export const amsPaginationButtonHoverTextDecorationLine = "underline";
 export const amsParagraphColor = "#000000";
 export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsParagraphFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsParagraphFontWeight = 400;
+export const amsParagraphLineHeight = "1.6";
 export const amsParagraphInverseColor = "#FFFFFF";
 export const amsParagraphSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsParagraphSmallLineHeight = "1.6";
-export const amsParagraphMediumFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
-export const amsParagraphMediumLineHeight = "1.6";
 export const amsParagraphLargeFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
 export const amsParagraphLargeLineHeight = "1.5";
 export const amsRadioColor = "#000000";
@@ -485,7 +536,7 @@ export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsRadioFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsRadioFontWeight = 400;
 export const amsRadioLineHeight = "1.6";
-export const amsRadioOutlineOffset = "2px";
+export const amsRadioOutlineOffset = "0.125rem";
 export const amsRadioCircleBorderColor = "#004699";
 export const amsRadioCircleBorderWidth = "0.125rem";
 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\")";
@@ -508,14 +559,14 @@ export const amsRowGapMd = "1rem";
 export const amsRowGapLg = "1.5rem";
 export const amsRowGapXl = "2rem";
 export const amsScreenBackgroundColor = "#FFFFFF";
-export const amsScreenWideMaxWidth = "100rem";
-export const amsScreenXWideMaxWidth = "132rem";
+export const amsScreenWideMaxInlineSize = "100rem";
+export const amsScreenXWideMaxInlineSize = "132rem";
 export const amsSearchFieldButtonBackgroundColor = "#004699";
 export const amsSearchFieldButtonColor = "#FFFFFF";
-export const amsSearchFieldButtonOutlineOffset = "2px";
-export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
+export const amsSearchFieldButtonOutlineOffset = "0.125rem";
 export const amsSearchFieldButtonPaddingBlock = ".5rem";
 export const amsSearchFieldButtonPaddingInline = ".5rem";
+export const amsSearchFieldButtonHoverBackgroundColor = "#102E62";
 export const amsSearchFieldInputBackgroundColor = "#FFFFFF";
 export const amsSearchFieldInputBoxShadow = "inset 0 0 0 0.0625rem #000000";
 export const amsSearchFieldInputColor = "#000000";
@@ -523,14 +574,16 @@ export const amsSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-seri
 export const amsSearchFieldInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsSearchFieldInputFontWeight = 400;
 export const amsSearchFieldInputLineHeight = "1.6";
-export const amsSearchFieldInputOutlineOffset = "2px";
+export const amsSearchFieldInputOutlineOffset = "0.125rem";
 export const amsSearchFieldInputPaddingBlock = ".5rem";
 export const amsSearchFieldInputPaddingInline = "1rem";
 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 = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsSearchFieldInputCancelButtonColor = "#004699";
-export const amsSearchFieldInputCancelButtonHeight = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
-export const amsSearchFieldInputCancelButtonWidth = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsSearchFieldInputCancelButtonInlineSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsSearchFieldInputHoverBoxShadow = "inset 0 0 0 0.125rem #000000";
+export const amsSearchFieldInputInvalidBoxShadow = "inset 0 0 0 0.0625rem #EC0000";
+export const amsSearchFieldInputInvalidHoverBoxShadow = "inset 0 0 0 0.125rem #EC0000";
 export const amsSearchFieldInputPlaceholderColor = "#767676";
 export const amsSelectBackgroundColor = "#FFFFFF";
 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>\")";
@@ -541,7 +594,7 @@ export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsSelectFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsSelectFontWeight = 400;
 export const amsSelectLineHeight = "1.6";
-export const amsSelectOutlineOffset = "2px";
+export const amsSelectOutlineOffset = "0.125rem";
 export const amsSelectPaddingBlock = ".5rem";
 export const amsSelectPaddingInline = "1rem calc(2 * 1rem + 1em)";
 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>\")";
@@ -557,7 +610,7 @@ export const amsSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsSkipLinkFontWeight = 400;
 export const amsSkipLinkLineHeight = "1.6";
-export const amsSkipLinkOutlineOffset = "2px";
+export const amsSkipLinkOutlineOffset = "0.125rem";
 export const amsSkipLinkPaddingBlock = ".5rem";
 export const amsSkipLinkPaddingInline = "1rem";
 export const amsSkipLinkHoverBackgroundColor = "#102E62";
@@ -569,15 +622,16 @@ export const amsSpotlightMagentaBackgroundColor = "#E50082";
 export const amsSpotlightOrangeBackgroundColor = "#FF9100";
 export const amsSpotlightPurpleBackgroundColor = "#A00078";
 export const amsSpotlightYellowBackgroundColor = "#FFE600";
-export const amsSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsSwitchBackgroundColor = "#767676";
-export const amsSwitchWidth = "3.5rem";
+export const amsSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsSwitchOutlineOffset = "0.125rem";
+export const amsSwitchInlineSize = "3.5rem";
 export const amsSwitchThumbBackgroundColor = "#FFFFFF";
-export const amsSwitchThumbWidth = "1.75rem";
-export const amsSwitchThumbHeight = "1.75rem";
+export const amsSwitchThumbInlineSize = "1.75rem";
+export const amsSwitchThumbBlockSize = "1.75rem";
+export const amsSwitchThumbHoverBoxShadow = "0 0 0 0.125rem #102E62";
 export const amsSwitchThumbHoverColor = "#102E62";
 export const amsSwitchCheckedBackgroundColor = "#004699";
-export const amsSwitchOutlineOffset = "2px";
 export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
 export const amsTableColor = "#000000";
 export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -585,12 +639,12 @@ export const amsTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5re
 export const amsTableFontWeight = 400;
 export const amsTableLineHeight = "1.6";
 export const amsTableCaptionFontWeight = 800;
-export const amsTableCellBorderBottom = "0.0625rem solid #E8E8E8";
+export const amsTableCellBorderBlockEnd = "0.0625rem solid #E8E8E8";
 export const amsTableCellPaddingBlock = "1rem";
 export const amsTableCellPaddingInline = "1rem";
 export const amsTableHeaderCellFontWeight = 800;
 export const amsTabsListBackgroundColor = "#FFFFFF";
-export const amsTabsListBorderBottom = "0.125rem solid #004699";
+export const amsTabsListBorderBlockEnd = "0.125rem solid #004699";
 export const amsTabsButtonColor = "#004699";
 export const amsTabsButtonCursor = "pointer";
 export const amsTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -613,8 +667,8 @@ export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTextAreaFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsTextAreaFontWeight = 400;
 export const amsTextAreaLineHeight = "1.6";
-export const amsTextAreaMinHeight = "calc(1.6 * 1em + 2 * 0.5rem)";
-export const amsTextAreaOutlineOffset = "2px";
+export const amsTextAreaMinBlockSize = "calc(1.6 * 1em + 2 * 0.5rem)";
+export const amsTextAreaOutlineOffset = "0.125rem";
 export const amsTextAreaPaddingBlock = "0.5rem";
 export const amsTextAreaPaddingInline = "1rem";
 export const amsTextAreaDisabledBackgroundColor = "#FFFFFF";
@@ -632,7 +686,7 @@ export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTextInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsTextInputFontWeight = 400;
 export const amsTextInputLineHeight = "1.6";
-export const amsTextInputOutlineOffset = "2px";
+export const amsTextInputOutlineOffset = "0.125rem";
 export const amsTextInputPaddingBlock = ".5rem";
 export const amsTextInputPaddingInline = "1rem";
 export const amsTextInputDisabledBackgroundColor = "#FFFFFF";
@@ -649,7 +703,7 @@ export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTimeInputFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsTimeInputFontWeight = 400;
 export const amsTimeInputLineHeight = "1.6";
-export const amsTimeInputOutlineOffset = "2px";
+export const amsTimeInputOutlineOffset = "0.125rem";
 export const amsTimeInputPaddingBlock = ".5rem";
 export const amsTimeInputPaddingInline = "1rem";
 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>\")";
@@ -673,10 +727,10 @@ export const amsTopTaskLinkLabelFontWeight = 800;
 export const amsTopTaskLinkLabelLineHeight = "1.5";
 export const amsTopTaskLinkLabelTextDecorationLine = "none";
 export const amsTopTaskLinkLabelTextDecorationThickness = "0.125rem";
-export const amsTopTaskLinkLabelTextUnderlineOffset = "0.375rem";
+export const amsTopTaskLinkLabelTextUnderlineOffset = "0.3333em";
 export const amsTopTaskLinkLabelHoverColor = "#102E62";
 export const amsTopTaskLinkLabelHoverTextDecorationLine = "underline";
-export const amsTopTaskLinkOutlineOffset = "2px";
+export const amsTopTaskLinkOutlineOffset = "0.125rem";
 export const amsUnorderedListColor = "#000000";
 export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsUnorderedListFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
@@ -690,3 +744,5 @@ export const amsUnorderedListItemPaddingInlineStart = "0.875rem"; // The total l
 export const amsUnorderedListUnorderedListListStyleType = "'\\2013'";
 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 amsUnorderedListSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsUnorderedListSmallLineHeight = "1.6";