@amsterdam/design-system-tokens 0.15.0 → 0.16.0

package/dist/index.theme.css

@@ -69,6 +69,7 @@
   --ams-typography-heading-5-line-height: 1.3345;
   --ams-typography-heading-6-line-height: 1.3776;
   --ams-typography-heading-font-weight: 800;
+  --ams-typography-heading-text-wrap: balance;
   --ams-links-text-underline-offset: 0.3333em;
   --ams-links-hover-text-underline-offset: 0.2778em;
   --ams-links-subtle-text-decoration-line: none;
@@ -93,7 +94,6 @@
   --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
   --ams-dialog-body-padding-block: 0;
   --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
-  --ams-footer-spotlight-background-color: #004699;
   --ams-grid-column-count: 4;
   --ams-grid-medium-column-count: 8;
   --ams-grid-wide-column-count: 12;
@@ -103,13 +103,12 @@
   --ams-image-slider-thumbnails-thumbnail-opacity: 40%;
   --ams-image-slider-thumbnails-thumbnail-in-view-opacity: 100%;
   --ams-image-slider-thumbnails-thumbnail-hover-opacity: 100%;
-  --ams-link-inline-font-family: inherit;
-  --ams-link-inline-font-size: inherit;
-  --ams-link-inline-line-height: inherit;
+  --ams-link-font-family: inherit;
+  --ams-link-font-size: inherit;
+  --ams-link-line-height: inherit;
   --ams-logo-min-block-size: 2.5rem;
   --ams-logo-emblem-color: #ec0000;
   --ams-logo-title-color: #ec0000;
-  --ams-mega-menu-list-category-column-width: 20rem;
   --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. */
@@ -117,11 +116,11 @@
   --ams-ordered-list-ordered-list-padding-block-end: 0;
   --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-page-footer-spotlight-background-color: #004699;
+  --ams-page-max-inline-size: 100rem;
   --ams-radio-hover-indicator-stroke-width: 3px;
   --ams-radio-circle-stroke-width: 2px;
   --ams-radio-icon-container-inline-size: 1.5rem;
-  --ams-screen-wide-max-inline-size: 100rem;
-  --ams-screen-x-wide-max-inline-size: 132rem;
   --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='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -161,6 +160,7 @@
   --ams-accordion-button-line-height: var(--ams-typography-heading-4-line-height);
   --ams-accordion-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-accordion-button-padding-block: var(--ams-space-s);
+  --ams-accordion-button-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
   --ams-action-group-gap: var(--ams-space-m);
   --ams-alert-background-color: var(--ams-color-background);
@@ -168,7 +168,7 @@
   --ams-alert-forced-colors-border-width: var(--ams-border-width-xl);
   --ams-alert-severity-indicator-background-color: var(--ams-color-feedback-info);
   --ams-alert-severity-indicator-padding-block: var(--ams-space-m);
-  --ams-alert-severity-indicator-padding-inline: var(--ams-space-xs);
+  --ams-alert-severity-indicator-padding-inline: var(--ams-space-s);
   --ams-alert-content-gap: var(--ams-space-s);
   --ams-alert-content-padding-block: var(--ams-space-m);
   --ams-alert-content-padding-inline: var(--ams-space-m);
@@ -189,7 +189,7 @@
   --ams-avatar-padding-inline: var(--ams-space-xs);
   --ams-avatar-forced-colors-border-width: var(--ams-border-width-m);
   --ams-avatar-azure-background-color: var(--ams-color-highlight-azure);
-  --ams-avatar-azure-color: var(--ams-color-text);
+  --ams-avatar-azure-color: var(--ams-color-text-inverse);
   --ams-avatar-green-background-color: var(--ams-color-highlight-green);
   --ams-avatar-green-color: var(--ams-color-text-inverse);
   --ams-avatar-lime-background-color: var(--ams-color-highlight-lime);
@@ -208,7 +208,7 @@
   --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);
-  --ams-badge-azure-color: var(--ams-color-text);
+  --ams-badge-azure-color: var(--ams-color-text-inverse);
   --ams-badge-lime-background-color: var(--ams-color-highlight-lime);
   --ams-badge-lime-color: var(--ams-color-text);
   --ams-badge-magenta-background-color: var(--ams-color-highlight-magenta);
@@ -268,8 +268,10 @@
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-icon-only-padding-block: var(--ams-space-s);
   --ams-button-icon-only-padding-inline: var(--ams-space-s);
-  --ams-card-gap: var(--ams-space-s);
-  --ams-card-heading-group-gap: var(--ams-space-s);
+  --ams-card-heading-margin-block-end: var(--ams-space-xs);
+  --ams-card-heading-group-gap: var(--ams-space-xs);
+  --ams-card-heading-group-margin-block-end: var(--ams-space-xs);
+  --ams-card-image-margin-block-end: var(--ams-space-s);
   --ams-card-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-card-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-card-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
@@ -348,14 +350,21 @@
   --ams-dialog-background-color: var(--ams-color-background);
   --ams-dialog-border: var(--ams-border-width-m) solid var(--ams-dialog-background-color);
   --ams-dialog-gap: var(--ams-space-m);
-  --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-xl));
-  --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
+  --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
+  --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
+  --ams-dialog-medium-inline-size: calc(100% - 2 * var(--ams-space-xl));
+  --ams-dialog-medium-max-block-size: calc(100dvh - 2 * var(--ams-space-xl));
   --ams-dialog-header-gap: var(--ams-space-m);
-  --ams-dialog-header-padding-block: var(--ams-space-xl) 0;
-  --ams-dialog-header-padding-inline: var(--ams-space-2xl);
-  --ams-dialog-body-padding-inline: var(--ams-space-2xl);
-  --ams-dialog-footer-padding-block: 0 var(--ams-space-xl);
-  --ams-dialog-footer-padding-inline: var(--ams-space-2xl);
+  --ams-dialog-header-padding-block: var(--ams-space-l) 0;
+  --ams-dialog-header-padding-inline: var(--ams-space-l);
+  --ams-dialog-header-medium-padding-block: var(--ams-space-xl) 0;
+  --ams-dialog-header-medium-padding-inline: var(--ams-space-xl);
+  --ams-dialog-body-padding-inline: var(--ams-space-l);
+  --ams-dialog-body-medium-padding-inline: var(--ams-space-xl);
+  --ams-dialog-footer-padding-block: 0 var(--ams-space-l);
+  --ams-dialog-footer-padding-inline: var(--ams-space-l);
+  --ams-dialog-footer-medium-padding-block: 0 var(--ams-space-xl);
+  --ams-dialog-footer-medium-padding-inline: var(--ams-space-xl);
   --ams-error-message-color: var(--ams-color-feedback-error);
   --ams-error-message-font-family: var(--ams-typography-font-family);
   --ams-error-message-font-size: var(--ams-typography-body-text-small-font-size);
@@ -369,6 +378,7 @@
   --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
   --ams-field-set-legend-line-height: var(--ams-typography-heading-4-line-height);
   --ams-field-set-legend-margin-block-end: var(--ams-space-m);
+  --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-field-gap: 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);
@@ -413,49 +423,16 @@
   --ams-file-list-file-gap: var(--ams-space-s);
   --ams-file-list-file-line-height: var(--ams-typography-body-text-small-line-height);
   --ams-file-list-file-details-color: var(--ams-color-text-secondary);
-  --ams-footer-menu-column-gap: var(--ams-space-l);
-  --ams-footer-menu-padding-block: var(--ams-space-l);
-  --ams-footer-menu-row-gap: var(--ams-space-xs);
-  --ams-footer-menu-link-font-family: var(--ams-typography-font-family);
-  --ams-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
-  --ams-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
-  --ams-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
-  --ams-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-grid-column-gap: var(--ams-space-xl);
-  --ams-grid-padding-block-s: var(--ams-space-l);
-  --ams-grid-padding-block-m: var(--ams-space-xl);
-  --ams-grid-padding-block-l: var(--ams-space-2xl);
+  --ams-grid-padding-block-l: var(--ams-space-l);
+  --ams-grid-padding-block-xl: var(--ams-space-xl);
+  --ams-grid-padding-block-2xl: var(--ams-space-2xl);
   --ams-grid-padding-inline: var(--ams-space-l);
-  --ams-grid-row-gap-s: var(--ams-space-l);
-  --ams-grid-row-gap-m: var(--ams-space-xl);
-  --ams-grid-row-gap-l: var(--ams-space-2xl);
+  --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-padding-inline: var(--ams-space-xl);
   --ams-grid-wide-padding-inline: var(--ams-space-2xl);
-  --ams-header-font-family: var(--ams-typography-font-family);
-  --ams-header-padding-block: var(--ams-space-l);
-  --ams-header-logo-link-column-gap: var(--ams-space-m);
-  --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
-  --ams-header-brand-name-color: var(--ams-color-text);
-  --ams-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
-  --ams-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
-  --ams-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
-  --ams-header-menu-column-gap: var(--ams-space-l);
-  --ams-header-menu-row-gap: var(--ams-space-xs);
-  --ams-header-menu-item-column-gap: var(--ams-space-xs);
-  --ams-header-menu-item-font-family: var(--ams-typography-font-family);
-  --ams-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
-  --ams-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
-  --ams-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
-  --ams-header-menu-item-padding-block: var(--ams-space-xs);
-  --ams-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
-  --ams-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-header-navigation-column-gap: var(--ams-space-l);
-  --ams-header-navigation-row-gap: var(--ams-space-s);
   --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-font-size: var(--ams-typography-heading-2-font-size);
@@ -467,6 +444,7 @@
   --ams-heading-color: var(--ams-color-text);
   --ams-heading-font-family: var(--ams-typography-font-family);
   --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
+  --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
@@ -507,6 +485,7 @@
   --ams-label-font-family: var(--ams-typography-font-family);
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-4-line-height);
+  --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-link-list-gap: var(--ams-space-s);
   --ams-link-list-link-font-family: var(--ams-typography-font-family);
   --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -521,21 +500,13 @@
   --ams-link-list-link-large-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-link-list-link-large-line-height: var(--ams-typography-body-text-large-line-height);
   --ams-link-list-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-link-font-family: var(--ams-typography-font-family);
   --ams-link-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-link-outline-offset: var(--ams-focus-outline-offset);
-  --ams-link-inline-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-link-inline-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
-  --ams-link-standalone-font-size: var(--ams-typography-body-text-font-size);
-  --ams-link-standalone-line-height: var(--ams-typography-body-text-line-height);
-  --ams-link-standalone-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-link-standalone-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
+  --ams-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
   --ams-logo-block-size: var(--ams-space-xl);
   --ams-logo-subsite-color: var(--ams-color-text);
   --ams-mark-background-color: var(--ams-color-highlight-yellow);
-  --ams-mega-menu-list-category-column-gap: var(--ams-space-xl); /* Must have the same value as `ams.grid.column-gap`. */
-  --ams-mega-menu-list-category-padding-block-start: var(--ams-space-m);
-  --ams-mega-menu-list-category-padding-block-end: var(--ams-space-xl); /* Must have the same value as `ams.grid.row-gap.md`. */
   --ams-ordered-list-color: var(--ams-color-text);
   --ams-ordered-list-font-family: var(--ams-typography-font-family);
   --ams-ordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -547,23 +518,48 @@
   --ams-ordered-list-inverse-color: var(--ams-color-text-inverse);
   --ams-ordered-list-ordered-list-gap: var(--ams-space-s);
   --ams-ordered-list-ordered-list-padding-block-start: var(--ams-space-s);
+  --ams-page-footer-menu-column-gap: var(--ams-space-l);
+  --ams-page-footer-menu-padding-block: var(--ams-space-l);
+  --ams-page-footer-menu-row-gap: var(--ams-space-xs);
+  --ams-page-footer-menu-link-font-family: var(--ams-typography-font-family);
+  --ams-page-footer-menu-link-font-size: var(--ams-typography-body-text-small-font-size);
+  --ams-page-footer-menu-link-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-page-footer-menu-link-line-height: var(--ams-typography-body-text-small-line-height);
+  --ams-page-footer-menu-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-page-footer-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --ams-page-footer-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-page-footer-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-page-header-font-family: var(--ams-typography-font-family);
+  --ams-page-header-padding-block: var(--ams-space-l);
+  --ams-page-header-logo-link-column-gap: var(--ams-space-m);
+  --ams-page-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-page-header-brand-name-color: var(--ams-color-text);
+  --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
+  --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
+  --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);
+  --ams-page-header-menu-row-gap: var(--ams-space-xs);
+  --ams-page-header-menu-item-column-gap: var(--ams-space-xs);
+  --ams-page-header-menu-item-font-family: var(--ams-typography-font-family);
+  --ams-page-header-menu-item-font-size: var(--ams-typography-body-text-font-size);
+  --ams-page-header-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
+  --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
+  --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --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-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);
   --ams-page-heading-font-weight: var(--ams-typography-heading-font-weight);
   --ams-page-heading-line-height: var(--ams-typography-heading-0-line-height);
+  --ams-page-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-page-heading-inverse-color: var(--ams-color-text-inverse);
-  --ams-page-menu-column-gap: var(--ams-space-xl);
-  --ams-page-menu-row-gap: var(--ams-space-m);
-  --ams-page-menu-item-font-family: var(--ams-typography-font-family);
-  --ams-page-menu-item-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-page-menu-item-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-page-menu-item-gap: var(--ams-space-s);
-  --ams-page-menu-item-line-height: var(--ams-typography-body-text-small-line-height);
-  --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
-  --ams-page-menu-item-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
-  --ams-page-menu-item-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-page-menu-item-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-page-background-color: var(--ams-color-background);
   --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);
@@ -638,7 +634,6 @@
   --ams-row-gap-medium: var(--ams-space-m);
   --ams-row-gap-large: var(--ams-space-l);
   --ams-row-gap-x-large: var(--ams-space-xl);
-  --ams-screen-background-color: var(--ams-color-background);
   --ams-search-field-input-background-color: var(--ams-color-background);
   --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
   --ams-search-field-input-color: var(--ams-color-text);
@@ -692,6 +687,16 @@
   --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-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);
+  --ams-standalone-link-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-standalone-link-line-height: var(--ams-typography-body-text-line-height);
+  --ams-standalone-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-standalone-link-text-underline-offset: var(--ams-links-text-underline-offset);
+  --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
+  --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-switch-cursor: var(--ams-cursor-interactive);
   --ams-switch-outline-offset: var(--ams-focus-outline-offset);
   --ams-switch-thumb-background-color: var(--ams-color-background);
@@ -794,19 +799,6 @@
   --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
   --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
   --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
-  --ams-top-task-link-gap: var(--ams-space-s);
-  --ams-top-task-link-description-color: var(--ams-color-text);
-  --ams-top-task-link-description-font-family: var(--ams-typography-font-family);
-  --ams-top-task-link-description-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-top-task-link-description-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-top-task-link-description-line-height: var(--ams-typography-body-text-small-line-height);
-  --ams-top-task-link-label-font-family: var(--ams-typography-font-family);
-  --ams-top-task-link-label-font-weight: var(--ams-typography-heading-font-weight);
-  --ams-top-task-link-label-line-height: var(--ams-typography-heading-4-line-height);
-  --ams-top-task-link-label-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
-  --ams-top-task-link-label-text-underline-offset: var(--ams-links-text-underline-offset);
-  --ams-top-task-link-label-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-top-task-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-unordered-list-color: var(--ams-color-text);
   --ams-unordered-list-font-family: var(--ams-typography-font-family);
   --ams-unordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -826,15 +818,6 @@
   --ams-card-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-card-link-hover-color: var(--ams-links-hover-color);
   --ams-field-set-legend-font-size: var(--ams-typography-heading-4-font-size);
-  --ams-footer-menu-padding-inline: var(--ams-grid-padding-inline);
-  --ams-footer-menu-link-color: var(--ams-links-color);
-  --ams-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-footer-menu-link-hover-color: var(--ams-links-hover-color);
-  --ams-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
-  --ams-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
-  --ams-header-menu-item-color: var(--ams-links-color);
-  --ams-header-menu-item-hover-color: var(--ams-links-hover-color);
-  --ams-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
   --ams-heading-5-font-size: var(--ams-typography-heading-5-font-size);
@@ -852,30 +835,42 @@
   --ams-link-list-link-inverse-color: var(--ams-links-inverse-color);
   --ams-link-list-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
   --ams-link-color: var(--ams-links-color);
+  --ams-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-link-hover-color: var(--ams-links-hover-color);
-  --ams-link-inline-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-link-inline-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
-  --ams-link-standalone-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-link-standalone-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
+  --ams-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
   --ams-link-contrast-color: var(--ams-links-contrast-color);
   --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-page-menu-item-color: var(--ams-links-color);
-  --ams-page-menu-item-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-page-menu-item-hover-color: var(--ams-links-hover-color);
+  --ams-page-footer-menu-padding-inline: var(--ams-grid-padding-inline);
+  --ams-page-footer-menu-medium-padding-inline: var(--ams-grid-medium-padding-inline);
+  --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-wide-padding-inline);
+  --ams-page-footer-menu-link-color: var(--ams-links-color);
+  --ams-page-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
+  --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-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-4-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-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-radio-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-radio-icon-container-block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
+  --ams-standalone-link-color: var(--ams-links-color);
+  --ams-standalone-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
+  --ams-standalone-link-contrast-color: var(--ams-links-contrast-color);
+  --ams-standalone-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
+  --ams-standalone-link-hover-color: var(--ams-links-hover-color);
+  --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
+  --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
+  --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
   --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
   --ams-table-of-contents-link-color: var(--ams-links-color);
   --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);
   --ams-table-of-contents-heading-font-size: var(--ams-typography-heading-4-font-size);
-  --ams-top-task-link-label-color: var(--ams-links-color);
-  --ams-top-task-link-label-font-size: var(--ams-typography-heading-4-font-size);
-  --ams-top-task-link-label-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
-  --ams-top-task-link-label-hover-color: var(--ams-links-hover-color);
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "0.16.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",
@@ -20,7 +20,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Amsterdam/design-system.git",
-    "directory": "proprietary/tokens"
+    "directory": "packages-proprietary/tokens"
   },
   "devDependencies": {
     "change-case": "5.4.4",

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

@@ -25,6 +25,7 @@
       },
       "heading": {
         "font-weight": { "value": "800" },
+        "text-wrap": { "value": "balance" },
         "0": {
           "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
           "line-height": { "value": "1.1386" }

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

@@ -13,6 +13,7 @@
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-block": { "value": "{ams.space.s}" },
         "padding-inline": { "value": "0" },
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
         "hover": {
           "color": { "value": "{ams.color.interactive.hover}" }
         }

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

@@ -9,7 +9,7 @@
       "severity-indicator": {
         "background-color": { "value": "{ams.color.feedback.info}" },
         "padding-block": { "value": "{ams.space.m}" },
-        "padding-inline": { "value": "{ams.space.xs}" }
+        "padding-inline": { "value": "{ams.space.s}" }
       },
       "content": {
         "gap": { "value": "{ams.space.s}" },

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

@@ -15,7 +15,7 @@
       },
       "azure": {
         "background-color": { "value": "{ams.color.highlight.azure}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "color": { "value": "{ams.color.text.inverse}" }
       },
       "green": {
         "background-color": { "value": "{ams.color.highlight.green}" },

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

@@ -10,7 +10,7 @@
       "padding-inline": { "value": "{ams.space.xs}" },
       "azure": {
         "background-color": { "value": "{ams.color.feedback.info}" },
-        "color": { "value": "{ams.color.text.default}" }
+        "color": { "value": "{ams.color.text.inverse}" }
       },
       "lime": {
         "background-color": { "value": "{ams.color.highlight.lime}" },

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

@@ -1,9 +1,15 @@
 {
   "ams": {
     "card": {
-      "gap": { "value": "{ams.space.s}" },
+      "heading": {
+        "margin-block-end": { "value": "{ams.space.xs}" }
+      },
       "heading-group": {
-        "gap": { "value": "{ams.space.s}" }
+        "gap": { "value": "{ams.space.xs}" },
+        "margin-block-end": { "value": "{ams.space.xs}" }
+      },
+      "image": {
+        "margin-block-end": { "value": "{ams.space.s}" }
       },
       "link": {
         "color": { "value": "{ams.links.color}" },

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

@@ -4,24 +4,39 @@
       "background-color": { "value": "{ams.color.background}" },
       "border": { "value": "{ams.border.width.m} solid {ams.dialog.background-color}" },
       "gap": { "value": "{ams.space.m}" },
-      "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
-      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" },
+      "inline-size": { "value": "calc(100% - 2 * {ams.space.l})" },
+      "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.l})" },
       "max-inline-size": { "value": "48rem" },
+      "medium": {
+        "inline-size": { "value": "calc(100% - 2 * {ams.space.xl})" },
+        "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.xl})" }
+      },
       "backdrop": {
         "background-color": { "value": "rgb(24 24 24 / 62.5%)" }
       },
       "header": {
         "gap": { "value": "{ams.space.m}" },
-        "padding-block": { "value": "{ams.space.xl} 0" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-block": { "value": "{ams.space.l} 0" },
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-block": { "value": "{ams.space.xl} 0" },
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       },
       "body": {
         "padding-block": { "value": "0" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       },
       "footer": {
-        "padding-block": { "value": "0 {ams.space.xl}" },
-        "padding-inline": { "value": "{ams.space.2xl}" }
+        "padding-block": { "value": "0 {ams.space.l}" },
+        "padding-inline": { "value": "{ams.space.l}" },
+        "medium": {
+          "padding-block": { "value": "0 {ams.space.xl}" },
+          "padding-inline": { "value": "{ams.space.xl}" }
+        }
       }
     }
   }

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

@@ -11,7 +11,8 @@
         "font-size": { "value": "{ams.typography.heading.4.font-size}" },
         "font-weight": { "value": "{ams.typography.heading.font-weight}" },
         "line-height": { "value": "{ams.typography.heading.4.line-height}" },
-        "margin-block-end": { "value": "{ams.space.m}" }
+        "margin-block-end": { "value": "{ams.space.m}" },
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
       }
     }
   }

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

@@ -4,15 +4,15 @@
       "column-count": { "value": "4" },
       "column-gap": { "value": "{ams.space.xl}" },
       "padding-block": {
-        "s": { "value": "{ams.space.l}" },
-        "m": { "value": "{ams.space.xl}" },
-        "l": { "value": "{ams.space.2xl}" }
+        "l": { "value": "{ams.space.l}" },
+        "xl": { "value": "{ams.space.xl}" },
+        "2xl": { "value": "{ams.space.2xl}" }
       },
       "padding-inline": { "value": "{ams.space.l}" },
       "row-gap": {
-        "s": { "value": "{ams.space.l}" },
-        "m": { "value": "{ams.space.xl}" },
-        "l": { "value": "{ams.space.2xl}" }
+        "l": { "value": "{ams.space.l}" },
+        "xl": { "value": "{ams.space.xl}" },
+        "2xl": { "value": "{ams.space.2xl}" }
       },
       "medium": {
         "column-count": { "value": "8" },

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

@@ -4,6 +4,7 @@
       "color": { "value": "{ams.color.text.default}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
       "inverse": {
         "color": { "value": "{ams.color.text.inverse}" }
       },

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

@@ -5,7 +5,8 @@
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.heading.4.font-size}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
-      "line-height": { "value": "{ams.typography.heading.4.line-height}" }
+      "line-height": { "value": "{ams.typography.heading.4.line-height}" },
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
     }
   }
 }

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

@@ -2,36 +2,17 @@
   "ams": {
     "link": {
       "color": { "value": "{ams.links.color}" },
-      "font-family": { "value": "{ams.typography.font-family}" },
+      "font-family": { "value": "inherit" },
+      "font-size": { "value": "inherit" },
       "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "line-height": { "value": "inherit" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
+      "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
       "hover": {
-        "color": { "value": "{ams.links.hover.color}" }
-      },
-      "inline": {
-        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
-        "font-family": { "value": "inherit" },
-        "font-size": { "value": "inherit" },
-        "line-height": { "value": "inherit" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{ams.links.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
-        }
-      },
-      "standalone": {
-        "font-size": { "value": "{ams.typography.body-text.font-size}" },
-        "line-height": { "value": "{ams.typography.body-text.line-height}" },
-        "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
-        "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
-        "hover": {
-          "text-decoration-thickness": {
-            "value": "{ams.links.hover.text-decoration-thickness}"
-          },
-          "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
-        }
+        "color": { "value": "{ams.links.hover.color}" },
+        "text-decoration-thickness": { "value": "{ams.links.hover.text-decoration-thickness}" },
+        "text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
       },
       "contrast": {
         "color": { "value": "{ams.links.contrast.color}" },