@amsterdam/design-system-tokens 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.14.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.13.0...design-system-tokens-v0.14.0) (2025-01-10)
+
+### ⚠ BREAKING CHANGES
+
+* Add collapsible menu to Header ([#1784](https://github.com/Amsterdam/design-system/issues/1784))
+* Disallow blue Spotlight and make purple the default ([#1798](https://github.com/Amsterdam/design-system/issues/1798))
+* Make active Tab look less like a primary Button ([#1773](https://github.com/Amsterdam/design-system/issues/1773))
+* Replace Aspect Ratio component with utility classes and prop on Image ([#1593](https://github.com/Amsterdam/design-system/issues/1593))
+* Use new Button features for SearchField ([#1695](https://github.com/Amsterdam/design-system/issues/1695))
+
+### Features
+
+* Add collapsible menu to Header ([#1784](https://github.com/Amsterdam/design-system/issues/1784)) ([44ce6d8](https://github.com/Amsterdam/design-system/commit/44ce6d8ac5a3fc48fd7de258c48fbafdd9928b9f))
+* Add Figure component ([#1795](https://github.com/Amsterdam/design-system/issues/1795)) ([3505dcc](https://github.com/Amsterdam/design-system/commit/3505dcca183551dce318046f54ad4570cc6e6d2b))
+* Add File List component to display below a File Input ([#1751](https://github.com/Amsterdam/design-system/issues/1751)) ([0192404](https://github.com/Amsterdam/design-system/commit/01924048c53805eb1536d2aa9b5454bcd44375b8))
+* Add Icon to Error Message ([#1746](https://github.com/Amsterdam/design-system/issues/1746)) ([eca5fe4](https://github.com/Amsterdam/design-system/commit/eca5fe4ed0325b01860f816c70247c26e2158f9c))
+* Allow an icon to display with an inverse color ([#1787](https://github.com/Amsterdam/design-system/issues/1787)) ([1f5d166](https://github.com/Amsterdam/design-system/commit/1f5d16697a1b332b6c1bbd830cda1220010a78d6))
+* Disallow blue Spotlight and make purple the default ([#1798](https://github.com/Amsterdam/design-system/issues/1798)) ([8d1c266](https://github.com/Amsterdam/design-system/commit/8d1c266f3f7e90b02bcb240c41256578a80c7668))
+* Let Footer set its own background colour ([#1797](https://github.com/Amsterdam/design-system/issues/1797)) ([310f595](https://github.com/Amsterdam/design-system/commit/310f59553a9ad057f3fe80b23bfda5acf108906d))
+* Make active Tab look less like a primary Button ([#1773](https://github.com/Amsterdam/design-system/issues/1773)) ([2ec0102](https://github.com/Amsterdam/design-system/commit/2ec010286dd64ecebefa040a0ab18cf192542d0f))
+* Make border of Radio thicker when hovering ([#1696](https://github.com/Amsterdam/design-system/issues/1696)) ([8839012](https://github.com/Amsterdam/design-system/commit/88390124aa5197f6c784dae4fc2a7c3e18d75ca6))
+* Replace Aspect Ratio component with utility classes and prop on Image ([#1593](https://github.com/Amsterdam/design-system/issues/1593)) ([766efba](https://github.com/Amsterdam/design-system/commit/766efbac45e8831a19f3e99bd9d0550028d8d4fd))
+* Use new Button features for SearchField ([#1695](https://github.com/Amsterdam/design-system/issues/1695)) ([7b275d0](https://github.com/Amsterdam/design-system/commit/7b275d0c803b309095ba7c425bb6bf04630775a9))
+
+## [0.13.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.12.0...design-system-tokens-v0.13.0) (2024-10-28)
+
+### ⚠ BREAKING CHANGES
+
+* Rename Description List ‘details’ to ’description’ ([#1703](https://github.com/Amsterdam/design-system/issues/1703))
+
+### Bug Fixes
+
+* Rename Description List ‘details’ to ’description’ ([#1703](https://github.com/Amsterdam/design-system/issues/1703)) ([139d8cb](https://github.com/Amsterdam/design-system/commit/139d8cb5c8fc4ffc93a2283abeabda6b8364b7cc))
+
 ## [0.12.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.11.0...design-system-tokens-v0.12.0) (2024-10-25)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -82,7 +82,7 @@ Examples:
 :root {
   --ams-color-primary-red: #ec0000;
   --ams-space-md: 1rem;
-  --ams-proportion-wide: 4/3;
+  --ams-aspect-ratio-wide: 4/3;
   --ams-border-width-lg: 0.1875rem;
 }
 ```
@@ -146,16 +146,22 @@ Note that redefining the value of a token is a much better approach than redecla
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
+As they are already prefixed, the namespace that Sass would assign isn’t necessary.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/index.scss"
+@use "@amsterdam/design-system-tokens/dist/index.scss" as *;
 ```
 
-Import the compact tokens if you need them.
-Sass will override spacious values automatically.
+Import the compact tokens if needed.
+Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass
-@import "@amsterdam/design-system-tokens/dist/compact.scss"
+@use "@amsterdam/design-system-tokens/dist/compact.scss";
+
+.class {
+  padding-block: compact.$ams-space-md;
+}
 ```
 
 ## Usage in JavaScript
@@ -165,7 +171,7 @@ Here, tokens start their name with a prefix of `ams.`.
 Use ‘dot notation’ or square brackets to access the tokens.
 
 <!-- prettier-ignore -->
-```ts
+```tsx
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const buttonBackgroundColor = tokens.ams.color["primary-blue"]
@@ -176,9 +182,9 @@ Import and merge the compact tokens if you need them.
 Then you can use the tokens in scripting or css-in-js libraries.
 
 <!-- prettier-ignore -->
-```ts
-import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
+```tsx
 import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
+import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
 
 const tokens = { ...spaciousTokens, ...compactTokens }
 ```

package/build.js

@@ -82,6 +82,9 @@ function generateSharedConfig(mode) {
 }
 
 const defaultMode = new StyleDictionary({
+  log: {
+    verbosity: 'verbose',
+  },
   source: [
     // exclude non-default modes from source
     `./src/**/!(*.${modes.join(`|*.`)}).tokens.json`,
@@ -93,6 +96,9 @@ defaultMode.buildAllPlatforms()
 
 modes.map((mode) => {
   const styleDictionary = new StyleDictionary({
+    log: {
+      verbosity: 'verbose',
+    },
     source: [`./src/**/*.${mode}.tokens.json`],
     platforms: generateSharedConfig(mode),
   })

package/dist/compact.d.ts

@@ -15,48 +15,48 @@ declare interface DesignToken {
 }
 
 declare const tokens: {
-  "ams": {
-    "space": {
-      "xs": DesignToken,
-      "sm": DesignToken,
-      "md": DesignToken,
-      "lg": DesignToken,
-      "xl": DesignToken,
-      "grid": {
-        "xs": DesignToken,
-        "sm": DesignToken,
-        "md": DesignToken,
-        "lg": DesignToken,
-        "xl": DesignToken
-      }
-    },
-    "text": {
-      "level": {
+  ams: {
+    space: {
+      xs: DesignToken;
+      sm: DesignToken;
+      md: DesignToken;
+      lg: DesignToken;
+      xl: DesignToken;
+      grid: {
+        xs: DesignToken;
+        sm: DesignToken;
+        md: DesignToken;
+        lg: DesignToken;
+        xl: DesignToken;
+      };
+    };
+    text: {
+      level: {
         "0": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "1": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "2": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "3": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "4": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "5": {
-          "font-size": DesignToken
-        },
+          "font-size": DesignToken;
+        };
         "6": {
-          "font-size": DesignToken
-        }
-      }
-    },
-    "grid": {
-      "padding-inline": DesignToken
-    }
-  }
-}
+          "font-size": DesignToken;
+        };
+      };
+    };
+    grid: {
+      "padding-inline": DesignToken;
+    };
+  };
+};

package/dist/compact.mjs

@@ -7,16 +7,26 @@ export const amsSpaceSm = "0.5rem";
 export const amsSpaceMd = "1rem";
 export const amsSpaceLg = "1.5rem";
 export const amsSpaceXl = "2rem";
-export const amsSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
-export const amsSpaceGridSm = "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)";
+export const amsSpaceGridXs =
+  "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
+export const amsSpaceGridSm =
+  "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)";
 export const amsSpaceGridMd = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
-export const amsSpaceGridLg = "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)";
+export const amsSpaceGridLg =
+  "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)";
 export const amsSpaceGridXl = "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)";
-export const amsTextLevel0FontSize = "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)";
-export const amsTextLevel1FontSize = "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
-export const amsTextLevel2FontSize = "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
-export const amsTextLevel3FontSize = "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
-export const amsTextLevel4FontSize = "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
+export const amsTextLevel0FontSize =
+  "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)";
+export const amsTextLevel1FontSize =
+  "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
+export const amsTextLevel2FontSize =
+  "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
+export const amsTextLevel3FontSize =
+  "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
+export const amsTextLevel4FontSize =
+  "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)";
 export const amsTextLevel5FontSize = "1rem";
-export const amsTextLevel6FontSize = "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
-export const amsGridPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)";
+export const amsTextLevel6FontSize =
+  "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
+export const amsGridPaddingInline =
+  "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)";

package/dist/index.css

@@ -3,6 +3,12 @@
  */
 
 :root {
+  --ams-aspect-ratio-x-tall: 9 / 16;
+  --ams-aspect-ratio-tall: 3 / 4;
+  --ams-aspect-ratio-square: 1 / 1;
+  --ams-aspect-ratio-wide: 4 / 3;
+  --ams-aspect-ratio-x-wide: 16 / 9;
+  --ams-aspect-ratio-2x-wide: 16 / 5;
   --ams-border-width-sm: 0.0625rem;
   --ams-border-width-md: 0.125rem;
   --ams-border-width-lg: 0.1875rem;
@@ -22,12 +28,6 @@
   --ams-color-neutral-grey1: #E8E8E8;
   --ams-color-neutral-grey2: #BEBEBE;
   --ams-color-neutral-grey3: #767676;
-  --ams-proportion-x-tall: 9 / 16;
-  --ams-proportion-tall: 3 / 4;
-  --ams-proportion-square: 1 / 1;
-  --ams-proportion-wide: 4 / 3;
-  --ams-proportion-x-wide: 16 / 9;
-  --ams-proportion-2x-wide: 16 / 5;
   --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
   --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
   --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -87,6 +87,7 @@
   --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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-dialog-border: 0;
   --ams-dialog-max-inline-size: 48rem;
+  --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
   --ams-grid-column-count: 4;
   --ams-grid-medium-column-count: 8;
   --ams-grid-wide-column-count: 12;
@@ -99,7 +100,8 @@
   --ams-link-inline-font-family: inherit;
   --ams-link-inline-font-size: inherit;
   --ams-link-inline-line-height: inherit;
-  --ams-logo-block-size: 2.5rem;
+  --ams-logo-block-size: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem); /* This is the same size as Grid space medium */
+  --ams-logo-min-block-size: 2.5rem;
   --ams-mega-menu-list-category-column-width: 20rem;
   --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. */
@@ -108,6 +110,8 @@
   --ams-ordered-list-ordered-list-padding-block-end: 0;
   --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
   --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-radio-hover-indicator-stroke-width: 3px;
+  --ams-radio-circle-stroke-width: 2px;
   --ams-radio-icon-container-inline-size: 1.5rem;
   --ams-row-gap-no: 0;
   --ams-screen-wide-max-inline-size: 100rem;
@@ -150,24 +154,17 @@
   --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
   --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
   --ams-action-group-gap: var(--ams-space-md);
+  --ams-alert-background-color: var(--ams-color-primary-white);
   --ams-alert-border-width: var(--ams-border-width-xl);
   --ams-alert-gap: var(--ams-space-sm);
   --ams-alert-padding-block: var(--ams-space-md);
   --ams-alert-padding-inline: var(--ams-space-lg);
   --ams-alert-error-border-color: var(--ams-color-primary-red);
-  --ams-alert-info-border-color: var(--ams-color-primary-blue);
+  --ams-alert-info-border-color: var(--ams-color-blue);
   --ams-alert-success-border-color: var(--ams-color-dark-green);
   --ams-alert-warning-border-color: var(--ams-color-orange);
-  --ams-alert-close-fill: var(--ams-color-primary-black);
-  --ams-alert-close-hover-fill: var(--ams-color-primary-blue);
   --ams-alert-content-gap: var(--ams-space-sm);
-  --ams-aspect-ratio-x-tall: var(--ams-proportion-x-tall);
-  --ams-aspect-ratio-tall: var(--ams-proportion-tall);
-  --ams-aspect-ratio-square: var(--ams-proportion-square);
-  --ams-aspect-ratio-wide: var(--ams-proportion-wide);
-  --ams-aspect-ratio-x-wide: var(--ams-proportion-x-wide);
-  --ams-aspect-ratio-2x-wide: var(--ams-proportion-2x-wide);
-  --ams-avatar-aspect-ratio: var(--ams-proportion-square);
+  --ams-avatar-aspect-ratio: var(--ams-aspect-ratio-square);
   --ams-avatar-font-family: var(--ams-text-font-family);
   --ams-avatar-font-size: var(--ams-text-level-6-font-size);
   --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
@@ -268,8 +265,8 @@
   --ams-button-primary-background-color: var(--ams-color-primary-blue);
   --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-primary-color: var(--ams-color-primary-white);
-  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey2);
-  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
+  --ams-button-primary-disabled-background-color: var(--ams-color-neutral-grey3);
+  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
   --ams-button-primary-hover-background-color: var(--ams-color-dark-blue);
   --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-secondary-background-color: var(--ams-color-primary-white);
@@ -278,13 +275,13 @@
   --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
   --ams-button-secondary-hover-color: var(--ams-color-dark-blue);
   --ams-button-secondary-disabled-background-color: var(--ams-color-primary-white);
-  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
-  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
+  --ams-button-secondary-disabled-color: var(--ams-color-neutral-grey3);
   --ams-button-secondary-focus-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-button-tertiary-color: var(--ams-color-primary-blue);
   --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
   --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
-  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey3);
   --ams-button-icon-only-padding-block: var(--ams-space-sm);
   --ams-button-icon-only-padding-inline: var(--ams-space-sm);
   --ams-card-gap: var(--ams-space-sm);
@@ -345,8 +342,8 @@
   --ams-date-input-padding-block: var(--ams-space-sm);
   --ams-date-input-padding-inline: var(--ams-space-md);
   --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-date-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -358,8 +355,8 @@
   --ams-description-list-line-height: var(--ams-text-level-5-line-height);
   --ams-description-list-row-gap: var(--ams-space-sm);
   --ams-description-list-term-font-weight: var(--ams-text-font-weight-bold);
-  --ams-description-list-details-font-weight: var(--ams-text-font-weight-normal);
-  --ams-description-list-details-padding-inline-start: var(--ams-space-lg);
+  --ams-description-list-description-font-weight: var(--ams-text-font-weight-normal);
+  --ams-description-list-description-padding-inline-start: var(--ams-space-lg);
   --ams-dialog-background-color: var(--ams-color-primary-white);
   --ams-dialog-gap: var(--ams-space-md);
   --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-grid-md));
@@ -371,6 +368,7 @@
   --ams-error-message-font-family: var(--ams-text-font-family);
   --ams-error-message-font-size: var(--ams-text-level-6-font-size);
   --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
+  --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-text-level-6-line-height);
   --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
   --ams-field-set-invalid-padding-inline-start: var(--ams-space-md);
@@ -383,6 +381,13 @@
   --ams-field-gap: var(--ams-space-sm);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
   --ams-field-invalid-padding-inline-start: var(--ams-space-md);
+  --ams-figure-gap: var(--ams-space-sm);
+  --ams-figure-caption-color: var(--ams-color-primary-black);
+  --ams-figure-caption-font-family: var(--ams-text-font-family);
+  --ams-figure-caption-font-size: var(--ams-text-level-6-font-size);
+  --ams-figure-caption-font-weight: var(--ams-text-font-weight-normal);
+  --ams-figure-caption-line-height: var(--ams-text-level-6-line-height);
+  --ams-figure-caption-inverse-color: var(--ams-color-primary-white);
   --ams-file-input-background-color: var(--ams-color-primary-white);
   --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
   --ams-file-input-color: var(--ams-color-primary-black);
@@ -394,7 +399,7 @@
   --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-file-input-padding-block: var(--ams-space-md);
   --ams-file-input-padding-inline: var(--ams-space-md);
-  --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-file-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
   --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
@@ -405,10 +410,19 @@
   --ams-file-input-file-selector-button-padding-inline: var(--ams-space-md);
   --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
   --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
-  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
-  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey3);
+  --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
+  --ams-file-list-gap: var(--ams-space-md);
+  --ams-file-list-padding-block: var(--ams-space-md);
+  --ams-file-list-file-font-family: var(--ams-text-font-family);
+  --ams-file-list-file-font-size: var(--ams-text-level-6-font-size);
+  --ams-file-list-file-font-weight: var(--ams-text-font-weight-normal);
+  --ams-file-list-file-gap: var(--ams-space-sm);
+  --ams-file-list-file-line-height: var(--ams-text-level-6-line-height);
+  --ams-file-list-file-details-color: var(--ams-color-neutral-grey3);
+  --ams-footer-top-background-color: var(--ams-color-primary-blue);
   --ams-form-error-list-outline-offset: var(--ams-focus-outline-offset);
   --ams-gap-xs: var(--ams-space-grid-xs);
   --ams-gap-sm: var(--ams-space-grid-sm);
@@ -423,9 +437,25 @@
   --ams-grid-row-gap-sm: var(--ams-space-grid-sm);
   --ams-grid-row-gap-md: var(--ams-space-grid-md);
   --ams-grid-row-gap-lg: var(--ams-space-grid-lg);
-  --ams-header-column-gap: var(--ams-space-grid-md); /* Must have the same value as `ams.grid.column-gap`. */
-  --ams-header-padding-block: var(--ams-space-md);
+  --ams-header-padding-block: var(--ams-space-grid-sm);
+  --ams-header-branding-column-gap: var(--ams-space-md);
+  --ams-header-branding-row-gap: var(--ams-space-grid-xs);
   --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-header-mega-menu-button-label-open-font-weight: var(--ams-text-font-weight-bold);
+  --ams-header-menu-column-gap: var(--ams-space-lg);
+  --ams-header-menu-row-gap: var(--ams-space-xs);
+  --ams-header-menu-item-column-gap: var(--ams-space-xs);
+  --ams-header-menu-item-font-family: var(--ams-text-font-family);
+  --ams-header-menu-item-font-size: var(--ams-text-level-5-font-size);
+  --ams-header-menu-item-font-weight: var(--ams-text-font-weight-normal);
+  --ams-header-menu-item-line-height: var(--ams-text-level-5-line-height);
+  --ams-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
+  --ams-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-header-menu-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
+  --ams-header-menu-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
+  --ams-header-menu-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
+  --ams-header-navigation-column-gap: var(--ams-space-lg);
+  --ams-header-navigation-row-gap: var(--ams-space-grid-md);
   --ams-heading-color: var(--ams-color-primary-black);
   --ams-heading-font-family: var(--ams-text-font-family);
   --ams-heading-font-weight: var(--ams-text-font-weight-bold);
@@ -446,16 +476,17 @@
   --ams-icon-button-color: var(--ams-color-primary-blue);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-icon-button-hover-color: var(--ams-color-dark-blue);
-  --ams-icon-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-icon-button-contrast-color-color: var(--ams-color-primary-black);
   --ams-icon-button-contrast-color-hover-color: var(--ams-color-primary-black);
-  --ams-icon-button-contrast-color-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-contrast-color-disabled-color: var(--ams-color-neutral-grey3);
   --ams-icon-button-inverse-color-background-color: var(--ams-color-primary-blue);
   --ams-icon-button-inverse-color-color: var(--ams-color-primary-white);
   --ams-icon-button-inverse-color-hover-background-color: var(--ams-color-dark-blue);
   --ams-icon-button-inverse-color-hover-color: var(--ams-color-primary-white);
   --ams-icon-button-inverse-color-disabled-color: var(--ams-color-primary-white);
-  --ams-icon-button-inverse-color-disabled-background-color: var(--ams-color-neutral-grey2);
+  --ams-icon-button-inverse-color-disabled-background-color: var(--ams-color-neutral-grey3);
+  --ams-icon-inverse-color: var(--ams-color-primary-white);
   --ams-icon-size-3-font-size: var(--ams-text-level-3-font-size);
   --ams-icon-size-3-line-height: var(--ams-text-level-3-line-height);
   --ams-icon-size-4-font-size: var(--ams-text-level-4-font-size);
@@ -470,6 +501,7 @@
   --ams-image-slider-thumbnails-gap: var(--ams-space-xs);
   --ams-image-slider-thumbnails-thumbnail-cursor: var(--ams-action-activate-cursor);
   --ams-image-slider-thumbnails-thumbnail-outline-offset: var(--ams-focus-outline-offset);
+  --ams-image-aspect-ratio: var(--ams-aspect-ratio-x-wide);
   --ams-label-color: var(--ams-color-primary-black);
   --ams-label-font-family: var(--ams-text-font-family);
   --ams-label-font-size: var(--ams-text-level-4-font-size);
@@ -502,8 +534,8 @@
   --ams-link-standalone-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-link-standalone-hover-text-underline-offset: var(--ams-link-appearance-regular-hover-text-underline-offset);
   --ams-logo-emblem-color: var(--ams-color-primary-red);
-  --ams-logo-title-color: var(--ams-color-primary-red);
   --ams-logo-subsite-color: var(--ams-color-primary-black);
+  --ams-logo-title-color: var(--ams-color-primary-red);
   --ams-margin-xs: var(--ams-space-grid-xs);
   --ams-margin-sm: var(--ams-space-grid-sm);
   --ams-margin-md: var(--ams-space-grid-md);
@@ -573,8 +605,8 @@
   --ams-password-input-padding-block: var(--ams-space-sm);
   --ams-password-input-padding-inline: var(--ams-space-md);
   --ams-password-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-password-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-password-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-password-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -594,6 +626,9 @@
   --ams-radio-checked-indicator-hover-fill: var(--ams-color-dark-blue);
   --ams-radio-checked-indicator-invalid-fill: var(--ams-color-primary-red);
   --ams-radio-checked-indicator-invalid-hover-fill: var(--ams-color-primary-red);
+  --ams-radio-hover-indicator-hover-stroke: var(--ams-color-primary-blue);
+  --ams-radio-hover-indicator-invalid-hover-stroke: var(--ams-color-primary-red);
+  --ams-radio-circle-fill: var(--ams-color-primary-white);
   --ams-radio-circle-stroke: var(--ams-color-primary-blue);
   --ams-radio-circle-disabled-stroke: var(--ams-color-neutral-grey3);
   --ams-radio-circle-disabled-invalid-stroke: var(--ams-color-neutral-grey3);
@@ -610,12 +645,6 @@
   --ams-row-gap-lg: var(--ams-space-lg);
   --ams-row-gap-xl: var(--ams-space-xl);
   --ams-screen-background-color: var(--ams-color-primary-white);
-  --ams-search-field-button-background-color: var(--ams-color-primary-blue);
-  --ams-search-field-button-color: var(--ams-color-primary-white);
-  --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
-  --ams-search-field-button-padding-block: var(--ams-space-sm);
-  --ams-search-field-button-padding-inline: var(--ams-space-sm);
-  --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
   --ams-search-field-input-background-color: var(--ams-color-primary-white);
   --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
   --ams-search-field-input-color: var(--ams-color-primary-black);
@@ -644,12 +673,12 @@
   --ams-select-outline-offset: var(--ams-focus-outline-offset);
   --ams-select-padding-block: var(--ams-space-sm);
   --ams-select-padding-inline: var(--ams-space-md) calc(2 * var(--ams-space-md) + 1em);
-  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-select-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-select-disabled-color: var(--ams-color-neutral-grey3);
   --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
-  --ams-select-option-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-select-option-disabled-color: var(--ams-color-neutral-grey3);
   --ams-skip-link-background-color: var(--ams-color-primary-blue);
   --ams-skip-link-color: var(--ams-color-primary-white);
   --ams-skip-link-font-family: var(--ams-text-font-family);
@@ -660,13 +689,12 @@
   --ams-skip-link-padding-block: var(--ams-space-sm);
   --ams-skip-link-padding-inline: var(--ams-space-md);
   --ams-skip-link-hover-background-color: var(--ams-color-dark-blue);
+  --ams-spotlight-background-color: var(--ams-color-purple);
   --ams-spotlight-blue-background-color: var(--ams-color-blue);
-  --ams-spotlight-dark-blue-background-color: var(--ams-color-primary-blue);
   --ams-spotlight-dark-green-background-color: var(--ams-color-dark-green);
   --ams-spotlight-green-background-color: var(--ams-color-green);
   --ams-spotlight-magenta-background-color: var(--ams-color-magenta);
   --ams-spotlight-orange-background-color: var(--ams-color-orange);
-  --ams-spotlight-purple-background-color: var(--ams-color-purple);
   --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
   --ams-switch-background-color: var(--ams-color-neutral-grey3);
   --ams-switch-font-family: var(--ams-text-font-family);
@@ -674,7 +702,7 @@
   --ams-switch-thumb-background-color: var(--ams-color-primary-white);
   --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
   --ams-switch-checked-background-color: var(--ams-color-primary-blue);
-  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
+  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey3);
   --ams-table-of-contents-font-family: var(--ams-text-font-family);
   --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
   --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
@@ -696,13 +724,12 @@
   --ams-table-font-weight: var(--ams-text-font-weight-normal);
   --ams-table-line-height: var(--ams-text-level-5-line-height);
   --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
-  --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
+  --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid #d1d1d1; /* TODO: replace with color token */
   --ams-table-cell-padding-block: var(--ams-space-sm);
   --ams-table-cell-padding-inline: var(--ams-space-md);
   --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
   --ams-tabs-gap: var(--ams-space-md);
-  --ams-tabs-list-background-color: var(--ams-color-primary-white);
-  --ams-tabs-list-border-block-end: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
+  --ams-tabs-list-box-shadow: inset 0 calc(var(--ams-border-width-md) * -1) #d1d1d1; /* TODO: replace with color token */
   --ams-tabs-button-color: var(--ams-color-primary-blue);
   --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
   --ams-tabs-button-font-family: var(--ams-text-font-family);
@@ -712,10 +739,11 @@
   --ams-tabs-button-padding-block: var(--ams-space-sm);
   --ams-tabs-button-padding-inline: var(--ams-space-md);
   --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
-  --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
-  --ams-tabs-button-selected-background-color: var(--ams-color-primary-blue);
-  --ams-tabs-button-selected-color: var(--ams-color-primary-white);
-  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-tabs-button-hover-box-shadow: inset 0 calc(var(--ams-border-width-md) * -1) var(--ams-color-dark-blue);
+  --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1) var(--ams-color-primary-blue);
+  --ams-tabs-button-selected-color: var(--ams-color-primary-blue);
+  --ams-tabs-button-selected-font-weight: var(--ams-text-font-weight-bold);
+  --ams-tabs-button-disabled-color: var(--ams-color-neutral-grey3);
   --ams-tabs-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-text-area-background-color: var(--ams-color-primary-white);
   --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
@@ -724,13 +752,13 @@
   --ams-text-area-font-size: var(--ams-text-level-5-font-size);
   --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
   --ams-text-area-line-height: var(--ams-text-level-5-line-height);
-  --ams-text-area-padding-block: var(--ams-space-sm);
   --ams-text-area-min-block-size: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
   --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
+  --ams-text-area-padding-block: var(--ams-space-sm);
   --ams-text-area-padding-inline: var(--ams-space-md);
   --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
-  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-text-area-disabled-color: var(--ams-color-neutral-grey3);
   --ams-text-area-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
@@ -747,8 +775,8 @@
   --ams-text-input-padding-block: var(--ams-space-sm);
   --ams-text-input-padding-inline: var(--ams-space-md);
   --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-text-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -764,8 +792,8 @@
   --ams-time-input-padding-block: var(--ams-space-sm);
   --ams-time-input-padding-inline: var(--ams-space-md);
   --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
+  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey3);
+  --ams-time-input-disabled-color: var(--ams-color-neutral-grey3);
   --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -800,6 +828,10 @@
   --ams-card-link-color: var(--ams-link-appearance-color);
   --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
+  --ams-header-menu-item-color: var(--ams-link-appearance-color);
+  --ams-header-menu-item-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-header-menu-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-color: var(--ams-link-appearance-color);
   --ams-link-list-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-link-list-link-hover-color: var(--ams-link-appearance-hover-color);