@amsterdam/design-system-tokens 0.12.0 → 0.14.0

package/dist/index.theme.css

@@ -3,6 +3,12 @@
  */
 
 .ams-theme {
+  --ams-aspect-ratio-x-tall: 9 / 16;
+  --ams-aspect-ratio-tall: 3 / 4;
+  --ams-aspect-ratio-square: 1 / 1;
+  --ams-aspect-ratio-wide: 4 / 3;
+  --ams-aspect-ratio-x-wide: 16 / 9;
+  --ams-aspect-ratio-2x-wide: 16 / 5;
   --ams-border-width-sm: 0.0625rem;
   --ams-border-width-md: 0.125rem;
   --ams-border-width-lg: 0.1875rem;
@@ -22,12 +28,6 @@
   --ams-color-neutral-grey1: #E8E8E8;
   --ams-color-neutral-grey2: #BEBEBE;
   --ams-color-neutral-grey3: #767676;
-  --ams-proportion-x-tall: 9 / 16;
-  --ams-proportion-tall: 3 / 4;
-  --ams-proportion-square: 1 / 1;
-  --ams-proportion-wide: 4 / 3;
-  --ams-proportion-x-wide: 16 / 9;
-  --ams-proportion-2x-wide: 16 / 5;
   --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
   --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
   --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -87,6 +87,7 @@
   --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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-dialog-border: 0;
   --ams-dialog-max-inline-size: 48rem;
+  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
   --ams-grid-column-count: 4;
   --ams-grid-medium-column-count: 8;
   --ams-grid-wide-column-count: 12;
@@ -99,7 +100,8 @@
   --ams-link-inline-font-family: inherit;
   --ams-link-inline-font-size: inherit;
   --ams-link-inline-line-height: inherit;
-  --ams-logo-block-size: 2.5rem;
+  --ams-logo-block-size: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem); /* This is the same size as Grid space medium */
+  --ams-logo-min-block-size: 2.5rem;
   --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. */
@@ -108,6 +110,8 @@
   --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-radio-hover-indicator-stroke-width: 3px;
+  --ams-radio-circle-stroke-width: 2px;
   --ams-radio-icon-container-inline-size: 1.5rem;
   --ams-row-gap-no: 0;
   --ams-screen-wide-max-inline-size: 100rem;
@@ -150,24 +154,17 @@
   --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
   --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
   --ams-action-group-gap: var(--ams-space-md);
+  --ams-alert-background-color: var(--ams-color-primary-white);
   --ams-alert-border-width: var(--ams-border-width-xl);
   --ams-alert-gap: var(--ams-space-sm);
   --ams-alert-padding-block: var(--ams-space-md);
   --ams-alert-padding-inline: var(--ams-space-lg);
   --ams-alert-error-border-color: var(--ams-color-primary-red);
-  --ams-alert-info-border-color: var(--ams-color-primary-blue);
+  --ams-alert-info-border-color: var(--ams-color-blue);
   --ams-alert-success-border-color: var(--ams-color-dark-green);
   --ams-alert-warning-border-color: var(--ams-color-orange);
-  --ams-alert-close-fill: var(--ams-color-primary-black);
-  --ams-alert-close-hover-fill: var(--ams-color-primary-blue);
   --ams-alert-content-gap: var(--ams-space-sm);
-  --ams-aspect-ratio-x-tall: var(--ams-proportion-x-tall);
-  --ams-aspect-ratio-tall: var(--ams-proportion-tall);
-  --ams-aspect-ratio-square: var(--ams-proportion-square);
-  --ams-aspect-ratio-wide: var(--ams-proportion-wide);
-  --ams-aspect-ratio-x-wide: var(--ams-proportion-x-wide);
-  --ams-aspect-ratio-2x-wide: var(--ams-proportion-2x-wide);
-  --ams-avatar-aspect-ratio: var(--ams-proportion-square);
+  --ams-avatar-aspect-ratio: var(--ams-aspect-ratio-square);
   --ams-avatar-font-family: var(--ams-text-font-family);
   --ams-avatar-font-size: var(--ams-text-level-6-font-size);
   --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
@@ -268,8 +265,8 @@
   --ams-button-primary-background-color: var(--ams-color-primary-blue);
   --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-primary-color: var(--ams-color-primary-white);
-  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
-  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
+  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey3);
+  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
   --ams-button-primary-hover-background-color: var(--ams-color-dark-blue);
   --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-secondary-background-color: var(--ams-color-primary-white);
@@ -278,13 +275,13 @@
   --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
   --ams-button-secondary-hover-color: var(--ams-color-dark-blue);
   --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
-  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
-  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
+  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey3);
   --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-tertiary-color: var(--ams-color-primary-blue);
   --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
-  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey3);
   --ams-button-icon-only-padding-block: var(--ams-space-sm);
   --ams-button-icon-only-padding-inline: var(--ams-space-sm);
   --ams-card-gap: var(--ams-space-sm);
@@ -345,8 +342,8 @@
   --ams-date-input-padding-block: var(--ams-space-sm);
   --ams-date-input-padding-inline: var(--ams-space-md);
   --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-date-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -358,8 +355,8 @@
   --ams-description-list-line-height: var(--ams-text-level-5-line-height);
   --ams-description-list-row-gap: var(--ams-space-sm);
   --ams-description-list-term-font-weight: var(--ams-text-font-weight-bold);
-  --ams-description-list-details-font-weight: var(--ams-text-font-weight-normal);
-  --ams-description-list-details-padding-inline-start: var(--ams-space-lg);
+  --ams-description-list-description-font-weight: var(--ams-text-font-weight-normal);
+  --ams-description-list-description-padding-inline-start: var(--ams-space-lg);
   --ams-dialog-background-color: var(--ams-color-primary-white);
   --ams-dialog-gap: var(--ams-space-md);
   --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-grid-md));
@@ -371,6 +368,7 @@
   --ams-error-message-font-family: var(--ams-text-font-family);
   --ams-error-message-font-size: var(--ams-text-level-6-font-size);
   --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
+  --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-text-level-6-line-height);
   --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
   --ams-field-set-invalid-padding-inline-start: var(--ams-space-md);
@@ -383,6 +381,13 @@
   --ams-field-gap: var(--ams-space-sm);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
   --ams-field-invalid-padding-inline-start: var(--ams-space-md);
+  --ams-figure-gap: var(--ams-space-sm);
+  --ams-figure-caption-color: var(--ams-color-primary-black);
+  --ams-figure-caption-font-family: var(--ams-text-font-family);
+  --ams-figure-caption-font-size: var(--ams-text-level-6-font-size);
+  --ams-figure-caption-font-weight: var(--ams-text-font-weight-normal);
+  --ams-figure-caption-line-height: var(--ams-text-level-6-line-height);
+  --ams-figure-caption-inverse-color: var(--ams-color-primary-white);
   --ams-file-input-background-color: var(--ams-color-primary-white);
   --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
   --ams-file-input-color: var(--ams-color-primary-black);
@@ -394,7 +399,7 @@
   --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-file-input-padding-block: var(--ams-space-md);
   --ams-file-input-padding-inline: var(--ams-space-md);
-  --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-file-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
   --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
@@ -405,10 +410,19 @@
   --ams-file-input-file-selector-button-padding-inline: var(--ams-space-md);
   --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
   --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
-  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
-  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
+  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
+  --ams-file-list-gap: var(--ams-space-md);
+  --ams-file-list-padding-block: var(--ams-space-md);
+  --ams-file-list-file-font-family: var(--ams-text-font-family);
+  --ams-file-list-file-font-size: var(--ams-text-level-6-font-size);
+  --ams-file-list-file-font-weight: var(--ams-text-font-weight-normal);
+  --ams-file-list-file-gap: var(--ams-space-sm);
+  --ams-file-list-file-line-height: var(--ams-text-level-6-line-height);
+  --ams-file-list-file-details-color: var(--ams-color-neutral-grey3);
+  --ams-footer-top-background-color: var(--ams-color-primary-blue);
   --ams-form-error-list-outline-offset: var(--ams-focus-outline-offset);
   --ams-gap-xs: var(--ams-space-grid-xs);
   --ams-gap-sm: var(--ams-space-grid-sm);
@@ -423,9 +437,25 @@
   --ams-grid-row-gap-sm: var(--ams-space-grid-sm);
   --ams-grid-row-gap-md: var(--ams-space-grid-md);
   --ams-grid-row-gap-lg: var(--ams-space-grid-lg);
-  --ams-header-column-gap: var(--ams-space-grid-md); /* Must have the same value as `ams.grid.column-gap`. */
-  --ams-header-padding-block: var(--ams-space-md);
+  --ams-header-padding-block: var(--ams-space-grid-sm);
+  --ams-header-branding-column-gap: var(--ams-space-md);
+  --ams-header-branding-row-gap: var(--ams-space-grid-xs);
   --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-header-mega-menu-button-label-open-font-weight: var(--ams-text-font-weight-bold);
+  --ams-header-menu-column-gap: var(--ams-space-lg);
+  --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-text-font-family);
+  --ams-header-menu-item-font-size: var(--ams-text-level-5-font-size);
+  --ams-header-menu-item-font-weight: var(--ams-text-font-weight-normal);
+  --ams-header-menu-item-line-height: var(--ams-text-level-5-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-link-appearance-subtle-text-decoration-line);
+  --ams-header-menu-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
+  --ams-header-menu-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
+  --ams-header-navigation-column-gap: var(--ams-space-lg);
+  --ams-header-navigation-row-gap: var(--ams-space-grid-md);
   --ams-heading-color: var(--ams-color-primary-black);
   --ams-heading-font-family: var(--ams-text-font-family);
   --ams-heading-font-weight: var(--ams-text-font-weight-bold);
@@ -446,16 +476,17 @@
   --ams-icon-button-color: var(--ams-color-primary-blue);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-icon-button-hover-color: var(--ams-color-dark-blue);
-  --ams-icon-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-icon-button-contrast-color-color: var(--ams-color-primary-black);
   --ams-icon-button-contrast-color-hover-color: var(--ams-color-primary-black);
-  --ams-icon-button-contrast-color-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-contrast-color-disabled-color: var(--ams-color-neutral-grey3);
   --ams-icon-button-inverse-color-background-color: var(--ams-color-primary-blue);
   --ams-icon-button-inverse-color-color: var(--ams-color-primary-white);
   --ams-icon-button-inverse-color-hover-background-color: var(--ams-color-dark-blue);
   --ams-icon-button-inverse-color-hover-color: var(--ams-color-primary-white);
   --ams-icon-button-inverse-color-disabled-color: var(--ams-color-primary-white);
-  --ams-icon-button-inverse-color-disabled-background-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-inverse-color-disabled-background-color: var(--ams-color-neutral-grey3);
+  --ams-icon-inverse-color: var(--ams-color-primary-white);
   --ams-icon-size-3-font-size: var(--ams-text-level-3-font-size);
   --ams-icon-size-3-line-height: var(--ams-text-level-3-line-height);
   --ams-icon-size-4-font-size: var(--ams-text-level-4-font-size);
@@ -470,6 +501,7 @@
   --ams-image-slider-thumbnails-gap: var(--ams-space-xs);
   --ams-image-slider-thumbnails-thumbnail-cursor: var(--ams-action-activate-cursor);
   --ams-image-slider-thumbnails-thumbnail-outline-offset: var(--ams-focus-outline-offset);
+  --ams-image-aspect-ratio: var(--ams-aspect-ratio-x-wide);
   --ams-label-color: var(--ams-color-primary-black);
   --ams-label-font-family: var(--ams-text-font-family);
   --ams-label-font-size: var(--ams-text-level-4-font-size);
@@ -502,8 +534,8 @@
   --ams-link-standalone-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-link-standalone-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
   --ams-logo-emblem-color: var(--ams-color-primary-red);
-  --ams-logo-title-color: var(--ams-color-primary-red);
   --ams-logo-subsite-color: var(--ams-color-primary-black);
+  --ams-logo-title-color: var(--ams-color-primary-red);
   --ams-margin-xs: var(--ams-space-grid-xs);
   --ams-margin-sm: var(--ams-space-grid-sm);
   --ams-margin-md: var(--ams-space-grid-md);
@@ -573,8 +605,8 @@
   --ams-password-input-padding-block: var(--ams-space-sm);
   --ams-password-input-padding-inline: var(--ams-space-md);
   --ams-password-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-password-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-password-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-password-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -594,6 +626,9 @@
   --ams-radio-checked-indicator-hover-fill: var(--ams-color-dark-blue);
   --ams-radio-checked-indicator-invalid-fill: var(--ams-color-primary-red);
   --ams-radio-checked-indicator-invalid-hover-fill: var(--ams-color-primary-red);
+  --ams-radio-hover-indicator-hover-stroke: var(--ams-color-primary-blue);
+  --ams-radio-hover-indicator-invalid-hover-stroke: var(--ams-color-primary-red);
+  --ams-radio-circle-fill: var(--ams-color-primary-white);
   --ams-radio-circle-stroke: var(--ams-color-primary-blue);
   --ams-radio-circle-disabled-stroke: var(--ams-color-neutral-grey3);
   --ams-radio-circle-disabled-invalid-stroke: var(--ams-color-neutral-grey3);
@@ -610,12 +645,6 @@
   --ams-row-gap-lg: var(--ams-space-lg);
   --ams-row-gap-xl: var(--ams-space-xl);
   --ams-screen-background-color: var(--ams-color-primary-white);
-  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
-  --ams-search-field-button-color: var(--ams-color-primary-white);
-  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
-  --ams-search-field-button-padding-block: var(--ams-space-sm);
-  --ams-search-field-button-padding-inline: var(--ams-space-sm);
-  --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
   --ams-search-field-input-background-color: var(--ams-color-primary-white);
   --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
   --ams-search-field-input-color: var(--ams-color-primary-black);
@@ -644,12 +673,12 @@
   --ams-select-outline-offset: var(--ams-focus-outline-offset);
   --ams-select-padding-block: var(--ams-space-sm);
   --ams-select-padding-inline: var(--ams-space-md) calc(2 * var(--ams-space-md) + 1em);
-  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-select-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-select-disabled-color: var(--ams-color-neutral-grey3);
   --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
-  --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-option-disabled-color: var(--ams-color-neutral-grey3);
   --ams-skip-link-background-color: var(--ams-color-primary-blue);
   --ams-skip-link-color: var(--ams-color-primary-white);
   --ams-skip-link-font-family: var(--ams-text-font-family);
@@ -660,13 +689,12 @@
   --ams-skip-link-padding-block: var(--ams-space-sm);
   --ams-skip-link-padding-inline: var(--ams-space-md);
   --ams-skip-link-hover-background-color: var(--ams-color-dark-blue);
+  --ams-spotlight-background-color: var(--ams-color-purple);
   --ams-spotlight-blue-background-color: var(--ams-color-blue);
-  --ams-spotlight-dark-blue-background-color: var(--ams-color-primary-blue);
   --ams-spotlight-dark-green-background-color: var(--ams-color-dark-green);
   --ams-spotlight-green-background-color: var(--ams-color-green);
   --ams-spotlight-magenta-background-color: var(--ams-color-magenta);
   --ams-spotlight-orange-background-color: var(--ams-color-orange);
-  --ams-spotlight-purple-background-color: var(--ams-color-purple);
   --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
   --ams-switch-background-color: var(--ams-color-neutral-grey3);
   --ams-switch-font-family: var(--ams-text-font-family);
@@ -674,7 +702,7 @@
   --ams-switch-thumb-background-color: var(--ams-color-primary-white);
   --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
   --ams-switch-checked-background-color: var(--ams-color-primary-blue);
-  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
+  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey3);
   --ams-table-of-contents-font-family: var(--ams-text-font-family);
   --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
   --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
@@ -696,13 +724,12 @@
   --ams-table-font-weight: var(--ams-text-font-weight-normal);
   --ams-table-line-height: var(--ams-text-level-5-line-height);
   --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
-  --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
+  --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid #d1d1d1; /* TODO: replace with color token */
   --ams-table-cell-padding-block: var(--ams-space-sm);
   --ams-table-cell-padding-inline: var(--ams-space-md);
   --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
   --ams-tabs-gap: var(--ams-space-md);
-  --ams-tabs-list-background-color: var(--ams-color-primary-white);
-  --ams-tabs-list-border-block-end: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
+  --ams-tabs-list-box-shadow: inset 0 calc(var(--ams-border-width-md) * -1) #d1d1d1; /* TODO: replace with color token */
   --ams-tabs-button-color: var(--ams-color-primary-blue);
   --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
   --ams-tabs-button-font-family: var(--ams-text-font-family);
@@ -712,10 +739,11 @@
   --ams-tabs-button-padding-block: var(--ams-space-sm);
   --ams-tabs-button-padding-inline: var(--ams-space-md);
   --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
-  --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
-  --ams-tabs-button-selected-background-color: var(--ams-color-primary-blue);
-  --ams-tabs-button-selected-color: var(--ams-color-primary-white);
-  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-tabs-button-hover-box-shadow: inset 0 calc(var(--ams-border-width-md) * -1) var(--ams-color-dark-blue);
+  --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1) var(--ams-color-primary-blue);
+  --ams-tabs-button-selected-color: var(--ams-color-primary-blue);
+  --ams-tabs-button-selected-font-weight: var(--ams-text-font-weight-bold);
+  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-text-area-background-color: var(--ams-color-primary-white);
   --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
@@ -724,13 +752,13 @@
   --ams-text-area-font-size: var(--ams-text-level-5-font-size);
   --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
   --ams-text-area-line-height: var(--ams-text-level-5-line-height);
-  --ams-text-area-padding-block: var(--ams-space-sm);
   --ams-text-area-min-block-size: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
   --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
+  --ams-text-area-padding-block: var(--ams-space-sm);
   --ams-text-area-padding-inline: var(--ams-space-md);
   --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
-  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-text-area-disabled-color: var(--ams-color-neutral-grey3);
   --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
@@ -747,8 +775,8 @@
   --ams-text-input-padding-block: var(--ams-space-sm);
   --ams-text-input-padding-inline: var(--ams-space-md);
   --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-text-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -764,8 +792,8 @@
   --ams-time-input-padding-block: var(--ams-space-sm);
   --ams-time-input-padding-inline: var(--ams-space-md);
   --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-time-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -800,6 +828,10 @@
   --ams-card-link-color: var(--ams-link-appearance-color);
   --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-card-link-hover-color: var(--ams-link-appearance-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-menu-item-color: var(--ams-link-appearance-color);
+  --ams-header-menu-item-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-header-menu-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-color: var(--ams-link-appearance-color);
   --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.0",
+  "version": "0.14.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam/",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "4.1.4"
+    "style-dictionary": "4.3.0"
   },
   "scripts": {
     "clean": "rimraf dist/",

package/src/brand/ams/{proportion.tokens.json → aspect-ratio.tokens.json}

@@ -1,6 +1,6 @@
 {
   "ams": {
-    "proportion": {
+    "aspect-ratio": {
       "x-tall": { "value": "9 / 16" },
       "tall": { "value": "3 / 4" },
       "square": { "value": "1 / 1" },

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

@@ -1,6 +1,7 @@
 {
   "ams": {
     "alert": {
+      "background-color": { "value": "{ams.color.primary-white}" },
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "{ams.space.sm}" },
@@ -10,7 +11,7 @@
         "border-color": { "value": "{ams.color.primary-red}" }
       },
       "info": {
-        "border-color": { "value": "{ams.color.primary-blue}" }
+        "border-color": { "value": "{ams.color.blue}" }
       },
       "success": {
         "border-color": { "value": "{ams.color.dark-green}" }
@@ -18,12 +19,6 @@
       "warning": {
         "border-color": { "value": "{ams.color.orange}" }
       },
-      "close": {
-        "fill": { "value": "{ams.color.primary-black}" },
-        "hover": {
-          "fill": { "value": "{ams.color.primary-blue}" }
-        }
-      },
       "content": {
         "gap": { "value": "{ams.space.sm}" }
       }

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

@@ -1,7 +1,7 @@
 {
   "ams": {
     "avatar": {
-      "aspect-ratio": { "value": "{ams.proportion.square}" },
+      "aspect-ratio": { "value": "{ams.aspect-ratio.square}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },

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

@@ -20,8 +20,8 @@
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "disabled": {
-          "background-color": { "value": "{ams.color.neutral-grey2}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" }
+          "background-color": { "value": "{ams.color.neutral-grey3}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }
         },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" },
@@ -38,8 +38,8 @@
         },
         "disabled": {
           "background-color": { "value": "{ams.color.primary-white}" },
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
-          "color": { "value": "{ams.color.neutral-grey2}" }
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" },
+          "color": { "value": "{ams.color.neutral-grey3}" }
         },
         "focus": {
           "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }
@@ -54,7 +54,7 @@
         },
         "disabled": {
           "background-color": { "value": "transparent" },
-          "color": { "value": "{ams.color.neutral-grey2}" }
+          "color": { "value": "{ams.color.neutral-grey3}" }
         }
       },
       "icon-only": {

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

@@ -18,8 +18,8 @@
       },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
-        "color": { "value": "{ams.color.neutral-grey2}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey3}" },
+        "color": { "value": "{ams.color.neutral-grey3}" },
         "calender-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='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"

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

@@ -11,7 +11,7 @@
       "term": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
-      "details": {
+      "description": {
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "padding-inline-start": { "value": "{ams.space.lg}" }
       }

package/src/components/ams/error-message.tokens.json

@@ -5,6 +5,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "gap": { "value": "{ams.space.xs}" },
       "line-height": { "value": "{ams.text.level.6.line-height}" }
     }
   }

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

@@ -0,0 +1,15 @@
+{
+  "ams": {
+    "figure": {
+      "gap": { "value": "{ams.space.sm}" },
+      "caption": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "inverse-color": { "value": "{ams.color.primary-white}" }
+      }
+    }
+  }
+}

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

@@ -13,7 +13,7 @@
       "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
-        "color": { "value": "{ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.neutral-grey3}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
       "file-selector-button": {
@@ -29,8 +29,8 @@
           "color": { "value": "{ams.color.dark-blue}" }
         },
         "disabled": {
-          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
-          "color": { "value": "{ams.color.neutral-grey2}" },
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" },
+          "color": { "value": "{ams.color.neutral-grey3}" },
           "cursor": { "value": "{ams.action.disabled.cursor}" }
         },
         "forced-color-mode": {

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

@@ -0,0 +1,21 @@
+{
+  "ams": {
+    "file-list": {
+      "gap": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "file": {
+        "font-family": { "value": "{ams.text.font-family}" },
+        "font-size": { "value": "{ams.text.level.6.font-size}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
+        "gap": { "value": "{ams.space.sm}" },
+        "line-height": { "value": "{ams.text.level.6.line-height}" },
+        "details": {
+          "color": { "value": "{ams.color.neutral-grey3}" }
+        },
+        "preview": {
+          "width": { "value": "clamp(2.5rem, 10vw, 5rem)" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "footer": {
+      "top": {
+        "background-color": { "value": "{ams.color.primary-blue}" }
+      }
+    }
+  }
+}