@amsterdam/design-system-tokens 4.0.0 → 4.1.0

package/dist/index.scss

@@ -54,7 +54,7 @@ $ams-typography-hyphenate-limit-chars: auto; // Lets the browser decide the mini
 $ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem); // Scales from 18px to 20px.
 $ams-typography-body-text-font-weight: 400;
 $ams-typography-body-text-line-height: 1.6;
-$ams-typography-body-text-bold-font-weight: 800;
+$ams-typography-body-text-bold-font-weight: 700;
 $ams-typography-body-text-small-font-size: 1rem; // Fixed at 16px; does not scale.
 $ams-typography-body-text-small-line-height: 1.5;
 $ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem); // Scales from 21px to 25px.
@@ -67,7 +67,7 @@ $ams-typography-heading-2-line-height: 1.3;
 $ams-typography-heading-3-line-height: 1.3;
 $ams-typography-heading-4-line-height: 1.4;
 $ams-typography-heading-5-line-height: 1.4;
-$ams-typography-heading-font-weight: 800;
+$ams-typography-heading-font-weight: 700;
 $ams-typography-heading-text-wrap: balance; // Distributes heading text evenly across lines for a more balanced appearance.
 $ams-inputs-border-color: currentColor; // Uses currentColor so the border adapts to the text colour, including in error states.
 $ams-inputs-border-style: solid;
@@ -78,6 +78,7 @@ $ams-links-hover-text-decoration-thickness: 0.1875rem;
 $ams-links-hover-text-underline-offset: 0.09375rem;
 $ams-links-subtle-text-decoration-line: none;
 $ams-links-subtle-hover-text-decoration-line: underline;
+$ams-query-containers-inline-size-container-name: ams-query-container-inline-size;
 $ams-accordion-button-padding-inline: 0;
 $ams-alert-border-style: solid;
 $ams-avatar-border-style: solid;
@@ -89,43 +90,33 @@ $ams-button-secondary-border-color: currentColor;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-tertiary-border-color: transparent;
 $ams-button-tertiary-hover-border-color: currentColor;
+$ams-calendar-inline-size: 20rem;
 $ams-call-to-action-link-background-color: #00893c;
 $ams-call-to-action-link-hover-background-color: #10552b;
 $ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
 $ams-date-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-$ams-description-list-column-gap: initial;
+$ams-date-picker-day-disabled-text-decoration-line: line-through;
+$ams-date-picker-day-hover-background-color: rgb(0 70 153 / 12.5%);
 $ams-description-list-row-gap: 0;
 $ams-description-list-term-text-wrap: balance;
 $ams-description-list-description-padding-inline-start: 0;
-$ams-description-list-narrow-grid-template-columns: initial;
-$ams-description-list-medium-grid-template-columns: initial;
-$ams-description-list-wide-grid-template-columns: initial;
 $ams-description-list-vi-medium-narrow-grid-template-columns: 1fr 4fr;
 $ams-description-list-vi-medium-medium-grid-template-columns: 1fr 2fr;
 $ams-description-list-vi-medium-wide-grid-template-columns: 1fr 1fr;
 $ams-dialog-border-radius: initial;
 $ams-dialog-border-style: solid;
 $ams-dialog-box-shadow: initial;
+$ams-dialog-container-type: inline-size;
 $ams-dialog-max-inline-size: 48rem;
-$ams-dialog-medium-inline-size: initial;
-$ams-dialog-medium-max-block-size: initial;
 $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
-$ams-dialog-header-medium-padding-block: initial;
-$ams-dialog-header-medium-padding-inline: initial;
 $ams-dialog-body-padding-block: 0;
-$ams-dialog-body-medium-padding-inline: initial;
-$ams-dialog-footer-medium-padding-block: initial;
-$ams-dialog-footer-medium-padding-inline: initial;
 $ams-file-input-border-style: dashed;
 $ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
 $ams-grid-column-count: 4;
-$ams-grid-medium-column-count: initial;
-$ams-grid-medium-padding-inline: initial;
-$ams-grid-wide-column-count: initial;
-$ams-grid-wide-padding-inline: initial;
 $ams-grid-vi-medium-column-count: 8;
 $ams-grid-vi-wide-column-count: 12;
 $ams-grid-cell-background-color: initial;
+$ams-grid-cell-container-type: inline-size;
 $ams-grid-cell-padding-block: initial;
 $ams-grid-cell-padding-inline: initial;
 $ams-icon-button-hover-background-color: rgb(0 70 153 / 12.5%);
@@ -140,37 +131,39 @@ $ams-link-line-height: inherit;
 $ams-logo-min-block-size: 2.5rem;
 $ams-logo-emblem-color: #ec0000;
 $ams-logo-title-color: #ec0000;
-$ams-menu-wide-max-inline-size: initial;
-$ams-menu-wide-padding-block: initial;
-$ams-menu-wide-padding-inline: initial;
 $ams-menu-vi-wide-max-inline-size: 8rem;
-$ams-menu-link-wide-gap: initial;
 $ams-ordered-list-list-style-type: decimal;
 $ams-ordered-list-item-margin-inline-start: 2.25rem;
 $ams-ordered-list-item-padding-inline-start: 0.25rem;
 $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
 $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem;
 $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem;
-$ams-page-footer-menu-medium-padding-inline: initial;
-$ams-page-footer-menu-wide-padding-inline: initial;
 $ams-page-footer-spotlight-background-color: #004699;
-$ams-page-header-medium-padding-inline: initial;
-$ams-page-header-wide-padding-inline: initial;
+$ams-page-container-type: inline-size;
 $ams-page-max-inline-size: 90rem;
 $ams-page-with-menu-max-inline-size: 120rem;
+$ams-pagination-gap: 0;
+$ams-pagination-list-gap: 0;
+$ams-pagination-link-background-color: transparent;
+$ams-pagination-link-min-block-size: auto;
+$ams-pagination-link-min-inline-size: auto;
+$ams-pagination-link-padding-block: 0;
+$ams-pagination-link-hover-background-color: transparent;
+$ams-pagination-link-active-background-color: transparent;
+$ams-pagination-link-current-background-color: transparent;
+$ams-pagination-link-current-hover-background-color: transparent;
+$ams-pagination-ellipsis-padding-inline: 0;
 $ams-paragraph-large-text-wrap: balance;
 $ams-progress-list-button-padding-block: 0;
 $ams-progress-list-button-padding-inline: 0;
 $ams-progress-list-icon-transition-duration: 0.3s;
 $ams-progress-list-icon-transition-timing-function: ease;
-$ams-progress-list-step-medium-gap: initial;
 $ams-progress-list-step-marker-shape-block-size: 1.5rem;
 $ams-progress-list-step-marker-shape-border-style: solid;
 $ams-progress-list-step-marker-shape-outline-style: solid;
 $ams-progress-list-step-connector-border-inline-style: dashed;
 $ams-progress-list-step-connector-border-inline-width: 1px;
 $ams-progress-list-step-completed-connector-border-inline-style: solid;
-$ams-progress-list-substeps-step-indicator-medium-margin-inline-end: initial;
 $ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
 $ams-progress-list-substeps-step-marker-shape-border-style: solid;
 $ams-progress-list-substeps-step-marker-shape-outline-style: solid;
@@ -185,6 +178,8 @@ $ams-switch-background-color: #767676;
 $ams-switch-inline-size: 3.5rem;
 $ams-switch-thumb-block-size: 1.75rem;
 $ams-switch-thumb-inline-size: 1.75rem;
+$ams-table-of-contents-button-icon-transition-duration: 0.3s;
+$ams-table-of-contents-button-icon-transition-timing-function: ease;
 $ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
 $ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
 $ams-unordered-list-list-style-type: '\2022';
@@ -339,6 +334,17 @@ $ams-button-secondary-hover-color: $ams-color-interactive-hover;
 $ams-button-tertiary-color: $ams-color-interactive;
 $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
 $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
+$ams-calendar-font-family: $ams-typography-font-family;
+$ams-calendar-font-size: $ams-typography-body-text-font-size;
+$ams-calendar-font-weight: $ams-typography-body-text-font-weight;
+$ams-calendar-gap: $ams-space-s;
+$ams-calendar-line-height: $ams-typography-body-text-line-height;
+$ams-calendar-day-outline-offset: $ams-focus-outline-offset;
+$ams-calendar-day-current-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-calendar-day-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
+$ams-calendar-day-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
+$ams-calendar-day-link-text-underline-offset: $ams-links-text-underline-offset;
+$ams-calendar-day-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-call-to-action-link-color: $ams-color-text-inverse;
 $ams-call-to-action-link-font-family: $ams-typography-font-family;
 $ams-call-to-action-link-font-size: $ams-typography-body-text-font-size;
@@ -410,6 +416,15 @@ $ams-date-input-border-style: $ams-inputs-border-style;
 $ams-date-input-line-height: $ams-inputs-line-height;
 $ams-date-input-disabled-cursor: $ams-cursor-disabled;
 $ams-date-input-calendar-picker-indicator-cursor: $ams-cursor-interactive;
+$ams-date-picker-inline-size: $ams-calendar-inline-size;
+$ams-date-picker-day-color: $ams-color-interactive;
+$ams-date-picker-day-cursor: $ams-cursor-interactive;
+$ams-date-picker-day-disabled-color: $ams-color-interactive-disabled;
+$ams-date-picker-day-disabled-cursor: $ams-cursor-disabled;
+$ams-date-picker-day-hover-color: $ams-color-interactive-hover;
+$ams-date-picker-day-selected-background-color: $ams-color-interactive;
+$ams-date-picker-day-selected-color: $ams-color-interactive-inverse;
+$ams-date-picker-day-selected-hover-background-color: $ams-color-interactive-hover;
 $ams-description-list-color: $ams-color-text;
 $ams-description-list-font-family: $ams-typography-font-family;
 $ams-description-list-font-size: $ams-typography-body-text-font-size;
@@ -421,9 +436,13 @@ $ams-description-list-term-margin-block-end: $ams-space-xs;
 $ams-description-list-description-font-weight: $ams-typography-body-text-font-weight;
 $ams-description-list-description-margin-block-end: $ams-space-m;
 $ams-description-list-section-margin-block-end: $ams-space-m;
+$ams-description-list-narrow-grid-template-columns: $ams-description-list-vi-medium-narrow-grid-template-columns;
+$ams-description-list-medium-grid-template-columns: $ams-description-list-vi-medium-medium-grid-template-columns;
+$ams-description-list-wide-grid-template-columns: $ams-description-list-vi-medium-wide-grid-template-columns;
 $ams-description-list-vi-medium-column-gap: $ams-space-l;
 $ams-dialog-background-color: $ams-color-background;
 $ams-dialog-border-width: $ams-border-width-m;
+$ams-dialog-container-name: $ams-query-containers-inline-size-container-name;
 $ams-dialog-gap: $ams-space-m;
 $ams-dialog-inline-size: calc(100% - 2 * $ams-space-l);
 $ams-dialog-max-block-size: calc(100dvh - 2 * $ams-space-l);
@@ -496,8 +515,11 @@ $ams-grid-padding-inline: $ams-space-l;
 $ams-grid-row-gap-l: $ams-space-l;
 $ams-grid-row-gap-xl: $ams-space-xl;
 $ams-grid-row-gap-2xl: $ams-space-2xl;
+$ams-grid-medium-column-count: $ams-grid-vi-medium-column-count;
+$ams-grid-wide-column-count: $ams-grid-vi-wide-column-count;
 $ams-grid-vi-medium-padding-inline: $ams-space-xl;
 $ams-grid-vi-wide-padding-inline: $ams-space-2xl;
+$ams-grid-cell-container-name: $ams-query-containers-inline-size-container-name;
 $ams-heading-1-font-size: $ams-typography-heading-1-font-size;
 $ams-heading-1-line-height: $ams-typography-heading-1-line-height;
 $ams-heading-2-line-height: $ams-typography-heading-2-line-height;
@@ -584,6 +606,7 @@ $ams-menu-font-size: $ams-typography-body-text-font-size;
 $ams-menu-font-weight: $ams-typography-body-text-font-weight;
 $ams-menu-line-height: $ams-typography-body-text-line-height;
 $ams-menu-padding-block: $ams-space-m;
+$ams-menu-wide-max-inline-size: $ams-menu-vi-wide-max-inline-size;
 $ams-menu-vi-wide-padding-inline: $ams-space-s;
 $ams-menu-link-gap: $ams-space-s;
 $ams-menu-link-outline-offset: $ams-focus-outline-offset;
@@ -654,18 +677,26 @@ $ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-t
 $ams-page-header-navigation-column-gap: $ams-space-l;
 $ams-page-header-navigation-row-gap: $ams-space-l;
 $ams-page-background-color: $ams-color-background-body;
+$ams-page-container-name: $ams-query-containers-inline-size-container-name;
 $ams-pagination-font-family: $ams-typography-font-family;
 $ams-pagination-font-size: $ams-typography-body-text-font-size;
 $ams-pagination-font-weight: $ams-typography-body-text-font-weight;
 $ams-pagination-line-height: $ams-typography-body-text-line-height;
+$ams-pagination-link-font-weight: $ams-typography-body-text-font-weight;
 $ams-pagination-link-gap: $ams-space-xs;
 $ams-pagination-link-outline-offset: $ams-focus-outline-offset;
 $ams-pagination-link-padding-inline: $ams-space-s;
 $ams-pagination-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-pagination-link-text-underline-offset: $ams-links-text-underline-offset;
-$ams-pagination-link-current-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-pagination-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-pagination-link-current-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-pagination-relative-link-background-color: $ams-pagination-link-background-color;
+$ams-pagination-relative-link-padding-block: $ams-pagination-link-padding-block;
+$ams-pagination-relative-link-hover-background-color: $ams-pagination-link-hover-background-color;
+$ams-pagination-relative-link-active-background-color: $ams-pagination-link-active-background-color;
+$ams-pagination-ellipsis-color: $ams-color-text;
+$ams-pagination-ellipsis-padding-block: $ams-pagination-link-padding-block;
 $ams-paragraph-color: $ams-color-text;
 $ams-paragraph-font-family: $ams-typography-font-family;
 $ams-paragraph-font-size: $ams-typography-body-text-font-size;
@@ -803,6 +834,7 @@ $ams-standalone-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-standalone-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-switch-cursor: $ams-cursor-interactive;
 $ams-switch-outline-offset: $ams-focus-outline-offset;
+$ams-switch-label-border-width: $ams-border-width-m;
 $ams-switch-thumb-background-color: $ams-color-background;
 $ams-switch-thumb-hover-color: $ams-color-interactive-hover;
 $ams-switch-thumb-hover-box-shadow: 0rem 0rem 0rem $ams-border-width-m $ams-switch-thumb-hover-color;
@@ -832,14 +864,18 @@ $ams-table-of-contents-font-size: $ams-typography-body-text-font-size;
 $ams-table-of-contents-font-weight: $ams-typography-body-text-font-weight;
 $ams-table-of-contents-gap: $ams-space-s;
 $ams-table-of-contents-line-height: $ams-typography-body-text-line-height;
+$ams-table-of-contents-list-gap: $ams-space-s;
+$ams-table-of-contents-list-list-padding-block-start: $ams-space-xs;
+$ams-table-of-contents-list-list-padding-inline-start: $ams-space-m;
+$ams-table-of-contents-item-gap: $ams-space-xs;
 $ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
 $ams-table-of-contents-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-table-of-contents-link-text-underline-offset: $ams-links-text-underline-offset;
+$ams-table-of-contents-link-current-font-weight: $ams-typography-heading-font-weight;
 $ams-table-of-contents-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
-$ams-table-of-contents-list-gap: $ams-space-s;
-$ams-table-of-contents-list-list-padding-block-start: $ams-space-s;
-$ams-table-of-contents-list-list-padding-inline-start: $ams-space-l;
+$ams-table-of-contents-button-color: $ams-color-interactive;
+$ams-table-of-contents-button-hover-color: $ams-color-interactive-hover;
 $ams-table-color: $ams-color-text;
 $ams-table-font-family: $ams-typography-font-family;
 $ams-table-font-size: $ams-typography-body-text-font-size;
@@ -896,6 +932,8 @@ $ams-unordered-list-unordered-list-padding-block-end: $ams-space-s;
 $ams-unordered-list-unordered-list-padding-block-start: $ams-space-s;
 $ams-breadcrumb-link-color: $ams-links-color;
 $ams-breadcrumb-link-hover-color: $ams-links-hover-color;
+$ams-calendar-day-link-color: $ams-links-color;
+$ams-calendar-day-link-hover-color: $ams-links-hover-color;
 $ams-card-link-color: $ams-links-color;
 $ams-card-link-hover-color: $ams-links-hover-color;
 $ams-checkbox-icon-container-block-size: calc($ams-checkbox-font-size * $ams-checkbox-line-height);
@@ -914,9 +952,24 @@ $ams-date-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-date-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-date-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-date-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
+$ams-date-picker-font-family: $ams-calendar-font-family;
+$ams-date-picker-font-size: $ams-calendar-font-size;
+$ams-date-picker-font-weight: $ams-calendar-font-weight;
+$ams-date-picker-gap: $ams-calendar-gap;
+$ams-date-picker-line-height: $ams-calendar-line-height;
+$ams-date-picker-day-outline-offset: $ams-calendar-day-outline-offset;
+$ams-date-picker-day-current-font-weight: $ams-calendar-day-current-font-weight;
+$ams-description-list-column-gap: $ams-description-list-vi-medium-column-gap;
 $ams-description-list-term-font-size: $ams-typography-heading-4-font-size;
 $ams-description-list-term-vi-medium-margin-block-end: $ams-description-list-description-margin-block-end;
 $ams-dialog-border-color: $ams-dialog-background-color;
+$ams-dialog-medium-inline-size: $ams-dialog-vi-medium-inline-size;
+$ams-dialog-medium-max-block-size: $ams-dialog-vi-medium-max-block-size;
+$ams-dialog-header-medium-padding-block: $ams-dialog-header-vi-medium-padding-block;
+$ams-dialog-header-medium-padding-inline: $ams-dialog-header-vi-medium-padding-inline;
+$ams-dialog-body-medium-padding-inline: $ams-dialog-body-vi-medium-padding-inline;
+$ams-dialog-footer-medium-padding-block: $ams-dialog-footer-vi-medium-padding-block;
+$ams-dialog-footer-medium-padding-inline: $ams-dialog-footer-vi-medium-padding-inline;
 $ams-field-set-legend-font-size: $ams-typography-heading-3-font-size;
 $ams-file-input-background-color: $ams-inputs-background-color;
 $ams-file-input-border-width: $ams-inputs-border-width;
@@ -937,6 +990,8 @@ $ams-file-input-file-selector-button-disabled-color: $ams-button-secondary-disab
 $ams-file-input-file-selector-button-disabled-cursor: $ams-button-disabled-cursor;
 $ams-file-input-file-selector-button-hover-box-shadow: $ams-button-secondary-hover-box-shadow;
 $ams-file-input-file-selector-button-hover-color: $ams-button-secondary-hover-color;
+$ams-grid-medium-padding-inline: $ams-grid-vi-medium-padding-inline;
+$ams-grid-wide-padding-inline: $ams-grid-vi-wide-padding-inline;
 $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
 $ams-heading-3-font-size: $ams-typography-heading-3-font-size;
 $ams-heading-4-font-size: $ams-typography-heading-4-font-size;
@@ -958,9 +1013,11 @@ $ams-link-contrast-color: $ams-links-contrast-color;
 $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
 $ams-link-inverse-color: $ams-links-inverse-color;
 $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
+$ams-menu-wide-padding-inline: $ams-menu-vi-wide-padding-inline;
 $ams-menu-vi-wide-padding-block: calc($ams-logo-block-size + 2 * $ams-page-header-padding-block) $ams-space-m;
 $ams-menu-link-color: $ams-links-inverse-color;
 $ams-menu-link-hover-color: $ams-links-inverse-hover-color;
+$ams-menu-link-wide-gap: $ams-menu-link-vi-wide-gap;
 $ams-page-footer-menu-padding-inline: $ams-grid-padding-inline;
 $ams-page-footer-menu-vi-medium-padding-inline: $ams-grid-vi-medium-padding-inline;
 $ams-page-footer-menu-vi-wide-padding-inline: $ams-grid-vi-wide-padding-inline;
@@ -976,6 +1033,14 @@ $ams-page-header-menu-link-color: $ams-links-color;
 $ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline;
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
+$ams-pagination-relative-link-font-weight: $ams-pagination-link-font-weight;
+$ams-pagination-relative-link-gap: $ams-pagination-link-gap;
+$ams-pagination-relative-link-outline-offset: $ams-pagination-link-outline-offset;
+$ams-pagination-relative-link-padding-inline: $ams-pagination-link-padding-inline;
+$ams-pagination-relative-link-text-decoration-line: $ams-pagination-link-text-decoration-line;
+$ams-pagination-relative-link-text-decoration-thickness: $ams-pagination-link-text-decoration-thickness;
+$ams-pagination-relative-link-text-underline-offset: $ams-pagination-link-text-underline-offset;
+$ams-pagination-relative-link-hover-text-decoration-line: $ams-pagination-link-hover-text-decoration-line;
 $ams-password-input-background-color: $ams-inputs-background-color;
 $ams-password-input-border-width: $ams-inputs-border-width;
 $ams-password-input-color: $ams-inputs-color;
@@ -994,6 +1059,8 @@ $ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
 $ams-progress-list-heading-2-step-marker-block-size: calc($ams-typography-heading-2-font-size * $ams-typography-heading-2-line-height);
 $ams-progress-list-heading-3-step-marker-block-size: calc($ams-typography-heading-3-font-size * $ams-typography-heading-3-line-height);
 $ams-progress-list-heading-4-step-marker-block-size: calc($ams-typography-heading-4-font-size * $ams-typography-heading-4-line-height);
+$ams-progress-list-step-medium-gap: $ams-progress-list-step-vi-medium-gap;
+$ams-progress-list-substeps-step-indicator-medium-margin-inline-end: $ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end;
 $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
 $ams-radio-icon-container-inline-size: $ams-radio-font-size;
 $ams-search-field-input-background-color: $ams-inputs-background-color;
@@ -1031,6 +1098,7 @@ $ams-standalone-link-contrast-hover-color: $ams-links-contrast-hover-color;
 $ams-standalone-link-inverse-color: $ams-links-inverse-color;
 $ams-standalone-link-inverse-hover-color: $ams-links-inverse-hover-color;
 $ams-table-of-contents-link-color: $ams-links-color;
+$ams-table-of-contents-link-current-color: $ams-links-color;
 $ams-table-of-contents-link-hover-color: $ams-links-hover-color;
 $ams-text-area-background-color: $ams-inputs-background-color;
 $ams-text-area-border-width: $ams-inputs-border-width;
@@ -1076,3 +1144,14 @@ $ams-time-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-time-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-time-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-time-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
+$ams-menu-wide-padding-block: $ams-menu-vi-wide-padding-block;
+$ams-page-footer-menu-medium-padding-inline: $ams-page-footer-menu-vi-medium-padding-inline;
+$ams-page-footer-menu-wide-padding-inline: $ams-page-footer-menu-vi-wide-padding-inline;
+$ams-page-header-medium-padding-inline: $ams-page-header-vi-medium-padding-inline;
+$ams-page-header-wide-padding-inline: $ams-page-header-vi-wide-padding-inline;
+$ams-pagination-link-active-color: $ams-pagination-link-color;
+$ams-pagination-link-current-color: $ams-pagination-link-color;
+$ams-pagination-link-current-hover-color: $ams-pagination-link-hover-color;
+$ams-pagination-relative-link-color: $ams-pagination-link-color;
+$ams-pagination-relative-link-hover-color: $ams-pagination-link-hover-color;
+$ams-pagination-relative-link-active-color: $ams-pagination-link-active-color;