@amsterdam/design-system-tokens 4.0.1 → 4.1.0

package/dist/index.theme.css

@@ -56,7 +56,7 @@
   --ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem); /** Scales from 18px to 20px. */
   --ams-typography-body-text-font-weight: 400;
   --ams-typography-body-text-line-height: 1.6;
-  --ams-typography-body-text-bold-font-weight: 800;
+  --ams-typography-body-text-bold-font-weight: 700;
   --ams-typography-body-text-small-font-size: 1rem; /** Fixed at 16px; does not scale. */
   --ams-typography-body-text-small-line-height: 1.5;
   --ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem); /** Scales from 21px to 25px. */
@@ -69,7 +69,7 @@
   --ams-typography-heading-3-line-height: 1.3;
   --ams-typography-heading-4-line-height: 1.4;
   --ams-typography-heading-5-line-height: 1.4;
-  --ams-typography-heading-font-weight: 800;
+  --ams-typography-heading-font-weight: 700;
   --ams-typography-heading-text-wrap: balance; /** Distributes heading text evenly across lines for a more balanced appearance. */
   --ams-inputs-border-color: currentColor; /** Uses currentColor so the border adapts to the text colour, including in error states. */
   --ams-inputs-border-style: solid;
@@ -80,6 +80,7 @@
   --ams-links-hover-text-underline-offset: 0.09375rem;
   --ams-links-subtle-text-decoration-line: none;
   --ams-links-subtle-hover-text-decoration-line: underline;
+  --ams-query-containers-inline-size-container-name: ams-query-container-inline-size;
   --ams-accordion-button-padding-inline: 0;
   --ams-alert-border-style: solid;
   --ams-avatar-border-style: solid;
@@ -91,43 +92,33 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
+  --ams-calendar-inline-size: 20rem;
   --ams-call-to-action-link-background-color: #00893c;
   --ams-call-to-action-link-hover-background-color: #10552b;
   --ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-  --ams-description-list-column-gap: initial;
+  --ams-date-picker-day-disabled-text-decoration-line: line-through;
+  --ams-date-picker-day-hover-background-color: rgb(0 70 153 / 12.5%);
   --ams-description-list-row-gap: 0;
   --ams-description-list-term-text-wrap: balance;
   --ams-description-list-description-padding-inline-start: 0;
-  --ams-description-list-narrow-grid-template-columns: initial;
-  --ams-description-list-medium-grid-template-columns: initial;
-  --ams-description-list-wide-grid-template-columns: initial;
   --ams-description-list-vi-medium-narrow-grid-template-columns: 1fr 4fr;
   --ams-description-list-vi-medium-medium-grid-template-columns: 1fr 2fr;
   --ams-description-list-vi-medium-wide-grid-template-columns: 1fr 1fr;
   --ams-dialog-border-radius: initial;
   --ams-dialog-border-style: solid;
   --ams-dialog-box-shadow: initial;
+  --ams-dialog-container-type: inline-size;
   --ams-dialog-max-inline-size: 48rem;
-  --ams-dialog-medium-inline-size: initial;
-  --ams-dialog-medium-max-block-size: initial;
   --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
-  --ams-dialog-header-medium-padding-block: initial;
-  --ams-dialog-header-medium-padding-inline: initial;
   --ams-dialog-body-padding-block: 0;
-  --ams-dialog-body-medium-padding-inline: initial;
-  --ams-dialog-footer-medium-padding-block: initial;
-  --ams-dialog-footer-medium-padding-inline: initial;
   --ams-file-input-border-style: dashed;
   --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
   --ams-grid-column-count: 4;
-  --ams-grid-medium-column-count: initial;
-  --ams-grid-medium-padding-inline: initial;
-  --ams-grid-wide-column-count: initial;
-  --ams-grid-wide-padding-inline: initial;
   --ams-grid-vi-medium-column-count: 8;
   --ams-grid-vi-wide-column-count: 12;
   --ams-grid-cell-background-color: initial;
+  --ams-grid-cell-container-type: inline-size;
   --ams-grid-cell-padding-block: initial;
   --ams-grid-cell-padding-inline: initial;
   --ams-icon-button-hover-background-color: rgb(0 70 153 / 12.5%);
@@ -142,37 +133,39 @@
   --ams-logo-min-block-size: 2.5rem;
   --ams-logo-emblem-color: #ec0000;
   --ams-logo-title-color: #ec0000;
-  --ams-menu-wide-max-inline-size: initial;
-  --ams-menu-wide-padding-block: initial;
-  --ams-menu-wide-padding-inline: initial;
   --ams-menu-vi-wide-max-inline-size: 8rem;
-  --ams-menu-link-wide-gap: initial;
   --ams-ordered-list-list-style-type: decimal;
   --ams-ordered-list-item-margin-inline-start: 2.25rem;
   --ams-ordered-list-item-padding-inline-start: 0.25rem;
   --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
   --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem;
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem;
-  --ams-page-footer-menu-medium-padding-inline: initial;
-  --ams-page-footer-menu-wide-padding-inline: initial;
   --ams-page-footer-spotlight-background-color: #004699;
-  --ams-page-header-medium-padding-inline: initial;
-  --ams-page-header-wide-padding-inline: initial;
+  --ams-page-container-type: inline-size;
   --ams-page-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
+  --ams-pagination-gap: 0;
+  --ams-pagination-list-gap: 0;
+  --ams-pagination-link-background-color: transparent;
+  --ams-pagination-link-min-block-size: auto;
+  --ams-pagination-link-min-inline-size: auto;
+  --ams-pagination-link-padding-block: 0;
+  --ams-pagination-link-hover-background-color: transparent;
+  --ams-pagination-link-active-background-color: transparent;
+  --ams-pagination-link-current-background-color: transparent;
+  --ams-pagination-link-current-hover-background-color: transparent;
+  --ams-pagination-ellipsis-padding-inline: 0;
   --ams-paragraph-large-text-wrap: balance;
   --ams-progress-list-button-padding-block: 0;
   --ams-progress-list-button-padding-inline: 0;
   --ams-progress-list-icon-transition-duration: 0.3s;
   --ams-progress-list-icon-transition-timing-function: ease;
-  --ams-progress-list-step-medium-gap: initial;
   --ams-progress-list-step-marker-shape-block-size: 1.5rem;
   --ams-progress-list-step-marker-shape-border-style: solid;
   --ams-progress-list-step-marker-shape-outline-style: solid;
   --ams-progress-list-step-connector-border-inline-style: dashed;
   --ams-progress-list-step-connector-border-inline-width: 1px;
   --ams-progress-list-step-completed-connector-border-inline-style: solid;
-  --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: initial;
   --ams-progress-list-substeps-step-marker-shape-block-size: 0.75rem;
   --ams-progress-list-substeps-step-marker-shape-border-style: solid;
   --ams-progress-list-substeps-step-marker-shape-outline-style: solid;
@@ -187,6 +180,8 @@
   --ams-switch-inline-size: 3.5rem;
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
+  --ams-table-of-contents-button-icon-transition-duration: 0.3s;
+  --ams-table-of-contents-button-icon-transition-timing-function: ease;
   --ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-unordered-list-list-style-type: '\2022';
@@ -341,6 +336,17 @@
   --ams-button-tertiary-color: var(--ams-color-interactive);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
+  --ams-calendar-font-family: var(--ams-typography-font-family);
+  --ams-calendar-font-size: var(--ams-typography-body-text-font-size);
+  --ams-calendar-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-calendar-gap: var(--ams-space-s);
+  --ams-calendar-line-height: var(--ams-typography-body-text-line-height);
+  --ams-calendar-day-outline-offset: var(--ams-focus-outline-offset);
+  --ams-calendar-day-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-calendar-day-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --ams-calendar-day-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
+  --ams-calendar-day-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-calendar-day-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-call-to-action-link-color: var(--ams-color-text-inverse);
   --ams-call-to-action-link-font-family: var(--ams-typography-font-family);
   --ams-call-to-action-link-font-size: var(--ams-typography-body-text-font-size);
@@ -412,6 +418,15 @@
   --ams-date-input-line-height: var(--ams-inputs-line-height);
   --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
   --ams-date-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
+  --ams-date-picker-inline-size: var(--ams-calendar-inline-size);
+  --ams-date-picker-day-color: var(--ams-color-interactive);
+  --ams-date-picker-day-cursor: var(--ams-cursor-interactive);
+  --ams-date-picker-day-disabled-color: var(--ams-color-interactive-disabled);
+  --ams-date-picker-day-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-date-picker-day-hover-color: var(--ams-color-interactive-hover);
+  --ams-date-picker-day-selected-background-color: var(--ams-color-interactive);
+  --ams-date-picker-day-selected-color: var(--ams-color-interactive-inverse);
+  --ams-date-picker-day-selected-hover-background-color: var(--ams-color-interactive-hover);
   --ams-description-list-color: var(--ams-color-text);
   --ams-description-list-font-family: var(--ams-typography-font-family);
   --ams-description-list-font-size: var(--ams-typography-body-text-font-size);
@@ -423,9 +438,13 @@
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-description-list-description-margin-block-end: var(--ams-space-m);
   --ams-description-list-section-margin-block-end: var(--ams-space-m);
+  --ams-description-list-narrow-grid-template-columns: var(--ams-description-list-vi-medium-narrow-grid-template-columns);
+  --ams-description-list-medium-grid-template-columns: var(--ams-description-list-vi-medium-medium-grid-template-columns);
+  --ams-description-list-wide-grid-template-columns: var(--ams-description-list-vi-medium-wide-grid-template-columns);
   --ams-description-list-vi-medium-column-gap: var(--ams-space-l);
   --ams-dialog-background-color: var(--ams-color-background);
   --ams-dialog-border-width: var(--ams-border-width-m);
+  --ams-dialog-container-name: var(--ams-query-containers-inline-size-container-name);
   --ams-dialog-gap: var(--ams-space-m);
   --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
   --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
@@ -498,8 +517,11 @@
   --ams-grid-row-gap-l: var(--ams-space-l);
   --ams-grid-row-gap-xl: var(--ams-space-xl);
   --ams-grid-row-gap-2xl: var(--ams-space-2xl);
+  --ams-grid-medium-column-count: var(--ams-grid-vi-medium-column-count);
+  --ams-grid-wide-column-count: var(--ams-grid-vi-wide-column-count);
   --ams-grid-vi-medium-padding-inline: var(--ams-space-xl);
   --ams-grid-vi-wide-padding-inline: var(--ams-space-2xl);
+  --ams-grid-cell-container-name: var(--ams-query-containers-inline-size-container-name);
   --ams-heading-1-font-size: var(--ams-typography-heading-1-font-size);
   --ams-heading-1-line-height: var(--ams-typography-heading-1-line-height);
   --ams-heading-2-line-height: var(--ams-typography-heading-2-line-height);
@@ -586,6 +608,7 @@
   --ams-menu-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-menu-line-height: var(--ams-typography-body-text-line-height);
   --ams-menu-padding-block: var(--ams-space-m);
+  --ams-menu-wide-max-inline-size: var(--ams-menu-vi-wide-max-inline-size);
   --ams-menu-vi-wide-padding-inline: var(--ams-space-s);
   --ams-menu-link-gap: var(--ams-space-s);
   --ams-menu-link-outline-offset: var(--ams-focus-outline-offset);
@@ -656,18 +679,26 @@
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
   --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-background-color: var(--ams-color-background-body);
+  --ams-page-container-name: var(--ams-query-containers-inline-size-container-name);
   --ams-pagination-font-family: var(--ams-typography-font-family);
   --ams-pagination-font-size: var(--ams-typography-body-text-font-size);
   --ams-pagination-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-pagination-line-height: var(--ams-typography-body-text-line-height);
+  --ams-pagination-link-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-pagination-link-gap: var(--ams-space-xs);
   --ams-pagination-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-pagination-link-padding-inline: var(--ams-space-s);
   --ams-pagination-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-pagination-link-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-pagination-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-pagination-link-current-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-pagination-relative-link-background-color: var(--ams-pagination-link-background-color);
+  --ams-pagination-relative-link-padding-block: var(--ams-pagination-link-padding-block);
+  --ams-pagination-relative-link-hover-background-color: var(--ams-pagination-link-hover-background-color);
+  --ams-pagination-relative-link-active-background-color: var(--ams-pagination-link-active-background-color);
+  --ams-pagination-ellipsis-color: var(--ams-color-text);
+  --ams-pagination-ellipsis-padding-block: var(--ams-pagination-link-padding-block);
   --ams-paragraph-color: var(--ams-color-text);
   --ams-paragraph-font-family: var(--ams-typography-font-family);
   --ams-paragraph-font-size: var(--ams-typography-body-text-font-size);
@@ -805,6 +836,7 @@
   --ams-standalone-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-switch-cursor: var(--ams-cursor-interactive);
   --ams-switch-outline-offset: var(--ams-focus-outline-offset);
+  --ams-switch-label-border-width: var(--ams-border-width-m);
   --ams-switch-thumb-background-color: var(--ams-color-background);
   --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
   --ams-switch-thumb-hover-box-shadow: 0rem 0rem 0rem var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
@@ -834,14 +866,18 @@
   --ams-table-of-contents-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-table-of-contents-gap: var(--ams-space-s);
   --ams-table-of-contents-line-height: var(--ams-typography-body-text-line-height);
+  --ams-table-of-contents-list-gap: var(--ams-space-s);
+  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-xs);
+  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-m);
+  --ams-table-of-contents-item-gap: var(--ams-space-xs);
   --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-table-of-contents-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-table-of-contents-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-table-of-contents-link-current-font-weight: var(--ams-typography-heading-font-weight);
   --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-table-of-contents-list-gap: var(--ams-space-s);
-  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-s);
-  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-l);
+  --ams-table-of-contents-button-color: var(--ams-color-interactive);
+  --ams-table-of-contents-button-hover-color: var(--ams-color-interactive-hover);
   --ams-table-color: var(--ams-color-text);
   --ams-table-font-family: var(--ams-typography-font-family);
   --ams-table-font-size: var(--ams-typography-body-text-font-size);
@@ -898,6 +934,8 @@
   --ams-unordered-list-unordered-list-padding-block-start: var(--ams-space-s);
   --ams-breadcrumb-link-color: var(--ams-links-color);
   --ams-breadcrumb-link-hover-color: var(--ams-links-hover-color);
+  --ams-calendar-day-link-color: var(--ams-links-color);
+  --ams-calendar-day-link-hover-color: var(--ams-links-hover-color);
   --ams-card-link-color: var(--ams-links-color);
   --ams-card-link-hover-color: var(--ams-links-hover-color);
   --ams-checkbox-icon-container-block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
@@ -916,9 +954,24 @@
   --ams-date-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
   --ams-date-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-date-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
+  --ams-date-picker-font-family: var(--ams-calendar-font-family);
+  --ams-date-picker-font-size: var(--ams-calendar-font-size);
+  --ams-date-picker-font-weight: var(--ams-calendar-font-weight);
+  --ams-date-picker-gap: var(--ams-calendar-gap);
+  --ams-date-picker-line-height: var(--ams-calendar-line-height);
+  --ams-date-picker-day-outline-offset: var(--ams-calendar-day-outline-offset);
+  --ams-date-picker-day-current-font-weight: var(--ams-calendar-day-current-font-weight);
+  --ams-description-list-column-gap: var(--ams-description-list-vi-medium-column-gap);
   --ams-description-list-term-font-size: var(--ams-typography-heading-4-font-size);
   --ams-description-list-term-vi-medium-margin-block-end: var(--ams-description-list-description-margin-block-end);
   --ams-dialog-border-color: var(--ams-dialog-background-color);
+  --ams-dialog-medium-inline-size: var(--ams-dialog-vi-medium-inline-size);
+  --ams-dialog-medium-max-block-size: var(--ams-dialog-vi-medium-max-block-size);
+  --ams-dialog-header-medium-padding-block: var(--ams-dialog-header-vi-medium-padding-block);
+  --ams-dialog-header-medium-padding-inline: var(--ams-dialog-header-vi-medium-padding-inline);
+  --ams-dialog-body-medium-padding-inline: var(--ams-dialog-body-vi-medium-padding-inline);
+  --ams-dialog-footer-medium-padding-block: var(--ams-dialog-footer-vi-medium-padding-block);
+  --ams-dialog-footer-medium-padding-inline: var(--ams-dialog-footer-vi-medium-padding-inline);
   --ams-field-set-legend-font-size: var(--ams-typography-heading-3-font-size);
   --ams-file-input-background-color: var(--ams-inputs-background-color);
   --ams-file-input-border-width: var(--ams-inputs-border-width);
@@ -939,6 +992,8 @@
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-button-disabled-cursor);
   --ams-file-input-file-selector-button-hover-box-shadow: var(--ams-button-secondary-hover-box-shadow);
   --ams-file-input-file-selector-button-hover-color: var(--ams-button-secondary-hover-color);
+  --ams-grid-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
+  --ams-grid-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
   --ams-heading-2-font-size: var(--ams-typography-heading-2-font-size);
   --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
@@ -960,9 +1015,11 @@
   --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-link-inverse-color: var(--ams-links-inverse-color);
   --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
+  --ams-menu-wide-padding-inline: var(--ams-menu-vi-wide-padding-inline);
   --ams-menu-vi-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
   --ams-menu-link-color: var(--ams-links-inverse-color);
   --ams-menu-link-hover-color: var(--ams-links-inverse-hover-color);
+  --ams-menu-link-wide-gap: var(--ams-menu-link-vi-wide-gap);
   --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
   --ams-page-footer-menu-vi-medium-padding-inline: var(--ams-grid-vi-medium-padding-inline);
   --ams-page-footer-menu-vi-wide-padding-inline: var(--ams-grid-vi-wide-padding-inline);
@@ -978,6 +1035,14 @@
   --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline);
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
+  --ams-pagination-relative-link-font-weight: var(--ams-pagination-link-font-weight);
+  --ams-pagination-relative-link-gap: var(--ams-pagination-link-gap);
+  --ams-pagination-relative-link-outline-offset: var(--ams-pagination-link-outline-offset);
+  --ams-pagination-relative-link-padding-inline: var(--ams-pagination-link-padding-inline);
+  --ams-pagination-relative-link-text-decoration-line: var(--ams-pagination-link-text-decoration-line);
+  --ams-pagination-relative-link-text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
+  --ams-pagination-relative-link-text-underline-offset: var(--ams-pagination-link-text-underline-offset);
+  --ams-pagination-relative-link-hover-text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
   --ams-password-input-background-color: var(--ams-inputs-background-color);
   --ams-password-input-border-width: var(--ams-inputs-border-width);
   --ams-password-input-color: var(--ams-inputs-color);
@@ -996,6 +1061,8 @@
   --ams-progress-list-heading-2-step-marker-block-size: calc(var(--ams-typography-heading-2-font-size) * var(--ams-typography-heading-2-line-height));
   --ams-progress-list-heading-3-step-marker-block-size: calc(var(--ams-typography-heading-3-font-size) * var(--ams-typography-heading-3-line-height));
   --ams-progress-list-heading-4-step-marker-block-size: calc(var(--ams-typography-heading-4-font-size) * var(--ams-typography-heading-4-line-height));
+  --ams-progress-list-step-medium-gap: var(--ams-progress-list-step-vi-medium-gap);
+  --ams-progress-list-substeps-step-indicator-medium-margin-inline-end: var(--ams-progress-list-substeps-step-indicator-vi-medium-margin-inline-end);
   --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   --ams-radio-icon-container-inline-size: var(--ams-radio-font-size);
   --ams-search-field-input-background-color: var(--ams-inputs-background-color);
@@ -1033,6 +1100,7 @@
   --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
   --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
   --ams-table-of-contents-link-color: var(--ams-links-color);
+  --ams-table-of-contents-link-current-color: var(--ams-links-color);
   --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
   --ams-text-area-background-color: var(--ams-inputs-background-color);
   --ams-text-area-border-width: var(--ams-inputs-border-width);
@@ -1078,4 +1146,15 @@
   --ams-time-input-invalid-border-color: var(--ams-inputs-invalid-border-color);
   --ams-time-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-time-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
+  --ams-menu-wide-padding-block: var(--ams-menu-vi-wide-padding-block);
+  --ams-page-footer-menu-medium-padding-inline: var(--ams-page-footer-menu-vi-medium-padding-inline);
+  --ams-page-footer-menu-wide-padding-inline: var(--ams-page-footer-menu-vi-wide-padding-inline);
+  --ams-page-header-medium-padding-inline: var(--ams-page-header-vi-medium-padding-inline);
+  --ams-page-header-wide-padding-inline: var(--ams-page-header-vi-wide-padding-inline);
+  --ams-pagination-link-active-color: var(--ams-pagination-link-color);
+  --ams-pagination-link-current-color: var(--ams-pagination-link-color);
+  --ams-pagination-link-current-hover-color: var(--ams-pagination-link-hover-color);
+  --ams-pagination-relative-link-color: var(--ams-pagination-link-color);
+  --ams-pagination-relative-link-hover-color: var(--ams-pagination-link-hover-color);
+  --ams-pagination-relative-link-active-color: var(--ams-pagination-link-active-color);
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.1",
+  "version": "4.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",
@@ -15,7 +15,8 @@
   ],
   "private": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "repository": {
     "type": "git",
@@ -25,10 +26,10 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "style-dictionary": "5.4.0"
+    "style-dictionary": "5.5.0"
   },
   "scripts": {
-    "clean": "rimraf dist/",
+    "clean:dist": "rimraf dist/",
     "build": "node build.js",
     "build:watch": "chokidar --follow-symlinks --initial --command \"pnpm run build\" \"src/**/*.tokens.json\""
   }

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

@@ -35,7 +35,7 @@
         },
         "bold": {
           "font-weight": {
-            "$value": "800",
+            "$value": "700",
             "$type": "fontWeight"
           }
         },
@@ -95,7 +95,7 @@
       "heading": {
         "$description": "Text styles for section headings. Larger headings use tighter line-heights for visual balance.",
         "font-weight": {
-          "$value": "800",
+          "$value": "700",
           "$type": "fontWeight"
         },
         "text-wrap": {

package/src/common/ams/query-containers.tokens.json

@@ -0,0 +1,12 @@
+{
+  "ams": {
+    "query-containers": {
+      "$description": "Shared names for query containers established across the system. Components that establish a query container and consumers that query it should reference these names so they stay in sync.",
+      "inline-size": {
+        "container-name": {
+          "$value": "ams-query-container-inline-size"
+        }
+      }
+    }
+  }
+}

package/src/components/ams/calendar.compact.tokens.json

@@ -0,0 +1,10 @@
+{
+  "ams": {
+    "calendar": {
+      "inline-size": {
+        "$value": "16rem",
+        "$type": "dimension"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+{
+  "ams": {
+    "calendar": {
+      "font-family": {
+        "$value": "{ams.typography.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.typography.body-text.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.typography.body-text.font-weight}",
+        "$type": "fontWeight"
+      },
+      "gap": {
+        "$value": "{ams.space.s}",
+        "$type": "dimension"
+      },
+      "inline-size": {
+        "$value": "20rem",
+        "$type": "dimension"
+      },
+      "line-height": {
+        "$value": "{ams.typography.body-text.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "day": {
+        "outline-offset": {
+          "$value": "{ams.focus.outline-offset}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "current": {
+          "font-weight": {
+            "$value": "{ams.typography.body-text.bold.font-weight}",
+            "$type": "fontWeight"
+          }
+        },
+        "link": {
+          "color": {
+            "$value": "{ams.links.color}",
+            "$type": "color"
+          },
+          "text-decoration-line": {
+            "$value": "{ams.links.subtle.text-decoration-line}",
+            "$extensions": {
+              "nl.amsterdam.type": "textDecorationLine"
+            }
+          },
+          "text-decoration-thickness": {
+            "$value": "{ams.links.text-decoration-thickness}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.subtype": "space"
+            }
+          },
+          "text-underline-offset": {
+            "$value": "{ams.links.text-underline-offset}",
+            "$type": "dimension",
+            "$extensions": {
+              "nl.amsterdam.subtype": "space"
+            }
+          },
+          "hover": {
+            "color": {
+              "$value": "{ams.links.hover.color}",
+              "$type": "color"
+            },
+            "text-decoration-line": {
+              "$value": "{ams.links.subtle.hover.text-decoration-line}",
+              "$extensions": {
+                "nl.amsterdam.type": "textDecorationLine"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+{
+  "ams": {
+    "date-picker": {
+      "font-family": {
+        "$value": "{ams.calendar.font-family}",
+        "$type": "fontFamily"
+      },
+      "font-size": {
+        "$value": "{ams.calendar.font-size}",
+        "$extensions": {
+          "nl.amsterdam.type": "fontSize"
+        }
+      },
+      "font-weight": {
+        "$value": "{ams.calendar.font-weight}",
+        "$type": "fontWeight"
+      },
+      "gap": {
+        "$value": "{ams.calendar.gap}",
+        "$type": "dimension"
+      },
+      "inline-size": {
+        "$value": "{ams.calendar.inline-size}",
+        "$type": "dimension"
+      },
+      "line-height": {
+        "$value": "{ams.calendar.line-height}",
+        "$extensions": {
+          "nl.amsterdam.type": "lineHeight"
+        }
+      },
+      "day": {
+        "color": {
+          "$value": "{ams.color.interactive.default}",
+          "$type": "color"
+        },
+        "cursor": {
+          "$value": "{ams.cursor.interactive}",
+          "$extensions": {
+            "nl.amsterdam.type": "cursor"
+          }
+        },
+        "outline-offset": {
+          "$value": "{ams.calendar.day.outline-offset}",
+          "$type": "dimension",
+          "$extensions": {
+            "nl.amsterdam.subtype": "space"
+          }
+        },
+        "current": {
+          "font-weight": {
+            "$value": "{ams.calendar.day.current.font-weight}",
+            "$type": "fontWeight"
+          }
+        },
+        "disabled": {
+          "color": {
+            "$value": "{ams.color.interactive.disabled}",
+            "$type": "color"
+          },
+          "cursor": {
+            "$value": "{ams.cursor.disabled}",
+            "$extensions": {
+              "nl.amsterdam.type": "cursor"
+            }
+          },
+          "text-decoration-line": {
+            "$value": "line-through",
+            "$extensions": {
+              "nl.amsterdam.type": "textDecorationLine"
+            }
+          }
+        },
+        "hover": {
+          "background-color": {
+            "$value": "rgb(0 70 153 / 12.5%)",
+            "$type": "color"
+          },
+          "color": {
+            "$value": "{ams.color.interactive.hover}",
+            "$type": "color"
+          }
+        },
+        "selected": {
+          "background-color": {
+            "$value": "{ams.color.interactive.default}",
+            "$type": "color"
+          },
+          "color": {
+            "$value": "{ams.color.interactive.inverse}",
+            "$type": "color"
+          },
+          "hover": {
+            "background-color": {
+              "$value": "{ams.color.interactive.hover}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/ams/description-list.tokens.json

@@ -9,7 +9,7 @@
       },
       "column-gap": {
         "$deprecated": "Use `ams.description-list.vi-medium.column-gap` instead. Will be removed on or after 2026-10-20.",
-        "$value": "initial",
+        "$value": "{ams.description-list.vi-medium.column-gap}",
         "$extensions": {
           "nl.amsterdam.subtype": "space",
           "nl.amsterdam.type": "dimension"
@@ -130,7 +130,7 @@
       "narrow": {
         "grid-template-columns": {
           "$deprecated": "Use `ams.description-list.vi-medium.narrow.grid-template-columns` instead. Will be removed on or after 2026-10-20.",
-          "$value": "initial",
+          "$value": "{ams.description-list.vi-medium.narrow.grid-template-columns}",
           "$extensions": {
             "nl.amsterdam.type": "gridTemplateColumns"
           }
@@ -139,7 +139,7 @@
       "medium": {
         "grid-template-columns": {
           "$deprecated": "Use `ams.description-list.vi-medium.medium.grid-template-columns` instead. Will be removed on or after 2026-10-20.",
-          "$value": "initial",
+          "$value": "{ams.description-list.vi-medium.medium.grid-template-columns}",
           "$extensions": {
             "nl.amsterdam.type": "gridTemplateColumns"
           }
@@ -148,7 +148,7 @@
       "wide": {
         "grid-template-columns": {
           "$deprecated": "Use `ams.description-list.vi-medium.wide.grid-template-columns` instead. Will be removed on or after 2026-10-20.",
-          "$value": "initial",
+          "$value": "{ams.description-list.vi-medium.wide.grid-template-columns}",
           "$extensions": {
             "nl.amsterdam.type": "gridTemplateColumns"
           }