@amsterdam/design-system-tokens 2.2.0 → 3.1.0

package/dist/index.scss

@@ -11,8 +11,8 @@ $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: #181818; // Use `currentColor` instead
-$ams-color-interactive-contrast: #181818;
+$ams-color-interactive-secondary: #202020; // Use `currentColor` instead
+$ams-color-interactive-contrast: #202020;
 $ams-color-interactive: #004699;
 $ams-color-interactive-disabled: #767676;
 $ams-color-interactive-hover: #003677;
@@ -22,17 +22,20 @@ $ams-color-interactive-inverse: #ffffff;
 $ams-color-background: #ffffff;
 $ams-color-feedback-error: #ec0000;
 $ams-color-feedback-info: #009de6;
-$ams-color-feedback-success: #00a03c;
+$ams-color-feedback-success: #00893c;
 $ams-color-feedback-warning: #ff9100;
 $ams-color-highlight-azure: #009de6;
-$ams-color-highlight-green: #00a03c;
+$ams-color-highlight-green: #00893c;
 $ams-color-highlight-lime: #bed200;
 $ams-color-highlight-magenta: #e50082;
 $ams-color-highlight-orange: #ff9100;
 $ams-color-highlight-purple: #a00078;
 $ams-color-highlight-yellow: #ffe600;
+$ams-color-progress-current: #00893c;
+$ams-color-progress-completed: #00893c;
+$ams-color-progress-upcoming: #767676;
 $ams-color-separator: #d1d1d1;
-$ams-color-text: #181818;
+$ams-color-text: #202020;
 $ams-color-text-inverse: #ffffff;
 $ams-color-text-secondary: #767676;
 $ams-cursor-disabled: not-allowed;
@@ -56,7 +59,7 @@ $ams-typography-heading-6-line-height: 1.4; // Use Heading size 5 instead.
 $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: 12 8 4;
+$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;
@@ -89,10 +92,10 @@ $ams-button-secondary-border-color: currentColor;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-tertiary-border-color: transparent;
 $ams-button-tertiary-hover-border-color: currentColor;
-$ams-call-to-action-link-background-color: #00a03c;
-$ams-call-to-action-link-hover-background-color: #007c2e;
+$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-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-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-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
@@ -131,6 +134,19 @@ $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total
 $ams-page-footer-spotlight-background-color: #004699;
 $ams-page-max-inline-size: 90rem;
 $ams-page-with-menu-max-inline-size: 120rem;
+$ams-paragraph-large-text-wrap: balance;
+$ams-progress-list-step-marker-shape-block-size: 1.5rem;
+$ams-progress-list-step-marker-shape-border-style: solid;
+$ams-progress-list-step-marker-shape-outline-style: solid;
+$ams-progress-list-step-connector-border-inline-style: dashed;
+$ams-progress-list-step-connector-border-inline-width: 1px;
+$ams-progress-list-step-completed-connector-border-inline-style: solid;
+$ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
+$ams-progress-list-substeps-step-marker-shape-border-style: solid;
+$ams-progress-list-substeps-step-marker-shape-outline-style: solid;
+$ams-progress-list-substeps-step-connector-border-inline-style: dashed;
+$ams-progress-list-substeps-step-connector-border-inline-width: 1px;
+$ams-progress-list-substeps-step-completed-connector-border-inline-style: solid;
 $ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
 $ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
 $ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -139,8 +155,8 @@ $ams-switch-background-color: #767676;
 $ams-switch-inline-size: 3.5rem;
 $ams-switch-thumb-block-size: 1.75rem;
 $ams-switch-thumb-inline-size: 1.75rem;
-$ams-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-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-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
@@ -239,6 +255,7 @@ $ams-badge-color: $ams-color-text-inverse;
 $ams-badge-font-family: $ams-typography-font-family;
 $ams-badge-font-size: $ams-typography-body-text-font-size;
 $ams-badge-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-badge-gap: $ams-space-xs;
 $ams-badge-line-height: $ams-typography-body-text-line-height;
 $ams-badge-padding-inline: $ams-space-xs;
 $ams-badge-azure-background-color: $ams-color-feedback-info;
@@ -412,16 +429,22 @@ $ams-error-message-font-size: $ams-typography-body-text-font-size;
 $ams-error-message-font-weight: $ams-typography-body-text-font-weight;
 $ams-error-message-gap: $ams-space-xs;
 $ams-error-message-line-height: $ams-typography-body-text-line-height;
-$ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
-$ams-field-set-invalid-padding-inline-start: $ams-space-m;
+$ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-color: $ams-color-text;
 $ams-field-set-legend-font-family: $ams-typography-font-family;
 $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
 $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
-$ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
 $ams-field-set-legend-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
+$ams-field-set-child-margin-block-end: $ams-space-xs;
+$ams-field-set-child-before-error-message-margin-block-end: $ams-space-s;
+$ams-field-set-child-before-field-or-field-set-margin-block-end: $ams-space-m;
+$ams-field-set-child-between-fields-and-field-sets-margin-block-end: $ams-space-l;
+$ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
+$ams-field-set-invalid-padding-inline-start: $ams-space-m;
 $ams-field-gap: $ams-space-s;
+$ams-field-child-margin-block-end: $ams-space-xs;
+$ams-field-child-before-error-message-margin-block-end: $ams-space-s;
 $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
 $ams-field-invalid-padding-inline-start: $ams-space-m;
 $ams-figure-gap: $ams-space-s;
@@ -590,6 +613,7 @@ $ams-page-header-brand-name-color: $ams-color-text;
 $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-cursor: $ams-cursor-interactive;
 $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-page-header-menu-column-gap: $ams-space-l;
@@ -607,7 +631,7 @@ $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration
 $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-page-header-navigation-column-gap: $ams-space-l;
-$ams-page-header-navigation-row-gap: $ams-space-s;
+$ams-page-header-navigation-row-gap: $ams-space-l;
 $ams-page-heading-color: $ams-color-text;
 $ams-page-heading-font-family: $ams-typography-font-family;
 $ams-page-heading-font-size: $ams-typography-heading-0-font-size;
@@ -642,6 +666,46 @@ $ams-password-input-border-color: $ams-inputs-border-color;
 $ams-password-input-border-style: $ams-inputs-border-style;
 $ams-password-input-line-height: $ams-inputs-line-height;
 $ams-password-input-disabled-cursor: $ams-cursor-disabled;
+$ams-progress-list-heading-2-step-marker-margin-block-start: calc(($ams-typography-heading-2-line-height * $ams-typography-heading-2-font-size) / 2);
+$ams-progress-list-heading-3-step-marker-margin-block-start: calc(($ams-typography-heading-3-line-height * $ams-typography-heading-3-font-size) / 2);
+$ams-progress-list-heading-4-step-marker-margin-block-start: calc(($ams-typography-heading-4-line-height * $ams-typography-heading-4-font-size) / 2);
+$ams-progress-list-step-gap: $ams-space-m;
+$ams-progress-list-step-medium-gap: $ams-space-l;
+$ams-progress-list-step-marker-shape-background-color: $ams-color-background;
+$ams-progress-list-step-marker-shape-border-color: $ams-color-progress-upcoming;
+$ams-progress-list-step-marker-shape-border-width: $ams-border-width-m;
+$ams-progress-list-step-marker-shape-outline-color: $ams-color-background;
+$ams-progress-list-step-marker-shape-outline-width: $ams-border-width-m;
+$ams-progress-list-step-connector-border-inline-color: $ams-color-progress-upcoming;
+$ams-progress-list-step-heading-margin-block-end: $ams-space-s;
+$ams-progress-list-step-content-margin-block-end: $ams-space-l;
+$ams-progress-list-step-completed-marker-shape-background-color: $ams-color-progress-completed;
+$ams-progress-list-step-completed-marker-shape-border-color: $ams-color-progress-completed;
+$ams-progress-list-step-completed-connector-border-inline-color: $ams-color-progress-completed;
+$ams-progress-list-step-current-marker-shape-background-color: $ams-color-progress-current;
+$ams-progress-list-step-current-marker-shape-border-color: $ams-color-progress-current;
+$ams-progress-list-step-current-connector-border-inline-color: $ams-color-progress-current;
+$ams-progress-list-substeps-padding-block-start: $ams-space-m;
+$ams-progress-list-substeps-step-indicator-margin-inline-end: $ams-space-m;
+$ams-progress-list-substeps-step-indicator-medium-margin-inline-end: $ams-space-l;
+$ams-progress-list-substeps-step-marker-block-size: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height);
+$ams-progress-list-substeps-step-marker-inline-size: $ams-progress-list-step-marker-shape-block-size;
+$ams-progress-list-substeps-step-marker-shape-background-color: $ams-color-background;
+$ams-progress-list-substeps-step-marker-shape-border-color: $ams-color-progress-upcoming;
+$ams-progress-list-substeps-step-marker-shape-border-width: $ams-border-width-m;
+$ams-progress-list-substeps-step-marker-shape-outline-color: $ams-color-background;
+$ams-progress-list-substeps-step-marker-shape-outline-width: $ams-border-width-m;
+$ams-progress-list-substeps-step-connector-background-color: $ams-color-background;
+$ams-progress-list-substeps-step-connector-border-inline-color: $ams-color-progress-upcoming;
+$ams-progress-list-substeps-step-connector-margin-block-start: calc($ams-typography-body-text-font-size * $ams-typography-body-text-line-height / 2);
+$ams-progress-list-substeps-step-connector-last-child-border-inline-color: $ams-color-background;
+$ams-progress-list-substeps-step-content-margin-block-end: $ams-space-m;
+$ams-progress-list-substeps-step-completed-marker-shape-background-color: $ams-color-progress-completed;
+$ams-progress-list-substeps-step-completed-marker-shape-border-color: $ams-color-progress-completed;
+$ams-progress-list-substeps-step-completed-connector-border-inline-color: $ams-color-progress-completed;
+$ams-progress-list-substeps-step-current-marker-shape-background-color: $ams-color-progress-current;
+$ams-progress-list-substeps-step-current-marker-shape-border-color: $ams-color-progress-current;
+$ams-progress-list-substeps-last-child-content-margin-block-end: $ams-space-l;
 $ams-radio-color: $ams-color-text;
 $ams-radio-cursor: $ams-cursor-interactive;
 $ams-radio-font-family: $ams-typography-font-family;
@@ -901,6 +965,9 @@ $ams-password-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-password-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-password-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
 $ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
+$ams-progress-list-heading-2-step-marker-block-size: calc($ams-typography-heading-2-font-size * $ams-typography-heading-2-line-height);
+$ams-progress-list-heading-3-step-marker-block-size: calc($ams-typography-heading-3-font-size * $ams-typography-heading-3-line-height);
+$ams-progress-list-heading-4-step-marker-block-size: calc($ams-typography-heading-4-font-size * $ams-typography-heading-4-line-height);
 $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
 $ams-radio-icon-container-inline-size: $ams-radio-font-size;
 $ams-search-field-input-background-color: $ams-inputs-background-color;

package/dist/index.theme.css

@@ -13,8 +13,8 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #181818; /** Use `currentColor` instead */
-  --ams-color-interactive-contrast: #181818;
+  --ams-color-interactive-secondary: #202020; /** Use `currentColor` instead */
+  --ams-color-interactive-contrast: #202020;
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
   --ams-color-interactive-hover: #003677;
@@ -24,17 +24,20 @@
   --ams-color-background: #ffffff;
   --ams-color-feedback-error: #ec0000;
   --ams-color-feedback-info: #009de6;
-  --ams-color-feedback-success: #00a03c;
+  --ams-color-feedback-success: #00893c;
   --ams-color-feedback-warning: #ff9100;
   --ams-color-highlight-azure: #009de6;
-  --ams-color-highlight-green: #00a03c;
+  --ams-color-highlight-green: #00893c;
   --ams-color-highlight-lime: #bed200;
   --ams-color-highlight-magenta: #e50082;
   --ams-color-highlight-orange: #ff9100;
   --ams-color-highlight-purple: #a00078;
   --ams-color-highlight-yellow: #ffe600;
+  --ams-color-progress-current: #00893c;
+  --ams-color-progress-completed: #00893c;
+  --ams-color-progress-upcoming: #767676;
   --ams-color-separator: #d1d1d1;
-  --ams-color-text: #181818;
+  --ams-color-text: #202020;
   --ams-color-text-inverse: #ffffff;
   --ams-color-text-secondary: #767676;
   --ams-cursor-disabled: not-allowed;
@@ -58,7 +61,7 @@
   --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: 12 8 4;
+  --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;
@@ -91,10 +94,10 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
-  --ams-call-to-action-link-background-color: #00a03c;
-  --ams-call-to-action-link-hover-background-color: #007c2e;
+  --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-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-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-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 */
@@ -133,6 +136,19 @@
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
+  --ams-paragraph-large-text-wrap: balance;
+  --ams-progress-list-step-marker-shape-block-size: 1.5rem;
+  --ams-progress-list-step-marker-shape-border-style: solid;
+  --ams-progress-list-step-marker-shape-outline-style: solid;
+  --ams-progress-list-step-connector-border-inline-style: dashed;
+  --ams-progress-list-step-connector-border-inline-width: 1px;
+  --ams-progress-list-step-completed-connector-border-inline-style: solid;
+  --ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
+  --ams-progress-list-substeps-step-marker-shape-border-style: solid;
+  --ams-progress-list-substeps-step-marker-shape-outline-style: solid;
+  --ams-progress-list-substeps-step-connector-border-inline-style: dashed;
+  --ams-progress-list-substeps-step-connector-border-inline-width: 1px;
+  --ams-progress-list-substeps-step-completed-connector-border-inline-style: solid;
   --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
   --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -141,8 +157,8 @@
   --ams-switch-inline-size: 3.5rem;
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
-  --ams-time-input-disabled-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-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-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 */
@@ -241,6 +257,7 @@
   --ams-badge-font-family: var(--ams-typography-font-family);
   --ams-badge-font-size: var(--ams-typography-body-text-font-size);
   --ams-badge-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-badge-gap: var(--ams-space-xs);
   --ams-badge-line-height: var(--ams-typography-body-text-line-height);
   --ams-badge-padding-inline: var(--ams-space-xs);
   --ams-badge-azure-background-color: var(--ams-color-feedback-info);
@@ -414,16 +431,22 @@
   --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-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);
   --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
-  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --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);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
   --ams-figure-gap: var(--ams-space-s);
@@ -592,6 +615,7 @@
   --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
   --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-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-menu-column-gap: var(--ams-space-l);
@@ -609,7 +633,7 @@
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
-  --ams-page-header-navigation-row-gap: var(--ams-space-s);
+  --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-heading-color: var(--ams-color-text);
   --ams-page-heading-font-family: var(--ams-typography-font-family);
   --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
@@ -644,6 +668,46 @@
   --ams-password-input-border-style: var(--ams-inputs-border-style);
   --ams-password-input-line-height: var(--ams-inputs-line-height);
   --ams-password-input-disabled-cursor: var(--ams-cursor-disabled);
+  --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-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);
+  --ams-progress-list-step-marker-shape-border-color: var(--ams-color-progress-upcoming);
+  --ams-progress-list-step-marker-shape-border-width: var(--ams-border-width-m);
+  --ams-progress-list-step-marker-shape-outline-color: var(--ams-color-background);
+  --ams-progress-list-step-marker-shape-outline-width: var(--ams-border-width-m);
+  --ams-progress-list-step-connector-border-inline-color: var(--ams-color-progress-upcoming);
+  --ams-progress-list-step-heading-margin-block-end: var(--ams-space-s);
+  --ams-progress-list-step-content-margin-block-end: var(--ams-space-l);
+  --ams-progress-list-step-completed-marker-shape-background-color: var(--ams-color-progress-completed);
+  --ams-progress-list-step-completed-marker-shape-border-color: var(--ams-color-progress-completed);
+  --ams-progress-list-step-completed-connector-border-inline-color: var(--ams-color-progress-completed);
+  --ams-progress-list-step-current-marker-shape-background-color: var(--ams-color-progress-current);
+  --ams-progress-list-step-current-marker-shape-border-color: var(--ams-color-progress-current);
+  --ams-progress-list-step-current-connector-border-inline-color: var(--ams-color-progress-current);
+  --ams-progress-list-substeps-padding-block-start: var(--ams-space-m);
+  --ams-progress-list-substeps-step-indicator-margin-inline-end: var(--ams-space-m);
+  --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-space-l);
+  --ams-progress-list-substeps-step-marker-block-size: calc(var(--ams-typography-body-text-font-size) * var(--ams-typography-body-text-line-height));
+  --ams-progress-list-substeps-step-marker-inline-size: var(--ams-progress-list-step-marker-shape-block-size);
+  --ams-progress-list-substeps-step-marker-shape-background-color: var(--ams-color-background);
+  --ams-progress-list-substeps-step-marker-shape-border-color: var(--ams-color-progress-upcoming);
+  --ams-progress-list-substeps-step-marker-shape-border-width: var(--ams-border-width-m);
+  --ams-progress-list-substeps-step-marker-shape-outline-color: var(--ams-color-background);
+  --ams-progress-list-substeps-step-marker-shape-outline-width: var(--ams-border-width-m);
+  --ams-progress-list-substeps-step-connector-background-color: var(--ams-color-background);
+  --ams-progress-list-substeps-step-connector-border-inline-color: var(--ams-color-progress-upcoming);
+  --ams-progress-list-substeps-step-connector-margin-block-start: calc(var(--ams-typography-body-text-font-size) * var(--ams-typography-body-text-line-height) / 2);
+  --ams-progress-list-substeps-step-connector-last-child-border-inline-color: var(--ams-color-background);
+  --ams-progress-list-substeps-step-content-margin-block-end: var(--ams-space-m);
+  --ams-progress-list-substeps-step-completed-marker-shape-background-color: var(--ams-color-progress-completed);
+  --ams-progress-list-substeps-step-completed-marker-shape-border-color: var(--ams-color-progress-completed);
+  --ams-progress-list-substeps-step-completed-connector-border-inline-color: var(--ams-color-progress-completed);
+  --ams-progress-list-substeps-step-current-marker-shape-background-color: var(--ams-color-progress-current);
+  --ams-progress-list-substeps-step-current-marker-shape-border-color: var(--ams-color-progress-current);
+  --ams-progress-list-substeps-last-child-content-margin-block-end: var(--ams-space-l);
   --ams-radio-color: var(--ams-color-text);
   --ams-radio-cursor: var(--ams-cursor-interactive);
   --ams-radio-font-family: var(--ams-typography-font-family);
@@ -903,6 +967,9 @@
   --ams-password-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-password-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
   --ams-password-input-placeholder-color: var(--ams-inputs-placeholder-color);
+  --ams-progress-list-heading-2-step-marker-block-size: calc(var(--ams-typography-heading-2-font-size) * var(--ams-typography-heading-2-line-height));
+  --ams-progress-list-heading-3-step-marker-block-size: calc(var(--ams-typography-heading-3-font-size) * var(--ams-typography-heading-3-line-height));
+  --ams-progress-list-heading-4-step-marker-block-size: calc(var(--ams-typography-heading-4-font-size) * var(--ams-typography-heading-4-line-height));
   --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   --ams-radio-icon-container-inline-size: var(--ams-radio-font-size);
   --ams-search-field-input-background-color: var(--ams-inputs-background-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.0",
+  "version": "3.1.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,12 +25,11 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "npm-run-all": "4.1.5",
-    "style-dictionary": "5.1.1"
+    "style-dictionary": "5.2.0"
   },
   "scripts": {
     "clean": "rimraf dist/",
     "build": "node build.js",
-    "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
+    "build:watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
   }
 }

package/src/brand/ams/color.deprecated.tokens.json

@@ -4,7 +4,7 @@
       "interactive": {
         "secondary": {
           "comment": "Use `currentColor` instead",
-          "value": "#181818"
+          "value": "#202020"
         }
       }
     }

package/src/brand/ams/color.tokens.json

@@ -5,12 +5,12 @@
       "feedback": {
         "error": { "value": "#ec0000" },
         "info": { "value": "#009de6" },
-        "success": { "value": "#00a03c" },
+        "success": { "value": "#00893c" },
         "warning": { "value": "#ff9100" }
       },
       "highlight": {
         "azure": { "value": "#009de6" },
-        "green": { "value": "#00a03c" },
+        "green": { "value": "#00893c" },
         "lime": { "value": "#bed200" },
         "magenta": { "value": "#e50082" },
         "orange": { "value": "#ff9100" },
@@ -18,7 +18,7 @@
         "yellow": { "value": "#ffe600" }
       },
       "interactive": {
-        "contrast": { "value": "#181818" },
+        "contrast": { "value": "#202020" },
         "default": { "value": "#004699" },
         "disabled": { "value": "#767676" },
         "hover": { "value": "#003677" },
@@ -28,9 +28,14 @@
         },
         "inverse": { "value": "#ffffff" }
       },
+      "progress": {
+        "current": { "value": "#00893c" },
+        "completed": { "value": "#00893c" },
+        "upcoming": { "value": "#767676" }
+      },
       "separator": { "value": "#d1d1d1" },
       "text": {
-        "default": { "value": "#181818" },
+        "default": { "value": "#202020" },
         "inverse": { "value": "#ffffff" },
         "secondary": { "value": "#767676" }
       }

package/src/brand/ams/typography.tokens.json

@@ -2,7 +2,7 @@
   "ams": {
     "typography": {
       "font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
-      "hyphenate-limit-chars": { "value": "12 8 4" },
+      "hyphenate-limit-chars": { "value": "auto" },
       "body-text": {
         "font-size": { "value": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)" },
         "font-weight": { "value": "400" },

package/src/components/ams/badge.tokens.json

@@ -6,6 +6,7 @@
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
       "font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" },
+      "gap": { "value": "{ams.space.xs}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
       "padding-inline": { "value": "{ams.space.xs}" },
       "azure": {

package/src/components/ams/call-to-action-link.tokens.json

@@ -1,7 +1,7 @@
 {
   "ams": {
     "call-to-action-link": {
-      "background-color": { "value": "#00a03c" },
+      "background-color": { "value": "#00893c" },
       "color": { "value": "{ams.color.text.inverse}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -13,7 +13,7 @@
       "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
       "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
       "hover": {
-        "background-color": { "value": "#007c2e" },
+        "background-color": { "value": "#10552b" },
         "text-decoration-thickness": {
           "value": "{ams.links.hover.text-decoration-thickness}"
         },

package/src/components/ams/date-input.deprecated.tokens.json

@@ -2,6 +2,12 @@
   "ams": {
     "date-input": {
       "disabled": {
+        "calendar-picker-indicator": {
+          "background-image": {
+            "comment": "This token will be removed in release 6.0.0",
+            "value": "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>\")"
+          }
+        },
         "calender-picker-indicator": {
           "background-image": {
             "comment": "Use the token with ‘calendar’ spelled correctly instead",

package/src/components/ams/date-input.tokens.json

@@ -15,12 +15,7 @@
       "padding-inline": { "value": "{ams.inputs.padding-inline}" },
       "disabled": {
         "color": { "value": "{ams.inputs.disabled.color}" },
-        "cursor": { "value": "{ams.cursor.disabled}" },
-        "calendar-picker-indicator": {
-          "background-image": {
-            "value": "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>\")"
-          }
-        }
+        "cursor": { "value": "{ams.cursor.disabled}" }
       },
       "hover": {
         "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },

package/src/components/ams/field-set.deprecated.tokens.json

@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "field-set": {
+      "legend": {
+        "margin-block-end": { "value": "{ams.space.s}" }
+      }
+    }
+  }
+}

package/src/components/ams/field-set.tokens.json

@@ -1,6 +1,18 @@
 {
   "ams": {
     "field-set": {
+      "child": {
+        "margin-block-end": { "value": "{ams.space.xs}" },
+        "before-error-message": {
+          "margin-block-end": { "value": "{ams.space.s}" }
+        },
+        "before-field-or-field-set": {
+          "margin-block-end": { "value": "{ams.space.m}" }
+        },
+        "between-fields-and-field-sets": {
+          "margin-block-end": { "value": "{ams.space.l}" }
+        }
+      },
       "invalid": {
         "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
         "padding-inline-start": { "value": "{ams.space.m}" }
@@ -11,7 +23,6 @@
         "font-size": { "value": "{ams.typography.heading.3.font-size}" },
         "font-weight": { "value": "{ams.typography.heading.font-weight}" },
         "line-height": { "value": "{ams.typography.heading.3.line-height}" },
-        "margin-block-end": { "value": "{ams.space.s}" },
         "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
         "in-fieldset": {
           "font-weight": { "value": "{ams.typography.body-text.font-weight}" }

package/src/components/ams/field.deprecated.tokens.json

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "field": {
+      "gap": { "value": "{ams.space.s}" }
+    }
+  }
+}

package/src/components/ams/field.tokens.json

@@ -1,7 +1,12 @@
 {
   "ams": {
     "field": {
-      "gap": { "value": "{ams.space.s}" },
+      "child": {
+        "margin-block-end": { "value": "{ams.space.xs}" },
+        "before-error-message": {
+          "margin-block-end": { "value": "{ams.space.s}" }
+        }
+      },
       "invalid": {
         "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
         "padding-inline-start": { "value": "{ams.space.m}" }

package/src/components/ams/page-header.compact.tokens.json

@@ -4,6 +4,9 @@
       "brand-name": {
         "font-size": { "value": "{ams.typography.heading.2.font-size}" },
         "line-height": { "value": "{ams.typography.heading.2.line-height}" }
+      },
+      "mega-menu": {
+        "padding-block": { "value": "0" }
       }
     }
   }