@amsterdam/design-system-tokens 2.1.0 → 3.0.0

package/dist/index.mjs

@@ -12,8 +12,8 @@ export const amsBorderWidthS = "0.0625rem";
 export const amsBorderWidthM = "0.125rem";
 export const amsBorderWidthL = "0.1875rem";
 export const amsBorderWidthXl = "0.25rem";
-export const amsColorInteractiveSecondary = "#181818"; // Use `currentColor` instead
-export const amsColorInteractiveContrast = "#181818";
+export const amsColorInteractiveSecondary = "#202020"; // Use `currentColor` instead
+export const amsColorInteractiveContrast = "#202020";
 export const amsColorInteractive = "#004699";
 export const amsColorInteractiveDisabled = "#767676";
 export const amsColorInteractiveHover = "#003677";
@@ -23,17 +23,17 @@ export const amsColorInteractiveInverse = "#ffffff";
 export const amsColorBackground = "#ffffff";
 export const amsColorFeedbackError = "#ec0000";
 export const amsColorFeedbackInfo = "#009de6";
-export const amsColorFeedbackSuccess = "#00a03c";
+export const amsColorFeedbackSuccess = "#00893c";
 export const amsColorFeedbackWarning = "#ff9100";
 export const amsColorHighlightAzure = "#009de6";
-export const amsColorHighlightGreen = "#00a03c";
+export const amsColorHighlightGreen = "#00893c";
 export const amsColorHighlightLime = "#bed200";
 export const amsColorHighlightMagenta = "#e50082";
 export const amsColorHighlightOrange = "#ff9100";
 export const amsColorHighlightPurple = "#a00078";
 export const amsColorHighlightYellow = "#ffe600";
 export const amsColorSeparator = "#d1d1d1";
-export const amsColorText = "#181818";
+export const amsColorText = "#202020";
 export const amsColorTextInverse = "#ffffff";
 export const amsColorTextSecondary = "#767676";
 export const amsCursorDisabled = "not-allowed";
@@ -85,7 +85,7 @@ export const amsInputsBackgroundColor = "#ffffff";
 export const amsInputsBorderColor = "currentColor";
 export const amsInputsBorderStyle = "solid";
 export const amsInputsBorderWidth = "0.125rem";
-export const amsInputsColor = "#181818";
+export const amsInputsColor = "#202020";
 export const amsInputsFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsInputsFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -110,8 +110,8 @@ export const amsLinksHoverTextDecorationThickness = "0.1875rem"; // 3px
 export const amsLinksHoverTextUnderlineOffset = "0.09375rem"; // 1.5px
 export const amsLinksSubtleTextDecorationLine = "none";
 export const amsLinksSubtleHoverTextDecorationLine = "underline";
-export const amsLinksContrastColor = "#181818";
-export const amsLinksContrastHoverColor = "#181818";
+export const amsLinksContrastColor = "#202020";
+export const amsLinksContrastHoverColor = "#202020";
 export const amsLinksInverseColor = "#ffffff";
 export const amsLinksInverseHoverColor = "#ffffff";
 export const amsAccordionButtonFontFamily =
@@ -151,8 +151,8 @@ export const amsAlertContentPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsAlertErrorBorderColor = "#ec0000";
 export const amsAlertErrorSeverityIndicatorBackgroundColor = "#ec0000";
-export const amsAlertSuccessBorderColor = "#00a03c";
-export const amsAlertSuccessSeverityIndicatorBackgroundColor = "#00a03c";
+export const amsAlertSuccessBorderColor = "#00893c";
+export const amsAlertSuccessSeverityIndicatorBackgroundColor = "#00893c";
 export const amsAlertWarningBorderColor = "#ff9100";
 export const amsAlertWarningSeverityIndicatorBackgroundColor = "#ff9100";
 export const amsAvatarAspectRatio = "1 / 1";
@@ -173,22 +173,22 @@ export const amsAvatarForcedColorsBorderWidth = "0.125rem";
 export const amsAvatarAzureBackgroundColor = "#009de6";
 export const amsAvatarAzureBorderColor = "#009de6";
 export const amsAvatarAzureColor = "#ffffff";
-export const amsAvatarGreenBackgroundColor = "#00a03c";
-export const amsAvatarGreenBorderColor = "#00a03c";
+export const amsAvatarGreenBackgroundColor = "#00893c";
+export const amsAvatarGreenBorderColor = "#00893c";
 export const amsAvatarGreenColor = "#ffffff";
 export const amsAvatarLimeBackgroundColor = "#bed200";
 export const amsAvatarLimeBorderColor = "#bed200";
-export const amsAvatarLimeColor = "#181818";
+export const amsAvatarLimeColor = "#202020";
 export const amsAvatarMagentaBackgroundColor = "#e50082";
 export const amsAvatarMagentaBorderColor = "#e50082";
 export const amsAvatarMagentaColor = "#ffffff";
 export const amsAvatarOrangeBackgroundColor = "#ff9100";
 export const amsAvatarOrangeBorderColor = "#ff9100";
-export const amsAvatarOrangeColor = "#181818";
+export const amsAvatarOrangeColor = "#202020";
 export const amsAvatarYellowBackgroundColor = "#ffe600";
 export const amsAvatarYellowBorderColor = "#ffe600";
-export const amsAvatarYellowColor = "#181818";
-export const amsBadgeBackgroundColor = "#00a03c";
+export const amsAvatarYellowColor = "#202020";
+export const amsBadgeBackgroundColor = "#00893c";
 export const amsBadgeColor = "#ffffff";
 export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsBadgeFontSize =
@@ -200,18 +200,18 @@ export const amsBadgePaddingInline =
 export const amsBadgeAzureBackgroundColor = "#009de6";
 export const amsBadgeAzureColor = "#ffffff";
 export const amsBadgeLimeBackgroundColor = "#bed200";
-export const amsBadgeLimeColor = "#181818";
+export const amsBadgeLimeColor = "#202020";
 export const amsBadgeMagentaBackgroundColor = "#e50082";
 export const amsBadgeMagentaColor = "#ffffff";
 export const amsBadgeOrangeBackgroundColor = "#ff9100";
-export const amsBadgeOrangeColor = "#181818";
+export const amsBadgeOrangeColor = "#202020";
 export const amsBadgePurpleBackgroundColor = "#a00078";
 export const amsBadgePurpleColor = "#ffffff";
 export const amsBadgeRedBackgroundColor = "#ec0000";
 export const amsBadgeRedColor = "#ffffff";
 export const amsBadgeYellowBackgroundColor = "#ffe600";
-export const amsBadgeYellowColor = "#181818";
-export const amsBlockquoteColor = "#181818";
+export const amsBadgeYellowColor = "#202020";
+export const amsBlockquoteColor = "#202020";
 export const amsBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsBlockquoteFontSize =
   "clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)";
@@ -275,7 +275,7 @@ export const amsButtonTertiaryColor = "#004699";
 export const amsButtonTertiaryDisabledColor = "#767676";
 export const amsButtonTertiaryHoverBorderColor = "currentColor";
 export const amsButtonTertiaryHoverColor = "#003677";
-export const amsCallToActionLinkBackgroundColor = "#00a03c";
+export const amsCallToActionLinkBackgroundColor = "#00893c";
 export const amsCallToActionLinkColor = "#ffffff";
 export const amsCallToActionLinkFontFamily =
   "'Amsterdam Sans', Arial, sans-serif";
@@ -290,7 +290,7 @@ export const amsCallToActionLinkPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsCallToActionLinkTextDecorationThickness = "0.125rem";
 export const amsCallToActionLinkTextUnderlineOffset = "0.15625rem";
-export const amsCallToActionLinkHoverBackgroundColor = "#007c2e";
+export const amsCallToActionLinkHoverBackgroundColor = "#10552b";
 export const amsCallToActionLinkHoverTextDecorationThickness = "0.1875rem";
 export const amsCallToActionLinkHoverTextUnderlineOffset = "0.09375rem";
 export const amsCardHeadingMarginBlockEnd =
@@ -308,7 +308,7 @@ export const amsCardLinkTextUnderlineOffset = "0.15625rem";
 export const amsCardLinkHoverColor = "#003677";
 export const amsCardLinkHoverTextDecorationLine = "underline";
 export const amsCardOutlineOffset = "0.25rem";
-export const amsCharacterCountColor = "#181818";
+export const amsCharacterCountColor = "#202020";
 export const amsCharacterCountFontFamily =
   "'Amsterdam Sans', Arial, sans-serif";
 export const amsCharacterCountFontSize = "1rem";
@@ -340,7 +340,7 @@ export const amsCheckboxRectangleStroke = "#004699";
 export const amsCheckboxRectangleDisabledStroke = "#767676";
 export const amsCheckboxRectangleInvalidStroke = "#ec0000";
 export const amsCheckboxRectangleInvalidHoverStroke = "#b70000";
-export const amsCheckboxColor = "#181818";
+export const amsCheckboxColor = "#202020";
 export const amsCheckboxCursor = "pointer";
 export const amsCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsCheckboxFontSize =
@@ -386,7 +386,7 @@ export const amsDateInputBackgroundColor = "#ffffff";
 export const amsDateInputBorderColor = "currentColor";
 export const amsDateInputBorderStyle = "solid";
 export const amsDateInputBorderWidth = "0.125rem";
-export const amsDateInputColor = "#181818";
+export const amsDateInputColor = "#202020";
 export const amsDateInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsDateInputFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -404,7 +404,7 @@ export const amsDateInputInvalidHoverBoxShadow =
 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";
-export const amsDescriptionListColor = "#181818";
+export const amsDescriptionListColor = "#202020";
 export const amsDescriptionListColumnGap =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsDescriptionListFontFamily =
@@ -467,25 +467,38 @@ export const amsErrorMessageFontWeight = "400";
 export const amsErrorMessageGap =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsErrorMessageLineHeight = "1.8";
-export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #ec0000";
-export const amsFieldSetInvalidPaddingInlineStart =
-  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsFieldSetLegendColor = "#181818";
+export const amsFieldSetLegendMarginBlockEnd =
+  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
+export const amsFieldSetLegendColor = "#202020";
 export const amsFieldSetLegendFontFamily =
   "'Amsterdam Sans', Arial, sans-serif";
 export const amsFieldSetLegendFontSize =
   "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
 export const amsFieldSetLegendFontWeight = "800";
 export const amsFieldSetLegendLineHeight = "1.3";
-export const amsFieldSetLegendMarginBlockEnd =
-  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldSetLegendTextWrap = "balance";
+export const amsFieldSetLegendInFieldsetFontWeight = "400";
+export const amsFieldSetChildMarginBlockEnd =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
+export const amsFieldSetChildBeforeErrorMessageMarginBlockEnd =
+  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
+export const amsFieldSetChildBeforeFieldOrFieldSetMarginBlockEnd =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
+export const amsFieldSetChildBetweenFieldsAndFieldSetsMarginBlockEnd =
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
+export const amsFieldSetInvalidBorderInlineStart = "0.1875rem solid #ec0000";
+export const amsFieldSetInvalidPaddingInlineStart =
+  "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsFieldGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
+export const amsFieldChildMarginBlockEnd =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
+export const amsFieldChildBeforeErrorMessageMarginBlockEnd =
+  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #ec0000";
 export const amsFieldInvalidPaddingInlineStart =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsFigureGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
-export const amsFigureCaptionColor = "#181818";
+export const amsFigureCaptionColor = "#202020";
 export const amsFigureCaptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsFigureCaptionFontSize = "1rem";
 export const amsFigureCaptionFontWeight = "400";
@@ -495,7 +508,7 @@ export const amsFileInputBackgroundColor = "#ffffff";
 export const amsFileInputBorderColor = "currentColor";
 export const amsFileInputBorderStyle = "dashed";
 export const amsFileInputBorderWidth = "0.125rem";
-export const amsFileInputColor = "#181818";
+export const amsFileInputColor = "#202020";
 export const amsFileInputCursor = "pointer";
 export const amsFileInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsFileInputFontSize =
@@ -571,12 +584,13 @@ export const amsHeading_5FontSize = "1rem";
 export const amsHeading_5LineHeight = "1.4";
 export const amsHeading_6FontSize = "1rem";
 export const amsHeading_6LineHeight = "1.4";
-export const amsHeadingColor = "#181818";
+export const amsHeadingColor = "#202020";
 export const amsHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsHeadingFontWeight = "800";
 export const amsHeadingTextWrap = "balance";
 export const amsHeadingInverseColor = "#ffffff";
 export const amsHintFontWeight = "400";
+export const amsHintInFieldsetColor = "#767676";
 export const amsIconButtonColor = "#004699";
 export const amsIconButtonCursor = "pointer";
 export const amsIconButtonOutlineOffset = "0.25rem";
@@ -584,9 +598,9 @@ export const amsIconButtonHoverBackgroundColor = "rgb(0 70 153 / 12.5%)";
 export const amsIconButtonHoverColor = "#003677";
 export const amsIconButtonDisabledColor = "#767676";
 export const amsIconButtonDisabledCursor = "not-allowed";
-export const amsIconButtonContrastColor = "#181818";
+export const amsIconButtonContrastColor = "#202020";
 export const amsIconButtonContrastHoverBackgroundColor = "rgb(0 0 0 / 12.5%)";
-export const amsIconButtonContrastHoverColor = "#181818";
+export const amsIconButtonContrastHoverColor = "#202020";
 export const amsIconButtonContrastDisabledColor = "#767676";
 export const amsIconButtonInverseBackgroundColor = "#004699";
 export const amsIconButtonInverseColor = "#ffffff";
@@ -636,13 +650,14 @@ export const amsImageSliderThumbnailsThumbnailInViewOpacity = "100%";
 export const amsImageSliderThumbnailsThumbnailHoverOpacity = "100%";
 export const amsImageAspectRatio = "16 / 9";
 export const amsInvalidFormAlertOutlineOffset = "0.25rem";
-export const amsLabelColor = "#181818";
+export const amsLabelColor = "#202020";
 export const amsLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsLabelFontSize =
   "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
 export const amsLabelFontWeight = "800";
 export const amsLabelLineHeight = "1.3";
 export const amsLabelTextWrap = "balance";
+export const amsLabelInFieldsetFontWeight = "400";
 export const amsLinkListGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsLinkListLinkColor = "#004699";
 export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -663,8 +678,8 @@ export const amsLinkListLinkLargeFontSize =
 export const amsLinkListLinkLargeLineHeight = "1.6";
 export const amsLinkListLinkHoverColor = "#003677";
 export const amsLinkListLinkHoverTextDecorationLine = "underline";
-export const amsLinkListLinkContrastColor = "#181818";
-export const amsLinkListLinkContrastHoverColor = "#181818";
+export const amsLinkListLinkContrastColor = "#202020";
+export const amsLinkListLinkContrastHoverColor = "#202020";
 export const amsLinkListLinkInverseColor = "#ffffff";
 export const amsLinkListLinkInverseHoverColor = "#ffffff";
 export const amsLinkColor = "#004699";
@@ -678,18 +693,18 @@ export const amsLinkTextUnderlineOffset = "0.15625rem";
 export const amsLinkHoverColor = "#003677";
 export const amsLinkHoverTextDecorationThickness = "0.1875rem";
 export const amsLinkHoverTextUnderlineOffset = "0.09375rem";
-export const amsLinkContrastColor = "#181818";
-export const amsLinkContrastHoverColor = "#181818";
+export const amsLinkContrastColor = "#202020";
+export const amsLinkContrastHoverColor = "#202020";
 export const amsLinkInverseColor = "#ffffff";
 export const amsLinkInverseHoverColor = "#ffffff";
 export const amsLogoBlockSize = "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
 export const amsLogoMinBlockSize = "2.5rem";
 export const amsLogoEmblemColor = "#ec0000";
-export const amsLogoSubsiteColor = "#181818";
+export const amsLogoSubsiteColor = "#202020";
 export const amsLogoTitleColor = "#ec0000";
 export const amsMarkBackgroundColor = "#ffe600";
-export const amsMenuLinkContrastColor = "#181818"; // The menu has a dark background now, so this is no longer needed.
-export const amsMenuLinkContrastHoverColor = "#181818"; // The menu has a dark background now, so this is no longer needed.
+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 amsMenuLinkColor = "#ffffff";
@@ -718,7 +733,7 @@ export const amsMenuWidePaddingBlock =
 export const amsMenuWidePaddingInline =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsMenuListGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsOrderedListColor = "#181818";
+export const amsOrderedListColor = "#202020";
 export const amsOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsOrderedListFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -778,12 +793,14 @@ export const amsPageHeaderWidePaddingInline =
 export const amsPageHeaderLogoLinkColumnGap =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsPageHeaderLogoLinkOutlineOffset = "0.25rem";
-export const amsPageHeaderBrandNameColor = "#181818";
+export const amsPageHeaderBrandNameColor = "#202020";
 export const amsPageHeaderBrandNameFontSize =
   "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
 export const amsPageHeaderBrandNameFontWeight = "800";
 export const amsPageHeaderBrandNameLineHeight = "1.3";
 export const amsPageHeaderBrandNameTextWrap = "balance";
+export const amsPageHeaderMegaMenuPaddingBlock =
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderMegaMenuButtonCursor = "pointer";
 export const amsPageHeaderMegaMenuButtonLabelOpenFontWeight = "800";
 export const amsPageHeaderMenuColumnGap =
@@ -803,6 +820,8 @@ export const amsPageHeaderMenuItemOutlineOffset = "0.25rem";
 export const amsPageHeaderMenuItemPaddingBlock =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuItemHoverColor = "#003677";
+export const amsPageHeaderMenuLinkGap =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuLinkTextDecorationLine = "none";
 export const amsPageHeaderMenuLinkTextDecorationThickness = "0.125rem";
 export const amsPageHeaderMenuLinkTextUnderlineOffset = "0.15625rem";
@@ -810,8 +829,8 @@ export const amsPageHeaderMenuLinkHoverTextDecorationLine = "underline";
 export const amsPageHeaderNavigationColumnGap =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderNavigationRowGap =
-  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
-export const amsPageHeadingColor = "#181818";
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
+export const amsPageHeadingColor = "#202020";
 export const amsPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPageHeadingFontSize =
   "clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem)";
@@ -821,6 +840,9 @@ export const amsPageHeadingTextWrap = "balance";
 export const amsPageHeadingInverseColor = "#ffffff";
 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
 export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPaginationFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -838,7 +860,7 @@ export const amsPaginationLinkTextUnderlineOffset = "0.15625rem";
 export const amsPaginationLinkCurrentFontWeight = "800";
 export const amsPaginationLinkHoverColor = "#003677";
 export const amsPaginationLinkHoverTextDecorationLine = "underline";
-export const amsParagraphColor = "#181818";
+export const amsParagraphColor = "#202020";
 export const amsParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsParagraphFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -850,11 +872,12 @@ export const amsParagraphSmallLineHeight = "1.6";
 export const amsParagraphLargeFontSize =
   "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)";
 export const amsParagraphLargeLineHeight = "1.6";
+export const amsParagraphLargeTextWrap = "balance";
 export const amsPasswordInputBackgroundColor = "#ffffff";
 export const amsPasswordInputBorderColor = "currentColor";
 export const amsPasswordInputBorderStyle = "solid";
 export const amsPasswordInputBorderWidth = "0.125rem";
-export const amsPasswordInputColor = "#181818";
+export const amsPasswordInputColor = "#202020";
 export const amsPasswordInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPasswordInputFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -873,7 +896,7 @@ export const amsPasswordInputInvalidHoverBorderColor = "#b70000";
 export const amsPasswordInputInvalidHoverBoxShadow =
   "inset 0 0 0 0.0625rem #b70000";
 export const amsPasswordInputPlaceholderColor = "#767676";
-export const amsRadioColor = "#181818";
+export const amsRadioColor = "#202020";
 export const amsRadioCursor = "pointer";
 export const amsRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsRadioFontSize =
@@ -918,7 +941,7 @@ export const amsSearchFieldInputBackgroundColor = "#ffffff";
 export const amsSearchFieldInputBorderColor = "currentColor";
 export const amsSearchFieldInputBorderStyle = "solid";
 export const amsSearchFieldInputBorderWidth = "0.125rem";
-export const amsSearchFieldInputColor = "#181818";
+export const amsSearchFieldInputColor = "#202020";
 export const amsSearchFieldInputFontFamily =
   "'Amsterdam Sans', Arial, sans-serif";
 export const amsSearchFieldInputFontSize =
@@ -952,7 +975,7 @@ export const amsSelectBackgroundPosition =
 export const amsSelectBorderColor = "currentColor";
 export const amsSelectBorderStyle = "solid";
 export const amsSelectBorderWidth = "0.125rem";
-export const amsSelectColor = "#181818";
+export const amsSelectColor = "#202020";
 export const amsSelectFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsSelectFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -989,7 +1012,7 @@ export const amsSkipLinkPaddingInline =
 export const amsSkipLinkHoverBackgroundColor = "#003677";
 export const amsSpotlightBackgroundColor = "#a00078";
 export const amsSpotlightAzureBackgroundColor = "#009de6";
-export const amsSpotlightGreenBackgroundColor = "#00a03c";
+export const amsSpotlightGreenBackgroundColor = "#00893c";
 export const amsSpotlightLimeBackgroundColor = "#bed200";
 export const amsSpotlightMagentaBackgroundColor = "#e50082";
 export const amsSpotlightOrangeBackgroundColor = "#ff9100";
@@ -1014,8 +1037,8 @@ export const amsStandaloneLinkOutlineOffset = "0.25rem";
 export const amsStandaloneLinkTextDecorationLine = "none";
 export const amsStandaloneLinkTextDecorationThickness = "0.125rem";
 export const amsStandaloneLinkTextUnderlineOffset = "0.15625rem";
-export const amsStandaloneLinkContrastColor = "#181818";
-export const amsStandaloneLinkContrastHoverColor = "#181818";
+export const amsStandaloneLinkContrastColor = "#202020";
+export const amsStandaloneLinkContrastHoverColor = "#202020";
 export const amsStandaloneLinkInverseColor = "#ffffff";
 export const amsStandaloneLinkInverseHoverColor = "#ffffff";
 export const amsSwitchBackgroundColor = "#767676";
@@ -1055,7 +1078,7 @@ export const amsTableOfContentsListListPaddingBlockStart =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsTableOfContentsListListPaddingInlineStart =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
-export const amsTableColor = "#181818";
+export const amsTableColor = "#202020";
 export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTableFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -1092,7 +1115,7 @@ export const amsTextAreaBackgroundColor = "#ffffff";
 export const amsTextAreaBorderColor = "currentColor";
 export const amsTextAreaBorderStyle = "solid";
 export const amsTextAreaBorderWidth = "0.125rem";
-export const amsTextAreaColor = "#181818";
+export const amsTextAreaColor = "#202020";
 export const amsTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTextAreaFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -1116,7 +1139,7 @@ export const amsTextInputBackgroundColor = "#ffffff";
 export const amsTextInputBorderColor = "currentColor";
 export const amsTextInputBorderStyle = "solid";
 export const amsTextInputBorderWidth = "0.125rem";
-export const amsTextInputColor = "#181818";
+export const amsTextInputColor = "#202020";
 export const amsTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTextInputFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -1153,7 +1176,7 @@ export const amsTimeInputBackgroundColor = "#ffffff";
 export const amsTimeInputBorderColor = "currentColor";
 export const amsTimeInputBorderStyle = "solid";
 export const amsTimeInputBorderWidth = "0.125rem";
-export const amsTimeInputColor = "#181818";
+export const amsTimeInputColor = "#202020";
 export const amsTimeInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsTimeInputFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -1171,7 +1194,7 @@ export const amsTimeInputInvalidHoverBoxShadow =
 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";
-export const amsUnorderedListColor = "#181818";
+export const amsUnorderedListColor = "#202020";
 export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsUnorderedListFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";

package/dist/index.scss

@@ -11,8 +11,8 @@ $ams-border-width-s: 0.0625rem;
 $ams-border-width-m: 0.125rem;
 $ams-border-width-l: 0.1875rem;
 $ams-border-width-xl: 0.25rem;
-$ams-color-interactive-secondary: #181818; // Use `currentColor` instead
-$ams-color-interactive-contrast: #181818;
+$ams-color-interactive-secondary: #202020; // Use `currentColor` instead
+$ams-color-interactive-contrast: #202020;
 $ams-color-interactive: #004699;
 $ams-color-interactive-disabled: #767676;
 $ams-color-interactive-hover: #003677;
@@ -22,17 +22,17 @@ $ams-color-interactive-inverse: #ffffff;
 $ams-color-background: #ffffff;
 $ams-color-feedback-error: #ec0000;
 $ams-color-feedback-info: #009de6;
-$ams-color-feedback-success: #00a03c;
+$ams-color-feedback-success: #00893c;
 $ams-color-feedback-warning: #ff9100;
 $ams-color-highlight-azure: #009de6;
-$ams-color-highlight-green: #00a03c;
+$ams-color-highlight-green: #00893c;
 $ams-color-highlight-lime: #bed200;
 $ams-color-highlight-magenta: #e50082;
 $ams-color-highlight-orange: #ff9100;
 $ams-color-highlight-purple: #a00078;
 $ams-color-highlight-yellow: #ffe600;
 $ams-color-separator: #d1d1d1;
-$ams-color-text: #181818;
+$ams-color-text: #202020;
 $ams-color-text-inverse: #ffffff;
 $ams-color-text-secondary: #767676;
 $ams-cursor-disabled: not-allowed;
@@ -89,8 +89,8 @@ $ams-button-secondary-border-color: currentColor;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-tertiary-border-color: transparent;
 $ams-button-tertiary-hover-border-color: currentColor;
-$ams-call-to-action-link-background-color: #00a03c;
-$ams-call-to-action-link-hover-background-color: #007c2e;
+$ams-call-to-action-link-background-color: #00893c;
+$ams-call-to-action-link-hover-background-color: #10552b;
 $ams-date-input-disabled-calender-picker-indicator-background-image: 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
 $ams-date-input-disabled-calendar-picker-indicator-background-image: 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>");
 $ams-date-input-hover-calender-picker-indicator-background-image: 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
@@ -130,6 +130,8 @@ $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less
 $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 $ams-page-footer-spotlight-background-color: #004699;
 $ams-page-max-inline-size: 90rem;
+$ams-page-with-menu-max-inline-size: 120rem;
+$ams-paragraph-large-text-wrap: balance;
 $ams-search-field-input-cancel-button-background-image: 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>");
 $ams-select-background-image: 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>");
 $ams-select-disabled-background-image: 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>");
@@ -411,15 +413,22 @@ $ams-error-message-font-size: $ams-typography-body-text-font-size;
 $ams-error-message-font-weight: $ams-typography-body-text-font-weight;
 $ams-error-message-gap: $ams-space-xs;
 $ams-error-message-line-height: $ams-typography-body-text-line-height;
-$ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
-$ams-field-set-invalid-padding-inline-start: $ams-space-m;
+$ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-color: $ams-color-text;
 $ams-field-set-legend-font-family: $ams-typography-font-family;
 $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
 $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
-$ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
+$ams-field-set-legend-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
+$ams-field-set-child-margin-block-end: $ams-space-xs;
+$ams-field-set-child-before-error-message-margin-block-end: $ams-space-s;
+$ams-field-set-child-before-field-or-field-set-margin-block-end: $ams-space-m;
+$ams-field-set-child-between-fields-and-field-sets-margin-block-end: $ams-space-l;
+$ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
+$ams-field-set-invalid-padding-inline-start: $ams-space-m;
 $ams-field-gap: $ams-space-s;
+$ams-field-child-margin-block-end: $ams-space-xs;
+$ams-field-child-before-error-message-margin-block-end: $ams-space-s;
 $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
 $ams-field-invalid-padding-inline-start: $ams-space-m;
 $ams-figure-gap: $ams-space-s;
@@ -469,6 +478,7 @@ $ams-heading-font-weight: $ams-typography-heading-font-weight;
 $ams-heading-text-wrap: $ams-typography-heading-text-wrap;
 $ams-heading-inverse-color: $ams-color-text-inverse;
 $ams-hint-font-weight: $ams-typography-body-text-font-weight;
+$ams-hint-in-fieldset-color: $ams-color-text-secondary;
 $ams-icon-button-color: $ams-color-interactive;
 $ams-icon-button-cursor: $ams-cursor-interactive;
 $ams-icon-button-outline-offset: $ams-focus-outline-offset;
@@ -513,6 +523,7 @@ $ams-label-font-family: $ams-typography-font-family;
 $ams-label-font-weight: $ams-typography-heading-font-weight;
 $ams-label-line-height: $ams-typography-heading-3-line-height;
 $ams-label-text-wrap: $ams-typography-heading-text-wrap;
+$ams-label-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
 $ams-link-list-gap: $ams-space-s;
 $ams-link-list-link-font-family: $ams-typography-font-family;
 $ams-link-list-link-font-size: $ams-typography-body-text-font-size;
@@ -586,6 +597,7 @@ $ams-page-header-brand-name-color: $ams-color-text;
 $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
 $ams-page-header-brand-name-line-height: $ams-typography-heading-3-line-height;
 $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
+$ams-page-header-mega-menu-padding-block: $ams-space-l;
 $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
 $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-page-header-menu-column-gap: $ams-space-l;
@@ -597,12 +609,13 @@ $ams-page-header-menu-item-font-weight: $ams-typography-body-text-font-weight;
 $ams-page-header-menu-item-line-height: $ams-typography-body-text-line-height;
 $ams-page-header-menu-item-outline-offset: $ams-focus-outline-offset;
 $ams-page-header-menu-item-padding-block: $ams-space-xs;
+$ams-page-header-menu-link-gap: $ams-space-xs;
 $ams-page-header-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-page-header-navigation-column-gap: $ams-space-l;
-$ams-page-header-navigation-row-gap: $ams-space-s;
+$ams-page-header-navigation-row-gap: $ams-space-l;
 $ams-page-heading-color: $ams-color-text;
 $ams-page-heading-font-family: $ams-typography-font-family;
 $ams-page-heading-font-size: $ams-typography-heading-0-font-size;
@@ -878,6 +891,7 @@ $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
 $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
 $ams-page-header-menu-item-color: $ams-links-color;
 $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
+$ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
 $ams-password-input-background-color: $ams-inputs-background-color;