@amsterdam/design-system-tokens 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -368,6 +368,20 @@ export const amsColumnGapMedium = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsColumnGapLarge = "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsColumnGapXLarge =
   "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)";
+export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsDateInputDisabledColor = "#767676";
+export const amsDateInputDisabledCursor = "not-allowed";
+export const amsDateInputDisabledCalendarPickerIndicatorBackgroundImage =
+  "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>\")";
+export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsDateInputHoverCalendarPickerIndicatorBackgroundImage =
+  "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>\")";
+export const amsDateInputCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsDateInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
 export const amsDateInputBackgroundColor = "#ffffff";
 export const amsDateInputBorderColor = "currentColor";
 export const amsDateInputBorderStyle = "solid";
@@ -383,20 +397,13 @@ export const amsDateInputPaddingBlock =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsDateInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsDateInputDisabledColor = "#767676";
-export const amsDateInputDisabledCursor = "not-allowed";
-export const amsDateInputDisabledCalenderPickerIndicatorBackgroundImage =
-  "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>\")";
-export const amsDateInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
-export const amsDateInputHoverCalenderPickerIndicatorBackgroundImage =
-  "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>\")";
 export const amsDateInputInvalidBorderColor = "#ec0000";
 export const amsDateInputInvalidHoverBorderColor = "#b70000";
 export const amsDateInputInvalidHoverBoxShadow =
   "inset 0 0 0 0.0625rem #b70000";
-export const amsDateInputCalenderPickerIndicatorBackgroundImage =
+export const amsDateInputCalendarPickerIndicatorBackgroundImage =
   "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>\")";
-export const amsDateInputCalenderPickerIndicatorCursor = "pointer";
+export const amsDateInputCalendarPickerIndicatorCursor = "pointer";
 export const amsDescriptionListColor = "#181818";
 export const amsDescriptionListColumnGap =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
@@ -681,11 +688,11 @@ export const amsLogoEmblemColor = "#ec0000";
 export const amsLogoSubsiteColor = "#181818";
 export const amsLogoTitleColor = "#ec0000";
 export const amsMarkBackgroundColor = "#ffe600";
-export const amsMenuFontFamily = "'Amsterdam Sans', Arial, sans-serif";
-export const amsMenuFontSize = "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
-export const amsMenuFontWeight = "400";
-export const amsMenuLineHeight = "1.8";
-export const amsMenuLinkColor = "#004699";
+export const amsMenuLinkContrastColor = "#181818"; // The menu has a dark background now, so this is no longer needed.
+export const amsMenuLinkContrastHoverColor = "#181818"; // The menu has a dark background now, so this is no longer needed.
+export const amsMenuLinkInverseColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
+export const amsMenuLinkInverseHoverColor = "#ffffff"; // The menu has a dark background now, so this is no longer needed.
+export const amsMenuLinkColor = "#ffffff";
 export const amsMenuLinkGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsMenuLinkOutlineOffset = "0.25rem";
 export const amsMenuLinkPaddingBlock =
@@ -695,12 +702,21 @@ export const amsMenuLinkPaddingInline =
 export const amsMenuLinkTextDecorationLine = "none";
 export const amsMenuLinkTextDecorationThickness = "0.125rem";
 export const amsMenuLinkTextUnderlineOffset = "0.15625rem";
-export const amsMenuLinkHoverColor = "#003677";
+export const amsMenuLinkHoverColor = "#ffffff";
 export const amsMenuLinkHoverTextDecorationLine = "underline";
-export const amsMenuLinkContrastColor = "#181818";
-export const amsMenuLinkContrastHoverColor = "#181818";
-export const amsMenuLinkInverseColor = "#ffffff";
-export const amsMenuLinkInverseHoverColor = "#ffffff";
+export const amsMenuLinkWideGap =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
+export const amsMenuBackgroundColor = "#004699";
+export const amsMenuFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsMenuFontSize = "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
+export const amsMenuFontWeight = "400";
+export const amsMenuLineHeight = "1.8";
+export const amsMenuPaddingBlock = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
+export const amsMenuWideMaxInlineSize = "8rem";
+export const amsMenuWidePaddingBlock =
+  "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)";
+export const amsMenuWidePaddingInline =
+  "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsMenuListGap = "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
 export const amsOrderedListColor = "#181818";
 export const amsOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -1119,6 +1135,20 @@ export const amsTextInputInvalidHoverBorderColor = "#b70000";
 export const amsTextInputInvalidHoverBoxShadow =
   "inset 0 0 0 0.0625rem #b70000";
 export const amsTextInputPlaceholderColor = "#767676";
+export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsTimeInputDisabledColor = "#767676";
+export const amsTimeInputDisabledCursor = "not-allowed";
+export const amsTimeInputDisabledCalendarPickerIndicatorBackgroundImage =
+  "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>\")";
+export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
+export const amsTimeInputHoverCalendarPickerIndicatorBackgroundImage =
+  "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>\")";
+export const amsTimeInputCalenderPickerIndicatorBackgroundImage =
+  "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
+export const amsTimeInputCalenderPickerIndicatorCursor = "pointer"; // Use the token with ‘calendar’ spelled correctly instead
 export const amsTimeInputBackgroundColor = "#ffffff";
 export const amsTimeInputBorderColor = "currentColor";
 export const amsTimeInputBorderStyle = "solid";
@@ -1134,20 +1164,13 @@ export const amsTimeInputPaddingBlock =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsTimeInputPaddingInline =
   "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)";
-export const amsTimeInputDisabledColor = "#767676";
-export const amsTimeInputDisabledCursor = "not-allowed";
-export const amsTimeInputDisabledCalenderPickerIndicatorBackgroundImage =
-  "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>\")";
-export const amsTimeInputHoverBoxShadow = "inset 0 0 0 0.0625rem";
-export const amsTimeInputHoverCalenderPickerIndicatorBackgroundImage =
-  "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>\")";
 export const amsTimeInputInvalidBorderColor = "#ec0000";
 export const amsTimeInputInvalidHoverBorderColor = "#b70000";
 export const amsTimeInputInvalidHoverBoxShadow =
   "inset 0 0 0 0.0625rem #b70000";
-export const amsTimeInputCalenderPickerIndicatorBackgroundImage =
+export const amsTimeInputCalendarPickerIndicatorBackgroundImage =
   "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>\")";
-export const amsTimeInputCalenderPickerIndicatorCursor = "pointer";
+export const amsTimeInputCalendarPickerIndicatorCursor = "pointer";
 export const amsUnorderedListColor = "#181818";
 export const amsUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsUnorderedListFontSize =

package/dist/index.scss

@@ -91,9 +91,12 @@ $ams-button-tertiary-border-color: transparent;
 $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;
@@ -118,6 +121,7 @@ $ams-link-line-height: inherit;
 $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.
@@ -134,9 +138,12 @@ $ams-switch-background-color: #767676;
 $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.
@@ -364,11 +371,12 @@ $ams-column-gap-small: $ams-space-s;
 $ams-column-gap-medium: $ams-space-m;
 $ams-column-gap-large: $ams-space-l;
 $ams-column-gap-x-large: $ams-space-xl;
+$ams-date-input-disabled-cursor: $ams-cursor-disabled;
+$ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
 $ams-date-input-border-color: $ams-inputs-border-color;
 $ams-date-input-border-style: $ams-inputs-border-style;
 $ams-date-input-line-height: $ams-inputs-line-height;
-$ams-date-input-disabled-cursor: $ams-cursor-disabled;
-$ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
+$ams-date-input-calendar-picker-indicator-cursor: $ams-cursor-interactive;
 $ams-description-list-color: $ams-color-text;
 $ams-description-list-column-gap: $ams-space-l;
 $ams-description-list-font-family: $ams-typography-font-family;
@@ -529,10 +537,6 @@ $ams-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
 $ams-logo-block-size: $ams-space-xl;
 $ams-logo-subsite-color: $ams-color-text;
 $ams-mark-background-color: $ams-color-highlight-yellow;
-$ams-menu-font-family: $ams-typography-font-family;
-$ams-menu-font-size: $ams-typography-body-text-font-size;
-$ams-menu-font-weight: $ams-typography-body-text-font-weight;
-$ams-menu-line-height: $ams-typography-body-text-line-height;
 $ams-menu-link-gap: $ams-space-s;
 $ams-menu-link-outline-offset: $ams-focus-outline-offset;
 $ams-menu-link-padding-block: $ams-space-s;
@@ -541,6 +545,14 @@ $ams-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-menu-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-menu-link-wide-gap: $ams-space-xs;
+$ams-menu-background-color: $ams-color-interactive;
+$ams-menu-font-family: $ams-typography-font-family;
+$ams-menu-font-size: $ams-typography-body-text-font-size;
+$ams-menu-font-weight: $ams-typography-body-text-font-weight;
+$ams-menu-line-height: $ams-typography-body-text-line-height;
+$ams-menu-padding-block: $ams-space-m;
+$ams-menu-wide-padding-inline: $ams-space-s;
 $ams-menu-list-gap: $ams-space-m;
 $ams-ordered-list-color: $ams-color-text;
 $ams-ordered-list-font-family: $ams-typography-font-family;
@@ -765,11 +777,12 @@ $ams-text-input-border-color: $ams-inputs-border-color;
 $ams-text-input-border-style: $ams-inputs-border-style;
 $ams-text-input-line-height: $ams-inputs-line-height;
 $ams-text-input-disabled-cursor: $ams-cursor-disabled;
+$ams-time-input-disabled-cursor: $ams-cursor-disabled;
+$ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
 $ams-time-input-border-color: $ams-inputs-border-color;
 $ams-time-input-border-style: $ams-inputs-border-style;
 $ams-time-input-line-height: $ams-inputs-line-height;
-$ams-time-input-disabled-cursor: $ams-cursor-disabled;
-$ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
+$ams-time-input-calendar-picker-indicator-cursor: $ams-cursor-interactive;
 $ams-unordered-list-color: $ams-color-text;
 $ams-unordered-list-font-family: $ams-typography-font-family;
 $ams-unordered-list-font-size: $ams-typography-body-text-font-size;
@@ -789,6 +802,8 @@ $ams-card-link-color: $ams-links-color;
 $ams-card-link-hover-color: $ams-links-hover-color;
 $ams-checkbox-icon-container-block-size: calc($ams-checkbox-font-size * $ams-checkbox-line-height);
 $ams-checkbox-icon-container-inline-size: $ams-checkbox-font-size;
+$ams-date-input-disabled-color: $ams-inputs-disabled-color;
+$ams-date-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-date-input-background-color: $ams-inputs-background-color;
 $ams-date-input-border-width: $ams-inputs-border-width;
 $ams-date-input-color: $ams-inputs-color;
@@ -798,8 +813,6 @@ $ams-date-input-font-weight: $ams-inputs-font-weight;
 $ams-date-input-outline-offset: $ams-inputs-outline-offset;
 $ams-date-input-padding-block: $ams-inputs-padding-block;
 $ams-date-input-padding-inline: $ams-inputs-padding-inline;
-$ams-date-input-disabled-color: $ams-inputs-disabled-color;
-$ams-date-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-date-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-date-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-date-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
@@ -847,12 +860,13 @@ $ams-link-contrast-color: $ams-links-contrast-color;
 $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
 $ams-link-inverse-color: $ams-links-inverse-color;
 $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
-$ams-menu-link-color: $ams-links-color;
-$ams-menu-link-hover-color: $ams-links-hover-color;
-$ams-menu-link-contrast-color: $ams-links-contrast-color;
-$ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color;
-$ams-menu-link-inverse-color: $ams-links-inverse-color;
-$ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color;
+$ams-menu-link-contrast-color: $ams-links-contrast-color; // The menu has a dark background now, so this is no longer needed.
+$ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color; // The menu has a dark background now, so this is no longer needed.
+$ams-menu-link-inverse-color: $ams-links-inverse-color; // The menu has a dark background now, so this is no longer needed.
+$ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color; // The menu has a dark background now, so this is no longer needed.
+$ams-menu-link-color: $ams-links-inverse-color;
+$ams-menu-link-hover-color: $ams-links-inverse-hover-color;
+$ams-menu-wide-padding-block: calc($ams-logo-block-size + 2 * $ams-page-header-padding-block) $ams-space-m;
 $ams-page-footer-menu-padding-inline: $ams-grid-padding-inline;
 $ams-page-footer-menu-medium-padding-inline: $ams-grid-medium-padding-inline;
 $ams-page-footer-menu-wide-padding-inline: $ams-grid-wide-padding-inline;
@@ -950,6 +964,8 @@ $ams-text-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-text-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-text-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
 $ams-text-input-placeholder-color: $ams-inputs-placeholder-color;
+$ams-time-input-disabled-color: $ams-inputs-disabled-color;
+$ams-time-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-time-input-background-color: $ams-inputs-background-color;
 $ams-time-input-border-width: $ams-inputs-border-width;
 $ams-time-input-color: $ams-inputs-color;
@@ -959,8 +975,6 @@ $ams-time-input-font-weight: $ams-inputs-font-weight;
 $ams-time-input-outline-offset: $ams-inputs-outline-offset;
 $ams-time-input-padding-block: $ams-inputs-padding-block;
 $ams-time-input-padding-inline: $ams-inputs-padding-inline;
-$ams-time-input-disabled-color: $ams-inputs-disabled-color;
-$ams-time-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
 $ams-time-input-invalid-border-color: $ams-inputs-invalid-border-color;
 $ams-time-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
 $ams-time-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;

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. */
@@ -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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.1.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/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": {