@amsterdam/design-system-tokens 2.0.0 → 2.2.0

package/dist/index.theme.css

@@ -93,9 +93,12 @@
   --ams-button-tertiary-hover-border-color: currentColor;
   --ams-call-to-action-link-background-color: #00a03c;
   --ams-call-to-action-link-hover-background-color: #007c2e;
-  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-  --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-  --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --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-narrow-grid-template-columns: 1fr 4fr;
   --ams-description-list-medium-grid-template-columns: 1fr 2fr;
   --ams-description-list-wide-grid-template-columns: 1fr 1fr;
@@ -120,6 +123,7 @@
   --ams-logo-min-block-size: 2.5rem;
   --ams-logo-emblem-color: #ec0000;
   --ams-logo-title-color: #ec0000;
+  --ams-menu-wide-max-inline-size: 8rem;
   --ams-ordered-list-list-style-type: decimal;
   --ams-ordered-list-item-margin-inline-start: 2.25rem; /** Divide your total indentation width over margin and padding to position the marker. */
   --ams-ordered-list-item-padding-inline-start: 0.25rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
@@ -128,6 +132,7 @@
   --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: 90rem;
+  --ams-page-with-menu-max-inline-size: 120rem;
   --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
   --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -136,9 +141,12 @@
   --ams-switch-inline-size: 3.5rem;
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
-  --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
-  --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
-  --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+  --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+  --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+  --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-unordered-list-list-style-type: '\2022';
   --ams-unordered-list-item-margin-inline-start: 1.625rem; /** Divide your total indentation width over margin and padding to position the marker. */
   --ams-unordered-list-item-padding-inline-start: 0.875rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
@@ -366,11 +374,12 @@
   --ams-column-gap-medium: var(--ams-space-m);
   --ams-column-gap-large: var(--ams-space-l);
   --ams-column-gap-x-large: var(--ams-space-xl);
+  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive); /** Use the token with ‘calendar’ spelled correctly instead */
   --ams-date-input-border-color: var(--ams-inputs-border-color);
   --ams-date-input-border-style: var(--ams-inputs-border-style);
   --ams-date-input-line-height: var(--ams-inputs-line-height);
-  --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
+  --ams-date-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-description-list-color: var(--ams-color-text);
   --ams-description-list-column-gap: var(--ams-space-l);
   --ams-description-list-font-family: var(--ams-typography-font-family);
@@ -413,6 +422,7 @@
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
   --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-field-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);
@@ -463,6 +473,7 @@
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-hint-in-fieldset-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -507,6 +518,7 @@
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-3-line-height);
   --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-label-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --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);
@@ -531,10 +543,6 @@
   --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-menu-font-family: var(--ams-typography-font-family);
-  --ams-menu-font-size: var(--ams-typography-body-text-font-size);
-  --ams-menu-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-menu-line-height: var(--ams-typography-body-text-line-height);
   --ams-menu-link-gap: var(--ams-space-s);
   --ams-menu-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-menu-link-padding-block: var(--ams-space-s);
@@ -543,6 +551,14 @@
   --ams-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-menu-link-wide-gap: var(--ams-space-xs);
+  --ams-menu-background-color: var(--ams-color-interactive);
+  --ams-menu-font-family: var(--ams-typography-font-family);
+  --ams-menu-font-size: var(--ams-typography-body-text-font-size);
+  --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-padding-inline: var(--ams-space-s);
   --ams-menu-list-gap: var(--ams-space-m);
   --ams-ordered-list-color: var(--ams-color-text);
   --ams-ordered-list-font-family: var(--ams-typography-font-family);
@@ -587,6 +603,7 @@
   --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-gap: 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-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
@@ -767,11 +784,12 @@
   --ams-text-input-border-style: var(--ams-inputs-border-style);
   --ams-text-input-line-height: var(--ams-inputs-line-height);
   --ams-text-input-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive); /** Use the token with ‘calendar’ spelled correctly instead */
   --ams-time-input-border-color: var(--ams-inputs-border-color);
   --ams-time-input-border-style: var(--ams-inputs-border-style);
   --ams-time-input-line-height: var(--ams-inputs-line-height);
-  --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
+  --ams-time-input-calendar-picker-indicator-cursor: var(--ams-cursor-interactive);
   --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);
@@ -791,6 +809,8 @@
   --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));
   --ams-checkbox-icon-container-inline-size: var(--ams-checkbox-font-size);
+  --ams-date-input-disabled-color: var(--ams-inputs-disabled-color);
+  --ams-date-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --ams-date-input-background-color: var(--ams-inputs-background-color);
   --ams-date-input-border-width: var(--ams-inputs-border-width);
   --ams-date-input-color: var(--ams-inputs-color);
@@ -800,8 +820,6 @@
   --ams-date-input-outline-offset: var(--ams-inputs-outline-offset);
   --ams-date-input-padding-block: var(--ams-inputs-padding-block);
   --ams-date-input-padding-inline: var(--ams-inputs-padding-inline);
-  --ams-date-input-disabled-color: var(--ams-inputs-disabled-color);
-  --ams-date-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --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);
@@ -849,12 +867,13 @@
   --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-link-inverse-color: var(--ams-links-inverse-color);
   --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
-  --ams-menu-link-color: var(--ams-links-color);
-  --ams-menu-link-hover-color: var(--ams-links-hover-color);
-  --ams-menu-link-contrast-color: var(--ams-links-contrast-color);
-  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
-  --ams-menu-link-inverse-color: var(--ams-links-inverse-color);
-  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
+  --ams-menu-link-contrast-color: var(--ams-links-contrast-color); /** The menu has a dark background now, so this is no longer needed. */
+  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color); /** The menu has a dark background now, so this is no longer needed. */
+  --ams-menu-link-inverse-color: var(--ams-links-inverse-color); /** The menu has a dark background now, so this is no longer needed. */
+  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color); /** The menu has a dark background now, so this is no longer needed. */
+  --ams-menu-link-color: var(--ams-links-inverse-color);
+  --ams-menu-link-hover-color: var(--ams-links-inverse-hover-color);
+  --ams-menu-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
   --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);
@@ -866,6 +885,7 @@
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
+  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-password-input-background-color: var(--ams-inputs-background-color);
@@ -952,6 +972,8 @@
   --ams-text-input-invalid-hover-border-color: var(--ams-inputs-invalid-hover-border-color);
   --ams-text-input-invalid-hover-box-shadow: var(--ams-inputs-invalid-hover-box-shadow);
   --ams-text-input-placeholder-color: var(--ams-inputs-placeholder-color);
+  --ams-time-input-disabled-color: var(--ams-inputs-disabled-color);
+  --ams-time-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --ams-time-input-background-color: var(--ams-inputs-background-color);
   --ams-time-input-border-width: var(--ams-inputs-border-width);
   --ams-time-input-color: var(--ams-inputs-color);
@@ -961,8 +983,6 @@
   --ams-time-input-outline-offset: var(--ams-inputs-outline-offset);
   --ams-time-input-padding-block: var(--ams-inputs-padding-block);
   --ams-time-input-padding-inline: var(--ams-inputs-padding-inline);
-  --ams-time-input-disabled-color: var(--ams-inputs-disabled-color);
-  --ams-time-input-hover-box-shadow: var(--ams-inputs-hover-box-shadow);
   --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);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.2.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",
@@ -26,7 +26,7 @@
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "5.0.4"
+    "style-dictionary": "5.1.1"
   },
   "scripts": {
     "clean": "rimraf dist/",

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

@@ -0,0 +1,32 @@
+{
+  "ams": {
+    "date-input": {
+      "disabled": {
+        "calender-picker-indicator": {
+          "background-image": {
+            "comment": "Use the token with ‘calendar’ spelled correctly instead",
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
+          }
+        }
+      },
+      "hover": {
+        "calender-picker-indicator": {
+          "background-image": {
+            "comment": "Use the token with ‘calendar’ spelled correctly instead",
+            "value": "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>\")"
+          }
+        }
+      },
+      "calender-picker-indicator": {
+        "background-image": {
+          "comment": "Use the token with ‘calendar’ spelled correctly instead",
+          "value": "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>\")"
+        },
+        "cursor": {
+          "comment": "Use the token with ‘calendar’ spelled correctly instead",
+          "value": "{ams.cursor.interactive}"
+        }
+      }
+    }
+  }
+}

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

@@ -16,7 +16,7 @@
       "disabled": {
         "color": { "value": "{ams.inputs.disabled.color}" },
         "cursor": { "value": "{ams.cursor.disabled}" },
-        "calender-picker-indicator": {
+        "calendar-picker-indicator": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
           }
@@ -24,7 +24,7 @@
       },
       "hover": {
         "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
-        "calender-picker-indicator": {
+        "calendar-picker-indicator": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
           }
@@ -37,7 +37,7 @@
           "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
         }
       },
-      "calender-picker-indicator": {
+      "calendar-picker-indicator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><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/field-set.tokens.json

@@ -12,7 +12,10 @@
         "font-weight": { "value": "{ams.typography.heading.font-weight}" },
         "line-height": { "value": "{ams.typography.heading.3.line-height}" },
         "margin-block-end": { "value": "{ams.space.s}" },
-        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+        "in-fieldset": {
+          "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+        }
       }
     }
   }

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

@@ -1,7 +1,10 @@
 {
   "ams": {
     "hint": {
-      "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "in-fieldset": {
+        "color": { "value": "{ams.color.text.secondary}" }
+      }
     }
   }
 }

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

@@ -6,7 +6,10 @@
       "font-size": { "value": "{ams.typography.heading.3.font-size}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
       "line-height": { "value": "{ams.typography.heading.3.line-height}" },
-      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+      "in-fieldset": {
+        "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      }
     }
   }
 }

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

@@ -0,0 +1,32 @@
+{
+  "ams": {
+    "menu": {
+      "link": {
+        "contrast": {
+          "color": {
+            "comment": "The menu has a dark background now, so this is no longer needed.",
+            "value": "{ams.links.contrast.color}"
+          },
+          "hover": {
+            "color": {
+              "comment": "The menu has a dark background now, so this is no longer needed.",
+              "value": "{ams.links.contrast.hover.color}"
+            }
+          }
+        },
+        "inverse": {
+          "color": {
+            "comment": "The menu has a dark background now, so this is no longer needed.",
+            "value": "{ams.links.inverse.color}"
+          },
+          "hover": {
+            "color": {
+              "comment": "The menu has a dark background now, so this is no longer needed.",
+              "value": "{ams.links.inverse.hover.color}"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,12 +1,19 @@
 {
   "ams": {
     "menu": {
+      "background-color": { "value": "{ams.color.interactive.default}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
       "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
       "line-height": { "value": "{ams.typography.body-text.line-height}" },
+      "padding-block": { "value": "{ams.space.m}" },
+      "wide": {
+        "max-inline-size": { "value": "8rem" },
+        "padding-block": { "value": "calc({ams.logo.block-size} + 2 * {ams.page-header.padding-block}) {ams.space.m}" },
+        "padding-inline": { "value": "{ams.space.s}" }
+      },
       "link": {
-        "color": { "value": "{ams.links.color}" },
+        "color": { "value": "{ams.links.inverse.color}" },
         "gap": { "value": "{ams.space.s}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-block": { "value": "{ams.space.s}" },
@@ -15,20 +22,11 @@
         "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}" },
+          "color": { "value": "{ams.links.inverse.hover.color}" },
           "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
         },
-        "contrast": {
-          "color": { "value": "{ams.links.contrast.color}" },
-          "hover": {
-            "color": { "value": "{ams.links.contrast.hover.color}" }
-          }
-        },
-        "inverse": {
-          "color": { "value": "{ams.links.inverse.color}" },
-          "hover": {
-            "color": { "value": "{ams.links.inverse.hover.color}" }
-          }
+        "wide": {
+          "gap": { "value": "{ams.space.xs}" }
         }
       },
       "list": {

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

@@ -51,6 +51,7 @@
           }
         },
         "link": {
+          "gap": { "value": "{ams.space.xs}" },
           "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
           "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
           "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },

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

@@ -2,7 +2,16 @@
   "ams": {
     "page": {
       "background-color": { "value": "{ams.color.background}" },
-      "max-inline-size": { "value": "90rem" }
+      "max-inline-size": { "value": "90rem" },
+      "with-menu": {
+        "max-inline-size": { "value": "120rem" },
+        "area-skip-link": {
+          "margin-inline-end": {
+            "value": "{ams.grid.padding-inline}",
+            "comment": "Must be the Grid inline padding, to make sure Skip Link and Grid line up"
+          }
+        }
+      }
     }
   }
 }

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

@@ -0,0 +1,32 @@
+{
+  "ams": {
+    "time-input": {
+      "disabled": {
+        "calender-picker-indicator": {
+          "background-image": {
+            "comment": "Use the token with ‘calendar’ spelled correctly instead",
+            "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
+          }
+        }
+      },
+      "hover": {
+        "calender-picker-indicator": {
+          "background-image": {
+            "comment": "Use the token with ‘calendar’ spelled correctly instead",
+            "value": "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>\")"
+          }
+        }
+      },
+      "calender-picker-indicator": {
+        "background-image": {
+          "comment": "Use the token with ‘calendar’ spelled correctly instead",
+          "value": "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>\")"
+        },
+        "cursor": {
+          "comment": "Use the token with ‘calendar’ spelled correctly instead",
+          "value": "{ams.cursor.interactive}"
+        }
+      }
+    }
+  }
+}

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

@@ -16,7 +16,7 @@
       "disabled": {
         "color": { "value": "{ams.inputs.disabled.color}" },
         "cursor": { "value": "{ams.cursor.disabled}" },
-        "calender-picker-indicator": {
+        "calendar-picker-indicator": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
           }
@@ -24,7 +24,7 @@
       },
       "hover": {
         "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
-        "calender-picker-indicator": {
+        "calendar-picker-indicator": {
           "background-image": {
             "value": "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>\")"
           }
@@ -37,7 +37,7 @@
           "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
         }
       },
-      "calender-picker-indicator": {
+      "calendar-picker-indicator": {
         "background-image": {
           "value": "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>\")"
         },