@amsterdam/design-system-tokens 2.0.0 → 2.2.0

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"
       }
@@ -704,7 +714,10 @@
         "font-weight": "800",
         "line-height": "1.3",
         "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "text-wrap": "balance"
+        "text-wrap": "balance",
+        "in-fieldset": {
+          "font-weight": "400"
+        }
       }
     },
     "field": {
@@ -840,7 +853,10 @@
       }
     },
     "hint": {
-      "font-weight": "400"
+      "font-weight": "400",
+      "in-fieldset": {
+        "color": "#767676"
+      }
     },
     "icon-button": {
       "color": "#004699",
@@ -954,7 +970,10 @@
       "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
       "font-weight": "800",
       "line-height": "1.3",
-      "text-wrap": "balance"
+      "text-wrap": "balance",
+      "in-fieldset": {
+        "font-weight": "400"
+      }
     },
     "link-list": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
@@ -1039,23 +1058,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 +1070,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)"
       }
@@ -1183,6 +1212,7 @@
           }
         },
         "link": {
+          "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
           "text-underline-offset": "0.15625rem",
@@ -1209,7 +1239,13 @@
     },
     "page": {
       "background-color": "#ffffff",
-      "max-inline-size": "90rem"
+      "max-inline-size": "90rem",
+      "with-menu": {
+        "max-inline-size": "120rem",
+        "area-skip-link": {
+          "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        }
+      }
     },
     "pagination": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -1676,6 +1712,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 +1747,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 +1754,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"
       }

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)";
@@ -473,6 +480,7 @@ export const amsFieldSetLegendLineHeight = "1.3";
 export const amsFieldSetLegendMarginBlockEnd =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldSetLegendTextWrap = "balance";
+export const amsFieldSetLegendInFieldsetFontWeight = "400";
 export const amsFieldGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #ec0000";
 export const amsFieldInvalidPaddingInlineStart =
@@ -570,6 +578,7 @@ export const amsHeadingFontWeight = "800";
 export const amsHeadingTextWrap = "balance";
 export const amsHeadingInverseColor = "#ffffff";
 export const amsHintFontWeight = "400";
+export const amsHintInFieldsetColor = "#767676";
 export const amsIconButtonColor = "#004699";
 export const amsIconButtonCursor = "pointer";
 export const amsIconButtonOutlineOffset = "0.25rem";
@@ -636,6 +645,7 @@ export const amsLabelFontSize =
 export const amsLabelFontWeight = "800";
 export const amsLabelLineHeight = "1.3";
 export const amsLabelTextWrap = "balance";
+export const amsLabelInFieldsetFontWeight = "400";
 export const amsLinkListGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsLinkListLinkColor = "#004699";
 export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -681,11 +691,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 +705,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";
@@ -787,6 +806,8 @@ export const amsPageHeaderMenuItemOutlineOffset = "0.25rem";
 export const amsPageHeaderMenuItemPaddingBlock =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuItemHoverColor = "#003677";
+export const amsPageHeaderMenuLinkGap =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuLinkTextDecorationLine = "none";
 export const amsPageHeaderMenuLinkTextDecorationThickness = "0.125rem";
 export const amsPageHeaderMenuLinkTextUnderlineOffset = "0.15625rem";
@@ -805,6 +826,9 @@ export const amsPageHeadingTextWrap = "balance";
 export const amsPageHeadingInverseColor = "#ffffff";
 export const amsPageBackgroundColor = "#ffffff";
 export const amsPageMaxInlineSize = "90rem";
+export const amsPageWithMenuMaxInlineSize = "120rem";
+export const amsPageWithMenuAreaSkipLinkMarginInlineEnd =
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
 export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPaginationFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";
@@ -1119,6 +1143,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 +1172,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.
@@ -126,6 +130,7 @@ $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less
 $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>");
@@ -134,9 +139,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 +372,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;
@@ -411,6 +420,7 @@ $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
 $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
 $ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
+$ams-field-set-legend-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
 $ams-field-gap: $ams-space-s;
 $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
 $ams-field-invalid-padding-inline-start: $ams-space-m;
@@ -461,6 +471,7 @@ $ams-heading-font-weight: $ams-typography-heading-font-weight;
 $ams-heading-text-wrap: $ams-typography-heading-text-wrap;
 $ams-heading-inverse-color: $ams-color-text-inverse;
 $ams-hint-font-weight: $ams-typography-body-text-font-weight;
+$ams-hint-in-fieldset-color: $ams-color-text-secondary;
 $ams-icon-button-color: $ams-color-interactive;
 $ams-icon-button-cursor: $ams-cursor-interactive;
 $ams-icon-button-outline-offset: $ams-focus-outline-offset;
@@ -505,6 +516,7 @@ $ams-label-font-family: $ams-typography-font-family;
 $ams-label-font-weight: $ams-typography-heading-font-weight;
 $ams-label-line-height: $ams-typography-heading-3-line-height;
 $ams-label-text-wrap: $ams-typography-heading-text-wrap;
+$ams-label-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
 $ams-link-list-gap: $ams-space-s;
 $ams-link-list-link-font-family: $ams-typography-font-family;
 $ams-link-list-link-font-size: $ams-typography-body-text-font-size;
@@ -529,10 +541,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 +549,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;
@@ -585,6 +601,7 @@ $ams-page-header-menu-item-font-weight: $ams-typography-body-text-font-weight;
 $ams-page-header-menu-item-line-height: $ams-typography-body-text-line-height;
 $ams-page-header-menu-item-outline-offset: $ams-focus-outline-offset;
 $ams-page-header-menu-item-padding-block: $ams-space-xs;
+$ams-page-header-menu-link-gap: $ams-space-xs;
 $ams-page-header-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
@@ -765,11 +782,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 +807,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 +818,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 +865,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;
@@ -864,6 +883,7 @@ $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
 $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
 $ams-page-header-menu-item-color: $ams-links-color;
 $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
+$ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
 $ams-password-input-background-color: $ams-inputs-background-color;
@@ -950,6 +970,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 +981,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;