@amsterdam/design-system-tokens 3.4.0 → 4.0.0

package/dist/index.css

@@ -9,13 +9,14 @@
   --ams-aspect-ratio-4-3: 4 / 3;
   --ams-aspect-ratio-16-9: 16 / 9;
   --ams-aspect-ratio-16-5: 16 / 5;
-  --ams-border-width-s: 0.0625rem;
-  --ams-border-width-m: 0.125rem;
-  --ams-border-width-l: 0.1875rem;
-  --ams-border-width-xl: 0.25rem;
+  --ams-border-width-s: 0.0625rem; /** 1px equivalent. For subtle borders like hover reinforcement. */
+  --ams-border-width-m: 0.125rem; /** 2px equivalent. The default border width for inputs and containers. */
+  --ams-border-width-l: 0.1875rem; /** 3px equivalent. */
+  --ams-border-width-xl: 0.25rem; /** 4px equivalent. For strong emphasis like active tab indicators. */
   --ams-border-width-negative-m: -0.125rem;
   --ams-border-width-negative-xl: -0.25rem;
-  --ams-color-background: #ffffff;
+  --ams-color-background-body: #ffffff;
+  --ams-color-background: #ffffff; /** The default background colour for form controls and smaller surfaces. */
   --ams-color-feedback-error: #ec0000;
   --ams-color-feedback-info: #009de6;
   --ams-color-feedback-success: #00893c;
@@ -27,56 +28,52 @@
   --ams-color-highlight-orange: #ff9100;
   --ams-color-highlight-purple: #a00078;
   --ams-color-highlight-yellow: #ffe600;
-  --ams-color-interactive-contrast: #202020;
+  --ams-color-interactive-contrast: #202020; /** For interactive elements on coloured backgrounds where the default blue lacks sufficient contrast. */
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
   --ams-color-interactive-hover: #003677;
   --ams-color-interactive-invalid: #ec0000;
   --ams-color-interactive-invalid-hover: #b70000;
-  --ams-color-interactive-inverse: #ffffff;
-  --ams-color-interactive-secondary: #202020;
+  --ams-color-interactive-inverse: #ffffff; /** For interactive elements on dark backgrounds. */
   --ams-color-progress-current: #00893c;
   --ams-color-progress-completed: #00893c;
   --ams-color-progress-upcoming: #767676;
-  --ams-color-separator: #d1d1d1;
+  --ams-color-separator: #d1d1d1; /** For row borders in tables. */
   --ams-color-text: #202020;
   --ams-color-text-inverse: #ffffff;
-  --ams-color-text-secondary: #767676;
+  --ams-color-text-secondary: #767676; /** For supporting text that is less prominent than the default, e.g. metadata. */
   --ams-cursor-disabled: not-allowed;
-  --ams-cursor-interactive: pointer;
-  --ams-focus-outline-offset: 0.25rem;
-  --ams-space-xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
-  --ams-space-s: clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem);
-  --ams-space-m: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
-  --ams-space-l: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
-  --ams-space-xl: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
-  --ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
-  --ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
-  --ams-typography-hyphenate-limit-chars: auto;
-  --ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
+  --ams-cursor-interactive: pointer; /** All interactive elements in their default state that lack a cursor style. */
+  --ams-focus-outline-offset: 0.25rem; /** The distance between a focused element and its outline. Provides breathing room so the outline doesn't touch the element. */
+  --ams-space-xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem); /** Scales from 4px to 6px. */
+  --ams-space-s: clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem); /** Scales from 8px to 12px. */
+  --ams-space-m: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem); /** Scales from 16px to 24px. */
+  --ams-space-l: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem); /** Scales from 24px to 36px. */
+  --ams-space-xl: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem); /** Scales from 36px to 60px. */
+  --ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem); /** Scales from 48px to 90px. */
+  --ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif; /** The corporate typeface with system fallbacks. */
+  --ams-typography-hyphenate-limit-chars: auto; /** Lets the browser decide the minimum character count for hyphenation. */
+  --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-small-font-size: 1rem;
+  --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);
+  --ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem); /** Scales from 21px to 25px. */
   --ams-typography-body-text-large-line-height: 1.5;
-  --ams-typography-body-text-x-large-font-size: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
+  --ams-typography-body-text-x-large-font-size: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem); /** Scales from 24px to 32px. */
   --ams-typography-body-text-x-large-line-height: 1.4;
-  --ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem);
-  --ams-typography-heading-0-line-height: 1.1;
-  --ams-typography-heading-1-font-size: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
+  --ams-typography-heading-1-font-size: clamp(2rem, 1.7143rem + 1.4286vw, 3rem); /** Scales from 32px to 48px. */
   --ams-typography-heading-1-line-height: 1.2;
   --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-6-line-height: 1.4;
   --ams-typography-heading-font-weight: 800;
-  --ams-typography-heading-text-wrap: balance;
-  --ams-inputs-border-color: currentColor;
+  --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;
-  --ams-inputs-line-height: 1.4;
+  --ams-inputs-line-height: 1.4; /** Tighter than body text (1.6) to keep inputs compact. Buttons also use this to match. */
   --ams-links-text-decoration-thickness: 0.125rem;
   --ams-links-text-underline-offset: 0.15625rem;
   --ams-links-hover-text-decoration-thickness: 0.1875rem;
@@ -84,8 +81,6 @@
   --ams-links-subtle-text-decoration-line: none;
   --ams-links-subtle-hover-text-decoration-line: underline;
   --ams-accordion-button-padding-inline: 0;
-  --ams-accordion-panel-padding-block: 0;
-  --ams-accordion-panel-padding-inline: 0;
   --ams-alert-border-style: solid;
   --ams-avatar-border-style: solid;
   --ams-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>");
@@ -98,28 +93,43 @@
   --ams-button-tertiary-hover-border-color: currentColor;
   --ams-call-to-action-link-background-color: #00893c;
   --ams-call-to-action-link-hover-background-color: #10552b;
-  --ams-date-input-disabled-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='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --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-hover-calender-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-date-input-calender-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-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: 1fr 4fr;
-  --ams-description-list-medium-grid-template-columns: 1fr 2fr;
-  --ams-description-list-wide-grid-template-columns: 1fr 1fr;
+  --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-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: 8;
-  --ams-grid-wide-column-count: 12;
+  --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-padding-block: initial;
+  --ams-grid-cell-padding-inline: initial;
   --ams-icon-button-hover-background-color: rgb(0 70 153 / 12.5%);
   --ams-icon-button-contrast-hover-background-color: rgb(0 0 0 / 12.5%);
   --ams-image-slider-thumbnails-thumbnail-background-color: transparent;
@@ -132,14 +142,22 @@
   --ams-logo-min-block-size: 2.5rem;
   --ams-logo-emblem-color: #ec0000;
   --ams-logo-title-color: #ec0000;
-  --ams-menu-wide-max-inline-size: 8rem;
+  --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-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
   --ams-paragraph-large-text-wrap: balance;
@@ -147,12 +165,14 @@
   --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;
@@ -167,12 +187,8 @@
   --ams-switch-inline-size: 3.5rem;
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
-  --ams-time-input-disabled-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='%23767676'><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-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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-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-hover-calender-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-time-input-calender-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';
   --ams-unordered-list-item-margin-inline-start: 1.625rem;
   --ams-unordered-list-item-padding-inline-start: 0.875rem;
@@ -183,7 +199,6 @@
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
   --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
   --ams-inputs-background-color: var(--ams-color-background);
   --ams-inputs-border-width: var(--ams-border-width-m);
   --ams-inputs-color: var(--ams-color-text);
@@ -194,10 +209,10 @@
   --ams-inputs-padding-block: var(--ams-space-s);
   --ams-inputs-padding-inline: var(--ams-space-m);
   --ams-inputs-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor;
+  --ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor; /** An inset shadow that reinforces the border on hover without shifting the layout. */
   --ams-inputs-invalid-border-color: var(--ams-color-interactive-invalid);
   --ams-inputs-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
-  --ams-inputs-invalid-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
+  --ams-inputs-invalid-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover); /** An inset shadow using the hover variation of the invalid interactive colour. */
   --ams-inputs-placeholder-color: var(--ams-color-text-secondary);
   --ams-links-color: var(--ams-color-interactive);
   --ams-links-hover-color: var(--ams-color-interactive-hover);
@@ -206,10 +221,6 @@
   --ams-links-inverse-color: var(--ams-color-interactive-inverse);
   --ams-links-inverse-hover-color: var(--ams-color-interactive-inverse);
   --ams-accordion-gap: var(--ams-space-s);
-  --ams-accordion-button-font-family: var(--ams-typography-font-family);
-  --ams-accordion-button-font-weight: var(--ams-typography-heading-font-weight);
-  --ams-accordion-button-line-height: var(--ams-typography-heading-3-line-height);
-  --ams-accordion-button-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-accordion-button-color: var(--ams-color-interactive);
   --ams-accordion-button-cursor: var(--ams-cursor-interactive);
   --ams-accordion-button-gap: var(--ams-space-s);
@@ -290,6 +301,7 @@
   --ams-blockquote-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-blockquote-line-height: var(--ams-typography-body-text-x-large-line-height);
   --ams-blockquote-inverse-color: var(--ams-color-text-inverse);
+  --ams-body-background-color: var(--ams-color-background-body);
   --ams-breadcrumb-font-family: var(--ams-typography-font-family);
   --ams-breadcrumb-font-size: var(--ams-typography-body-text-font-size);
   --ams-breadcrumb-font-weight: var(--ams-typography-body-text-font-weight);
@@ -370,7 +382,6 @@
   --ams-checkbox-disabled-color: var(--ams-color-interactive-disabled);
   --ams-checkbox-hover-color: var(--ams-color-interactive-hover);
   --ams-checkbox-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-m);
   --ams-checkbox-checked-indicator-stroke: var(--ams-color-interactive-inverse);
   --ams-checkbox-hover-indicator-hover-stroke: var(--ams-color-interactive-hover);
   --ams-checkbox-hover-indicator-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
@@ -379,19 +390,14 @@
   --ams-checkbox-rectangle-stroke: var(--ams-color-interactive);
   --ams-checkbox-rectangle-checked-fill: var(--ams-color-interactive);
   --ams-checkbox-rectangle-checked-disabled-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-checked-disabled-hover-fill: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-checked-hover-fill: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-checked-invalid-fill: var(--ams-color-interactive-invalid);
   --ams-checkbox-rectangle-checked-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
   --ams-checkbox-rectangle-disabled-stroke: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-hover-stroke: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-hover-disabled-invalid-stroke: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-indeterminate-fill: var(--ams-color-interactive);
   --ams-checkbox-rectangle-indeterminate-disabled-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-indeterminate-disabled-hover-fill: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-indeterminate-hover-fill: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
   --ams-checkbox-rectangle-indeterminate-invalid-fill: var(--ams-color-interactive-invalid);
   --ams-checkbox-rectangle-indeterminate-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
   --ams-checkbox-rectangle-invalid-stroke: var(--ams-color-interactive-invalid);
@@ -406,13 +412,10 @@
   --ams-date-input-line-height: var(--ams-inputs-line-height);
   --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
   --ams-date-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
-  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-description-list-color: var(--ams-color-text);
-  --ams-description-list-column-gap: var(--ams-space-l);
   --ams-description-list-font-family: var(--ams-typography-font-family);
   --ams-description-list-font-size: var(--ams-typography-body-text-font-size);
   --ams-description-list-line-height: var(--ams-typography-body-text-line-height);
-  --ams-description-list-row-gap: var(--ams-space-s);
   --ams-description-list-inverse-color: var(--ams-color-text-inverse);
   --ams-description-list-term-font-weight: var(--ams-typography-heading-font-weight);
   --ams-description-list-term-line-height: var(--ams-typography-heading-4-line-height);
@@ -420,24 +423,25 @@
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-description-list-description-margin-block-end: var(--ams-space-m);
   --ams-description-list-section-margin-block-end: var(--ams-space-m);
+  --ams-description-list-vi-medium-column-gap: var(--ams-space-l);
   --ams-dialog-background-color: var(--ams-color-background);
   --ams-dialog-border-width: var(--ams-border-width-m);
   --ams-dialog-gap: var(--ams-space-m);
   --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
   --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
-  --ams-dialog-medium-inline-size: calc(100% - 2 * var(--ams-space-xl));
-  --ams-dialog-medium-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
+  --ams-dialog-vi-medium-inline-size: calc(100% - 2 * var(--ams-space-xl));
+  --ams-dialog-vi-medium-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
   --ams-dialog-header-gap: var(--ams-space-m);
   --ams-dialog-header-padding-block: var(--ams-space-l) 0;
   --ams-dialog-header-padding-inline: var(--ams-space-l);
-  --ams-dialog-header-medium-padding-block: var(--ams-space-xl) 0;
-  --ams-dialog-header-medium-padding-inline: var(--ams-space-xl);
+  --ams-dialog-header-vi-medium-padding-block: var(--ams-space-xl) 0;
+  --ams-dialog-header-vi-medium-padding-inline: var(--ams-space-xl);
   --ams-dialog-body-padding-inline: var(--ams-space-l);
-  --ams-dialog-body-medium-padding-inline: var(--ams-space-xl);
+  --ams-dialog-body-vi-medium-padding-inline: var(--ams-space-xl);
   --ams-dialog-footer-padding-block: 0 var(--ams-space-l);
   --ams-dialog-footer-padding-inline: var(--ams-space-l);
-  --ams-dialog-footer-medium-padding-block: 0 var(--ams-space-xl);
-  --ams-dialog-footer-medium-padding-inline: var(--ams-space-xl);
+  --ams-dialog-footer-vi-medium-padding-block: 0 var(--ams-space-xl);
+  --ams-dialog-footer-vi-medium-padding-inline: var(--ams-space-xl);
   --ams-error-message-color: var(--ams-color-feedback-error);
   --ams-error-message-font-family: var(--ams-typography-font-family);
   --ams-error-message-font-size: var(--ams-typography-body-text-font-size);
@@ -494,15 +498,14 @@
   --ams-grid-row-gap-l: var(--ams-space-l);
   --ams-grid-row-gap-xl: var(--ams-space-xl);
   --ams-grid-row-gap-2xl: var(--ams-space-2xl);
-  --ams-grid-medium-padding-inline: var(--ams-space-xl);
-  --ams-grid-wide-padding-inline: var(--ams-space-2xl);
+  --ams-grid-vi-medium-padding-inline: var(--ams-space-xl);
+  --ams-grid-vi-wide-padding-inline: var(--ams-space-2xl);
   --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
   --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
   --ams-heading-2-line-height: var(--ams-typography-heading-2-line-height);
   --ams-heading-3-line-height: var(--ams-typography-heading-3-line-height);
   --ams-heading-4-line-height: var(--ams-typography-heading-4-line-height);
   --ams-heading-5-line-height: var(--ams-typography-heading-5-line-height);
-  --ams-heading-6-line-height: var(--ams-typography-heading-6-line-height);
   --ams-heading-color: var(--ams-color-text);
   --ams-heading-font-family: var(--ams-typography-font-family);
   --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
@@ -531,15 +534,12 @@
   --ams-icon-small-line-height: var(--ams-typography-body-text-small-line-height);
   --ams-icon-large-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-icon-large-line-height: var(--ams-typography-body-text-large-line-height);
-  --ams-icon-heading-0-font-size: var(--ams-typography-heading-0-font-size);
-  --ams-icon-heading-0-line-height: var(--ams-typography-heading-0-line-height);
   --ams-icon-heading-1-font-size: var(--ams-typography-heading-1-font-size);
   --ams-icon-heading-1-line-height: var(--ams-typography-heading-1-line-height);
   --ams-icon-heading-2-line-height: var(--ams-typography-heading-2-line-height);
   --ams-icon-heading-3-line-height: var(--ams-typography-heading-3-line-height);
   --ams-icon-heading-4-line-height: var(--ams-typography-heading-4-line-height);
   --ams-icon-heading-5-line-height: var(--ams-typography-heading-5-line-height);
-  --ams-icon-heading-6-line-height: var(--ams-typography-heading-6-line-height);
   --ams-icon-inverse-color: var(--ams-color-text-inverse);
   --ams-image-slider-gap: var(--ams-space-xs);
   --ams-image-slider-scroller-gap: var(--ams-space-xs);
@@ -586,7 +586,7 @@
   --ams-menu-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-menu-line-height: var(--ams-typography-body-text-line-height);
   --ams-menu-padding-block: var(--ams-space-m);
-  --ams-menu-wide-padding-inline: var(--ams-space-s);
+  --ams-menu-vi-wide-padding-inline: var(--ams-space-s);
   --ams-menu-link-gap: var(--ams-space-s);
   --ams-menu-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-menu-link-padding-block: var(--ams-space-s);
@@ -595,7 +595,7 @@
   --ams-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-menu-link-wide-gap: var(--ams-space-xs);
+  --ams-menu-link-vi-wide-gap: var(--ams-space-xs);
   --ams-menu-list-gap: var(--ams-space-m);
   --ams-ordered-list-color: var(--ams-color-text);
   --ams-ordered-list-font-family: var(--ams-typography-font-family);
@@ -609,6 +609,7 @@
   --ams-ordered-list-ordered-list-gap: var(--ams-space-s);
   --ams-ordered-list-ordered-list-padding-block-end: var(--ams-space-s);
   --ams-ordered-list-ordered-list-padding-block-start: var(--ams-space-s);
+  --ams-page-footer-menu-background-color: var(--ams-color-background);
   --ams-page-footer-menu-column-gap: var(--ams-space-l);
   --ams-page-footer-menu-padding-block: var(--ams-space-l);
   --ams-page-footer-menu-row-gap: var(--ams-space-xs);
@@ -621,6 +622,7 @@
   --ams-page-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-page-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-page-header-background-color: var(--ams-color-background);
   --ams-page-header-font-family: var(--ams-typography-font-family);
   --ams-page-header-padding-block: var(--ams-space-l);
   --ams-page-header-logo-link-column-gap: var(--ams-space-m);
@@ -633,7 +635,7 @@
   --ams-page-header-mega-menu-button-background-color: var(--ams-color-interactive);
   --ams-page-header-mega-menu-button-color: var(--ams-color-text-inverse);
   --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
-  --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-page-header-mega-menu-button-padding-inline: var(--ams-space-s);
   --ams-page-header-mega-menu-button-hover-background-color: var(--ams-color-interactive-hover);
   --ams-page-header-mega-menu-button-hover-color: var(--ams-color-text-inverse);
@@ -653,14 +655,7 @@
   --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
   --ams-page-header-navigation-row-gap: var(--ams-space-l);
-  --ams-page-heading-color: var(--ams-color-text);
-  --ams-page-heading-font-family: var(--ams-typography-font-family);
-  --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
-  --ams-page-heading-font-weight: var(--ams-typography-heading-font-weight);
-  --ams-page-heading-line-height: var(--ams-typography-heading-0-line-height);
-  --ams-page-heading-text-wrap: var(--ams-typography-heading-text-wrap);
-  --ams-page-heading-inverse-color: var(--ams-color-text-inverse);
-  --ams-page-background-color: var(--ams-color-background);
+  --ams-page-background-color: var(--ams-color-background-body);
   --ams-pagination-font-family: var(--ams-typography-font-family);
   --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
   --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
@@ -696,7 +691,7 @@
   --ams-progress-list-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-progress-list-button-hover-color: var(--ams-color-interactive-hover);
   --ams-progress-list-step-gap: var(--ams-space-m);
-  --ams-progress-list-step-medium-gap: var(--ams-space-l);
+  --ams-progress-list-step-vi-medium-gap: var(--ams-space-l);
   --ams-progress-list-step-marker-shape-background-color: var(--ams-color-background);
   --ams-progress-list-step-marker-shape-border-color: var(--ams-color-progress-upcoming);
   --ams-progress-list-step-marker-shape-border-width: var(--ams-border-width-m);
@@ -713,7 +708,7 @@
   --ams-progress-list-step-current-connector-border-inline-color: var(--ams-color-progress-current);
   --ams-progress-list-substeps-padding-block-start: var(--ams-space-m);
   --ams-progress-list-substeps-step-indicator-margin-inline-end: var(--ams-space-m);
-  --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-space-l);
+  --ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end: var(--ams-space-l);
   --ams-progress-list-substeps-step-marker-block-size: calc(var(--ams-typography-body-text-font-size) * var(--ams-typography-body-text-line-height));
   --ams-progress-list-substeps-step-marker-inline-size: var(--ams-progress-list-step-marker-shape-block-size);
   --ams-progress-list-substeps-step-marker-shape-background-color: var(--ams-color-background);
@@ -808,11 +803,6 @@
   --ams-standalone-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-standalone-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-standalone-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
-  --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
-  --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
-  --ams-standalone-link-with-icon-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-switch-cursor: var(--ams-cursor-interactive);
   --ams-switch-outline-offset: var(--ams-focus-outline-offset);
   --ams-switch-thumb-background-color: var(--ams-color-background);
@@ -821,13 +811,29 @@
   --ams-switch-checked-background-color: var(--ams-color-interactive);
   --ams-switch-disabled-background-color: var(--ams-color-interactive-disabled);
   --ams-switch-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-tab-navigation-list-box-shadow: inset 0rem var(--ams-border-width-negative-m) 0rem 0rem var(--ams-color-separator);
+  --ams-tab-navigation-list-vertical-box-shadow: inset var(--ams-border-width-negative-m) 0rem 0rem 0rem var(--ams-color-separator);
+  --ams-tab-navigation-link-gap: var(--ams-space-s);
+  --ams-tab-navigation-link-color: var(--ams-color-interactive);
+  --ams-tab-navigation-link-cursor: var(--ams-cursor-interactive);
+  --ams-tab-navigation-link-font-family: var(--ams-typography-font-family);
+  --ams-tab-navigation-link-font-size: var(--ams-typography-body-text-font-size);
+  --ams-tab-navigation-link-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-tab-navigation-link-line-height: var(--ams-typography-body-text-line-height);
+  --ams-tab-navigation-link-outline-offset: calc(var(--ams-focus-outline-offset) * -1);
+  --ams-tab-navigation-link-padding-block: var(--ams-space-s);
+  --ams-tab-navigation-link-padding-inline: var(--ams-space-m);
+  --ams-tab-navigation-link-hover-box-shadow: inset 0rem var(--ams-border-width-negative-m) 0rem 0rem currentColor;
+  --ams-tab-navigation-link-hover-color: var(--ams-color-interactive-hover);
+  --ams-tab-navigation-link-current-box-shadow: inset 0rem var(--ams-border-width-negative-xl) 0rem 0rem currentColor;
+  --ams-tab-navigation-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-tab-navigation-link-vertical-hover-box-shadow: inset var(--ams-border-width-negative-m) 0rem 0rem 0rem currentColor;
+  --ams-tab-navigation-link-vertical-current-box-shadow: inset var(--ams-border-width-negative-xl) 0rem 0rem 0rem currentColor;
   --ams-table-of-contents-font-family: var(--ams-typography-font-family);
   --ams-table-of-contents-font-size: var(--ams-typography-body-text-font-size);
   --ams-table-of-contents-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-table-of-contents-gap: var(--ams-space-s);
   --ams-table-of-contents-line-height: var(--ams-typography-body-text-line-height);
-  --ams-table-of-contents-heading-font-weight: var(--ams-typography-heading-font-weight);
-  --ams-table-of-contents-heading-line-height: var(--ams-typography-heading-4-line-height);
   --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-table-of-contents-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
@@ -842,6 +848,7 @@
   --ams-table-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-table-line-height: var(--ams-typography-body-text-line-height);
   --ams-table-caption-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-table-caption-margin-block-end: var(--ams-space-s);
   --ams-table-cell-border-block-end: var(--ams-border-width-s) solid var(--ams-color-separator);
   --ams-table-cell-padding-block: var(--ams-space-s);
   --ams-table-cell-padding-inline: var(--ams-space-m);
@@ -877,7 +884,6 @@
   --ams-time-input-line-height: var(--ams-inputs-line-height);
   --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
   --ams-time-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
-  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-unordered-list-color: var(--ams-color-text);
   --ams-unordered-list-font-family: var(--ams-typography-font-family);
   --ams-unordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -890,7 +896,6 @@
   --ams-unordered-list-unordered-list-gap: var(--ams-space-s);
   --ams-unordered-list-unordered-list-padding-block-end: var(--ams-space-s);
   --ams-unordered-list-unordered-list-padding-block-start: var(--ams-space-s);
-  --ams-accordion-button-font-size: var(--ams-typography-heading-3-font-size);
   --ams-breadcrumb-link-color: var(--ams-links-color);
   --ams-breadcrumb-link-hover-color: var(--ams-links-hover-color);
   --ams-card-link-color: var(--ams-links-color);
@@ -938,12 +943,10 @@
   --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
   --ams-heading-5-font-size: var(--ams-typography-heading-5-font-size);
-  --ams-heading-6-font-size: var(--ams-typography-heading-6-font-size);
   --ams-icon-heading-2-font-size: var(--ams-typography-heading-2-font-size);
   --ams-icon-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-icon-heading-4-font-size: var(--ams-typography-heading-4-font-size);
   --ams-icon-heading-5-font-size: var(--ams-typography-heading-5-font-size);
-  --ams-icon-heading-6-font-size: var(--ams-typography-heading-6-font-size);
   --ams-label-font-size: var(--ams-typography-heading-3-font-size);
   --ams-link-list-link-color: var(--ams-links-color);
   --ams-link-list-link-hover-color: var(--ams-links-hover-color);
@@ -957,21 +960,17 @@
   --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-link-inverse-color: var(--ams-links-inverse-color);
   --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
-  --ams-menu-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
+  --ams-menu-vi-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
   --ams-menu-link-color: var(--ams-links-inverse-color);
-  --ams-menu-link-contrast-color: var(--ams-links-contrast-color);
-  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
-  --ams-menu-link-inverse-color: var(--ams-links-inverse-color);
-  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
   --ams-menu-link-hover-color: var(--ams-links-inverse-hover-color);
   --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
-  --ams-page-footer-menu-medium-padding-inline: var(--ams-grid-medium-padding-inline);
-  --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-wide-padding-inline);
+  --ams-page-footer-menu-vi-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
+  --ams-page-footer-menu-vi-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
   --ams-page-footer-menu-link-color: var(--ams-links-color);
   --ams-page-footer-menu-link-hover-color: var(--ams-links-hover-color);
   --ams-page-header-padding-inline: var(--ams-grid-padding-inline);
-  --ams-page-header-medium-padding-inline: var(--ams-grid-medium-padding-inline);
-  --ams-page-header-wide-padding-inline: var(--ams-grid-wide-padding-inline);
+  --ams-page-header-vi-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
+  --ams-page-header-vi-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
@@ -1033,7 +1032,6 @@
   --ams-standalone-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
   --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
-  --ams-table-of-contents-heading-font-size: var(--ams-typography-heading-4-font-size);
   --ams-table-of-contents-link-color: var(--ams-links-color);
   --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
   --ams-text-area-background-color: var(--ams-inputs-background-color);