@amsterdam/design-system-tokens 0.5.1 → 0.6.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Feb 2024 11:27:27 GMT
+ * Generated on Mon, 11 Mar 2024 17:19:31 GMT
  */
 
 export const amsterdamColorPrimaryBlack = "#000000";
@@ -24,6 +24,21 @@ export const amsterdamProportionSquare = "1 / 1";
 export const amsterdamProportionWide = "5 / 4";
 export const amsterdamProportionXWide = "16 / 9";
 export const amsterdamProportion2xWide = "32 / 9";
+export const amsterdamSpaceGridXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
+export const amsterdamSpaceGridSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamSpaceGridMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
+export const amsterdamSpaceGridLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamSpaceGridXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
+export const amsterdamSpaceInsideXs = ".5rem";
+export const amsterdamSpaceInsideSm = ".75rem";
+export const amsterdamSpaceInsideMd = "1rem";
+export const amsterdamSpaceInsideLg = "1.5rem";
+export const amsterdamSpaceInsideXl = "2rem";
+export const amsterdamSpaceStackXs = ".5rem";
+export const amsterdamSpaceStackSm = ".75rem";
+export const amsterdamSpaceStackMd = "1rem";
+export const amsterdamSpaceStackLg = "1.5rem";
+export const amsterdamSpaceStackXl = "2rem";
 export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTypographyFontWeightNormal = 400;
 export const amsterdamTypographyFontWeightBold = 800;
@@ -41,6 +56,12 @@ export const amsterdamTypographyTextLevel5FontSize = "clamp(1.125rem, calc(0.469
 export const amsterdamTypographyTextLevel5LineHeight = "1.6";
 export const amsterdamTypographyTextLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
 export const amsterdamTypographyTextLevel6LineHeight = "1.6";
+export const amsterdamActionActivateCursor = "pointer";
+export const amsterdamActionBusyCursor = "wait";
+export const amsterdamActionDisabledCursor = "not-allowed";
+export const amsterdamActionInertCursor = "default";
+export const amsterdamActionNavigateCursor = "pointer";
+export const amsterdamActionSubmitCursor = "pointer";
 export const amsterdamBorderWidthSm = "1px";
 export const amsterdamBorderWidthMd = "2px";
 export const amsterdamBorderWidthLg = "3px";
@@ -59,24 +80,22 @@ export const amsterdamLinkAppearanceRegularHoverTextDecorationThickness = "0.187
 export const amsterdamLinkAppearanceRegularHoverTextUnderlineOffset = "0.3125rem";
 export const amsterdamLinkAppearanceSubtleTextDecorationLine = "none";
 export const amsterdamLinkAppearanceSubtleHoverTextDecorationLine = "underline";
-export const amsterdamSpacingInsetSm = "0.5rem";
-export const amsterdamSpacingInsetMd = "1rem";
-export const amsterdamSpacingInsetLg = "1.5rem";
-export const amsterdamSpacingInsetXl = "2.5rem";
 export const amsterdamAccordionButtonColor = "#004699";
 export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamAccordionButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamAccordionButtonFontWeight = 800;
 export const amsterdamAccordionButtonLineHeight = "1.6";
+export const amsterdamAccordionButtonPaddingBlock = ".75rem";
+export const amsterdamAccordionButtonPaddingInline = "1rem";
 export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
 export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
+export const amsterdamAccordionPanelPaddingBlock = "1rem";
+export const amsterdamAccordionPanelPaddingInline = "1rem";
 export const amsterdamAlertBorderWidth = "4px";
 export const amsterdamAlertBorderStyle = "solid";
 export const amsterdamAlertGap = "1rem";
-export const amsterdamAlertPaddingBlockStart = "1rem";
-export const amsterdamAlertPaddingBlockEnd = "1rem";
-export const amsterdamAlertPaddingInlineStart = "1.5rem";
-export const amsterdamAlertPaddingInlineEnd = "1.5rem";
+export const amsterdamAlertPaddingBlock = "1rem";
+export const amsterdamAlertPaddingInline = "1.5rem";
 export const amsterdamAlertErrorBorderColor = "#EC0000";
 export const amsterdamAlertInfoBorderColor = "#004699";
 export const amsterdamAlertSuccessBorderColor = "#00A03C";
@@ -93,7 +112,7 @@ export const amsterdamBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBadgeFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamBadgeFontWeight = 800;
 export const amsterdamBadgeLineHeight = "1.6";
-export const amsterdamBadgePaddingInline = "0.5rem";
+export const amsterdamBadgePaddingInline = ".5rem";
 export const amsterdamBadgeBlueBackgroundColor = "#009DE6";
 export const amsterdamBadgeBlueColor = "#000000";
 export const amsterdamBadgeDarkBlueBackgroundColor = "#004699";
@@ -128,13 +147,37 @@ export const amsterdamBreadcrumbItemLinkTextDecorationThickness = "0.125rem";
 export const amsterdamBreadcrumbItemLinkTextUnderlineOffset = "0.375rem";
 export const amsterdamBreadcrumbItemLinkHoverColor = "#102E62";
 export const amsterdamBreadcrumbItemLinkHoverTextDecorationLine = "underline";
+export const amsterdamButtonCursor = "pointer";
+export const amsterdamButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamButtonLineHeight = "1.6";
+export const amsterdamButtonGap = "1rem";
+export const amsterdamButtonPaddingBlock = ".5rem";
+export const amsterdamButtonPaddingInline = "1rem";
+export const amsterdamButtonOutlineOffset = "2px";
+export const amsterdamButtonDisabledCursor = "not-allowed";
+export const amsterdamButtonPrimaryBackgroundColor = "#004699";
+export const amsterdamButtonPrimaryBoxShadow = "inset 0 0 0 2px #004699";
+export const amsterdamButtonPrimaryColor = "#FFFFFF";
+export const amsterdamButtonPrimaryDisabledBackgroundColor = "#BEBEBE";
+export const amsterdamButtonPrimaryDisabledBoxShadow = "inset 0 0 0 2px #BEBEBE";
+export const amsterdamButtonPrimaryHoverBackgroundColor = "#102E62";
+export const amsterdamButtonPrimaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
+export const amsterdamButtonSecondaryBackgroundColor = "#FFFFFF";
+export const amsterdamButtonSecondaryColor = "#004699";
 export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
 export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
+export const amsterdamButtonSecondaryHoverColor = "#102E62";
+export const amsterdamButtonSecondaryDisabledBackgroundColor = "#FFFFFF";
 export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #BEBEBE";
+export const amsterdamButtonSecondaryDisabledColor = "#BEBEBE";
 export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
+export const amsterdamButtonTertiaryBackgroundColor = "transparent";
+export const amsterdamButtonTertiaryColor = "#004699";
 export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
+export const amsterdamButtonTertiaryHoverColor = "#102E62";
+export const amsterdamButtonTertiaryDisabledBackgroundColor = "transparent";
+export const amsterdamButtonTertiaryDisabledColor = "#BEBEBE";
 export const amsterdamCardLinkColor = "#004699";
 export const amsterdamCardLinkTextDecorationLine = "none";
 export const amsterdamCardLinkTextDecorationThickness = "0.125rem";
@@ -150,6 +193,7 @@ export const amsterdamCheckboxLineHeight = "1.6";
 export const amsterdamCheckboxOutlineOffset = "2px";
 export const amsterdamCheckboxCheckmarkBorderColor = "#004699";
 export const amsterdamCheckboxCheckmarkCheckedBackgroundColor = "#004699";
+export const amsterdamCheckboxCheckmarkCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")";
 export const amsterdamCheckboxCheckmarkCheckedHoverBackgroundColor = "#102E62";
 export const amsterdamCheckboxCheckmarkDisabledBorderColor = "#767676";
 export const amsterdamCheckboxCheckmarkDisabledCheckedBackgroundColor = "#767676";
@@ -164,9 +208,15 @@ export const amsterdamCheckboxCheckmarkInvalidHoverBorderColor = "#EC0000";
 export const amsterdamCheckboxCheckmarkInvalidIndeterminateBackgroundColor = "#EC0000";
 export const amsterdamCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor = "#EC0000";
 export const amsterdamCheckboxCheckmarkIndeterminateBackgroundColor = "#004699";
+export const amsterdamCheckboxCheckmarkIndeterminateBackgroundImage = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")";
 export const amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
 export const amsterdamCheckboxDisabledColor = "#767676";
 export const amsterdamCheckboxHoverColor = "#102E62";
+export const amsterdamColumnGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
+export const amsterdamColumnGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamColumnGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamColumnGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamColumnGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
 export const amsterdamDialogBackgroundColor = "#FFFFFF";
 export const amsterdamDialogBorder = "0";
 export const amsterdamDialogMaxInlineSize = "min(87.69vw, 45rem)";
@@ -175,26 +225,41 @@ export const amsterdamDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-ser
 export const amsterdamDialogTitleFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamDialogTitleFontWeight = 800;
 export const amsterdamDialogTitleLineHeight = "1.6";
-export const amsterdamDialogBackdropBackground = "#0006";
 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)";
 export const amsterdamDialogFormMaxBlockSize = "75vh";
-export const amsterdamDialogArticlePaddingInlineEnd = "1.5rem";
 export const amsterdamDialogHeaderGap = "1rem";
 export const amsterdamDialogFooterGap = "1rem";
-export const amsterdamDialogFooterPaddingBlock = "1.5rem 0";
+export const amsterdamFieldsetLegendColor = "#000000";
+export const amsterdamFieldsetLegendFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamFieldsetLegendFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamFieldsetLegendFontWeight = 800;
+export const amsterdamFieldsetLegendLineHeight = "1.5";
 export const amsterdamFormLabelColor = "#000000";
 export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamFormLabelFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
 export const amsterdamFormLabelFontWeight = 800;
 export const amsterdamFormLabelLineHeight = "1.5";
+export const amsterdamGapXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
+export const amsterdamGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamGapXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
 export const amsterdamGridColumnCount = "4";
-export const amsterdamGridGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
-export const amsterdamGridPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
+export const amsterdamGridColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamGridPaddingBlockSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamGridPaddingBlockMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamGridPaddingBlockLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamGridPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamGridRowGapSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamGridRowGapMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamGridRowGapLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
 export const amsterdamGridMediumColumnCount = "8";
 export const amsterdamGridWideColumnCount = "12";
-export const amsterdamHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Must have the same value as `amsterdam.grid.column-gap`.
+export const amsterdamHeaderPaddingBlock = "1rem";
+export const amsterdamHeaderLogoLinkOutlineOffset = "2px";
 export const amsterdamHeadingColor = "#000000";
 export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamHeadingFontWeight = 800;
@@ -286,16 +351,22 @@ 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 amsterdamMarginXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
+export const amsterdamMarginSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
+export const amsterdamMarginMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamMarginLg = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)";
+export const amsterdamMarginXl = "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)";
+export const amsterdamMarkBackgroundColor = "#FFE600";
+export const amsterdamMegaMenuListCategoryColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Must have the same value as `amsterdam.grid.column-gap`.
 export const amsterdamMegaMenuListCategoryColumnWidth = "20rem";
 export const amsterdamMegaMenuListCategoryPaddingBlockStart = "1rem";
-export const amsterdamMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
+export const amsterdamMegaMenuListCategoryPaddingBlockEnd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Must have the same value as `amsterdam.grid.row-gap.md`.
 export const amsterdamOrderedListColor = "#000000";
 export const amsterdamOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamOrderedListFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamOrderedListFontWeight = 400;
 export const amsterdamOrderedListGap = "0.75rem";
+export const amsterdamOrderedListInverseColor = "#FFFFFF";
 export const amsterdamOrderedListLineHeight = "1.6";
 export const amsterdamOrderedListListStyleType = "decimal";
 export const amsterdamOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
@@ -329,6 +400,7 @@ export const amsterdamPaginationFontSize = "clamp(1.125rem, calc(0.469vw + 1.031
 export const amsterdamPaginationFontWeight = 400;
 export const amsterdamPaginationLineHeight = "1.6";
 export const amsterdamPaginationButtonOutlineOffset = "2px";
+export const amsterdamPaginationButtonPaddingInline = ".75rem";
 export const amsterdamPaginationButtonTextDecorationLine = "none";
 export const amsterdamPaginationButtonTextDecorationThickness = "0.125rem";
 export const amsterdamPaginationButtonTextUnderlineOffset = "0.375rem";
@@ -345,12 +417,38 @@ export const amsterdamParagraphMediumFontSize = "clamp(1.125rem, calc(0.469vw +
 export const amsterdamParagraphMediumLineHeight = "1.6";
 export const amsterdamParagraphLargeFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
 export const amsterdamParagraphLargeLineHeight = "1.5";
+export const amsterdamRadioColor = "#000000";
+export const amsterdamRadioFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamRadioFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamRadioFontWeight = 400;
+export const amsterdamRadioLineHeight = "1.6";
+export const amsterdamRadioOutlineOffset = "2px";
+export const amsterdamRadioCircleBorderColor = "#004699";
+export const amsterdamRadioCircleCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleCheckedHoverBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleDisabledBorderColor = "#767676";
+export const amsterdamRadioCircleDisabledCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleDisabledCheckedHoverBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleHoverBorderColor = "#102E62";
+export const amsterdamRadioCircleInvalidBorderColor = "#EC0000";
+export const amsterdamRadioCircleInvalidCheckedBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleInvalidCheckedHoverBackgroundImage = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")";
+export const amsterdamRadioCircleInvalidHoverBorderColor = "#EC0000";
+export const amsterdamRadioDisabledColor = "#767676";
+export const amsterdamRadioHoverColor = "#102E62";
+export const amsterdamRowGapXs = ".5rem";
+export const amsterdamRowGapSm = ".75rem";
+export const amsterdamRowGapMd = "1rem";
+export const amsterdamRowGapLg = "1.5rem";
+export const amsterdamRowGapXl = "2rem";
 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 amsterdamSearchFieldButtonPaddingBlock = ".5rem";
+export const amsterdamSearchFieldButtonPaddingInline = ".5rem";
 export const amsterdamSearchFieldInputBoxShadow = "inset 0 0 0 1px #000000";
 export const amsterdamSearchFieldInputColor = "#000000";
 export const amsterdamSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -358,6 +456,8 @@ export const amsterdamSearchFieldInputFontSize = "clamp(0.964rem, calc(0.295vw +
 export const amsterdamSearchFieldInputFontWeight = 400;
 export const amsterdamSearchFieldInputLineHeight = "1.6";
 export const amsterdamSearchFieldInputOutlineOffset = "2px";
+export const amsterdamSearchFieldInputPaddingBlock = ".5rem";
+export const amsterdamSearchFieldInputPaddingInline = "1rem";
 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)";
@@ -371,6 +471,8 @@ 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 amsterdamSkipLinkPaddingBlock = ".5rem";
+export const amsterdamSkipLinkPaddingInline = "1rem";
 export const amsterdamSkipLinkHoverBackgroundColor = "#102E62";
 export const amsterdamSpotlightBlueBackgroundColor = "#009DE6";
 export const amsterdamSpotlightDarkBlueBackgroundColor = "#004699";
@@ -397,7 +499,45 @@ export const amsterdamTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem),
 export const amsterdamTableLineHeight = "1.6";
 export const amsterdamTableCaptionFontWeight = 800;
 export const amsterdamTableCellBorderBottom = "1px solid #E8E8E8";
+export const amsterdamTableCellPaddingBlock = "1rem";
+export const amsterdamTableCellPaddingInline = "1rem";
 export const amsterdamTableHeaderCellFontWeight = 800;
+export const amsterdamTabsListBorderBottom = ".125rem solid #004699";
+export const amsterdamTabsButtonBackgroundColor = "transparent";
+export const amsterdamTabsButtonBorder = "none";
+export const amsterdamTabsButtonColor = "#004699";
+export const amsterdamTabsButtonCursor = "pointer";
+export const amsterdamTabsButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamTabsButtonFontWeight = 400;
+export const amsterdamTabsButtonFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamTabsButtonLineHeight = "1.6";
+export const amsterdamTabsButtonOutlineOffset = "-0.25rem";
+export const amsterdamTabsButtonPaddingBlock = ".5rem";
+export const amsterdamTabsButtonPaddingInline = "1rem";
+export const amsterdamTabsButtonHoverColor = "#102E62";
+export const amsterdamTabsButtonHoverBoxShadow = "inset 0 -0.125rem 0 0 #102E62";
+export const amsterdamTabsButtonSelectedBackgroundColor = "#004699";
+export const amsterdamTabsButtonSelectedColor = "#FFFFFF";
+export const amsterdamTabsButtonDisabledColor = "#BEBEBE";
+export const amsterdamTabsButtonDisabledCursor = "not-allowed";
+export const amsterdamTextAreaBoxShadow = "inset 0 0 0 1px #000000";
+export const amsterdamTextAreaColor = "#000000";
+export const amsterdamTextAreaFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamTextAreaFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamTextAreaFontWeight = 400;
+export const amsterdamTextAreaLineHeight = "1.6";
+export const amsterdamTextAreaMinHeight = "calc(1.6 * 1em + 2 * 0.5rem)";
+export const amsterdamTextAreaOutlineOffset = "2px";
+export const amsterdamTextAreaPaddingBlock = "0.5rem";
+export const amsterdamTextAreaPaddingInline = "1rem";
+export const amsterdamTextAreaDisabledBackgroundColor = "#FFFFFF";
+export const amsterdamTextAreaDisabledBoxShadow = "inset 0 0 0 1px #BEBEBE";
+export const amsterdamTextAreaDisabledColor = "#BEBEBE";
+export const amsterdamTextAreaDisabledCursor = "not-allowed";
+export const amsterdamTextAreaHoverBoxShadow = "inset 0 0 0 2px #000000";
+export const amsterdamTextAreaInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
+export const amsterdamTextAreaInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
+export const amsterdamTextAreaPlaceholderColor = "#767676";
 export const amsterdamTextInputBoxShadow = "inset 0 0 0 1px #000000";
 export const amsterdamTextInputColor = "#000000";
 export const amsterdamTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -405,6 +545,8 @@ export const amsterdamTextInputFontSize = "clamp(0.964rem, calc(0.295vw + 0.905r
 export const amsterdamTextInputFontWeight = 400;
 export const amsterdamTextInputLineHeight = "1.6";
 export const amsterdamTextInputOutlineOffset = "2px";
+export const amsterdamTextInputPaddingBlock = ".5rem";
+export const amsterdamTextInputPaddingInline = "1rem";
 export const amsterdamTextInputDisabledBackgroundColor = "#FFFFFF";
 export const amsterdamTextInputDisabledBoxShadow = "inset 0 0 0 1px #BEBEBE";
 export const amsterdamTextInputDisabledColor = "#BEBEBE";
@@ -433,6 +575,7 @@ export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-s
 export const amsterdamUnorderedListFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
 export const amsterdamUnorderedListFontWeight = 400;
 export const amsterdamUnorderedListGap = "0.75rem";
+export const amsterdamUnorderedListInverseColor = "#FFFFFF";
 export const amsterdamUnorderedListLineHeight = "1.6";
 export const amsterdamUnorderedListListStyleType = "'\\2022'";
 export const amsterdamUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
@@ -440,34 +583,3 @@ export const amsterdamUnorderedListItemPaddingInlineStart = "0.875rem"; // The t
 export const amsterdamUnorderedListUnorderedListListStyleType = "'\\2013'";
 export const amsterdamUnorderedListUnorderedListItemMarginInlineStart = "0.875rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
 export const amsterdamUnorderedListUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
-export const utrechtActionActivateCursor = "pointer";
-export const utrechtActionBusyCursor = "wait";
-export const utrechtActionDisabledCursor = "not-allowed";
-export const utrechtActionInertCursor = "default";
-export const utrechtActionNavigateCursor = "pointer";
-export const utrechtActionSubmitCursor = "pointer";
-export const utrechtFocusOutlineOffset = "2px";
-export const utrechtButtonBackgroundColor = "#004699";
-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 = "#BEBEBE";
-export const utrechtButtonDisabledColor = "#FFFFFF";
-export const utrechtButtonPrimaryActionBackgroundColor = "#004699";
-export const utrechtButtonPrimaryActionColor = "#FFFFFF";
-export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#BEBEBE";
-export const utrechtButtonPrimaryActionHoverBackgroundColor = "#102E62";
-export const utrechtButtonSecondaryActionBackgroundColor = "#FFFFFF";
-export const utrechtButtonSecondaryActionColor = "#004699";
-export const utrechtButtonSecondaryActionHoverColor = "#102E62";
-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 = "#BEBEBE";