@amsterdam/design-system-tokens 2.2.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,26 +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";
@@ -496,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 =
@@ -572,7 +584,7 @@ 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";
@@ -586,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";
@@ -638,7 +650,7 @@ 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)";
@@ -666,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";
@@ -681,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";
@@ -721,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)";
@@ -781,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 =
@@ -815,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)";
@@ -846,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)";
@@ -858,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)";
@@ -881,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 =
@@ -926,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 =
@@ -960,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)";
@@ -997,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";
@@ -1022,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";
@@ -1063,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)";
@@ -1100,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)";
@@ -1124,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)";
@@ -1161,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)";
@@ -1179,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
@@ -131,6 +131,7 @@ $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total
 $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>");
@@ -412,16 +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;
@@ -590,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;
@@ -607,7 +615,7 @@ $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration
 $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;

package/dist/index.theme.css

@@ -13,8 +13,8 @@
   --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;
@@ -24,17 +24,17 @@
   --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;
@@ -91,8 +91,8 @@
   --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 */
@@ -133,6 +133,7 @@
   --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>");
@@ -414,16 +415,22 @@
   --ams-error-message-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-typography-body-text-line-height);
-  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
-  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
+  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-color: var(--ams-color-text);
   --ams-field-set-legend-font-family: var(--ams-typography-font-family);
   --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
-  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-field-set-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-set-child-before-error-message-margin-block-end: var(--ams-space-s);
+  --ams-field-set-child-before-field-or-field-set-margin-block-end: var(--ams-space-m);
+  --ams-field-set-child-between-fields-and-field-sets-margin-block-end: var(--ams-space-l);
+  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
+  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
   --ams-field-gap: var(--ams-space-s);
+  --ams-field-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-child-before-error-message-margin-block-end: var(--ams-space-s);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
   --ams-figure-gap: var(--ams-space-s);
@@ -592,6 +599,7 @@
   --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-3-line-height);
   --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-page-header-mega-menu-padding-block: var(--ams-space-l);
   --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
   --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-page-header-menu-column-gap: var(--ams-space-l);
@@ -609,7 +617,7 @@
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
-  --ams-page-header-navigation-row-gap: var(--ams-space-s);
+  --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-heading-color: var(--ams-color-text);
   --ams-page-heading-font-family: var(--ams-typography-font-family);
   --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "3.0.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -25,12 +25,11 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "npm-run-all": "4.1.5",
     "style-dictionary": "5.1.1"
   },
   "scripts": {
     "clean": "rimraf dist/",
     "build": "node build.js",
-    "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
+    "build:watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
   }
 }