@amsterdam/design-system-tokens 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.1.0...design-system-tokens-v2.2.0) (2025-11-21)
+
+
+### Features
+
+* **Label, Field Set:** Add a lighter variant to Label and Legend to clarify form hierarchy in nested Field Sets ([#2291](https://github.com/Amsterdam/design-system/issues/2291)) ([3bcc039](https://github.com/Amsterdam/design-system/commit/3bcc03901cbe1b37183d774b26367a914e3bda79))
+* **Page Header:** Allow adding an icon to a menu item ([#2285](https://github.com/Amsterdam/design-system/issues/2285)) ([15a830b](https://github.com/Amsterdam/design-system/commit/15a830b6068bb98c405da0013e90ac6697b20f5b))
+* **Page:** Add support for a layout with a Menu ([#2263](https://github.com/Amsterdam/design-system/issues/2263)) ([51a289f](https://github.com/Amsterdam/design-system/commit/51a289fe3012981fff1bfc223a0689b9be3760a7))
+
+## [2.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.0.0...design-system-tokens-v2.1.0) (2025-10-31)
+
+
+### Deprecations
+
+The following tokens will be removed in release 4.0.0. If you use them in your code, please delete them.
+
+- `ams.menu.link.contrast.color`, `ams.menu.link.contrast.hover.color`, `ams.menu.link.inverse.color`, `ams.menu.link.inverse.hover.color`.
+- `ams.date-input.disabled.calender-picker-indicator.background-image`, `ams.date-input.hover.calender-picker-indicator.background-image`, `ams.date-input.calender-picker-indicator.background-image`, `ams.date-input.calender-picker-indicator.cursor`.
+
+
+### Features
+
+* **Menu:** Make background blue and add prop to toggle appearance ([#2244](https://github.com/Amsterdam/design-system/issues/2244)) ([f1cf29b](https://github.com/Amsterdam/design-system/commit/f1cf29b8db185d7bea50a63f287dd736d848eafe))
+
+
+### Bug Fixes
+
+* **Date Input, Time Input:** Add and use tokens that spell ‘calendar’ correctly ([#2229](https://github.com/Amsterdam/design-system/issues/2229)) ([9a1d432](https://github.com/Amsterdam/design-system/commit/9a1d432a0f2e726093a3cafabbf525f4734cc403))
+
 ## [2.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v1.0.1...design-system-tokens-v2.0.0) (2025-09-17)
 
 
@@ -12,14 +41,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Deprecations
 
-The following tokens will be removed in the next major release. If you use them in your code, please delete them.
+The following tokens will be removed in release 4.0.0. If you use them in your code, please delete them.
 
 * `ams.accordion.panel.*` and some tokens in `ams.accordion.button`
 * `ams.checkbox.hover.text-decoration-thickness` and `ams.checkbox.rectangle.*`
 * `ams.color.interactive.secondary`
 * `ams.icon.heading-0.*`
 * `ams.page-heading.*`
-* `ams.standalone-link.with-icon.*`, `ams.standalone-link.hover.text-decoration-thickness`  and `ams.standalone-link.hover.text-underline-offset` 
+* `ams.standalone-link.with-icon.*`, `ams.standalone-link.hover.text-decoration-thickness`  and `ams.standalone-link.hover.text-underline-offset`
 * `ams.table-of-contents.*`
 * `ams.typography.heading.0.*` and `ams.typography.heading.6.*`
 

package/README.md

@@ -209,7 +209,7 @@ const tokens = { ...spaciousTokens, ...compactTokens }
 
 ## Usage in Figma
 
-The tokens are used in our [Figma Library](https://www.figma.com/file/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?type=design&node-id=741-19633&mode=design&t=N8P3h3W67O0KNdga-0) as well.
+The tokens are used in our [Figma Library](https://www.figma.com/community/file/1530535540611888495/amsterdam-design-system-community-edition) as well.
 
 ## Updating
 

package/dist/index.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/dist/index.d.ts

@@ -595,6 +595,29 @@ declare const tokens: {
       };
     };
     "date-input": {
+      disabled: {
+        "calender-picker-indicator": {
+          "background-image": DesignToken;
+        };
+        color: DesignToken;
+        cursor: DesignToken;
+        "calendar-picker-indicator": {
+          "background-image": DesignToken;
+        };
+      };
+      hover: {
+        "calender-picker-indicator": {
+          "background-image": DesignToken;
+        };
+        "box-shadow": DesignToken;
+        "calendar-picker-indicator": {
+          "background-image": DesignToken;
+        };
+      };
+      "calender-picker-indicator": {
+        "background-image": DesignToken;
+        cursor: DesignToken;
+      };
       "background-color": DesignToken;
       "border-color": DesignToken;
       "border-style": DesignToken;
@@ -607,19 +630,6 @@ declare const tokens: {
       "outline-offset": DesignToken;
       "padding-block": DesignToken;
       "padding-inline": DesignToken;
-      disabled: {
-        color: DesignToken;
-        cursor: DesignToken;
-        "calender-picker-indicator": {
-          "background-image": DesignToken;
-        };
-      };
-      hover: {
-        "box-shadow": DesignToken;
-        "calender-picker-indicator": {
-          "background-image": DesignToken;
-        };
-      };
       invalid: {
         "border-color": DesignToken;
         hover: {
@@ -627,7 +637,7 @@ declare const tokens: {
           "box-shadow": DesignToken;
         };
       };
-      "calender-picker-indicator": {
+      "calendar-picker-indicator": {
         "background-image": DesignToken;
         cursor: DesignToken;
       };
@@ -721,6 +731,9 @@ declare const tokens: {
         "line-height": DesignToken;
         "margin-block-end": DesignToken;
         "text-wrap": DesignToken;
+        "in-fieldset": {
+          "font-weight": DesignToken;
+        };
       };
     };
     field: {
@@ -857,6 +870,9 @@ declare const tokens: {
     };
     hint: {
       "font-weight": DesignToken;
+      "in-fieldset": {
+        color: DesignToken;
+      };
     };
     "icon-button": {
       color: DesignToken;
@@ -971,6 +987,9 @@ declare const tokens: {
       "font-weight": DesignToken;
       "line-height": DesignToken;
       "text-wrap": DesignToken;
+      "in-fieldset": {
+        "font-weight": DesignToken;
+      };
     };
     "link-list": {
       gap: DesignToken;
@@ -1055,11 +1074,19 @@ declare const tokens: {
       "background-color": DesignToken;
     };
     menu: {
-      "font-family": DesignToken;
-      "font-size": DesignToken;
-      "font-weight": DesignToken;
-      "line-height": DesignToken;
       link: {
+        contrast: {
+          color: DesignToken;
+          hover: {
+            color: DesignToken;
+          };
+        };
+        inverse: {
+          color: DesignToken;
+          hover: {
+            color: DesignToken;
+          };
+        };
         color: DesignToken;
         gap: DesignToken;
         "outline-offset": DesignToken;
@@ -1072,19 +1099,21 @@ declare const tokens: {
           color: DesignToken;
           "text-decoration-line": DesignToken;
         };
-        contrast: {
-          color: DesignToken;
-          hover: {
-            color: DesignToken;
-          };
-        };
-        inverse: {
-          color: DesignToken;
-          hover: {
-            color: DesignToken;
-          };
+        wide: {
+          gap: DesignToken;
         };
       };
+      "background-color": DesignToken;
+      "font-family": DesignToken;
+      "font-size": DesignToken;
+      "font-weight": DesignToken;
+      "line-height": DesignToken;
+      "padding-block": DesignToken;
+      wide: {
+        "max-inline-size": DesignToken;
+        "padding-block": DesignToken;
+        "padding-inline": DesignToken;
+      };
       list: {
         gap: DesignToken;
       };
@@ -1199,6 +1228,7 @@ declare const tokens: {
           };
         };
         link: {
+          gap: DesignToken;
           "text-decoration-line": DesignToken;
           "text-decoration-thickness": DesignToken;
           "text-underline-offset": DesignToken;
@@ -1226,6 +1256,12 @@ declare const tokens: {
     page: {
       "background-color": DesignToken;
       "max-inline-size": DesignToken;
+      "with-menu": {
+        "max-inline-size": DesignToken;
+        "area-skip-link": {
+          "margin-inline-end": DesignToken;
+        };
+      };
     };
     pagination: {
       "font-family": DesignToken;
@@ -1692,6 +1728,29 @@ declare const tokens: {
       };
     };
     "time-input": {
+      disabled: {
+        "calender-picker-indicator": {
+          "background-image": DesignToken;
+        };
+        color: DesignToken;
+        cursor: DesignToken;
+        "calendar-picker-indicator": {
+          "background-image": DesignToken;
+        };
+      };
+      hover: {
+        "calender-picker-indicator": {
+          "background-image": DesignToken;
+        };
+        "box-shadow": DesignToken;
+        "calendar-picker-indicator": {
+          "background-image": DesignToken;
+        };
+      };
+      "calender-picker-indicator": {
+        "background-image": DesignToken;
+        cursor: DesignToken;
+      };
       "background-color": DesignToken;
       "border-color": DesignToken;
       "border-style": DesignToken;
@@ -1704,19 +1763,6 @@ declare const tokens: {
       "outline-offset": DesignToken;
       "padding-block": DesignToken;
       "padding-inline": DesignToken;
-      disabled: {
-        color: DesignToken;
-        cursor: DesignToken;
-        "calender-picker-indicator": {
-          "background-image": DesignToken;
-        };
-      };
-      hover: {
-        "box-shadow": DesignToken;
-        "calender-picker-indicator": {
-          "background-image": DesignToken;
-        };
-      };
       invalid: {
         "border-color": DesignToken;
         hover: {
@@ -1724,7 +1770,7 @@ declare const tokens: {
           "box-shadow": DesignToken;
         };
       };
-      "calender-picker-indicator": {
+      "calendar-picker-indicator": {
         "background-image": DesignToken;
         cursor: DesignToken;
       };