@amsterdam/design-system-tokens 0.5.1 → 0.6.0

package/dist/index.scss

@@ -1,16 +1,7 @@
 
 // Do not edit directly
-// Generated on Tue, 13 Feb 2024 11:27:27 GMT
+// Generated on Fri, 08 Mar 2024 13:00:06 GMT
 
-$utrecht-button-subtle-disabled-background-color: transparent;
-$utrecht-button-subtle-background-color: transparent;
-$utrecht-focus-outline-offset: 2px;
-$utrecht-action-submit-cursor: pointer;
-$utrecht-action-navigate-cursor: pointer;
-$utrecht-action-inert-cursor: default;
-$utrecht-action-disabled-cursor: not-allowed;
-$utrecht-action-busy-cursor: wait;
-$utrecht-action-activate-cursor: pointer;
 $amsterdam-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 $amsterdam-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
 $amsterdam-unordered-list-unordered-list-list-style-type: '\2013';
@@ -18,12 +9,25 @@ $amsterdam-unordered-list-item-padding-inline-start: 0.875rem; // The total leve
 $amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
 $amsterdam-unordered-list-list-style-type: '\2022';
 $amsterdam-unordered-list-gap: 0.75rem;
+$amsterdam-text-area-padding-inline: 1rem;
+$amsterdam-text-area-padding-block: 0.5rem;
+$amsterdam-tabs-button-padding-inline: 1rem;
+$amsterdam-tabs-button-padding-block: .5rem;
+$amsterdam-tabs-button-outline-offset: -0.25rem;
+$amsterdam-tabs-button-border: none;
+$amsterdam-tabs-button-background-color: transparent;
 $amsterdam-switch-thumb-height: 1.75rem;
 $amsterdam-switch-thumb-width: 1.75rem;
 $amsterdam-switch-width: 3.5rem;
 $amsterdam-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>");
 $amsterdam-screen-x-wide-max-width: 132rem;
 $amsterdam-screen-wide-max-width: 100rem;
+$amsterdam-radio-circle-invalid-checked-hover-background-image: 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");
+$amsterdam-radio-circle-invalid-checked-background-image: 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");
+$amsterdam-radio-circle-disabled-checked-hover-background-image: 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");
+$amsterdam-radio-circle-disabled-checked-background-image: 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");
+$amsterdam-radio-circle-checked-hover-background-image: 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");
+$amsterdam-radio-circle-checked-background-image: 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");
 $amsterdam-page-menu-item-gap: 0.5rem;
 $amsterdam-page-menu-row-gap: 0.5rem;
 $amsterdam-page-menu-column-gap: 2.5rem;
@@ -36,7 +40,6 @@ $amsterdam-ordered-list-list-style-type: decimal;
 $amsterdam-ordered-list-gap: 0.75rem;
 $amsterdam-mega-menu-list-category-padding-block-start: 1rem;
 $amsterdam-mega-menu-list-category-column-width: 20rem;
-$amsterdam-mark-background-color: var(--amsterdam-color-yellow);
 $amsterdam-logo-height: 2.5rem;
 $amsterdam-link-inline-line-height: inherit;
 $amsterdam-link-inline-font-size: inherit;
@@ -47,29 +50,24 @@ $amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0,
 $amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
 $amsterdam-grid-wide-column-count: 12;
 $amsterdam-grid-medium-column-count: 8;
-$amsterdam-grid-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); // Equals 1.5 times the gap.
-$amsterdam-grid-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
 $amsterdam-grid-column-count: 4;
-$amsterdam-dialog-footer-padding-block: 1.5rem 0;
 $amsterdam-dialog-footer-gap: 1rem;
 $amsterdam-dialog-header-gap: 1rem;
-$amsterdam-dialog-article-padding-inline-end: 1.5rem;
 $amsterdam-dialog-form-max-block-size: 75vh;
 $amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
 $amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
 $amsterdam-dialog-form-gap: 1.5rem;
-$amsterdam-dialog-backdrop-background: #0006;
 $amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
 $amsterdam-dialog-border: 0;
+$amsterdam-checkbox-checkmark-indeterminate-background-image: 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");
+$amsterdam-checkbox-checkmark-checked-background-image: 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");
+$amsterdam-button-tertiary-disabled-background-color: transparent;
+$amsterdam-button-tertiary-background-color: transparent;
+$amsterdam-button-gap: 1rem;
 $amsterdam-breadcrumb-separator-background-image: 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>");
-$amsterdam-badge-padding-inline: 0.5rem;
 $amsterdam-alert-gap: 1rem;
 $amsterdam-alert-border-style: solid;
 $amsterdam-alert-border-width: 4px;
-$amsterdam-spacing-inset-xl: 2.5rem;
-$amsterdam-spacing-inset-lg: 1.5rem;
-$amsterdam-spacing-inset-md: 1rem;
-$amsterdam-spacing-inset-sm: 0.5rem;
 $amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
 $amsterdam-link-appearance-subtle-text-decoration-line: none;
 $amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
@@ -84,6 +82,12 @@ $amsterdam-focus-outline-offset: 2px;
 $amsterdam-border-width-lg: 3px;
 $amsterdam-border-width-md: 2px;
 $amsterdam-border-width-sm: 1px;
+$amsterdam-action-submit-cursor: pointer;
+$amsterdam-action-navigate-cursor: pointer;
+$amsterdam-action-inert-cursor: default;
+$amsterdam-action-disabled-cursor: not-allowed;
+$amsterdam-action-busy-cursor: wait;
+$amsterdam-action-activate-cursor: pointer;
 $amsterdam-typography-text-level-6-line-height: 1.6;
 $amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
 $amsterdam-typography-text-level-5-line-height: 1.6;
@@ -101,6 +105,21 @@ $amsterdam-typography-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.8
 $amsterdam-typography-font-weight-bold: 800;
 $amsterdam-typography-font-weight-normal: 400;
 $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+$amsterdam-space-stack-xl: 2rem;
+$amsterdam-space-stack-lg: 1.5rem;
+$amsterdam-space-stack-md: 1rem;
+$amsterdam-space-stack-sm: .5rem;
+$amsterdam-space-stack-xs: .25rem;
+$amsterdam-space-inside-xl: 2rem;
+$amsterdam-space-inside-lg: 1.5rem;
+$amsterdam-space-inside-md: 1rem;
+$amsterdam-space-inside-sm: .5rem;
+$amsterdam-space-inside-xs: .25rem;
+$amsterdam-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
+$amsterdam-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
+$amsterdam-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
+$amsterdam-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
+$amsterdam-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
 $amsterdam-proportion-2x-wide: 32 / 9;
 $amsterdam-proportion-x-wide: 16 / 9;
 $amsterdam-proportion-wide: 5 / 4;
@@ -122,29 +141,8 @@ $amsterdam-color-primary-red: #EC0000;
 $amsterdam-color-primary-blue: #004699;
 $amsterdam-color-primary-white: #FFFFFF;
 $amsterdam-color-primary-black: #000000;
-$utrecht-button-subtle-disabled-color: $amsterdam-color-neutral-grey2;
-$utrecht-button-subtle-focus-color: $amsterdam-color-dark-blue;
-$utrecht-button-subtle-hover-color: $amsterdam-color-dark-blue;
-$utrecht-button-subtle-color: $amsterdam-color-primary-blue;
-$utrecht-button-secondary-action-disabled-color: $amsterdam-color-neutral-grey2;
-$utrecht-button-secondary-action-disabled-background-color: $amsterdam-color-primary-white;
-$utrecht-button-secondary-action-hover-color: $amsterdam-color-dark-blue;
-$utrecht-button-secondary-action-color: $amsterdam-color-primary-blue;
-$utrecht-button-secondary-action-background-color: $amsterdam-color-primary-white;
-$utrecht-button-primary-action-hover-background-color: $amsterdam-color-dark-blue;
-$utrecht-button-primary-action-disabled-background-color: $amsterdam-color-neutral-grey2;
-$utrecht-button-primary-action-color: $amsterdam-color-primary-white;
-$utrecht-button-primary-action-background-color: $amsterdam-color-primary-blue;
-$utrecht-button-disabled-color: $amsterdam-color-primary-white;
-$utrecht-button-disabled-background-color: $amsterdam-color-neutral-grey2;
-$utrecht-button-padding-block-end: $amsterdam-spacing-inset-sm;
-$utrecht-button-padding-block-start: $amsterdam-spacing-inset-sm;
-$utrecht-button-padding-inline-end: $amsterdam-spacing-inset-md;
-$utrecht-button-padding-inline-start: $amsterdam-spacing-inset-md;
-$utrecht-button-font-family: $amsterdam-typography-font-family;
-$utrecht-button-color: $amsterdam-color-primary-white;
-$utrecht-button-background-color: $amsterdam-color-primary-blue;
 $amsterdam-unordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
+$amsterdam-unordered-list-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-unordered-list-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-unordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
 $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
@@ -171,6 +169,8 @@ $amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary
 $amsterdam-text-input-disabled-color: $amsterdam-color-neutral-grey2;
 $amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
 $amsterdam-text-input-disabled-background-color: $amsterdam-color-primary-white;
+$amsterdam-text-input-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-text-input-padding-block: $amsterdam-space-inside-xs;
 $amsterdam-text-input-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-text-input-line-height: $amsterdam-typography-text-level-6-line-height;
 $amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
@@ -178,7 +178,38 @@ $amsterdam-text-input-font-size: $amsterdam-typography-text-level-6-font-size;
 $amsterdam-text-input-font-family: $amsterdam-typography-font-family;
 $amsterdam-text-input-color: $amsterdam-color-primary-black;
 $amsterdam-text-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
+$amsterdam-text-area-placeholder-color: $amsterdam-color-neutral-grey3;
+$amsterdam-text-area-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
+$amsterdam-text-area-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
+$amsterdam-text-area-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
+$amsterdam-text-area-disabled-cursor: $amsterdam-action-disabled-cursor;
+$amsterdam-text-area-disabled-color: $amsterdam-color-neutral-grey2;
+$amsterdam-text-area-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
+$amsterdam-text-area-disabled-background-color: $amsterdam-color-primary-white;
+$amsterdam-text-area-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-text-area-min-height: calc($amsterdam-typography-text-level-6-line-height * 1em + 2 * $amsterdam-text-area-padding-block);
+$amsterdam-text-area-line-height: $amsterdam-typography-text-level-6-line-height;
+$amsterdam-text-area-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-text-area-font-size: $amsterdam-typography-text-level-6-font-size;
+$amsterdam-text-area-font-family: $amsterdam-typography-font-family;
+$amsterdam-text-area-color: $amsterdam-color-primary-black;
+$amsterdam-text-area-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
+$amsterdam-tabs-button-disabled-cursor: $amsterdam-action-disabled-cursor;
+$amsterdam-tabs-button-disabled-color: $amsterdam-color-neutral-grey2;
+$amsterdam-tabs-button-selected-color: $amsterdam-color-primary-white;
+$amsterdam-tabs-button-selected-background-color: $amsterdam-color-primary-blue;
+$amsterdam-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $amsterdam-color-dark-blue;
+$amsterdam-tabs-button-hover-color: $amsterdam-color-dark-blue;
+$amsterdam-tabs-button-line-height: $amsterdam-typography-text-level-5-line-height;
+$amsterdam-tabs-button-font-size: $amsterdam-typography-text-level-5-font-size;
+$amsterdam-tabs-button-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-tabs-button-font-family: $amsterdam-typography-font-family;
+$amsterdam-tabs-button-cursor: $amsterdam-action-activate-cursor;
+$amsterdam-tabs-button-color: $amsterdam-color-primary-blue;
+$amsterdam-tabs-list-border-bottom: .125rem solid $amsterdam-color-primary-blue;
 $amsterdam-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
+$amsterdam-table-cell-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-table-cell-padding-block: $amsterdam-space-inside-md;
 $amsterdam-table-cell-border-bottom: 1px solid $amsterdam-color-neutral-grey1;
 $amsterdam-table-caption-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-table-line-height: $amsterdam-typography-text-level-5-line-height;
@@ -202,6 +233,8 @@ $amsterdam-spotlight-dark-green-background-color: $amsterdam-color-dark-green;
 $amsterdam-spotlight-dark-blue-background-color: $amsterdam-color-primary-blue;
 $amsterdam-spotlight-blue-background-color: $amsterdam-color-blue;
 $amsterdam-skip-link-hover-background-color: $amsterdam-color-dark-blue;
+$amsterdam-skip-link-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-skip-link-padding-block: $amsterdam-space-inside-xs;
 $amsterdam-skip-link-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-skip-link-line-height: $amsterdam-typography-text-level-6-line-height;
 $amsterdam-skip-link-font-size: $amsterdam-typography-text-level-6-font-size;
@@ -214,6 +247,8 @@ $amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color
 $amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-text-level-6-font-size;
 $amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-text-level-6-font-size;
 $amsterdam-search-field-input-cancel-button-color: $amsterdam-color-primary-blue;
+$amsterdam-search-field-input-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-search-field-input-padding-block: $amsterdam-space-inside-xs;
 $amsterdam-search-field-input-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-search-field-input-line-height: $amsterdam-typography-text-level-6-line-height;
 $amsterdam-search-field-input-font-weight: $amsterdam-typography-font-weight-normal;
@@ -221,10 +256,30 @@ $amsterdam-search-field-input-font-size: $amsterdam-typography-text-level-6-font
 $amsterdam-search-field-input-font-family: $amsterdam-typography-font-family;
 $amsterdam-search-field-input-color: $amsterdam-color-primary-black;
 $amsterdam-search-field-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
+$amsterdam-search-field-button-padding-inline: $amsterdam-space-inside-xs;
+$amsterdam-search-field-button-padding-block: $amsterdam-space-inside-xs;
 $amsterdam-search-field-button-hover-background-color: $amsterdam-color-dark-blue;
 $amsterdam-search-field-button-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-search-field-button-color: $amsterdam-color-primary-white;
 $amsterdam-search-field-button-background-color: $amsterdam-color-primary-blue;
+$amsterdam-row-gap-xl: $amsterdam-space-stack-xl;
+$amsterdam-row-gap-lg: $amsterdam-space-stack-lg;
+$amsterdam-row-gap-md: $amsterdam-space-stack-md;
+$amsterdam-row-gap-sm: $amsterdam-space-stack-sm;
+$amsterdam-row-gap-xs: $amsterdam-space-stack-xs;
+$amsterdam-radio-hover-color: $amsterdam-color-dark-blue;
+$amsterdam-radio-disabled-color: $amsterdam-color-neutral-grey3;
+$amsterdam-radio-circle-invalid-hover-border-color: $amsterdam-color-primary-red;
+$amsterdam-radio-circle-invalid-border-color: $amsterdam-color-primary-red;
+$amsterdam-radio-circle-hover-border-color: $amsterdam-color-dark-blue;
+$amsterdam-radio-circle-disabled-border-color: $amsterdam-color-neutral-grey3;
+$amsterdam-radio-circle-border-color: $amsterdam-color-primary-blue;
+$amsterdam-radio-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-radio-line-height: $amsterdam-typography-text-level-5-line-height;
+$amsterdam-radio-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-radio-font-size: $amsterdam-typography-text-level-5-font-size;
+$amsterdam-radio-font-family: $amsterdam-typography-font-family;
+$amsterdam-radio-color: $amsterdam-color-primary-black;
 $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-4-line-height;
 $amsterdam-paragraph-large-font-size: $amsterdam-typography-text-level-4-font-size;
 $amsterdam-paragraph-medium-line-height: $amsterdam-typography-text-level-5-line-height;
@@ -240,6 +295,7 @@ $amsterdam-pagination-button-current-font-weight: $amsterdam-typography-font-wei
 $amsterdam-pagination-button-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
 $amsterdam-pagination-button-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
 $amsterdam-pagination-button-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
+$amsterdam-pagination-button-padding-inline: $amsterdam-space-inside-sm;
 $amsterdam-pagination-button-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-pagination-line-height: $amsterdam-typography-text-level-5-line-height;
 $amsterdam-pagination-font-weight: $amsterdam-typography-font-weight-normal;
@@ -261,12 +317,19 @@ $amsterdam-page-heading-font-size: $amsterdam-typography-text-level-0-font-size;
 $amsterdam-page-heading-font-family: $amsterdam-typography-font-family;
 $amsterdam-page-heading-color: $amsterdam-color-primary-black;
 $amsterdam-ordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
+$amsterdam-ordered-list-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-ordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
 $amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
 $amsterdam-ordered-list-color: $amsterdam-color-primary-black;
-$amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-grid-gap;
-$amsterdam-mega-menu-list-category-column-gap: $amsterdam-grid-gap;
+$amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.row-gap.md`.
+$amsterdam-mega-menu-list-category-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
+$amsterdam-mark-background-color: $amsterdam-color-yellow;
+$amsterdam-margin-xl: $amsterdam-space-grid-xl;
+$amsterdam-margin-lg: $amsterdam-space-grid-lg;
+$amsterdam-margin-md: $amsterdam-space-grid-md;
+$amsterdam-margin-sm: $amsterdam-space-grid-sm;
+$amsterdam-margin-xs: $amsterdam-space-grid-xs;
 $amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
 $amsterdam-logo-title-color: $amsterdam-color-primary-red;
 $amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
@@ -336,18 +399,43 @@ $amsterdam-heading-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-heading-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-heading-font-family: $amsterdam-typography-font-family;
 $amsterdam-heading-color: $amsterdam-color-primary-black;
-$amsterdam-header-column-gap: $amsterdam-grid-gap;
+$amsterdam-header-logo-link-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-header-padding-block: $amsterdam-space-inside-md;
+$amsterdam-header-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
+$amsterdam-grid-row-gap-lg: $amsterdam-space-grid-lg;
+$amsterdam-grid-row-gap-md: $amsterdam-space-grid-md;
+$amsterdam-grid-row-gap-sm: $amsterdam-space-grid-sm;
+$amsterdam-grid-padding-inline: $amsterdam-space-grid-lg;
+$amsterdam-grid-padding-block-lg: $amsterdam-space-grid-lg;
+$amsterdam-grid-padding-block-md: $amsterdam-space-grid-md;
+$amsterdam-grid-padding-block-sm: $amsterdam-space-grid-sm;
+$amsterdam-grid-column-gap: $amsterdam-space-grid-md;
+$amsterdam-gap-xl: $amsterdam-space-grid-xl;
+$amsterdam-gap-lg: $amsterdam-space-grid-lg;
+$amsterdam-gap-md: $amsterdam-space-grid-md;
+$amsterdam-gap-sm: $amsterdam-space-grid-sm;
+$amsterdam-gap-xs: $amsterdam-space-grid-xs;
 $amsterdam-form-label-line-height: $amsterdam-typography-text-level-4-line-height;
 $amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-form-label-font-size: $amsterdam-typography-text-level-4-font-size;
 $amsterdam-form-label-font-family: $amsterdam-typography-font-family;
 $amsterdam-form-label-color: $amsterdam-color-primary-black;
+$amsterdam-fieldset-legend-line-height: $amsterdam-typography-text-level-4-line-height;
+$amsterdam-fieldset-legend-font-weight: $amsterdam-typography-font-weight-bold;
+$amsterdam-fieldset-legend-font-size: $amsterdam-typography-text-level-4-font-size;
+$amsterdam-fieldset-legend-font-family: $amsterdam-typography-font-family;
+$amsterdam-fieldset-legend-color: $amsterdam-color-primary-black;
 $amsterdam-dialog-title-line-height: $amsterdam-typography-text-level-5-line-height;
 $amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-dialog-title-font-size: $amsterdam-typography-text-level-5-font-size;
 $amsterdam-dialog-title-font-family: $amsterdam-typography-font-family;
 $amsterdam-dialog-title-color: $amsterdam-color-primary-black;
 $amsterdam-dialog-background-color: $amsterdam-color-primary-white;
+$amsterdam-column-gap-xl: $amsterdam-space-grid-xl;
+$amsterdam-column-gap-lg: $amsterdam-space-grid-lg;
+$amsterdam-column-gap-md: $amsterdam-space-grid-md;
+$amsterdam-column-gap-sm: $amsterdam-space-grid-sm;
+$amsterdam-column-gap-xs: $amsterdam-space-grid-xs;
 $amsterdam-checkbox-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-checkbox-disabled-color: $amsterdam-color-neutral-grey3;
 $amsterdam-checkbox-checkmark-indeterminate-hover-background-color: $amsterdam-color-dark-blue;
@@ -378,13 +466,35 @@ $amsterdam-card-link-hover-text-decoration-line: $amsterdam-link-appearance-subt
 $amsterdam-card-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
 $amsterdam-card-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
 $amsterdam-card-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
+$amsterdam-button-tertiary-disabled-color: $amsterdam-color-neutral-grey2;
+$amsterdam-button-tertiary-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
+$amsterdam-button-tertiary-color: $amsterdam-color-primary-blue;
 $amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
+$amsterdam-button-secondary-disabled-color: $amsterdam-color-neutral-grey2;
 $amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
+$amsterdam-button-secondary-disabled-background-color: $amsterdam-color-primary-white;
+$amsterdam-button-secondary-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px $amsterdam-color-dark-blue;
 $amsterdam-button-secondary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
+$amsterdam-button-secondary-color: $amsterdam-color-primary-blue;
+$amsterdam-button-secondary-background-color: $amsterdam-color-primary-white;
+$amsterdam-button-primary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
+$amsterdam-button-primary-hover-background-color: $amsterdam-color-dark-blue;
+$amsterdam-button-primary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
+$amsterdam-button-primary-disabled-background-color: $amsterdam-color-neutral-grey2;
+$amsterdam-button-primary-color: $amsterdam-color-primary-white;
+$amsterdam-button-primary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
+$amsterdam-button-primary-background-color: $amsterdam-color-primary-blue;
+$amsterdam-button-disabled-cursor: $amsterdam-action-disabled-cursor;
+$amsterdam-button-busy-cursor: $amsterdam-action-busy-cursor;
+$amsterdam-button-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-button-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-button-padding-block: $amsterdam-space-inside-xs;
 $amsterdam-button-line-height: $amsterdam-typography-text-level-5-line-height;
 $amsterdam-button-font-size: $amsterdam-typography-text-level-5-font-size;
+$amsterdam-button-font-family: $amsterdam-typography-font-family;
+$amsterdam-button-cursor: $amsterdam-action-activate-cursor;
 $amsterdam-breadcrumb-item-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
 $amsterdam-breadcrumb-item-link-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-breadcrumb-item-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
@@ -417,6 +527,7 @@ $amsterdam-badge-dark-blue-color: $amsterdam-color-primary-white;
 $amsterdam-badge-dark-blue-background-color: $amsterdam-color-primary-blue;
 $amsterdam-badge-blue-color: $amsterdam-color-primary-black;
 $amsterdam-badge-blue-background-color: $amsterdam-color-blue;
+$amsterdam-badge-padding-inline: $amsterdam-space-inside-xs;
 $amsterdam-badge-line-height: $amsterdam-typography-text-level-5-line-height;
 $amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-badge-font-size: $amsterdam-typography-text-level-5-font-size;
@@ -433,12 +544,14 @@ $amsterdam-alert-warning-border-color: $amsterdam-color-orange;
 $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
 $amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
 $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
-$amsterdam-alert-padding-inline-end: $amsterdam-spacing-inset-lg;
-$amsterdam-alert-padding-inline-start: $amsterdam-spacing-inset-lg;
-$amsterdam-alert-padding-block-end: $amsterdam-spacing-inset-md;
-$amsterdam-alert-padding-block-start: $amsterdam-spacing-inset-md;
+$amsterdam-alert-padding-inline: $amsterdam-space-inside-lg;
+$amsterdam-alert-padding-block: $amsterdam-space-inside-md;
+$amsterdam-accordion-panel-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-accordion-panel-padding-block: $amsterdam-space-inside-md;
 $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
 $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-accordion-button-padding-inline: $amsterdam-space-inside-md;
+$amsterdam-accordion-button-padding-block: $amsterdam-space-inside-sm;
 $amsterdam-accordion-button-line-height: $amsterdam-typography-text-level-5-line-height;
 $amsterdam-accordion-button-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-accordion-button-font-size: $amsterdam-typography-text-level-5-font-size;