@amsterdam/design-system-tokens 3.2.0 → 3.4.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.
 
+## [3.4.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.3.0...design-system-tokens-v3.4.0) (2026-04-03)
+
+
+### Features
+
+* **Description List:** Apply heading 4 typography to terms ([#2486](https://github.com/Amsterdam/design-system/issues/2486)) ([e624ae4](https://github.com/Amsterdam/design-system/commit/e624ae4cd348736f5f32f0fea4609652f22e8753))
+* **Description List:** Balance multiple lines of text in term ([#2485](https://github.com/Amsterdam/design-system/issues/2485)) ([a77a62e](https://github.com/Amsterdam/design-system/commit/a77a62e8c2f11666f1c6a3a132fe4f14654d9268))
+* **Progress List:** Make steps collapsible ([#2482](https://github.com/Amsterdam/design-system/issues/2482)) ([1fc3e39](https://github.com/Amsterdam/design-system/commit/1fc3e39644cce6a0299ba9bb08cc861c9b4155d7))
+* **typography:** Decrease line height for body text ([#2484](https://github.com/Amsterdam/design-system/issues/2484)) ([970b08e](https://github.com/Amsterdam/design-system/commit/970b08ee22edca8e630bd9c62ceddf891de25a3c))
+* Use DTCG shadow format for shadow tokens ([#2505](https://github.com/Amsterdam/design-system/issues/2505)) ([bd5411c](https://github.com/Amsterdam/design-system/commit/bd5411cacbdd68efd8804edd706362670c56c406))
+
+## [3.3.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.2.0...design-system-tokens-v3.3.0) (2026-03-17)
+
+
+### Features
+
+* **Description List:** Let terms contribute to vertical space ([#2460](https://github.com/Amsterdam/design-system/issues/2460)) ([1ecbdad](https://github.com/Amsterdam/design-system/commit/1ecbdadad4994b50dd22cfac39bfb3932a5b2f91))
+
 ## [3.2.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.1.0...design-system-tokens-v3.2.0) (2026-03-13)
 
 

package/dist/compact.css

@@ -7,6 +7,8 @@
   --ams-border-width-m: 0.0625rem;
   --ams-border-width-l: 0.125rem;
   --ams-border-width-xl: 0.1875rem;
+  --ams-border-width-negative-m: -0.0625rem;
+  --ams-border-width-negative-xl: -0.1875rem;
   --ams-space-xs: 0.25rem;
   --ams-space-s: 0.5rem;
   --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);

package/dist/compact.d.ts

@@ -22,6 +22,10 @@ declare const tokens: {
         m: DesignToken;
         l: DesignToken;
         xl: DesignToken;
+        negative: {
+          m: DesignToken;
+          xl: DesignToken;
+        };
       };
     };
     space: {

package/dist/compact.json

@@ -5,7 +5,11 @@
         "s": "0.0625rem",
         "m": "0.0625rem",
         "l": "0.125rem",
-        "xl": "0.1875rem"
+        "xl": "0.1875rem",
+        "negative": {
+          "m": "-0.0625rem",
+          "xl": "-0.1875rem"
+        }
       }
     },
     "space": {

package/dist/compact.mjs

@@ -6,6 +6,8 @@ export const amsBorderWidthS = "0.0625rem";
 export const amsBorderWidthM = "0.0625rem";
 export const amsBorderWidthL = "0.125rem";
 export const amsBorderWidthXl = "0.1875rem";
+export const amsBorderWidthNegativeM = "-0.0625rem";
+export const amsBorderWidthNegativeXl = "-0.1875rem";
 export const amsSpaceXs = "0.25rem";
 export const amsSpaceS = "0.5rem";
 export const amsSpaceM = "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)";

package/dist/compact.scss

@@ -5,6 +5,8 @@ $ams-border-width-s: 0.0625rem;
 $ams-border-width-m: 0.0625rem;
 $ams-border-width-l: 0.125rem;
 $ams-border-width-xl: 0.1875rem;
+$ams-border-width-negative-m: -0.0625rem;
+$ams-border-width-negative-xl: -0.1875rem;
 $ams-space-xs: 0.25rem;
 $ams-space-s: 0.5rem;
 $ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);

package/dist/compact.theme.css

@@ -7,6 +7,8 @@
   --ams-border-width-m: 0.0625rem;
   --ams-border-width-l: 0.125rem;
   --ams-border-width-xl: 0.1875rem;
+  --ams-border-width-negative-m: -0.0625rem;
+  --ams-border-width-negative-xl: -0.1875rem;
   --ams-space-xs: 0.25rem;
   --ams-space-s: 0.5rem;
   --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);

package/dist/index.css

@@ -13,14 +13,8 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #202020;
-  --ams-color-interactive-contrast: #202020;
-  --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-border-width-negative-m: -0.125rem;
+  --ams-border-width-negative-xl: -0.25rem;
   --ams-color-background: #ffffff;
   --ams-color-feedback-error: #ec0000;
   --ams-color-feedback-info: #009de6;
@@ -33,6 +27,14 @@
   --ams-color-highlight-orange: #ff9100;
   --ams-color-highlight-purple: #a00078;
   --ams-color-highlight-yellow: #ffe600;
+  --ams-color-interactive-contrast: #202020;
+  --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-progress-current: #00893c;
   --ams-color-progress-completed: #00893c;
   --ams-color-progress-upcoming: #767676;
@@ -49,6 +51,18 @@
   --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-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-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-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-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);
@@ -60,18 +74,6 @@
   --ams-typography-heading-6-line-height: 1.4;
   --ams-typography-heading-font-weight: 800;
   --ams-typography-heading-text-wrap: balance;
-  --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-typography-body-text-font-weight: 400;
-  --ams-typography-body-text-line-height: 1.8;
-  --ams-typography-body-text-bold-font-weight: 800;
-  --ams-typography-body-text-small-font-size: 1rem;
-  --ams-typography-body-text-small-line-height: 1.6;
-  --ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem);
-  --ams-typography-body-text-large-line-height: 1.6;
-  --ams-typography-body-text-x-large-font-size: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
-  --ams-typography-body-text-x-large-line-height: 1.4;
   --ams-inputs-border-color: currentColor;
   --ams-inputs-border-style: solid;
   --ams-inputs-line-height: 1.4;
@@ -98,10 +100,11 @@
   --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-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-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-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-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-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;
@@ -140,6 +143,10 @@
   --ams-page-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
   --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-marker-shape-block-size: 1.5rem;
   --ams-progress-list-step-marker-shape-border-style: solid;
   --ams-progress-list-step-marker-shape-outline-style: solid;
@@ -162,10 +169,10 @@
   --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-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-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-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-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;
@@ -198,6 +205,7 @@
   --ams-links-contrast-hover-color: var(--ams-color-interactive-contrast);
   --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);
@@ -208,7 +216,6 @@
   --ams-accordion-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-accordion-button-padding-block: var(--ams-space-s);
   --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
-  --ams-accordion-gap: var(--ams-space-s);
   --ams-action-group-gap: var(--ams-space-m);
   --ams-alert-background-color: var(--ams-color-background);
   --ams-alert-border-color: var(--ams-color-feedback-info);
@@ -349,30 +356,6 @@
   --ams-character-count-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-character-count-line-height: var(--ams-typography-body-text-small-line-height);
   --ams-character-count-error-color: var(--ams-color-feedback-error);
-  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-m);
-  --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-rectangle-checked-disabled-hover-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-checked-disabled-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-checked-hover-fill: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-checked-fill: var(--ams-color-interactive);
-  --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-hover-disabled-invalid-stroke: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-hover-stroke: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-indeterminate-disabled-hover-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-indeterminate-disabled-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-indeterminate-hover-fill: var(--ams-color-interactive-hover);
-  --ams-checkbox-rectangle-indeterminate-fill: var(--ams-color-interactive);
-  --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-fill: var(--ams-color-background);
-  --ams-checkbox-rectangle-stroke: var(--ams-color-interactive);
-  --ams-checkbox-rectangle-disabled-stroke: var(--ams-color-interactive-disabled);
-  --ams-checkbox-rectangle-invalid-stroke: var(--ams-color-interactive-invalid);
-  --ams-checkbox-rectangle-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
   --ams-checkbox-color: var(--ams-color-text);
   --ams-checkbox-cursor: var(--ams-cursor-interactive);
   --ams-checkbox-font-family: var(--ams-typography-font-family);
@@ -385,21 +368,45 @@
   --ams-checkbox-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-checkbox-disabled-cursor: var(--ams-cursor-disabled);
   --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);
   --ams-checkbox-indeterminate-indicator-stroke: var(--ams-color-interactive-inverse);
+  --ams-checkbox-rectangle-fill: var(--ams-color-background);
+  --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);
+  --ams-checkbox-rectangle-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
   --ams-column-gap-x-small: var(--ams-space-xs);
   --ams-column-gap-small: var(--ams-space-s);
   --ams-column-gap-medium: var(--ams-space-m);
   --ams-column-gap-large: var(--ams-space-l);
   --ams-column-gap-x-large: var(--ams-space-xl);
-  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-date-input-border-color: var(--ams-inputs-border-color);
   --ams-date-input-border-style: var(--ams-inputs-border-style);
   --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);
@@ -407,7 +414,8 @@
   --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-body-text-bold-font-weight);
+  --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);
   --ams-description-list-term-margin-block-end: var(--ams-space-xs);
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-description-list-description-margin-block-end: var(--ams-space-m);
@@ -436,6 +444,12 @@
   --ams-error-message-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-typography-body-text-line-height);
+  --ams-field-set-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-set-child-before-error-message-margin-block-end: var(--ams-space-s);
+  --ams-field-set-child-before-field-or-field-set-margin-block-end: var(--ams-space-m);
+  --ams-field-set-child-between-fields-and-field-sets-margin-block-end: var(--ams-space-l);
+  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
+  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
   --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-color: var(--ams-color-text);
   --ams-field-set-legend-font-family: var(--ams-typography-font-family);
@@ -443,12 +457,6 @@
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-field-set-child-margin-block-end: var(--ams-space-xs);
-  --ams-field-set-child-before-error-message-margin-block-end: var(--ams-space-s);
-  --ams-field-set-child-before-field-or-field-set-margin-block-end: var(--ams-space-m);
-  --ams-field-set-child-between-fields-and-field-sets-margin-block-end: var(--ams-space-l);
-  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
-  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
   --ams-field-gap: var(--ams-space-s);
   --ams-field-child-margin-block-end: var(--ams-space-xs);
   --ams-field-child-before-error-message-margin-block-end: var(--ams-space-s);
@@ -517,14 +525,14 @@
   --ams-icon-button-inverse-hover-color: var(--ams-color-interactive-inverse);
   --ams-icon-button-inverse-disabled-color: var(--ams-color-interactive-inverse);
   --ams-icon-button-inverse-disabled-background-color: var(--ams-color-interactive-disabled);
-  --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-font-size: var(--ams-typography-body-text-font-size);
   --ams-icon-line-height: var(--ams-typography-body-text-line-height);
   --ams-icon-small-font-size: var(--ams-typography-body-text-small-font-size);
   --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);
@@ -572,6 +580,13 @@
   --ams-logo-block-size: var(--ams-space-xl);
   --ams-logo-subsite-color: var(--ams-color-text);
   --ams-mark-background-color: var(--ams-color-highlight-yellow);
+  --ams-menu-background-color: var(--ams-color-interactive);
+  --ams-menu-font-family: var(--ams-typography-font-family);
+  --ams-menu-font-size: var(--ams-typography-body-text-font-size);
+  --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-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);
@@ -581,13 +596,6 @@
   --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-background-color: var(--ams-color-interactive);
-  --ams-menu-font-family: var(--ams-typography-font-family);
-  --ams-menu-font-size: var(--ams-typography-body-text-font-size);
-  --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-list-gap: var(--ams-space-m);
   --ams-ordered-list-color: var(--ams-color-text);
   --ams-ordered-list-font-family: var(--ams-typography-font-family);
@@ -682,6 +690,11 @@
   --ams-progress-list-heading-2-step-marker-margin-block-start: calc((var(--ams-typography-heading-2-line-height) * var(--ams-typography-heading-2-font-size)) / 2);
   --ams-progress-list-heading-3-step-marker-margin-block-start: calc((var(--ams-typography-heading-3-line-height) * var(--ams-typography-heading-3-font-size)) / 2);
   --ams-progress-list-heading-4-step-marker-margin-block-start: calc((var(--ams-typography-heading-4-line-height) * var(--ams-typography-heading-4-font-size)) / 2);
+  --ams-progress-list-button-color: var(--ams-color-interactive);
+  --ams-progress-list-button-cursor: var(--ams-cursor-interactive);
+  --ams-progress-list-button-gap: var(--ams-space-s);
+  --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-marker-shape-background-color: var(--ams-color-background);
@@ -785,12 +798,6 @@
   --ams-spotlight-magenta-background-color: var(--ams-color-highlight-magenta);
   --ams-spotlight-orange-background-color: var(--ams-color-highlight-orange);
   --ams-spotlight-yellow-background-color: var(--ams-color-highlight-yellow);
-  --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-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --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-standalone-link-column-gap: var(--ams-space-s);
   --ams-standalone-link-font-family: var(--ams-typography-font-family);
   --ams-standalone-link-font-size: var(--ams-typography-body-text-font-size);
@@ -800,21 +807,27 @@
   --ams-standalone-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --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);
   --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
-  --ams-switch-thumb-hover-box-shadow: 0 0 0 var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
+  --ams-switch-thumb-hover-box-shadow: 0rem 0rem 0rem var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
   --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-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-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);
@@ -834,7 +847,7 @@
   --ams-table-cell-padding-inline: var(--ams-space-m);
   --ams-table-header-cell-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-tabs-gap: var(--ams-space-m);
-  --ams-tabs-list-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 0rem 0rem var(--ams-color-separator);
+  --ams-tabs-list-box-shadow: inset 0rem var(--ams-border-width-negative-m) 0rem 0rem var(--ams-color-separator);
   --ams-tabs-button-color: var(--ams-color-interactive);
   --ams-tabs-button-cursor: var(--ams-cursor-interactive);
   --ams-tabs-button-font-family: var(--ams-typography-font-family);
@@ -844,9 +857,9 @@
   --ams-tabs-button-outline-offset: calc(var(--ams-focus-outline-offset) * -1);
   --ams-tabs-button-padding-block: var(--ams-space-s);
   --ams-tabs-button-padding-inline: var(--ams-space-m);
-  --ams-tabs-button-hover-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 0rem 0rem currentColor;
+  --ams-tabs-button-hover-box-shadow: inset 0rem var(--ams-border-width-negative-m) 0rem 0rem currentColor;
   --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
-  --ams-tabs-button-selected-box-shadow: inset 0rem calc(var(--ams-border-width-xl) * -1) 0rem 0rem currentColor;
+  --ams-tabs-button-selected-box-shadow: inset 0rem var(--ams-border-width-negative-xl) 0rem 0rem currentColor;
   --ams-tabs-button-selected-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-tabs-button-disabled-color: var(--ams-color-interactive-disabled);
   --ams-tabs-button-disabled-cursor: var(--ams-cursor-disabled);
@@ -859,12 +872,12 @@
   --ams-text-input-border-style: var(--ams-inputs-border-style);
   --ams-text-input-line-height: var(--ams-inputs-line-height);
   --ams-text-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-time-input-border-color: var(--ams-inputs-border-color);
   --ams-time-input-border-style: var(--ams-inputs-border-style);
   --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);
@@ -884,8 +897,6 @@
   --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));
   --ams-checkbox-icon-container-inline-size: var(--ams-checkbox-font-size);
-  --ams-date-input-disabled-color: var(--ams-inputs-disabled-color);
-  --ams-date-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --ams-date-input-background-color: var(--ams-inputs-background-color);
   --ams-date-input-border-width: var(--ams-inputs-border-width);
   --ams-date-input-color: var(--ams-inputs-color);
@@ -895,9 +906,13 @@
   --ams-date-input-outline-offset: var(--ams-inputs-outline-offset);
   --ams-date-input-padding-block: var(--ams-inputs-padding-block);
   --ams-date-input-padding-inline: var(--ams-inputs-padding-inline);
+  --ams-date-input-disabled-color: var(--ams-inputs-disabled-color);
+  --ams-date-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --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-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-field-set-legend-font-size: var(--ams-typography-heading-3-font-size);
   --ams-file-input-background-color: var(--ams-inputs-background-color);
@@ -942,13 +957,13 @@
   --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-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-color: var(--ams-links-inverse-color);
   --ams-menu-link-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-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);
@@ -1012,8 +1027,8 @@
   --ams-select-invalid-border-color: var(--ams-inputs-invalid-border-color);
   --ams-select-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-select-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
-  --ams-standalone-link-hover-color: var(--ams-links-hover-color);
   --ams-standalone-link-color: var(--ams-links-color);
+  --ams-standalone-link-hover-color: var(--ams-links-hover-color);
   --ams-standalone-link-contrast-color: var(--ams-links-contrast-color);
   --ams-standalone-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
@@ -1051,8 +1066,6 @@
   --ams-text-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-text-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
   --ams-text-input-placeholder-color: var(--ams-inputs-placeholder-color);
-  --ams-time-input-disabled-color: var(--ams-inputs-disabled-color);
-  --ams-time-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --ams-time-input-background-color: var(--ams-inputs-background-color);
   --ams-time-input-border-width: var(--ams-inputs-border-width);
   --ams-time-input-color: var(--ams-inputs-color);
@@ -1062,6 +1075,8 @@
   --ams-time-input-outline-offset: var(--ams-inputs-outline-offset);
   --ams-time-input-padding-block: var(--ams-inputs-padding-block);
   --ams-time-input-padding-inline: var(--ams-inputs-padding-inline);
+  --ams-time-input-disabled-color: var(--ams-inputs-disabled-color);
+  --ams-time-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --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);