@amsterdam/design-system-tokens 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.3.0...@amsterdam/design-system-tokens@0.4.0) (2024-01-31)
+
+### ⚠ BREAKING CHANGES
+
+* Change blue color names of Spotlight to match Badge API (#1061)
+* Remove unused grey-4 color token (#1059)
+* Add icon button (#1021)
+* Update alert appearance, make ‘warning’ the default and icon non-optional (#993)
+
+### Features
+
+* Add Badge component ([#1045](https://github.com/Amsterdam/design-system/issues/1045)) ([d346cdf](https://github.com/Amsterdam/design-system/commit/d346cdfd2b3c7fab08e6bae10314420f1fde8a5f))
+* Add icon button ([#1021](https://github.com/Amsterdam/design-system/issues/1021)) ([b6e1c26](https://github.com/Amsterdam/design-system/commit/b6e1c260878c09340c9fc89f8740ae033e206855))
+* Add MegaMenu component ([#992](https://github.com/Amsterdam/design-system/issues/992)) ([de9fcc6](https://github.com/Amsterdam/design-system/commit/de9fcc65cced79a07cf201613b8616193f86b810))
+* Add Table ([#1043](https://github.com/Amsterdam/design-system/issues/1043)) ([2175b22](https://github.com/Amsterdam/design-system/commit/2175b22dbab369fb5d7f817a09c7f0560d8d8195))
+* Change blue color names of Spotlight to match Badge API ([#1061](https://github.com/Amsterdam/design-system/issues/1061)) ([0e663bd](https://github.com/Amsterdam/design-system/commit/0e663bd1bcbc8c848d16962749d6113cd3aaaf20))
+* Introduce separate Link List component ([#1051](https://github.com/Amsterdam/design-system/issues/1051)) ([7ccf23d](https://github.com/Amsterdam/design-system/commit/7ccf23d1128a6cade34ec6846d0fee23335af525))
+
+### Bug Fixes
+
+* Remove unused grey-4 color token ([#1059](https://github.com/Amsterdam/design-system/issues/1059)) ([379560e](https://github.com/Amsterdam/design-system/commit/379560eafc48d3301439c4e40268b65beae59a56))
+* Update alert appearance, make ‘warning’ the default and icon non-optional ([#993](https://github.com/Amsterdam/design-system/issues/993)) ([df15253](https://github.com/Amsterdam/design-system/commit/df152538278a73c4aceb094fece70025ff35dc5f))
+
+## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.2.0...@amsterdam/design-system-tokens@0.3.0) (2023-12-22)
+
+### ⚠ BREAKING CHANGES
+
+* Rename ‘Highlight’ component to ‘Spotlight’ (#929)
+* Update line heights and text levels (#898)
+
+### Features
+
+* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf))
+* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928))
+* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315))
+* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2))
+* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71))
+* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c))
+* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634))
+
+### Bug Fixes
+
+* Adjust size of breadcrumb separator and allow natural text wrapping ([#913](https://github.com/Amsterdam/design-system/issues/913)) ([caba940](https://github.com/Amsterdam/design-system/commit/caba94024c5aedf9092a5afbbf625d921fd124b5))
+* Change tertiary button hover border color ([#989](https://github.com/Amsterdam/design-system/issues/989)) ([f4ec6e7](https://github.com/Amsterdam/design-system/commit/f4ec6e7461420c7606441a35caacc9ee10d146eb))
+
 ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.1.8...@amsterdam/design-system-tokens@0.2.0) (2023-12-01)
 
 ### ⚠ BREAKING CHANGES

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 01 Dec 2023 15:48:43 GMT
+// Generated on Wed, 31 Jan 2024 12:56:24 GMT
 
 $utrecht-button-subtle-disabled-background-color: transparent;
 $utrecht-button-subtle-background-color: transparent;
@@ -21,6 +21,7 @@ $amsterdam-unordered-list-gap: 0.75rem;
 $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-page-menu-item-gap: 0.5rem;
@@ -33,11 +34,18 @@ $amsterdam-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1
 $amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
 $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-in-list-gap: 0.5em;
 $amsterdam-link-inline-line-height: inherit;
 $amsterdam-link-inline-font-size: inherit;
 $amsterdam-link-inline-font-family: inherit;
+$amsterdam-link-list-link-gap: 0.5em;
+$amsterdam-link-list-gap: 0.5em;
+$amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
+$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-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
@@ -53,12 +61,14 @@ $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-close-background-color: transparent;
 $amsterdam-dialog-backdrop-background: #0006;
 $amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
 $amsterdam-dialog-border: 0;
-$amsterdam-alert-close-background-color: transparent;
+$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;
@@ -74,37 +84,33 @@ $amsterdam-focus-outline-offset: 2px;
 $amsterdam-border-width-lg: 3px;
 $amsterdam-border-width-md: 2px;
 $amsterdam-border-width-sm: 1px;
-$amsterdam-typography-compact-text-level-7-line-height: 1.6;
-$amsterdam-typography-compact-text-level-7-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
 $amsterdam-typography-compact-text-level-6-line-height: 1.6;
-$amsterdam-typography-compact-text-level-6-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
-$amsterdam-typography-compact-text-level-5-line-height: 1.5;
-$amsterdam-typography-compact-text-level-5-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-$amsterdam-typography-compact-text-level-4-line-height: 1.4;
+$amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
+$amsterdam-typography-compact-text-level-5-line-height: 1.6;
+$amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
+$amsterdam-typography-compact-text-level-4-line-height: 1.5;
 $amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-$amsterdam-typography-compact-text-level-3-line-height: 1.4;
+$amsterdam-typography-compact-text-level-3-line-height: 1.3;
 $amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
-$amsterdam-typography-compact-text-level-2-line-height: 1.3;
+$amsterdam-typography-compact-text-level-2-line-height: 1.25;
 $amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
 $amsterdam-typography-compact-text-level-1-line-height: 1.2;
 $amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
-$amsterdam-typography-compact-text-level-0-line-height: 1.1;
+$amsterdam-typography-compact-text-level-0-line-height: 1.15;
 $amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
-$amsterdam-typography-spacious-text-level-7-line-height: 1.6;
-$amsterdam-typography-spacious-text-level-7-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
 $amsterdam-typography-spacious-text-level-6-line-height: 1.6;
-$amsterdam-typography-spacious-text-level-6-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
-$amsterdam-typography-spacious-text-level-5-line-height: 1.5;
-$amsterdam-typography-spacious-text-level-5-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
-$amsterdam-typography-spacious-text-level-4-line-height: 1.4;
+$amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
+$amsterdam-typography-spacious-text-level-5-line-height: 1.6;
+$amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
+$amsterdam-typography-spacious-text-level-4-line-height: 1.5;
 $amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
-$amsterdam-typography-spacious-text-level-3-line-height: 1.4;
+$amsterdam-typography-spacious-text-level-3-line-height: 1.3;
 $amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
-$amsterdam-typography-spacious-text-level-2-line-height: 1.3;
+$amsterdam-typography-spacious-text-level-2-line-height: 1.25;
 $amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
 $amsterdam-typography-spacious-text-level-1-line-height: 1.2;
 $amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
-$amsterdam-typography-spacious-text-level-0-line-height: 1.1;
+$amsterdam-typography-spacious-text-level-0-line-height: 1.15;
 $amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
 $amsterdam-typography-font-weight-bold: 800;
 $amsterdam-typography-font-weight-normal: 400;
@@ -115,13 +121,12 @@ $amsterdam-proportion-wide: 5 / 4;
 $amsterdam-proportion-square: 1 / 1;
 $amsterdam-proportion-tall: 4 / 5;
 $amsterdam-proportion-x-tall: 9 / 16;
-$amsterdam-color-neutral-grey4: #323232;
 $amsterdam-color-neutral-grey3: #767676;
-$amsterdam-color-neutral-grey2: #B4B4B4;
-$amsterdam-color-neutral-grey1: #E6E6E6;
+$amsterdam-color-neutral-grey2: #BEBEBE;
+$amsterdam-color-neutral-grey1: #E8E8E8;
 $amsterdam-color-magenta: #E50082;
 $amsterdam-color-purple: #A00078;
-$amsterdam-color-blue: #009DEC;
+$amsterdam-color-blue: #009DE6;
 $amsterdam-color-dark-green: #00A03C;
 $amsterdam-color-green: #BED200;
 $amsterdam-color-yellow: #FFE600;
@@ -129,7 +134,7 @@ $amsterdam-color-orange: #FF9100;
 $amsterdam-color-dark-blue: #102E62;
 $amsterdam-color-primary-red: #EC0000;
 $amsterdam-color-primary-blue: #004699;
-$amsterdam-color-primary-white: #ffffff;
+$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;
@@ -153,10 +158,10 @@ $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-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-unordered-list-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-unordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-unordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-unordered-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-unordered-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-unordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-unordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-unordered-list-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
 $amsterdam-unordered-list-color: $amsterdam-color-primary-black;
@@ -172,13 +177,37 @@ $amsterdam-top-task-link-label-text-decoration-thickness: $amsterdam-link-appear
 $amsterdam-top-task-link-label-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
 $amsterdam-top-task-link-label-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-top-task-link-label-font-family: $amsterdam-typography-font-family;
-$amsterdam-top-task-link-description-compact-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-top-task-link-description-compact-font-size: $amsterdam-typography-compact-text-level-7-font-size;
-$amsterdam-top-task-link-description-spacious-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-top-task-link-description-spacious-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
+$amsterdam-top-task-link-description-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-top-task-link-description-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-top-task-link-description-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-top-task-link-description-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
 $amsterdam-top-task-link-description-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-top-task-link-description-font-family: $amsterdam-typography-font-family;
 $amsterdam-top-task-link-description-color: $amsterdam-color-primary-black;
+$amsterdam-text-input-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-text-input-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-text-input-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-text-input-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-text-input-placeholder-color: $amsterdam-color-neutral-grey3;
+$amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
+$amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
+$amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
+$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-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
+$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-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
+$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-spacious-text-level-5-line-height;
+$amsterdam-table-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-table-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-table-font-family: $amsterdam-typography-font-family;
+$amsterdam-table-color: $amsterdam-color-primary-black;
 $amsterdam-switch-disabled-background-color: $amsterdam-color-neutral-grey2;
 $amsterdam-switch-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-switch-checked-background-color: $amsterdam-color-primary-blue;
@@ -186,18 +215,54 @@ $amsterdam-switch-thumb-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-switch-thumb-background-color: $amsterdam-color-primary-white;
 $amsterdam-switch-background-color: $amsterdam-color-neutral-grey3;
 $amsterdam-switch-font-family: $amsterdam-typography-font-family;
-$amsterdam-paragraph-compact-large-line-height: $amsterdam-typography-compact-text-level-5-line-height;
-$amsterdam-paragraph-compact-large-font-size: $amsterdam-typography-compact-text-level-5-font-size;
-$amsterdam-paragraph-compact-medium-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-paragraph-compact-medium-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-paragraph-compact-small-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-paragraph-compact-small-font-size: $amsterdam-typography-compact-text-level-7-font-size;
-$amsterdam-paragraph-spacious-large-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
-$amsterdam-paragraph-spacious-large-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
-$amsterdam-paragraph-spacious-medium-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-paragraph-spacious-medium-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
-$amsterdam-paragraph-spacious-small-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-paragraph-spacious-small-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
+$amsterdam-spotlight-yellow-background-color: $amsterdam-color-yellow;
+$amsterdam-spotlight-purple-background-color: $amsterdam-color-purple;
+$amsterdam-spotlight-orange-background-color: $amsterdam-color-orange;
+$amsterdam-spotlight-magenta-background-color: $amsterdam-color-magenta;
+$amsterdam-spotlight-green-background-color: $amsterdam-color-green;
+$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-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-skip-link-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-skip-link-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-skip-link-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-skip-link-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-skip-link-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-skip-link-font-family: $amsterdam-typography-font-family;
+$amsterdam-skip-link-color: $amsterdam-color-primary-white;
+$amsterdam-skip-link-background-color: $amsterdam-color-primary-blue;
+$amsterdam-search-field-input-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-search-field-input-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-search-field-input-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-search-field-input-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-search-field-input-placeholder-color: $amsterdam-color-neutral-grey3;
+$amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
+$amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-search-field-input-cancel-button-color: $amsterdam-color-primary-blue;
+$amsterdam-search-field-input-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-search-field-input-font-weight: $amsterdam-typography-font-weight-normal;
+$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-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-paragraph-compact-large-line-height: $amsterdam-typography-compact-text-level-4-line-height;
+$amsterdam-paragraph-compact-large-font-size: $amsterdam-typography-compact-text-level-4-font-size;
+$amsterdam-paragraph-compact-medium-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-paragraph-compact-medium-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-paragraph-compact-small-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-paragraph-compact-small-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-paragraph-spacious-large-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
+$amsterdam-paragraph-spacious-large-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
+$amsterdam-paragraph-spacious-medium-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-paragraph-spacious-medium-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-paragraph-spacious-small-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-paragraph-spacious-small-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
 $amsterdam-paragraph-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-paragraph-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-paragraph-font-family: $amsterdam-typography-font-family;
@@ -208,17 +273,17 @@ $amsterdam-pagination-button-text-underline-offset: $amsterdam-link-appearance-t
 $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-outline-offset: $amsterdam-focus-outline-offset;
-$amsterdam-pagination-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-pagination-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-pagination-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-pagination-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-pagination-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-pagination-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-pagination-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-pagination-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-pagination-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-pagination-font-family: $amsterdam-typography-font-family;
 $amsterdam-page-menu-item-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
-$amsterdam-page-menu-item-compact-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-page-menu-item-compact-font-size: $amsterdam-typography-compact-text-level-7-font-size;
-$amsterdam-page-menu-item-spacious-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-page-menu-item-spacious-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
+$amsterdam-page-menu-item-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-page-menu-item-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-page-menu-item-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-page-menu-item-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
 $amsterdam-page-menu-item-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
 $amsterdam-page-menu-item-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
 $amsterdam-page-menu-item-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
@@ -233,29 +298,31 @@ $amsterdam-page-heading-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-page-heading-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-page-heading-font-family: $amsterdam-typography-font-family;
 $amsterdam-page-heading-color: $amsterdam-color-primary-black;
-$amsterdam-ordered-list-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-ordered-list-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-ordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-ordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-ordered-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-ordered-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-ordered-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-ordered-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
 $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-spacious-gap;
+$amsterdam-mega-menu-list-category-column-gap: $amsterdam-grid-spacious-gap;
 $amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
 $amsterdam-logo-title-color: $amsterdam-color-primary-red;
 $amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
-$amsterdam-link-standalone-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-link-standalone-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-link-standalone-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-link-standalone-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-link-standalone-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-link-standalone-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-link-standalone-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-link-standalone-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-link-standalone-hover-text-underline-offset: $amsterdam-link-appearance-regular-hover-text-underline-offset;
 $amsterdam-link-standalone-hover-text-decoration-thickness: $amsterdam-link-appearance-regular-hover-text-decoration-thickness;
 $amsterdam-link-standalone-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
 $amsterdam-link-standalone-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
 $amsterdam-link-standalone-text-decoration-line: $amsterdam-link-appearance-regular-text-decoration-line;
-$amsterdam-link-in-list-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-link-in-list-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-link-in-list-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-link-in-list-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-link-in-list-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-link-in-list-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-link-in-list-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-link-in-list-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-link-in-list-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
 $amsterdam-link-in-list-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
 $amsterdam-link-in-list-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
@@ -269,8 +336,25 @@ $amsterdam-link-inline-text-decoration-line: $amsterdam-link-appearance-regular-
 $amsterdam-link-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-link-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-link-font-family: $amsterdam-typography-font-family;
-$amsterdam-icon-compact-size-7-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-icon-compact-size-7-font-size: $amsterdam-typography-compact-text-level-7-font-size;
+$amsterdam-link-list-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
+$amsterdam-link-list-link-compact-large-line-height: $amsterdam-typography-compact-text-level-4-line-height;
+$amsterdam-link-list-link-compact-large-font-size: $amsterdam-typography-compact-text-level-4-font-size;
+$amsterdam-link-list-link-compact-medium-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-link-list-link-compact-medium-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-link-list-link-compact-small-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-link-list-link-compact-small-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-link-list-link-spacious-large-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
+$amsterdam-link-list-link-spacious-large-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
+$amsterdam-link-list-link-spacious-medium-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-link-list-link-spacious-medium-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-link-list-link-spacious-small-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-link-list-link-spacious-small-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-link-list-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
+$amsterdam-link-list-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
+$amsterdam-link-list-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
+$amsterdam-link-list-link-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-link-list-link-font-weight: $amsterdam-typography-font-weight-normal;
+$amsterdam-link-list-link-font-family: $amsterdam-typography-font-family;
 $amsterdam-icon-compact-size-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
 $amsterdam-icon-compact-size-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
 $amsterdam-icon-compact-size-5-line-height: $amsterdam-typography-compact-text-level-5-line-height;
@@ -279,8 +363,6 @@ $amsterdam-icon-compact-size-4-line-height: $amsterdam-typography-compact-text-l
 $amsterdam-icon-compact-size-4-font-size: $amsterdam-typography-compact-text-level-4-font-size;
 $amsterdam-icon-compact-size-3-line-height: $amsterdam-typography-compact-text-level-3-line-height;
 $amsterdam-icon-compact-size-3-font-size: $amsterdam-typography-compact-text-level-3-font-size;
-$amsterdam-icon-spacious-size-7-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-icon-spacious-size-7-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
 $amsterdam-icon-spacious-size-6-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
 $amsterdam-icon-spacious-size-6-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
 $amsterdam-icon-spacious-size-5-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
@@ -289,14 +371,23 @@ $amsterdam-icon-spacious-size-4-line-height: $amsterdam-typography-spacious-text
 $amsterdam-icon-spacious-size-4-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
 $amsterdam-icon-spacious-size-3-line-height: $amsterdam-typography-spacious-text-level-3-line-height;
 $amsterdam-icon-spacious-size-3-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
-$amsterdam-highlight-yellow-background-color: $amsterdam-color-yellow;
-$amsterdam-highlight-purple-background-color: $amsterdam-color-purple;
-$amsterdam-highlight-orange-background-color: $amsterdam-color-orange;
-$amsterdam-highlight-magenta-background-color: $amsterdam-color-magenta;
-$amsterdam-highlight-light-blue-background-color: $amsterdam-color-blue;
-$amsterdam-highlight-green-background-color: $amsterdam-color-green;
-$amsterdam-highlight-dark-green-background-color: $amsterdam-color-dark-green;
-$amsterdam-highlight-blue-background-color: $amsterdam-color-primary-blue;
+$amsterdam-icon-button-on-background-dark-disabled-background-color: $amsterdam-color-neutral-grey2;
+$amsterdam-icon-button-on-background-dark-disabled-color: $amsterdam-color-primary-white;
+$amsterdam-icon-button-on-background-dark-hover-color: $amsterdam-color-primary-white;
+$amsterdam-icon-button-on-background-dark-hover-background-color: $amsterdam-color-dark-blue;
+$amsterdam-icon-button-on-background-dark-color: $amsterdam-color-primary-white;
+$amsterdam-icon-button-on-background-dark-background-color: $amsterdam-color-primary-blue;
+$amsterdam-icon-button-on-background-light-disabled-color: $amsterdam-color-neutral-grey2;
+$amsterdam-icon-button-on-background-light-hover-color: $amsterdam-color-primary-black;
+$amsterdam-icon-button-on-background-light-color: $amsterdam-color-primary-black;
+$amsterdam-icon-button-disabled-color: $amsterdam-color-neutral-grey2;
+$amsterdam-icon-button-hover-color: $amsterdam-color-dark-blue;
+$amsterdam-icon-button-outline-offset: $amsterdam-focus-outline-offset;
+$amsterdam-icon-button-color: $amsterdam-color-primary-blue;
+$amsterdam-heading-compact-level-6-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-heading-compact-level-6-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-heading-compact-level-5-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-heading-compact-level-5-line-height: $amsterdam-typography-compact-text-level-5-line-height;
 $amsterdam-heading-compact-level-4-font-size: $amsterdam-typography-compact-text-level-4-font-size;
 $amsterdam-heading-compact-level-4-line-height: $amsterdam-typography-compact-text-level-4-line-height;
 $amsterdam-heading-compact-level-3-font-size: $amsterdam-typography-compact-text-level-3-font-size;
@@ -305,6 +396,10 @@ $amsterdam-heading-compact-level-2-font-size: $amsterdam-typography-compact-text
 $amsterdam-heading-compact-level-2-line-height: $amsterdam-typography-compact-text-level-2-line-height;
 $amsterdam-heading-compact-level-1-font-size: $amsterdam-typography-compact-text-level-1-font-size;
 $amsterdam-heading-compact-level-1-line-height: $amsterdam-typography-compact-text-level-1-line-height;
+$amsterdam-heading-spacious-level-6-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-heading-spacious-level-6-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-heading-spacious-level-5-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-heading-spacious-level-5-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
 $amsterdam-heading-spacious-level-4-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
 $amsterdam-heading-spacious-level-4-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
 $amsterdam-heading-spacious-level-3-font-size: $amsterdam-typography-spacious-text-level-3-font-size;
@@ -317,15 +412,14 @@ $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-form-label-compact-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-form-label-compact-font-size: $amsterdam-typography-compact-text-level-7-font-size;
-$amsterdam-form-label-spacious-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-form-label-spacious-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
+$amsterdam-header-column-gap: $amsterdam-grid-spacious-gap;
+$amsterdam-form-label-compact-line-height: $amsterdam-typography-compact-text-level-4-line-height;
+$amsterdam-form-label-compact-font-size: $amsterdam-typography-compact-text-level-4-font-size;
+$amsterdam-form-label-spacious-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
+$amsterdam-form-label-spacious-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
 $amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-form-label-font-family: $amsterdam-typography-font-family;
 $amsterdam-form-label-color: $amsterdam-color-primary-black;
-$amsterdam-dialog-close-hover-fill: $amsterdam-color-primary-blue;
-$amsterdam-dialog-close-fill: $amsterdam-color-primary-black;
 $amsterdam-dialog-title-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
 $amsterdam-dialog-title-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
 $amsterdam-dialog-title-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
@@ -334,10 +428,10 @@ $amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
 $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-checkbox-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-checkbox-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-checkbox-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-checkbox-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
+$amsterdam-checkbox-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-checkbox-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-checkbox-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-checkbox-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
 $amsterdam-checkbox-outline-offset: $amsterdam-focus-outline-offset;
 $amsterdam-checkbox-hover-color: $amsterdam-color-dark-blue;
 $amsterdam-checkbox-font-weight: $amsterdam-typography-font-weight-normal;
@@ -366,26 +460,25 @@ $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-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
+$amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
 $amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
 $amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
 $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-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
-$amsterdam-button-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
-$amsterdam-button-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
-$amsterdam-button-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
-$amsterdam-breadcrumb-compact-line-height: $amsterdam-typography-compact-text-level-7-line-height;
-$amsterdam-breadcrumb-compact-font-size: $amsterdam-typography-compact-text-level-7-font-size;
-$amsterdam-breadcrumb-spacious-line-height: $amsterdam-typography-spacious-text-level-7-line-height;
-$amsterdam-breadcrumb-spacious-font-size: $amsterdam-typography-spacious-text-level-7-font-size;
+$amsterdam-button-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-button-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-button-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-button-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-breadcrumb-compact-line-height: $amsterdam-typography-compact-text-level-6-line-height;
+$amsterdam-breadcrumb-compact-font-size: $amsterdam-typography-compact-text-level-6-font-size;
+$amsterdam-breadcrumb-spacious-line-height: $amsterdam-typography-spacious-text-level-6-line-height;
+$amsterdam-breadcrumb-spacious-font-size: $amsterdam-typography-spacious-text-level-6-font-size;
 $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;
 $amsterdam-breadcrumb-item-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
 $amsterdam-breadcrumb-item-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
 $amsterdam-breadcrumb-item-link-outline-offset: $amsterdam-focus-outline-offset;
-$amsterdam-breadcrumb-separator-background-color: $amsterdam-color-primary-blue;
 $amsterdam-breadcrumb-font-weight: $amsterdam-typography-font-weight-normal;
 $amsterdam-breadcrumb-font-family: $amsterdam-typography-font-family;
 $amsterdam-blockquote-compact-line-height: $amsterdam-typography-compact-text-level-3-line-height;
@@ -396,6 +489,28 @@ $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
 $amsterdam-blockquote-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
 $amsterdam-blockquote-color: $amsterdam-color-primary-black;
+$amsterdam-badge-yellow-color: $amsterdam-color-primary-black;
+$amsterdam-badge-yellow-background-color: $amsterdam-color-yellow;
+$amsterdam-badge-purple-color: $amsterdam-color-primary-white;
+$amsterdam-badge-purple-background-color: $amsterdam-color-purple;
+$amsterdam-badge-orange-color: $amsterdam-color-primary-black;
+$amsterdam-badge-orange-background-color: $amsterdam-color-orange;
+$amsterdam-badge-magenta-color: $amsterdam-color-primary-white;
+$amsterdam-badge-magenta-background-color: $amsterdam-color-magenta;
+$amsterdam-badge-green-color: $amsterdam-color-primary-black;
+$amsterdam-badge-green-background-color: $amsterdam-color-green;
+$amsterdam-badge-dark-green-color: $amsterdam-color-primary-white;
+$amsterdam-badge-dark-green-background-color: $amsterdam-color-dark-green;
+$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-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
+$amsterdam-badge-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
+$amsterdam-badge-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
+$amsterdam-badge-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
+$amsterdam-badge-font-family: $amsterdam-typography-font-family;
 $amsterdam-aspect-ratio-2x-wide: $amsterdam-proportion-2x-wide;
 $amsterdam-aspect-ratio-x-wide: $amsterdam-proportion-x-wide;
 $amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
@@ -404,14 +519,14 @@ $amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
 $amsterdam-aspect-ratio-x-tall: $amsterdam-proportion-x-tall;
 $amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
 $amsterdam-alert-close-fill: $amsterdam-color-primary-black;
+$amsterdam-alert-warning-border-color: $amsterdam-color-orange;
 $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
-$amsterdam-alert-success-background-color: $amsterdam-color-primary-white;
+$amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
 $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
-$amsterdam-alert-error-background-color: $amsterdam-color-primary-white;
-$amsterdam-alert-title-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
-$amsterdam-alert-title-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
-$amsterdam-alert-title-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
-$amsterdam-alert-title-spacious-font-size: $amsterdam-typography-spacious-text-level-5-font-size;
+$amsterdam-alert-title-compact-line-height: $amsterdam-typography-compact-text-level-4-line-height;
+$amsterdam-alert-title-compact-font-size: $amsterdam-typography-compact-text-level-4-font-size;
+$amsterdam-alert-title-spacious-line-height: $amsterdam-typography-spacious-text-level-4-line-height;
+$amsterdam-alert-title-spacious-font-size: $amsterdam-typography-spacious-text-level-4-font-size;
 $amsterdam-alert-title-font-weight: $amsterdam-typography-font-weight-bold;
 $amsterdam-alert-title-font-family: $amsterdam-typography-font-family;
 $amsterdam-alert-title-color: $amsterdam-color-primary-black;
@@ -419,8 +534,6 @@ $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-border: 4px solid $amsterdam-color-yellow;
-$amsterdam-alert-background-color: $amsterdam-color-yellow;
 $amsterdam-accordion-button-compact-line-height: $amsterdam-typography-compact-text-level-5-line-height;
 $amsterdam-accordion-button-compact-font-size: $amsterdam-typography-compact-text-level-5-font-size;
 $amsterdam-accordion-button-spacious-line-height: $amsterdam-typography-spacious-text-level-5-line-height;
@@ -447,6 +560,12 @@ $amsterdam-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-ba
 $amsterdam-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
 $amsterdam-link-hover-color: $amsterdam-link-appearance-hover-color;
 $amsterdam-link-color: $amsterdam-link-appearance-color;
+$amsterdam-link-list-link-on-background-light-hover-color: $amsterdam-link-appearance-on-background-light-color;
+$amsterdam-link-list-link-on-background-light-color: $amsterdam-link-appearance-on-background-light-color;
+$amsterdam-link-list-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-background-dark-color;
+$amsterdam-link-list-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
+$amsterdam-link-list-link-hover-color: $amsterdam-link-appearance-hover-color;
+$amsterdam-link-list-link-color: $amsterdam-link-appearance-color;
 $amsterdam-card-link-hover-color: $amsterdam-link-appearance-hover-color;
 $amsterdam-card-link-color: $amsterdam-link-appearance-color;
 $amsterdam-breadcrumb-item-link-color: $amsterdam-link-appearance-color;