@amsterdam/design-system-tokens 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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 +32,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. */
@@ -136,9 +140,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 +373,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);
@@ -531,10 +539,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 +547,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);
@@ -767,11 +779,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 +804,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 +815,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 +862,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);
@@ -952,6 +966,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 +977,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;
       };
@@ -1055,11 +1065,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 +1090,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;
       };
@@ -1692,6 +1712,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 +1747,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 +1754,7 @@ declare const tokens: {
           "box-shadow": DesignToken;
         };
       };
-      "calender-picker-indicator": {
+      "calendar-picker-indicator": {
         "background-image": DesignToken;
         cursor: DesignToken;
       };

package/dist/index.json

@@ -579,6 +579,29 @@
       }
     },
     "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>\")"
+        },
+        "color": "#767676",
+        "cursor": "not-allowed",
+        "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>\")"
+        }
+      },
+      "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>\")"
+        },
+        "box-shadow": "inset 0 0 0 0.0625rem",
+        "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>\")"
+        }
+      },
+      "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>\")",
+        "cursor": "pointer"
+      },
       "background-color": "#ffffff",
       "border-color": "currentColor",
       "border-style": "solid",
@@ -591,19 +614,6 @@
       "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
       "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
-      "disabled": {
-        "color": "#767676",
-        "cursor": "not-allowed",
-        "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>\")"
-        }
-      },
-      "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem",
-        "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>\")"
-        }
-      },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
@@ -611,7 +621,7 @@
           "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
-      "calender-picker-indicator": {
+      "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>\")",
         "cursor": "pointer"
       }
@@ -1039,23 +1049,7 @@
       "background-color": "#ffe600"
     },
     "menu": {
-      "font-family": "'Amsterdam Sans', Arial, sans-serif",
-      "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
-      "font-weight": "400",
-      "line-height": "1.8",
       "link": {
-        "color": "#004699",
-        "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "outline-offset": "0.25rem",
-        "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "text-decoration-line": "none",
-        "text-decoration-thickness": "0.125rem",
-        "text-underline-offset": "0.15625rem",
-        "hover": {
-          "color": "#003677",
-          "text-decoration-line": "underline"
-        },
         "contrast": {
           "color": "#181818",
           "hover": {
@@ -1067,8 +1061,34 @@
           "hover": {
             "color": "#ffffff"
           }
+        },
+        "color": "#ffffff",
+        "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "outline-offset": "0.25rem",
+        "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
+        "text-decoration-line": "none",
+        "text-decoration-thickness": "0.125rem",
+        "text-underline-offset": "0.15625rem",
+        "hover": {
+          "color": "#ffffff",
+          "text-decoration-line": "underline"
+        },
+        "wide": {
+          "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)"
         }
       },
+      "background-color": "#004699",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-size": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
+      "font-weight": "400",
+      "line-height": "1.8",
+      "padding-block": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+      "wide": {
+        "max-inline-size": "8rem",
+        "padding-block": "calc(clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem) + 2 * clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)) clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
+        "padding-inline": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)"
+      },
       "list": {
         "gap": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
       }
@@ -1676,6 +1696,29 @@
       }
     },
     "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>\")"
+        },
+        "color": "#767676",
+        "cursor": "not-allowed",
+        "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>\")"
+        }
+      },
+      "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>\")"
+        },
+        "box-shadow": "inset 0 0 0 0.0625rem",
+        "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>\")"
+        }
+      },
+      "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>\")",
+        "cursor": "pointer"
+      },
       "background-color": "#ffffff",
       "border-color": "currentColor",
       "border-style": "solid",
@@ -1688,19 +1731,6 @@
       "outline-offset": "0.25rem",
       "padding-block": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
       "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
-      "disabled": {
-        "color": "#767676",
-        "cursor": "not-allowed",
-        "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>\")"
-        }
-      },
-      "hover": {
-        "box-shadow": "inset 0 0 0 0.0625rem",
-        "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>\")"
-        }
-      },
       "invalid": {
         "border-color": "#ec0000",
         "hover": {
@@ -1708,7 +1738,7 @@
           "box-shadow": "inset 0 0 0 0.0625rem #b70000"
         }
       },
-      "calender-picker-indicator": {
+      "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>\")",
         "cursor": "pointer"
       }