@amsterdam/design-system-tokens 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Dec 2023 15:48:43 GMT
+ * Generated on Wed, 31 Jan 2024 12:56:24 GMT
  */
 
 export const amsterdamColorPrimaryBlack = "#000000";
-export const amsterdamColorPrimaryWhite = "#ffffff";
+export const amsterdamColorPrimaryWhite = "#FFFFFF";
 export const amsterdamColorPrimaryBlue = "#004699";
 export const amsterdamColorPrimaryRed = "#EC0000";
 export const amsterdamColorDarkBlue = "#102E62";
@@ -12,13 +12,12 @@ export const amsterdamColorOrange = "#FF9100";
 export const amsterdamColorYellow = "#FFE600";
 export const amsterdamColorGreen = "#BED200";
 export const amsterdamColorDarkGreen = "#00A03C";
-export const amsterdamColorBlue = "#009DEC";
+export const amsterdamColorBlue = "#009DE6";
 export const amsterdamColorPurple = "#A00078";
 export const amsterdamColorMagenta = "#E50082";
-export const amsterdamColorNeutralGrey1 = "#E6E6E6";
-export const amsterdamColorNeutralGrey2 = "#B4B4B4";
+export const amsterdamColorNeutralGrey1 = "#E8E8E8";
+export const amsterdamColorNeutralGrey2 = "#BEBEBE";
 export const amsterdamColorNeutralGrey3 = "#767676";
-export const amsterdamColorNeutralGrey4 = "#323232";
 export const amsterdamProportionXTall = "9 / 16";
 export const amsterdamProportionTall = "4 / 5";
 export const amsterdamProportionSquare = "1 / 1";
@@ -29,37 +28,33 @@ export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-seri
 export const amsterdamTypographyFontWeightNormal = 400;
 export const amsterdamTypographyFontWeightBold = 800;
 export const amsterdamTypographySpaciousTextLevel0FontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
-export const amsterdamTypographySpaciousTextLevel0LineHeight = "1.1";
+export const amsterdamTypographySpaciousTextLevel0LineHeight = "1.15";
 export const amsterdamTypographySpaciousTextLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
 export const amsterdamTypographySpaciousTextLevel1LineHeight = "1.2";
 export const amsterdamTypographySpaciousTextLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
-export const amsterdamTypographySpaciousTextLevel2LineHeight = "1.3";
+export const amsterdamTypographySpaciousTextLevel2LineHeight = "1.25";
 export const amsterdamTypographySpaciousTextLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
-export const amsterdamTypographySpaciousTextLevel3LineHeight = "1.4";
+export const amsterdamTypographySpaciousTextLevel3LineHeight = "1.3";
 export const amsterdamTypographySpaciousTextLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamTypographySpaciousTextLevel4LineHeight = "1.4";
-export const amsterdamTypographySpaciousTextLevel5FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamTypographySpaciousTextLevel5LineHeight = "1.5";
-export const amsterdamTypographySpaciousTextLevel6FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamTypographySpaciousTextLevel4LineHeight = "1.5";
+export const amsterdamTypographySpaciousTextLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamTypographySpaciousTextLevel5LineHeight = "1.6";
+export const amsterdamTypographySpaciousTextLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsterdamTypographySpaciousTextLevel6LineHeight = "1.6";
-export const amsterdamTypographySpaciousTextLevel7FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
-export const amsterdamTypographySpaciousTextLevel7LineHeight = "1.6";
 export const amsterdamTypographyCompactTextLevel0FontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
-export const amsterdamTypographyCompactTextLevel0LineHeight = "1.1";
+export const amsterdamTypographyCompactTextLevel0LineHeight = "1.15";
 export const amsterdamTypographyCompactTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
 export const amsterdamTypographyCompactTextLevel1LineHeight = "1.2";
 export const amsterdamTypographyCompactTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
-export const amsterdamTypographyCompactTextLevel2LineHeight = "1.3";
+export const amsterdamTypographyCompactTextLevel2LineHeight = "1.25";
 export const amsterdamTypographyCompactTextLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
-export const amsterdamTypographyCompactTextLevel3LineHeight = "1.4";
+export const amsterdamTypographyCompactTextLevel3LineHeight = "1.3";
 export const amsterdamTypographyCompactTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamTypographyCompactTextLevel4LineHeight = "1.4";
-export const amsterdamTypographyCompactTextLevel5FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamTypographyCompactTextLevel5LineHeight = "1.5";
-export const amsterdamTypographyCompactTextLevel6FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamTypographyCompactTextLevel4LineHeight = "1.5";
+export const amsterdamTypographyCompactTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamTypographyCompactTextLevel5LineHeight = "1.6";
+export const amsterdamTypographyCompactTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
 export const amsterdamTypographyCompactTextLevel6LineHeight = "1.6";
-export const amsterdamTypographyCompactTextLevel7FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
-export const amsterdamTypographyCompactTextLevel7LineHeight = "1.6";
 export const amsterdamBorderWidthSm = "1px";
 export const amsterdamBorderWidthMd = "2px";
 export const amsterdamBorderWidthLg = "3px";
@@ -68,7 +63,7 @@ export const amsterdamLinkAppearanceColor = "#004699";
 export const amsterdamLinkAppearanceTextDecorationThickness = "0.125rem";
 export const amsterdamLinkAppearanceTextUnderlineOffset = "0.375rem";
 export const amsterdamLinkAppearanceHoverColor = "#102E62";
-export const amsterdamLinkAppearanceOnBackgroundDarkColor = "#ffffff";
+export const amsterdamLinkAppearanceOnBackgroundDarkColor = "#FFFFFF";
 export const amsterdamLinkAppearanceOnBackgroundLightColor = "#000000";
 export const amsterdamLinkAppearanceRegularTextDecorationLine = "underline";
 export const amsterdamLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
@@ -84,12 +79,12 @@ export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
 export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamAccordionButtonFontWeight = 800;
 export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
-export const amsterdamAccordionButtonSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamAccordionButtonSpaciousLineHeight = "1.5";
-export const amsterdamAccordionButtonCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamAccordionButtonCompactLineHeight = "1.5";
-export const amsterdamAlertBackgroundColor = "#FFE600";
-export const amsterdamAlertBorder = "4px solid #FFE600";
+export const amsterdamAccordionButtonSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamAccordionButtonSpaciousLineHeight = "1.6";
+export const amsterdamAccordionButtonCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamAccordionButtonCompactLineHeight = "1.6";
+export const amsterdamAlertBorderWidth = "4px";
+export const amsterdamAlertBorderStyle = "solid";
 export const amsterdamAlertGap = "1rem";
 export const amsterdamAlertPaddingBlockStart = "1rem";
 export const amsterdamAlertPaddingBlockEnd = "1rem";
@@ -102,11 +97,10 @@ export const amsterdamAlertTitleSpaciousFontSize = "clamp(1.313rem, calc(0.703vw
 export const amsterdamAlertTitleSpaciousLineHeight = "1.5";
 export const amsterdamAlertTitleCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
 export const amsterdamAlertTitleCompactLineHeight = "1.5";
-export const amsterdamAlertErrorBackgroundColor = "#ffffff";
 export const amsterdamAlertErrorBorderColor = "#EC0000";
-export const amsterdamAlertSuccessBackgroundColor = "#ffffff";
+export const amsterdamAlertInfoBorderColor = "#004699";
 export const amsterdamAlertSuccessBorderColor = "#00A03C";
-export const amsterdamAlertCloseBackgroundColor = "transparent";
+export const amsterdamAlertWarningBorderColor = "#FF9100";
 export const amsterdamAlertCloseFill = "#000000";
 export const amsterdamAlertCloseHoverFill = "#004699";
 export const amsterdamAspectRatioXTall = "9 / 16";
@@ -115,17 +109,40 @@ export const amsterdamAspectRatioSquare = "1 / 1";
 export const amsterdamAspectRatioWide = "5 / 4";
 export const amsterdamAspectRatioXWide = "16 / 9";
 export const amsterdamAspectRatio2xWide = "32 / 9";
+export const amsterdamBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamBadgeFontWeight = 800;
+export const amsterdamBadgePaddingInline = "0.5rem";
+export const amsterdamBadgeSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamBadgeSpaciousLineHeight = "1.6";
+export const amsterdamBadgeCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamBadgeCompactLineHeight = "1.6";
+export const amsterdamBadgeBlueBackgroundColor = "#009DE6";
+export const amsterdamBadgeBlueColor = "#000000";
+export const amsterdamBadgeDarkBlueBackgroundColor = "#004699";
+export const amsterdamBadgeDarkBlueColor = "#FFFFFF";
+export const amsterdamBadgeDarkGreenBackgroundColor = "#00A03C";
+export const amsterdamBadgeDarkGreenColor = "#FFFFFF";
+export const amsterdamBadgeGreenBackgroundColor = "#BED200";
+export const amsterdamBadgeGreenColor = "#000000";
+export const amsterdamBadgeMagentaBackgroundColor = "#E50082";
+export const amsterdamBadgeMagentaColor = "#FFFFFF";
+export const amsterdamBadgeOrangeBackgroundColor = "#FF9100";
+export const amsterdamBadgeOrangeColor = "#000000";
+export const amsterdamBadgePurpleBackgroundColor = "#A00078";
+export const amsterdamBadgePurpleColor = "#FFFFFF";
+export const amsterdamBadgeYellowBackgroundColor = "#FFE600";
+export const amsterdamBadgeYellowColor = "#000000";
 export const amsterdamBlockquoteColor = "#000000";
 export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBlockquoteFontWeight = 800;
-export const amsterdamBlockquoteInverseColor = "#ffffff";
+export const amsterdamBlockquoteInverseColor = "#FFFFFF";
 export const amsterdamBlockquoteSpaciousFontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
-export const amsterdamBlockquoteSpaciousLineHeight = "1.4";
+export const amsterdamBlockquoteSpaciousLineHeight = "1.3";
 export const amsterdamBlockquoteCompactFontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
-export const amsterdamBlockquoteCompactLineHeight = "1.4";
+export const amsterdamBlockquoteCompactLineHeight = "1.3";
 export const amsterdamBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBreadcrumbFontWeight = 400;
-export const amsterdamBreadcrumbSeparatorBackgroundColor = "#004699";
+export const amsterdamBreadcrumbSeparatorBackgroundImage = "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 amsterdamBreadcrumbItemLinkColor = "#004699";
 export const amsterdamBreadcrumbItemLinkOutlineOffset = "2px";
 export const amsterdamBreadcrumbItemLinkTextDecorationLine = "none";
@@ -143,9 +160,9 @@ export const amsterdamButtonCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.
 export const amsterdamButtonCompactLineHeight = "1.6";
 export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
 export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
-export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #B4B4B4";
+export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #BEBEBE";
 export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
-export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #767676";
+export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
 export const amsterdamCardLinkColor = "#004699";
 export const amsterdamCardLinkTextDecorationLine = "none";
 export const amsterdamCardLinkTextDecorationThickness = "0.125rem";
@@ -180,20 +197,17 @@ export const amsterdamCheckboxSpaciousFontSize = "clamp(1.125rem, calc(0.469vw +
 export const amsterdamCheckboxSpaciousLineHeight = "1.6";
 export const amsterdamCheckboxCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
 export const amsterdamCheckboxCompactLineHeight = "1.6";
-export const amsterdamDialogBackgroundColor = "#ffffff";
+export const amsterdamDialogBackgroundColor = "#FFFFFF";
 export const amsterdamDialogBorder = "0";
 export const amsterdamDialogMaxInlineSize = "min(87.69vw, 45rem)";
 export const amsterdamDialogTitleColor = "#000000";
 export const amsterdamDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamDialogTitleFontWeight = 800;
-export const amsterdamDialogTitleSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamDialogTitleSpaciousLineHeight = "1.5";
-export const amsterdamDialogTitleCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamDialogTitleCompactLineHeight = "1.5";
+export const amsterdamDialogTitleSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamDialogTitleSpaciousLineHeight = "1.6";
+export const amsterdamDialogTitleCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamDialogTitleCompactLineHeight = "1.6";
 export const amsterdamDialogBackdropBackground = "#0006";
-export const amsterdamDialogCloseBackgroundColor = "transparent";
-export const amsterdamDialogCloseFill = "#000000";
-export const amsterdamDialogCloseHoverFill = "#004699";
 export const amsterdamDialogFormGap = "1.5rem";
 export const amsterdamDialogFormPaddingBlock = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
 export const amsterdamDialogFormPaddingInline = "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)";
@@ -205,10 +219,10 @@ export const amsterdamDialogFooterPaddingBlock = "1.5rem 0";
 export const amsterdamFormLabelColor = "#000000";
 export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamFormLabelFontWeight = 800;
-export const amsterdamFormLabelSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
-export const amsterdamFormLabelSpaciousLineHeight = "1.6";
-export const amsterdamFormLabelCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
-export const amsterdamFormLabelCompactLineHeight = "1.6";
+export const amsterdamFormLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamFormLabelSpaciousLineHeight = "1.5";
+export const amsterdamFormLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamFormLabelCompactLineHeight = "1.5";
 export const amsterdamGridColumnCount = "4";
 export const amsterdamGridSpaciousGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
 export const amsterdamGridSpaciousPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
@@ -216,54 +230,93 @@ export const amsterdamGridCompactGap = "clamp(1rem, calc(1.5625vw - 0.0625rem),
 export const amsterdamGridCompactPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
 export const amsterdamGridMediumColumnCount = "8";
 export const amsterdamGridWideColumnCount = "12";
+export const amsterdamHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
 export const amsterdamHeadingColor = "#000000";
 export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamHeadingFontWeight = 800;
-export const amsterdamHeadingInverseColor = "#ffffff";
+export const amsterdamHeadingInverseColor = "#FFFFFF";
 export const amsterdamHeadingSpaciousLevel1LineHeight = "1.2";
 export const amsterdamHeadingSpaciousLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
-export const amsterdamHeadingSpaciousLevel2LineHeight = "1.3";
+export const amsterdamHeadingSpaciousLevel2LineHeight = "1.25";
 export const amsterdamHeadingSpaciousLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
-export const amsterdamHeadingSpaciousLevel3LineHeight = "1.4";
+export const amsterdamHeadingSpaciousLevel3LineHeight = "1.3";
 export const amsterdamHeadingSpaciousLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
-export const amsterdamHeadingSpaciousLevel4LineHeight = "1.4";
+export const amsterdamHeadingSpaciousLevel4LineHeight = "1.5";
 export const amsterdamHeadingSpaciousLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamHeadingSpaciousLevel5LineHeight = "1.6";
+export const amsterdamHeadingSpaciousLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamHeadingSpaciousLevel6LineHeight = "1.6";
+export const amsterdamHeadingSpaciousLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsterdamHeadingCompactLevel1LineHeight = "1.2";
 export const amsterdamHeadingCompactLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
-export const amsterdamHeadingCompactLevel2LineHeight = "1.3";
+export const amsterdamHeadingCompactLevel2LineHeight = "1.25";
 export const amsterdamHeadingCompactLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
-export const amsterdamHeadingCompactLevel3LineHeight = "1.4";
+export const amsterdamHeadingCompactLevel3LineHeight = "1.3";
 export const amsterdamHeadingCompactLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
-export const amsterdamHeadingCompactLevel4LineHeight = "1.4";
+export const amsterdamHeadingCompactLevel4LineHeight = "1.5";
 export const amsterdamHeadingCompactLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamHighlightBlueBackgroundColor = "#004699";
-export const amsterdamHighlightDarkGreenBackgroundColor = "#00A03C";
-export const amsterdamHighlightGreenBackgroundColor = "#BED200";
-export const amsterdamHighlightLightBlueBackgroundColor = "#009DEC";
-export const amsterdamHighlightMagentaBackgroundColor = "#E50082";
-export const amsterdamHighlightOrangeBackgroundColor = "#FF9100";
-export const amsterdamHighlightPurpleBackgroundColor = "#A00078";
-export const amsterdamHighlightYellowBackgroundColor = "#FFE600";
+export const amsterdamHeadingCompactLevel5LineHeight = "1.6";
+export const amsterdamHeadingCompactLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamHeadingCompactLevel6LineHeight = "1.6";
+export const amsterdamHeadingCompactLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamIconButtonColor = "#004699";
+export const amsterdamIconButtonOutlineOffset = "2px";
+export const amsterdamIconButtonHoverBackgroundColor = "rgba(0, 70, 153, 0.125)";
+export const amsterdamIconButtonHoverColor = "#102E62";
+export const amsterdamIconButtonDisabledColor = "#BEBEBE";
+export const amsterdamIconButtonOnBackgroundLightColor = "#000000";
+export const amsterdamIconButtonOnBackgroundLightHoverBackgroundColor = "rgba(0, 0, 0, 0.125)";
+export const amsterdamIconButtonOnBackgroundLightHoverColor = "#000000";
+export const amsterdamIconButtonOnBackgroundLightDisabledColor = "#BEBEBE";
+export const amsterdamIconButtonOnBackgroundDarkBackgroundColor = "#004699";
+export const amsterdamIconButtonOnBackgroundDarkColor = "#FFFFFF";
+export const amsterdamIconButtonOnBackgroundDarkHoverBackgroundColor = "#102E62";
+export const amsterdamIconButtonOnBackgroundDarkHoverColor = "#FFFFFF";
+export const amsterdamIconButtonOnBackgroundDarkDisabledColor = "#FFFFFF";
+export const amsterdamIconButtonOnBackgroundDarkDisabledBackgroundColor = "#BEBEBE";
 export const amsterdamIconSpaciousSize3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
-export const amsterdamIconSpaciousSize3LineHeight = "1.4";
+export const amsterdamIconSpaciousSize3LineHeight = "1.3";
 export const amsterdamIconSpaciousSize4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamIconSpaciousSize4LineHeight = "1.4";
-export const amsterdamIconSpaciousSize5FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamIconSpaciousSize5LineHeight = "1.5";
-export const amsterdamIconSpaciousSize6FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamIconSpaciousSize4LineHeight = "1.5";
+export const amsterdamIconSpaciousSize5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamIconSpaciousSize5LineHeight = "1.6";
+export const amsterdamIconSpaciousSize6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsterdamIconSpaciousSize6LineHeight = "1.6";
-export const amsterdamIconSpaciousSize7FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
-export const amsterdamIconSpaciousSize7LineHeight = "1.6";
 export const amsterdamIconCompactSize3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
-export const amsterdamIconCompactSize3LineHeight = "1.4";
+export const amsterdamIconCompactSize3LineHeight = "1.3";
 export const amsterdamIconCompactSize4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamIconCompactSize4LineHeight = "1.4";
-export const amsterdamIconCompactSize5FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamIconCompactSize5LineHeight = "1.5";
-export const amsterdamIconCompactSize6FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamIconCompactSize4LineHeight = "1.5";
+export const amsterdamIconCompactSize5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamIconCompactSize5LineHeight = "1.6";
+export const amsterdamIconCompactSize6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
 export const amsterdamIconCompactSize6LineHeight = "1.6";
-export const amsterdamIconCompactSize7FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
-export const amsterdamIconCompactSize7LineHeight = "1.6";
+export const amsterdamLinkListGap = "0.5em";
+export const amsterdamLinkListLinkColor = "#004699";
+export const amsterdamLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamLinkListLinkFontWeight = 400;
+export const amsterdamLinkListLinkGap = "0.5em";
+export const amsterdamLinkListLinkOutlineOffset = "2px";
+export const amsterdamLinkListLinkTextDecorationLine = "none";
+export const amsterdamLinkListLinkTextDecorationThickness = "0.125rem";
+export const amsterdamLinkListLinkTextUnderlineOffset = "0.375rem";
+export const amsterdamLinkListLinkSpaciousSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamLinkListLinkSpaciousSmallLineHeight = "1.6";
+export const amsterdamLinkListLinkSpaciousMediumFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamLinkListLinkSpaciousMediumLineHeight = "1.6";
+export const amsterdamLinkListLinkSpaciousLargeFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamLinkListLinkSpaciousLargeLineHeight = "1.5";
+export const amsterdamLinkListLinkCompactSmallFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamLinkListLinkCompactSmallLineHeight = "1.6";
+export const amsterdamLinkListLinkCompactMediumFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamLinkListLinkCompactMediumLineHeight = "1.6";
+export const amsterdamLinkListLinkCompactLargeFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamLinkListLinkCompactLargeLineHeight = "1.5";
+export const amsterdamLinkListLinkHoverColor = "#102E62";
+export const amsterdamLinkListLinkHoverTextDecorationLine = "underline";
+export const amsterdamLinkListLinkOnBackgroundDarkColor = "#FFFFFF";
+export const amsterdamLinkListLinkOnBackgroundDarkHoverColor = "#FFFFFF";
+export const amsterdamLinkListLinkOnBackgroundLightColor = "#000000";
+export const amsterdamLinkListLinkOnBackgroundLightHoverColor = "#000000";
 export const amsterdamLinkColor = "#004699";
 export const amsterdamLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamLinkFontWeight = 400;
@@ -296,9 +349,9 @@ export const amsterdamLinkStandaloneSpaciousFontSize = "clamp(1.125rem, calc(0.4
 export const amsterdamLinkStandaloneSpaciousLineHeight = "1.6";
 export const amsterdamLinkStandaloneCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
 export const amsterdamLinkStandaloneCompactLineHeight = "1.6";
-export const amsterdamLinkOnBackgroundDarkColor = "#ffffff";
-export const amsterdamLinkOnBackgroundDarkHoverColor = "#ffffff";
-export const amsterdamLinkOnBackgroundDarkVisitedColor = "#ffffff";
+export const amsterdamLinkOnBackgroundDarkColor = "#FFFFFF";
+export const amsterdamLinkOnBackgroundDarkHoverColor = "#FFFFFF";
+export const amsterdamLinkOnBackgroundDarkVisitedColor = "#FFFFFF";
 export const amsterdamLinkOnBackgroundLightColor = "#000000";
 export const amsterdamLinkOnBackgroundLightHoverColor = "#000000";
 export const amsterdamLinkOnBackgroundLightVisitedColor = "#000000";
@@ -306,6 +359,11 @@ export const amsterdamLogoHeight = "2.5rem";
 export const amsterdamLogoEmblemColor = "#EC0000";
 export const amsterdamLogoTitleColor = "#EC0000";
 export const amsterdamLogoSubsiteColor = "#000000";
+export const amsterdamMarkBackgroundColor = "var(--amsterdam-color-yellow)";
+export const amsterdamMegaMenuListCategoryColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamMegaMenuListCategoryColumnWidth = "20rem";
+export const amsterdamMegaMenuListCategoryPaddingBlockStart = "1rem";
+export const amsterdamMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
 export const amsterdamOrderedListColor = "#000000";
 export const amsterdamOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamOrderedListFontWeight = 400;
@@ -323,7 +381,7 @@ export const amsterdamOrderedListOrderedListItemPaddingInlineStart = "0.25rem";
 export const amsterdamPageHeadingColor = "#000000";
 export const amsterdamPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamPageHeadingFontWeight = 800;
-export const amsterdamPageHeadingInverseColor = "#ffffff";
+export const amsterdamPageHeadingInverseColor = "#FFFFFF";
 export const amsterdamPageHeadingSpaciousFontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
 export const amsterdamPageHeadingSpaciousLineHeight = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
 export const amsterdamPageHeadingCompactFontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
@@ -361,7 +419,7 @@ export const amsterdamPaginationButtonHoverTextDecorationLine = "underline";
 export const amsterdamParagraphColor = "#000000";
 export const amsterdamParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamParagraphFontWeight = 400;
-export const amsterdamParagraphInverseColor = "#ffffff";
+export const amsterdamParagraphInverseColor = "#FFFFFF";
 export const amsterdamParagraphSpaciousSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsterdamParagraphSpaciousSmallLineHeight = "1.6";
 export const amsterdamParagraphSpaciousMediumFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
@@ -376,16 +434,77 @@ export const amsterdamParagraphCompactLargeFontSize = "clamp(1.021rem, calc(0.48
 export const amsterdamParagraphCompactLargeLineHeight = "1.5";
 export const amsterdamScreenWideMaxWidth = "100rem";
 export const amsterdamScreenXWideMaxWidth = "132rem";
+export const amsterdamSearchFieldButtonBackgroundColor = "#004699";
+export const amsterdamSearchFieldButtonColor = "#FFFFFF";
+export const amsterdamSearchFieldButtonOutlineOffset = "2px";
+export const amsterdamSearchFieldButtonHoverBackgroundColor = "#102E62";
+export const amsterdamSearchFieldInputBoxShadow = "inset 0 0 0 1px #000000";
+export const amsterdamSearchFieldInputColor = "#000000";
+export const amsterdamSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamSearchFieldInputFontWeight = 400;
+export const amsterdamSearchFieldInputOutlineOffset = "2px";
+export const amsterdamSearchFieldInputCancelButtonBackgroundImage = "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 amsterdamSearchFieldInputCancelButtonColor = "#004699";
+export const amsterdamSearchFieldInputCancelButtonHeight = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputCancelButtonWidth = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputHoverBoxShadow = "inset 0 0 0 2px #000000";
+export const amsterdamSearchFieldInputPlaceholderColor = "#767676";
+export const amsterdamSearchFieldInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamSearchFieldInputCompactLineHeight = "1.6";
+export const amsterdamSearchFieldInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputSpaciousLineHeight = "1.6";
+export const amsterdamSkipLinkBackgroundColor = "#004699";
+export const amsterdamSkipLinkColor = "#FFFFFF";
+export const amsterdamSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamSkipLinkFontWeight = 400;
+export const amsterdamSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSkipLinkLineHeight = "1.6";
+export const amsterdamSkipLinkOutlineOffset = "2px";
+export const amsterdamSkipLinkCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamSkipLinkCompactLineHeight = "1.6";
+export const amsterdamSkipLinkHoverBackgroundColor = "#102E62";
+export const amsterdamSpotlightBlueBackgroundColor = "#009DE6";
+export const amsterdamSpotlightDarkBlueBackgroundColor = "#004699";
+export const amsterdamSpotlightDarkGreenBackgroundColor = "#00A03C";
+export const amsterdamSpotlightGreenBackgroundColor = "#BED200";
+export const amsterdamSpotlightMagentaBackgroundColor = "#E50082";
+export const amsterdamSpotlightOrangeBackgroundColor = "#FF9100";
+export const amsterdamSpotlightPurpleBackgroundColor = "#A00078";
+export const amsterdamSpotlightYellowBackgroundColor = "#FFE600";
 export const amsterdamSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamSwitchBackgroundColor = "#767676";
 export const amsterdamSwitchWidth = "3.5rem";
-export const amsterdamSwitchThumbBackgroundColor = "#ffffff";
+export const amsterdamSwitchThumbBackgroundColor = "#FFFFFF";
 export const amsterdamSwitchThumbWidth = "1.75rem";
 export const amsterdamSwitchThumbHeight = "1.75rem";
 export const amsterdamSwitchThumbHoverColor = "#102E62";
 export const amsterdamSwitchCheckedBackgroundColor = "#004699";
 export const amsterdamSwitchOutlineOffset = "2px";
-export const amsterdamSwitchDisabledBackgroundColor = "#B4B4B4";
+export const amsterdamSwitchDisabledBackgroundColor = "#BEBEBE";
+export const amsterdamTableColor = "#000000";
+export const amsterdamTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamTableFontWeight = 400;
+export const amsterdamTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamTableLineHeight = "1.6";
+export const amsterdamTableCaptionFontWeight = 800;
+export const amsterdamTableCellBorderBottom = "1px solid #E8E8E8";
+export const amsterdamTableHeaderCellFontWeight = 800;
+export const amsterdamTextInputBoxShadow = "inset 0 0 0 1px #000000";
+export const amsterdamTextInputColor = "#000000";
+export const amsterdamTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamTextInputFontWeight = 400;
+export const amsterdamTextInputOutlineOffset = "2px";
+export const amsterdamTextInputDisabledBackgroundColor = "#FFFFFF";
+export const amsterdamTextInputDisabledBoxShadow = "inset 0 0 0 1px #BEBEBE";
+export const amsterdamTextInputDisabledColor = "#BEBEBE";
+export const amsterdamTextInputHoverBoxShadow = "inset 0 0 0 2px #000000";
+export const amsterdamTextInputInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
+export const amsterdamTextInputInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
+export const amsterdamTextInputPlaceholderColor = "#767676";
+export const amsterdamTextInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamTextInputCompactLineHeight = "1.6";
+export const amsterdamTextInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamTextInputSpaciousLineHeight = "1.6";
 export const amsterdamTopTaskLinkDescriptionColor = "#000000";
 export const amsterdamTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTopTaskLinkDescriptionFontWeight = 400;
@@ -402,9 +521,9 @@ export const amsterdamTopTaskLinkLabelTextUnderlineOffset = "0.375rem";
 export const amsterdamTopTaskLinkLabelHoverColor = "#102E62";
 export const amsterdamTopTaskLinkLabelHoverTextDecorationLine = "underline";
 export const amsterdamTopTaskLinkLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
-export const amsterdamTopTaskLinkLabelSpaciousLineHeight = "1.4";
+export const amsterdamTopTaskLinkLabelSpaciousLineHeight = "1.5";
 export const amsterdamTopTaskLinkLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
-export const amsterdamTopTaskLinkLabelCompactLineHeight = "1.4";
+export const amsterdamTopTaskLinkLabelCompactLineHeight = "1.5";
 export const amsterdamTopTaskLinkOutlineOffset = "2px";
 export const amsterdamUnorderedListColor = "#000000";
 export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -428,26 +547,26 @@ export const utrechtActionNavigateCursor = "pointer";
 export const utrechtActionSubmitCursor = "pointer";
 export const utrechtFocusOutlineOffset = "2px";
 export const utrechtButtonBackgroundColor = "#004699";
-export const utrechtButtonColor = "#ffffff";
+export const utrechtButtonColor = "#FFFFFF";
 export const utrechtButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const utrechtButtonPaddingInlineStart = "1rem";
 export const utrechtButtonPaddingInlineEnd = "1rem";
 export const utrechtButtonPaddingBlockStart = "0.5rem";
 export const utrechtButtonPaddingBlockEnd = "0.5rem";
-export const utrechtButtonDisabledBackgroundColor = "#B4B4B4";
-export const utrechtButtonDisabledColor = "#ffffff";
+export const utrechtButtonDisabledBackgroundColor = "#BEBEBE";
+export const utrechtButtonDisabledColor = "#FFFFFF";
 export const utrechtButtonPrimaryActionBackgroundColor = "#004699";
-export const utrechtButtonPrimaryActionColor = "#ffffff";
-export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#B4B4B4";
+export const utrechtButtonPrimaryActionColor = "#FFFFFF";
+export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#BEBEBE";
 export const utrechtButtonPrimaryActionHoverBackgroundColor = "#102E62";
-export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
+export const utrechtButtonSecondaryActionBackgroundColor = "#FFFFFF";
 export const utrechtButtonSecondaryActionColor = "#004699";
 export const utrechtButtonSecondaryActionHoverColor = "#102E62";
-export const utrechtButtonSecondaryActionDisabledBackgroundColor = "#ffffff";
-export const utrechtButtonSecondaryActionDisabledColor = "#B4B4B4";
+export const utrechtButtonSecondaryActionDisabledBackgroundColor = "#FFFFFF";
+export const utrechtButtonSecondaryActionDisabledColor = "#BEBEBE";
 export const utrechtButtonSubtleBackgroundColor = "transparent";
 export const utrechtButtonSubtleColor = "#004699";
 export const utrechtButtonSubtleHoverColor = "#102E62";
 export const utrechtButtonSubtleFocusColor = "#102E62";
 export const utrechtButtonSubtleDisabledBackgroundColor = "transparent";
-export const utrechtButtonSubtleDisabledColor = "#B4B4B4";
+export const utrechtButtonSubtleDisabledColor = "#BEBEBE";