@amsterdam/design-system-tokens 3.1.0 → 3.3.0

package/dist/index.scss

@@ -11,7 +11,7 @@ $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-color-interactive-secondary: #202020; // Use `currentColor` instead
+$ams-color-interactive-secondary: #202020;
 $ams-color-interactive-contrast: #202020;
 $ams-color-interactive: #004699;
 $ams-color-interactive-disabled: #767676;
@@ -47,15 +47,15 @@ $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-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem); // Use Heading size 1 instead.
-$ams-typography-heading-0-line-height: 1.1; // Use Heading size 1 instead.
+$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-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; // Use Heading size 5 instead.
+$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;
@@ -73,10 +73,10 @@ $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;
-$ams-links-text-decoration-thickness: 0.125rem; // 2px
-$ams-links-text-underline-offset: 0.15625rem; // 2.5px
-$ams-links-hover-text-decoration-thickness: 0.1875rem; // 3px
-$ams-links-hover-text-underline-offset: 0.09375rem; // 1.5px
+$ams-links-text-decoration-thickness: 0.125rem;
+$ams-links-text-underline-offset: 0.15625rem;
+$ams-links-hover-text-decoration-thickness: 0.1875rem;
+$ams-links-hover-text-underline-offset: 0.09375rem;
 $ams-links-subtle-text-decoration-line: none;
 $ams-links-subtle-hover-text-decoration-line: underline;
 $ams-accordion-button-padding-inline: 0;
@@ -94,16 +94,19 @@ $ams-button-tertiary-border-color: transparent;
 $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>"); // This token will be removed in release 6.0.0
-$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>"); // Use the token with ‘calendar’ spelled correctly instead
-$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>"); // Use the token with ‘calendar’ spelled correctly instead
+$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>"); // Use the token with ‘calendar’ spelled correctly instead
+$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-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-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-dialog-border-radius: initial;
 $ams-dialog-border-style: solid;
+$ams-dialog-box-shadow: initial;
 $ams-dialog-max-inline-size: 48rem;
 $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
 $ams-dialog-body-padding-block: 0;
@@ -126,11 +129,11 @@ $ams-logo-emblem-color: #ec0000;
 $ams-logo-title-color: #ec0000;
 $ams-menu-wide-max-inline-size: 8rem;
 $ams-ordered-list-list-style-type: decimal;
-$ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
-$ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
+$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; // Indent less than the parent to start-align the child’s marker with the parent text.
-$ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
+$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-spotlight-background-color: #004699;
 $ams-page-max-inline-size: 90rem;
 $ams-page-with-menu-max-inline-size: 120rem;
@@ -156,22 +159,22 @@ $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>"); // Use the token with ‘calendar’ spelled correctly instead
-$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>"); // Use the token with ‘calendar’ spelled correctly instead
+$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>"); // Use the token with ‘calendar’ spelled correctly instead
+$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-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';
-$ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
-$ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
+$ams-unordered-list-item-margin-inline-start: 1.625rem;
+$ams-unordered-list-item-padding-inline-start: 0.875rem;
 $ams-unordered-list-unordered-list-list-style-type: '\2013';
-$ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
-$ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
+$ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem;
+$ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem;
 $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;
 $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
 $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
-$ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
+$ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
 $ams-inputs-background-color: $ams-color-background;
 $ams-inputs-border-width: $ams-border-width-m;
 $ams-inputs-color: $ams-color-text;
@@ -182,10 +185,10 @@ $ams-inputs-outline-offset: $ams-focus-outline-offset;
 $ams-inputs-padding-block: $ams-space-s;
 $ams-inputs-padding-inline: $ams-space-m;
 $ams-inputs-disabled-color: $ams-color-interactive-disabled;
-$ams-inputs-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s currentColor;
 $ams-inputs-invalid-border-color: $ams-color-interactive-invalid;
 $ams-inputs-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
-$ams-inputs-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
+$ams-inputs-invalid-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-inputs-placeholder-color: $ams-color-text-secondary;
 $ams-links-color: $ams-color-interactive;
 $ams-links-hover-color: $ams-color-interactive-hover;
@@ -312,7 +315,7 @@ $ams-button-secondary-background-color: $ams-color-background;
 $ams-button-secondary-color: $ams-color-interactive;
 $ams-button-secondary-disabled-border-color: $ams-color-interactive-disabled;
 $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
-$ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-button-secondary-hover-box-shadow: inset 0rem 0rem 0rem $ams-border-width-s currentColor;
 $ams-button-secondary-hover-color: $ams-color-interactive-hover;
 $ams-button-tertiary-color: $ams-color-interactive;
 $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
@@ -344,7 +347,7 @@ $ams-character-count-font-size: $ams-typography-body-text-small-font-size;
 $ams-character-count-font-weight: $ams-typography-body-text-font-weight;
 $ams-character-count-line-height: $ams-typography-body-text-small-line-height;
 $ams-character-count-error-color: $ams-color-feedback-error;
-$ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m; // Use `ams.checkbox.text-decoration-thickness` instead
+$ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m;
 $ams-checkbox-hover-color: $ams-color-interactive-hover;
 $ams-checkbox-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
@@ -390,7 +393,7 @@ $ams-column-gap-medium: $ams-space-m;
 $ams-column-gap-large: $ams-space-l;
 $ams-column-gap-x-large: $ams-space-xl;
 $ams-date-input-disabled-cursor: $ams-cursor-disabled;
-$ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
+$ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
 $ams-date-input-border-color: $ams-inputs-border-color;
 $ams-date-input-border-style: $ams-inputs-border-style;
 $ams-date-input-line-height: $ams-inputs-line-height;
@@ -403,8 +406,10 @@ $ams-description-list-line-height: $ams-typography-body-text-line-height;
 $ams-description-list-row-gap: $ams-space-s;
 $ams-description-list-inverse-color: $ams-color-text-inverse;
 $ams-description-list-term-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-description-list-term-margin-block-end: $ams-space-xs;
 $ams-description-list-description-font-weight: $ams-typography-body-text-font-weight;
-$ams-description-list-description-padding-inline-start: $ams-space-l;
+$ams-description-list-description-margin-block-end: $ams-space-m;
+$ams-description-list-section-margin-block-end: $ams-space-m;
 $ams-dialog-background-color: $ams-color-background;
 $ams-dialog-border-width: $ams-border-width-m;
 $ams-dialog-gap: $ams-space-m;
@@ -510,8 +515,8 @@ $ams-icon-button-inverse-hover-background-color: $ams-color-interactive-hover;
 $ams-icon-button-inverse-hover-color: $ams-color-interactive-inverse;
 $ams-icon-button-inverse-disabled-color: $ams-color-interactive-inverse;
 $ams-icon-button-inverse-disabled-background-color: $ams-color-interactive-disabled;
-$ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size; // Deprecated. Use ‘heading 1’ instead.
-$ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height; // Deprecated. Use ‘heading 1’ instead.
+$ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size;
+$ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height;
 $ams-icon-font-size: $ams-typography-body-text-font-size;
 $ams-icon-line-height: $ams-typography-body-text-line-height;
 $ams-icon-small-font-size: $ams-typography-body-text-small-font-size;
@@ -532,6 +537,7 @@ $ams-image-slider-scroller-outline-offset: $ams-focus-outline-offset;
 $ams-image-slider-thumbnails-gap: $ams-space-xs;
 $ams-image-slider-thumbnails-thumbnail-cursor: $ams-cursor-interactive;
 $ams-image-slider-thumbnails-thumbnail-outline-offset: $ams-focus-outline-offset;
+$ams-image-slider-figure-margin-block-end: $ams-space-m;
 $ams-image-aspect-ratio: $ams-aspect-ratio-16-9;
 $ams-invalid-form-alert-outline-offset: $ams-focus-outline-offset;
 $ams-label-color: $ams-color-text;
@@ -614,8 +620,13 @@ $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
 $ams-page-header-brand-name-line-height: $ams-typography-heading-3-line-height;
 $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
 $ams-page-header-mega-menu-padding-block: $ams-space-l;
+$ams-page-header-mega-menu-button-background-color: $ams-color-interactive;
+$ams-page-header-mega-menu-button-color: $ams-color-text-inverse;
 $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
 $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-page-header-mega-menu-button-padding-inline: $ams-space-s;
+$ams-page-header-mega-menu-button-hover-background-color: $ams-color-interactive-hover;
+$ams-page-header-mega-menu-button-hover-color: $ams-color-text-inverse;
 $ams-page-header-menu-column-gap: $ams-space-l;
 $ams-page-header-menu-row-gap: $ams-space-xs;
 $ams-page-header-menu-item-column-gap: $ams-space-xs;
@@ -772,12 +783,12 @@ $ams-spotlight-lime-background-color: $ams-color-highlight-lime;
 $ams-spotlight-magenta-background-color: $ams-color-highlight-magenta;
 $ams-spotlight-orange-background-color: $ams-color-highlight-orange;
 $ams-spotlight-yellow-background-color: $ams-color-highlight-yellow;
-$ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
-$ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset; // Use `ams.standalone-link.text-underline-offset` instead
+$ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
+$ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
 $ams-standalone-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
-$ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line; // Use `ams.standalone-link.text-decoration-line` instead
-$ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
-$ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line; // Use `ams.standalone-link.hover.text-decoration-line` instead
+$ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line;
+$ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness;
+$ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-standalone-link-column-gap: $ams-space-s;
 $ams-standalone-link-font-family: $ams-typography-font-family;
 $ams-standalone-link-font-size: $ams-typography-body-text-font-size;
@@ -821,7 +832,7 @@ $ams-table-cell-padding-block: $ams-space-s;
 $ams-table-cell-padding-inline: $ams-space-m;
 $ams-table-header-cell-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-tabs-gap: $ams-space-m;
-$ams-tabs-list-box-shadow: inset 0 calc($ams-border-width-m * -1) $ams-color-separator;
+$ams-tabs-list-box-shadow: inset 0rem calc($ams-border-width-m * -1) 0rem 0rem $ams-color-separator;
 $ams-tabs-button-color: $ams-color-interactive;
 $ams-tabs-button-cursor: $ams-cursor-interactive;
 $ams-tabs-button-font-family: $ams-typography-font-family;
@@ -831,9 +842,9 @@ $ams-tabs-button-line-height: $ams-typography-body-text-line-height;
 $ams-tabs-button-outline-offset: calc($ams-focus-outline-offset * -1);
 $ams-tabs-button-padding-block: $ams-space-s;
 $ams-tabs-button-padding-inline: $ams-space-m;
-$ams-tabs-button-hover-box-shadow: inset 0 calc($ams-border-width-m * -1);
+$ams-tabs-button-hover-box-shadow: inset 0rem calc($ams-border-width-m * -1) 0rem 0rem currentColor;
 $ams-tabs-button-hover-color: $ams-color-interactive-hover;
-$ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
+$ams-tabs-button-selected-box-shadow: inset 0rem calc($ams-border-width-xl * -1) 0rem 0rem currentColor;
 $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
 $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
@@ -847,7 +858,7 @@ $ams-text-input-border-style: $ams-inputs-border-style;
 $ams-text-input-line-height: $ams-inputs-line-height;
 $ams-text-input-disabled-cursor: $ams-cursor-disabled;
 $ams-time-input-disabled-cursor: $ams-cursor-disabled;
-$ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
+$ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
 $ams-time-input-border-color: $ams-inputs-border-color;
 $ams-time-input-border-style: $ams-inputs-border-style;
 $ams-time-input-line-height: $ams-inputs-line-height;
@@ -885,6 +896,7 @@ $ams-date-input-padding-inline: $ams-inputs-padding-inline;
 $ams-date-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-date-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-date-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
+$ams-description-list-term-vi-medium-margin-block-end: $ams-description-list-description-margin-block-end;
 $ams-dialog-border-color: $ams-dialog-background-color;
 $ams-field-set-legend-font-size: $ams-typography-heading-3-font-size;
 $ams-file-input-background-color: $ams-inputs-background-color;
@@ -929,10 +941,10 @@ $ams-link-contrast-color: $ams-links-contrast-color;
 $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
 $ams-link-inverse-color: $ams-links-inverse-color;
 $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
-$ams-menu-link-contrast-color: $ams-links-contrast-color; // The menu has a dark background now, so this is no longer needed.
-$ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color; // The menu has a dark background now, so this is no longer needed.
-$ams-menu-link-inverse-color: $ams-links-inverse-color; // The menu has a dark background now, so this is no longer needed.
-$ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color; // The menu has a dark background now, so this is no longer needed.
+$ams-menu-link-contrast-color: $ams-links-contrast-color;
+$ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color;
+$ams-menu-link-inverse-color: $ams-links-inverse-color;
+$ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color;
 $ams-menu-link-color: $ams-links-inverse-color;
 $ams-menu-link-hover-color: $ams-links-inverse-hover-color;
 $ams-menu-wide-padding-block: calc($ams-logo-block-size + 2 * $ams-page-header-padding-block) $ams-space-m;
@@ -941,13 +953,14 @@ $ams-page-footer-menu-medium-padding-inline: $ams-grid-medium-padding-inline;
 $ams-page-footer-menu-wide-padding-inline: $ams-grid-wide-padding-inline;
 $ams-page-footer-menu-link-color: $ams-links-color;
 $ams-page-footer-menu-link-hover-color: $ams-links-hover-color;
-$ams-page-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
+$ams-page-header-padding-inline: $ams-grid-padding-inline;
 $ams-page-header-medium-padding-inline: $ams-grid-medium-padding-inline;
 $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
 $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
 $ams-page-header-menu-item-color: $ams-links-color;
 $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
-$ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
+$ams-page-header-menu-link-color: $ams-links-color;
+$ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline;
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
 $ams-password-input-background-color: $ams-inputs-background-color;

package/dist/index.theme.css

@@ -13,7 +13,7 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #202020; /** Use `currentColor` instead */
+  --ams-color-interactive-secondary: #202020;
   --ams-color-interactive-contrast: #202020;
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
@@ -49,15 +49,15 @@
   --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-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem); /** Use Heading size 1 instead. */
-  --ams-typography-heading-0-line-height: 1.1; /** Use Heading size 1 instead. */
+  --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-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; /** Use Heading size 5 instead. */
+  --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;
@@ -75,10 +75,10 @@
   --ams-inputs-border-color: currentColor;
   --ams-inputs-border-style: solid;
   --ams-inputs-line-height: 1.4;
-  --ams-links-text-decoration-thickness: 0.125rem; /** 2px */
-  --ams-links-text-underline-offset: 0.15625rem; /** 2.5px */
-  --ams-links-hover-text-decoration-thickness: 0.1875rem; /** 3px */
-  --ams-links-hover-text-underline-offset: 0.09375rem; /** 1.5px */
+  --ams-links-text-decoration-thickness: 0.125rem;
+  --ams-links-text-underline-offset: 0.15625rem;
+  --ams-links-hover-text-decoration-thickness: 0.1875rem;
+  --ams-links-hover-text-underline-offset: 0.09375rem;
   --ams-links-subtle-text-decoration-line: none;
   --ams-links-subtle-hover-text-decoration-line: underline;
   --ams-accordion-button-padding-inline: 0;
@@ -96,16 +96,19 @@
   --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>"); /** This token will be removed in release 6.0.0 */
-  --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
-  --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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-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-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-dialog-border-radius: initial;
   --ams-dialog-border-style: solid;
+  --ams-dialog-box-shadow: initial;
   --ams-dialog-max-inline-size: 48rem;
   --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
   --ams-dialog-body-padding-block: 0;
@@ -128,11 +131,11 @@
   --ams-logo-title-color: #ec0000;
   --ams-menu-wide-max-inline-size: 8rem;
   --ams-ordered-list-list-style-type: decimal;
-  --ams-ordered-list-item-margin-inline-start: 2.25rem; /** Divide your total indentation width over margin and padding to position the marker. */
-  --ams-ordered-list-item-padding-inline-start: 0.25rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
+  --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; /** Indent less than the parent to start-align the child’s marker with the parent text. */
-  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
+  --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-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
@@ -158,22 +161,22 @@
   --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
-  --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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-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';
-  --ams-unordered-list-item-margin-inline-start: 1.625rem; /** Divide your total indentation width over margin and padding to position the marker. */
-  --ams-unordered-list-item-padding-inline-start: 0.875rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
+  --ams-unordered-list-item-margin-inline-start: 1.625rem;
+  --ams-unordered-list-item-padding-inline-start: 0.875rem;
   --ams-unordered-list-unordered-list-list-style-type: '\2013';
-  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; /** Indent less than the parent to start-align the child’s marker with the parent text. */
-  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
+  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem;
+  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem;
   --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);
   --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); /** Use Heading size 5 instead. */
+  --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);
@@ -184,10 +187,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 0 0 0 var(--ams-border-width-s);
+  --ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor;
   --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 0 0 0 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);
   --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);
@@ -314,7 +317,7 @@
   --ams-button-secondary-color: var(--ams-color-interactive);
   --ams-button-secondary-disabled-border-color: var(--ams-color-interactive-disabled);
   --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-button-secondary-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor;
   --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
   --ams-button-tertiary-color: var(--ams-color-interactive);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
@@ -346,7 +349,7 @@
   --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); /** Use `ams.checkbox.text-decoration-thickness` instead */
+  --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);
@@ -392,7 +395,7 @@
   --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); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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);
@@ -405,8 +408,10 @@
   --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-margin-block-end: var(--ams-space-xs);
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-description-list-description-padding-inline-start: var(--ams-space-l);
+  --ams-description-list-description-margin-block-end: var(--ams-space-m);
+  --ams-description-list-section-margin-block-end: var(--ams-space-m);
   --ams-dialog-background-color: var(--ams-color-background);
   --ams-dialog-border-width: var(--ams-border-width-m);
   --ams-dialog-gap: var(--ams-space-m);
@@ -512,8 +517,8 @@
   --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); /** Deprecated. Use ‘heading 1’ instead. */
-  --ams-icon-heading-0-line-height: var(--ams-typography-heading-0-line-height); /** Deprecated. Use ‘heading 1’ instead. */
+  --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);
@@ -534,6 +539,7 @@
   --ams-image-slider-thumbnails-gap: var(--ams-space-xs);
   --ams-image-slider-thumbnails-thumbnail-cursor: var(--ams-cursor-interactive);
   --ams-image-slider-thumbnails-thumbnail-outline-offset: var(--ams-focus-outline-offset);
+  --ams-image-slider-figure-margin-block-end: var(--ams-space-m);
   --ams-image-aspect-ratio: var(--ams-aspect-ratio-16-9);
   --ams-invalid-form-alert-outline-offset: var(--ams-focus-outline-offset);
   --ams-label-color: var(--ams-color-text);
@@ -616,8 +622,13 @@
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-3-line-height);
   --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-page-header-mega-menu-padding-block: var(--ams-space-l);
+  --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-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);
   --ams-page-header-menu-column-gap: var(--ams-space-l);
   --ams-page-header-menu-row-gap: var(--ams-space-xs);
   --ams-page-header-menu-item-column-gap: var(--ams-space-xs);
@@ -774,12 +785,12 @@
   --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); /** Use `ams.standalone-link.text-decoration-thickness` instead */
-  --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset); /** Use `ams.standalone-link.text-underline-offset` instead */
+  --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); /** Use `ams.standalone-link.text-decoration-line` instead */
-  --ams-standalone-link-with-icon-text-decoration-thickness: var(--ams-links-text-decoration-thickness); /** Use `ams.standalone-link.text-decoration-thickness` instead */
-  --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line); /** Use `ams.standalone-link.hover.text-decoration-line` instead */
+  --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);
@@ -823,7 +834,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 0 calc(var(--ams-border-width-m) * -1) var(--ams-color-separator);
+  --ams-tabs-list-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 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);
@@ -833,9 +844,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 0 calc(var(--ams-border-width-m) * -1);
+  --ams-tabs-button-hover-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 0rem 0rem currentColor;
   --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
-  --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1);
+  --ams-tabs-button-selected-box-shadow: inset 0rem calc(var(--ams-border-width-xl) * -1) 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);
@@ -849,7 +860,7 @@
   --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); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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);
@@ -887,6 +898,7 @@
   --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-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);
@@ -931,10 +943,10 @@
   --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-link-contrast-color: var(--ams-links-contrast-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-inverse-color: var(--ams-links-inverse-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color); /** The menu has a dark background now, so this is no longer needed. */
+  --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);
@@ -943,13 +955,14 @@
   --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-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); /** Must be the Grid inline padding, to make sure Header and Grid line up */
+  --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-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);
-  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
+  --ams-page-header-menu-link-color: var(--ams-links-color);
+  --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-password-input-background-color: var(--ams-inputs-background-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.1.0",
+  "version": "3.3.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "style-dictionary": "5.2.0"
+    "style-dictionary": "5.3.3"
   },
   "scripts": {
     "clean": "rimraf dist/",