@amsterdam/design-system-tokens 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v4.0.1...design-system-tokens-v4.1.0) (2026-06-23)
+
+
+### Features
+
+* **Calendar:** Add Calendar component ([#2659](https://github.com/Amsterdam/design-system/issues/2659)) ([03e51f3](https://github.com/Amsterdam/design-system/commit/03e51f3bfff4062f9523a57e3aad920c324665ff))
+* **Date Picker:** Add Date Picker component ([#2660](https://github.com/Amsterdam/design-system/issues/2660)) ([b7c5a10](https://github.com/Amsterdam/design-system/commit/b7c5a1091aeafac1b3f75f657c2dce7e92c5da50))
+* Decrease font weight for all bold text ([#2647](https://github.com/Amsterdam/design-system/issues/2647)) ([d0bac44](https://github.com/Amsterdam/design-system/commit/d0bac44d15f40c53f6640564a1f08698ad4b44e9))
+* **Dialog, Grid Cell, Page:** Add containment context to allow container-based layouts ([#2562](https://github.com/Amsterdam/design-system/issues/2562)) ([7e4fc6a](https://github.com/Amsterdam/design-system/commit/7e4fc6af2ad12c1a0778513269922b2f2ab5f148))
+* **Pagination:** Add tokens and elements for theming, active state, ellipsis, and relative-link ([#2690](https://github.com/Amsterdam/design-system/issues/2690)) ([f1ad13a](https://github.com/Amsterdam/design-system/commit/f1ad13a5ec9f8dca214090eff8064a0b2e5b24d8))
+* **Table of Contents:** Make items with nested lists optionally collapsible ([#2584](https://github.com/Amsterdam/design-system/issues/2584)) ([cf6871b](https://github.com/Amsterdam/design-system/commit/cf6871b51dedb727255708425c3a9723965b9169))
+
+
+### Bug Fixes
+
+* **Switch:** Keep the track border visible in forced colors mode ([#2656](https://github.com/Amsterdam/design-system/issues/2656)) ([b402c31](https://github.com/Amsterdam/design-system/commit/b402c31cc326c1cea0524fcd4da96ded54a56a88))
+* **tokens:** Restore real values to deprecated tokens ([#2707](https://github.com/Amsterdam/design-system/issues/2707)) ([6363654](https://github.com/Amsterdam/design-system/commit/6363654e98312aed6e5f9b053300f5d02424f99f))
+
 ## [4.0.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v4.0.0...design-system-tokens-v4.0.1) (2026-04-24)
 
 

package/README.md

@@ -176,68 +176,56 @@ Note that redefining the value of a token is a much better approach than redecla
 
 ## Deprecating tokens
 
-We deprecate tokens using the DTCG `$deprecated` field. The [official definition](https://www.designtokens.org/tr/drafts/format/#deprecated) allows `$deprecated` to be `true`, `false` or a string explanation.
+A deprecated token keeps working until it is removed, so it must always hold a real value.
 
-In ADS, `$deprecated` should be a string so consumers always get a reason + migration path.
+We provide a reason and a migration path through the DTCG `$deprecated` field.
+When there is a direct replacement, start the message with ``Use `<replacement-token>` instead.``
+End every message with a removal date: `Will be removed on or after YYYY-MM-DD.`
 
-### Deprecation message format
+### Renaming a token
 
-- Always include a removal date: `Will be removed on or after YYYY-MM-DD.`
-- If there is a direct replacement, start with: ``Use `<replacement-token>` instead.``
+Keep the old name intact during the deprecation window, while adding the new name for the same value.
+Wire the rename through a `var()` fallback, so downstream overrides of the old name keep working.
 
-### Simple deprecation (no fallback)
-
-If a deprecated token is still used directly, keep its existing `$value` until removal.
-Also add a deprecation comment next to the token usage in the consuming CSS.
-
-Token JSON:
+1. Point the deprecated token’s `$value` at the replacement, so it resolves to the same value:
 
 ```jsonc
-"row-gap": {
-  "$deprecated": "Whitespace is now applied through the `ams.description-list.*.margin-block-end` tokens. Will be removed on or after 2026-10-20.",
-  "$value": "0"
+"medium": {
+  "padding-inline": {
+    "$deprecated": "Use `ams.grid.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
+    "$value": "{ams.grid.vi-medium.padding-inline}"
+  }
 }
 ```
 
-Component CSS:
+2. In the component CSS, reference the deprecated token first, with the replacement as the fallback:
+   Mark the deprecation in the component stylesheet as well; no need to copy the details from the tokens file.
 
 ```css
-row-gap: var(--ams-description-list-row-gap); /* This token is @deprecated. Will be removed on or after 2026-10-20. */
+padding-inline: var(--ams-grid-medium-padding-inline /* @deprecated */, var(--ams-grid-vi-medium-padding-inline));
 ```
 
-### Renames that use `var()` fallback
-
-When a token is renamed but we still want (downstream) overrides of the old token to keep working, we implement the rename through CSS `var()` fallback.
+3. If a theme overrides the replacement (for example Compact Mode), overriding the replacement token is enough because the deprecated token references it.
+   Only repeat the deprecated token in a theme tokens file if you need to override the deprecated token itself for legacy consumers.
 
-Always add an inline deprecation comment next to the deprecated custom property inside the `var()` call.
+### Removing a token
 
-1. Update the component CSS to reference the deprecated token first, and the replacement token as the fallback:
-
-```css
-padding-inline: var(
-  --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
-  var(--ams-grid-vi-medium-padding-inline)
-);
-```
-
-2. In the token JSON, mark the old token as deprecated and set its `$value` to the CSS-wide keyword `initial`:
+A removal will always be a breaking change, so it must be part of a major release.
+Plan the deprecation early, as it must stay in place for at least six months.
+The value of the token cannot change during the deprecation window, as we consider visual consequences for downstream users a breaking change.
 
 ```jsonc
-"medium": {
-  "padding-inline": {
-    "$deprecated": "Use `ams.grid.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
-    "$value": "initial"
-  }
+"row-gap": {
+  "$deprecated": "Whitespace is now applied through the `ams.description-list.*.margin-block-end` tokens. Will be removed on or after 2026-10-20.",
+  "$value": "(unchanged value)"
 }
 ```
 
-Why `initial`? Per CSS `var()` rules, when a custom property is [not set or is set to a CSS-wide keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var#syntax) like `initial`, the fallback value is used. This makes the replacement token the default while keeping the deprecated token visible and overrideable.
-
-Only apply this `initial` rule when the deprecated token is used in a `var(--deprecated, <fallback>)` pattern.
-
-### Deprecations without a 1:1 replacement
+Surface the deprecation in the stylesheet as well.
 
-If there is no 1:1 replacement (design/behavior changed), keep the existing `$value` until removal and update the consuming CSS/markup before deleting the token.
+```css
+row-gap: var(--ams-description-list-row-gap); /* @deprecated Will be removed on or after 2026-10-20. */
+```
 
 ## Token types
 

package/dist/compact.css

@@ -31,6 +31,7 @@
   --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-calendar-inline-size: 16rem;
   --ams-page-header-mega-menu-padding-block: 0;
   --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);

package/dist/compact.d.ts

@@ -85,6 +85,9 @@ declare const tokens: {
     body: {
       "background-color": DesignToken;
     };
+    calendar: {
+      "inline-size": DesignToken;
+    };
     grid: {
       "padding-inline": DesignToken;
       "vi-medium": {

package/dist/compact.json

@@ -69,6 +69,9 @@
     "body": {
       "background-color": "#e8e8e8"
     },
+    "calendar": {
+      "inline-size": "16rem"
+    },
     "grid": {
       "padding-inline": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
       "vi-medium": {

package/dist/compact.mjs

@@ -40,6 +40,7 @@ export const amsTypographyHeading_4LineHeight = 1.4;
 export const amsTypographyHeading_5FontSize = "0.875rem";
 export const amsTypographyHeading_5LineHeight = 1.4;
 export const amsBodyBackgroundColor = "#e8e8e8";
+export const amsCalendarInlineSize = "16rem";
 export const amsGridPaddingInline =
   "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";
 export const amsGridViMediumPaddingInline =

package/dist/compact.scss

@@ -29,6 +29,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-calendar-inline-size: 16rem;
 $ams-page-header-mega-menu-padding-block: 0;
 $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size;
 $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;

package/dist/compact.theme.css

@@ -31,6 +31,7 @@
   --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-calendar-inline-size: 16rem;
   --ams-page-header-mega-menu-padding-block: 0;
   --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);

package/dist/index.css

@@ -56,7 +56,7 @@
   --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. */
@@ -69,7 +69,7 @@
   --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;
@@ -80,6 +80,7 @@
   --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;
@@ -91,43 +92,33 @@
   --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%);
@@ -142,37 +133,39 @@
   --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;
@@ -187,6 +180,8 @@
   --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';
@@ -341,6 +336,17 @@
   --ams-button-tertiary-color: var(--ams-color-interactive);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
+  --ams-calendar-font-family: var(--ams-typography-font-family);
+  --ams-calendar-font-size: var(--ams-typography-body-text-font-size);
+  --ams-calendar-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-calendar-gap: var(--ams-space-s);
+  --ams-calendar-line-height: var(--ams-typography-body-text-line-height);
+  --ams-calendar-day-outline-offset: var(--ams-focus-outline-offset);
+  --ams-calendar-day-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-calendar-day-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --ams-calendar-day-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
+  --ams-calendar-day-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-calendar-day-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-call-to-action-link-color: var(--ams-color-text-inverse);
   --ams-call-to-action-link-font-family: var(--ams-typography-font-family);
   --ams-call-to-action-link-font-size: var(--ams-typography-body-text-font-size);
@@ -412,6 +418,15 @@
   --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-picker-inline-size: var(--ams-calendar-inline-size);
+  --ams-date-picker-day-color: var(--ams-color-interactive);
+  --ams-date-picker-day-cursor: var(--ams-cursor-interactive);
+  --ams-date-picker-day-disabled-color: var(--ams-color-interactive-disabled);
+  --ams-date-picker-day-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-date-picker-day-hover-color: var(--ams-color-interactive-hover);
+  --ams-date-picker-day-selected-background-color: var(--ams-color-interactive);
+  --ams-date-picker-day-selected-color: var(--ams-color-interactive-inverse);
+  --ams-date-picker-day-selected-hover-background-color: var(--ams-color-interactive-hover);
   --ams-description-list-color: var(--ams-color-text);
   --ams-description-list-font-family: var(--ams-typography-font-family);
   --ams-description-list-font-size: var(--ams-typography-body-text-font-size);
@@ -423,9 +438,13 @@
   --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-narrow-grid-template-columns: var(--ams-description-list-vi-medium-narrow-grid-template-columns);
+  --ams-description-list-medium-grid-template-columns: var(--ams-description-list-vi-medium-medium-grid-template-columns);
+  --ams-description-list-wide-grid-template-columns: var(--ams-description-list-vi-medium-wide-grid-template-columns);
   --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-container-name: var(--ams-query-containers-inline-size-container-name);
   --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));
@@ -498,8 +517,11 @@
   --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-column-count: var(--ams-grid-vi-medium-column-count);
+  --ams-grid-wide-column-count: var(--ams-grid-vi-wide-column-count);
   --ams-grid-vi-medium-padding-inline: var(--ams-space-xl);
   --ams-grid-vi-wide-padding-inline: var(--ams-space-2xl);
+  --ams-grid-cell-container-name: var(--ams-query-containers-inline-size-container-name);
   --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);
@@ -586,6 +608,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-max-inline-size: var(--ams-menu-vi-wide-max-inline-size);
   --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);
@@ -656,18 +679,26 @@
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
   --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-background-color: var(--ams-color-background-body);
+  --ams-page-container-name: var(--ams-query-containers-inline-size-container-name);
   --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);
   --ams-pagination-line-height: var(--ams-typography-body-text-line-height);
+  --ams-pagination-link-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-pagination-link-gap: var(--ams-space-xs);
   --ams-pagination-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-pagination-link-padding-inline: var(--ams-space-s);
   --ams-pagination-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-pagination-link-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-pagination-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-pagination-relative-link-background-color: var(--ams-pagination-link-background-color);
+  --ams-pagination-relative-link-padding-block: var(--ams-pagination-link-padding-block);
+  --ams-pagination-relative-link-hover-background-color: var(--ams-pagination-link-hover-background-color);
+  --ams-pagination-relative-link-active-background-color: var(--ams-pagination-link-active-background-color);
+  --ams-pagination-ellipsis-color: var(--ams-color-text);
+  --ams-pagination-ellipsis-padding-block: var(--ams-pagination-link-padding-block);
   --ams-paragraph-color: var(--ams-color-text);
   --ams-paragraph-font-family: var(--ams-typography-font-family);
   --ams-paragraph-font-size: var(--ams-typography-body-text-font-size);
@@ -805,6 +836,7 @@
   --ams-standalone-link-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-label-border-width: var(--ams-border-width-m);
   --ams-switch-thumb-background-color: var(--ams-color-background);
   --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
   --ams-switch-thumb-hover-box-shadow: 0rem 0rem 0rem var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
@@ -834,14 +866,18 @@
   --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-list-gap: var(--ams-space-s);
+  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-xs);
+  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-m);
+  --ams-table-of-contents-item-gap: var(--ams-space-xs);
   --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);
   --ams-table-of-contents-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-table-of-contents-link-current-font-weight: var(--ams-typography-heading-font-weight);
   --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-table-of-contents-list-gap: var(--ams-space-s);
-  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-s);
-  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-l);
+  --ams-table-of-contents-button-color: var(--ams-color-interactive);
+  --ams-table-of-contents-button-hover-color: var(--ams-color-interactive-hover);
   --ams-table-color: var(--ams-color-text);
   --ams-table-font-family: var(--ams-typography-font-family);
   --ams-table-font-size: var(--ams-typography-body-text-font-size);
@@ -898,6 +934,8 @@
   --ams-unordered-list-unordered-list-padding-block-start: var(--ams-space-s);
   --ams-breadcrumb-link-color: var(--ams-links-color);
   --ams-breadcrumb-link-hover-color: var(--ams-links-hover-color);
+  --ams-calendar-day-link-color: var(--ams-links-color);
+  --ams-calendar-day-link-hover-color: var(--ams-links-hover-color);
   --ams-card-link-color: var(--ams-links-color);
   --ams-card-link-hover-color: var(--ams-links-hover-color);
   --ams-checkbox-icon-container-block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
@@ -916,9 +954,24 @@
   --ams-date-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
   --ams-date-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-date-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
+  --ams-date-picker-font-family: var(--ams-calendar-font-family);
+  --ams-date-picker-font-size: var(--ams-calendar-font-size);
+  --ams-date-picker-font-weight: var(--ams-calendar-font-weight);
+  --ams-date-picker-gap: var(--ams-calendar-gap);
+  --ams-date-picker-line-height: var(--ams-calendar-line-height);
+  --ams-date-picker-day-outline-offset: var(--ams-calendar-day-outline-offset);
+  --ams-date-picker-day-current-font-weight: var(--ams-calendar-day-current-font-weight);
+  --ams-description-list-column-gap: var(--ams-description-list-vi-medium-column-gap);
   --ams-description-list-term-font-size: var(--ams-typography-heading-4-font-size);
   --ams-description-list-term-vi-medium-margin-block-end: var(--ams-description-list-description-margin-block-end);
   --ams-dialog-border-color: var(--ams-dialog-background-color);
+  --ams-dialog-medium-inline-size: var(--ams-dialog-vi-medium-inline-size);
+  --ams-dialog-medium-max-block-size: var(--ams-dialog-vi-medium-max-block-size);
+  --ams-dialog-header-medium-padding-block: var(--ams-dialog-header-vi-medium-padding-block);
+  --ams-dialog-header-medium-padding-inline: var(--ams-dialog-header-vi-medium-padding-inline);
+  --ams-dialog-body-medium-padding-inline: var(--ams-dialog-body-vi-medium-padding-inline);
+  --ams-dialog-footer-medium-padding-block: var(--ams-dialog-footer-vi-medium-padding-block);
+  --ams-dialog-footer-medium-padding-inline: var(--ams-dialog-footer-vi-medium-padding-inline);
   --ams-field-set-legend-font-size: var(--ams-typography-heading-3-font-size);
   --ams-file-input-background-color: var(--ams-inputs-background-color);
   --ams-file-input-border-width: var(--ams-inputs-border-width);
@@ -939,6 +992,8 @@
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-button-disabled-cursor);
   --ams-file-input-file-selector-button-hover-box-shadow: var(--ams-button-secondary-hover-box-shadow);
   --ams-file-input-file-selector-button-hover-color: var(--ams-button-secondary-hover-color);
+  --ams-grid-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
+  --ams-grid-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
   --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
   --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
@@ -960,9 +1015,11 @@
   --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-inline: var(--ams-menu-vi-wide-padding-inline);
   --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-hover-color: var(--ams-links-inverse-hover-color);
+  --ams-menu-link-wide-gap: var(--ams-menu-link-vi-wide-gap);
   --ams-page-footer-menu-padding-inline: var(--ams-grid-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);
@@ -978,6 +1035,14 @@
   --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline);
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
+  --ams-pagination-relative-link-font-weight: var(--ams-pagination-link-font-weight);
+  --ams-pagination-relative-link-gap: var(--ams-pagination-link-gap);
+  --ams-pagination-relative-link-outline-offset: var(--ams-pagination-link-outline-offset);
+  --ams-pagination-relative-link-padding-inline: var(--ams-pagination-link-padding-inline);
+  --ams-pagination-relative-link-text-decoration-line: var(--ams-pagination-link-text-decoration-line);
+  --ams-pagination-relative-link-text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
+  --ams-pagination-relative-link-text-underline-offset: var(--ams-pagination-link-text-underline-offset);
+  --ams-pagination-relative-link-hover-text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
   --ams-password-input-background-color: var(--ams-inputs-background-color);
   --ams-password-input-border-width: var(--ams-inputs-border-width);
   --ams-password-input-color: var(--ams-inputs-color);
@@ -996,6 +1061,8 @@
   --ams-progress-list-heading-2-step-marker-block-size: calc(var(--ams-typography-heading-2-font-size) * var(--ams-typography-heading-2-line-height));
   --ams-progress-list-heading-3-step-marker-block-size: calc(var(--ams-typography-heading-3-font-size) * var(--ams-typography-heading-3-line-height));
   --ams-progress-list-heading-4-step-marker-block-size: calc(var(--ams-typography-heading-4-font-size) * var(--ams-typography-heading-4-line-height));
+  --ams-progress-list-step-medium-gap: var(--ams-progress-list-step-vi-medium-gap);
+  --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end);
   --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   --ams-radio-icon-container-inline-size: var(--ams-radio-font-size);
   --ams-search-field-input-background-color: var(--ams-inputs-background-color);
@@ -1033,6 +1100,7 @@
   --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-link-color: var(--ams-links-color);
+  --ams-table-of-contents-link-current-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);
   --ams-text-area-border-width: var(--ams-inputs-border-width);
@@ -1078,4 +1146,15 @@
   --ams-time-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
   --ams-time-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-time-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
+  --ams-menu-wide-padding-block: var(--ams-menu-vi-wide-padding-block);
+  --ams-page-footer-menu-medium-padding-inline: var(--ams-page-footer-menu-vi-medium-padding-inline);
+  --ams-page-footer-menu-wide-padding-inline: var(--ams-page-footer-menu-vi-wide-padding-inline);
+  --ams-page-header-medium-padding-inline: var(--ams-page-header-vi-medium-padding-inline);
+  --ams-page-header-wide-padding-inline: var(--ams-page-header-vi-wide-padding-inline);
+  --ams-pagination-link-active-color: var(--ams-pagination-link-color);
+  --ams-pagination-link-current-color: var(--ams-pagination-link-color);
+  --ams-pagination-link-current-hover-color: var(--ams-pagination-link-hover-color);
+  --ams-pagination-relative-link-color: var(--ams-pagination-link-color);
+  --ams-pagination-relative-link-hover-color: var(--ams-pagination-link-hover-color);
+  --ams-pagination-relative-link-active-color: var(--ams-pagination-link-active-color);
 }