@amsterdam/design-system-tokens 0.13.0 → 0.14.0

package/dist/index.scss

@@ -1,6 +1,12 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$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;
@@ -20,12 +26,6 @@ $ams-color-magenta: #E50082;
 $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);
@@ -85,6 +85,7 @@ $ams-date-input-disabled-calender-picker-indicator-background-image: url("data:i
 $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;
@@ -97,7 +98,8 @@ $ams-image-slider-thumbnails-thumbnail-hover-opacity: 100%;
 $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.
@@ -106,6 +108,8 @@ $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
 $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;
@@ -148,24 +152,17 @@ $ams-accordion-button-padding-block: $ams-space-sm;
 $ams-accordion-button-focus-outline-offset: $ams-focus-outline-offset;
 $ams-accordion-button-hover-color: $ams-color-dark-blue;
 $ams-action-group-gap: $ams-space-md;
+$ams-alert-background-color: $ams-color-primary-white;
 $ams-alert-border-width: $ams-border-width-xl;
 $ams-alert-gap: $ams-space-sm;
 $ams-alert-padding-block: $ams-space-md;
 $ams-alert-padding-inline: $ams-space-lg;
 $ams-alert-error-border-color: $ams-color-primary-red;
-$ams-alert-info-border-color: $ams-color-primary-blue;
+$ams-alert-info-border-color: $ams-color-blue;
 $ams-alert-success-border-color: $ams-color-dark-green;
 $ams-alert-warning-border-color: $ams-color-orange;
-$ams-alert-close-fill: $ams-color-primary-black;
-$ams-alert-close-hover-fill: $ams-color-primary-blue;
 $ams-alert-content-gap: $ams-space-sm;
-$ams-aspect-ratio-x-tall: $ams-proportion-x-tall;
-$ams-aspect-ratio-tall: $ams-proportion-tall;
-$ams-aspect-ratio-square: $ams-proportion-square;
-$ams-aspect-ratio-wide: $ams-proportion-wide;
-$ams-aspect-ratio-x-wide: $ams-proportion-x-wide;
-$ams-aspect-ratio-2x-wide: $ams-proportion-2x-wide;
-$ams-avatar-aspect-ratio: $ams-proportion-square;
+$ams-avatar-aspect-ratio: $ams-aspect-ratio-square;
 $ams-avatar-font-family: $ams-text-font-family;
 $ams-avatar-font-size: $ams-text-level-6-font-size;
 $ams-avatar-font-weight: $ams-text-font-weight-normal;
@@ -266,8 +263,8 @@ $ams-button-forced-color-mode-border: $ams-border-width-md solid;
 $ams-button-primary-background-color: $ams-color-primary-blue;
 $ams-button-primary-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
 $ams-button-primary-color: $ams-color-primary-white;
-$ams-button-primary-disabled-background-color: $ams-color-neutral-grey2;
-$ams-button-primary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
+$ams-button-primary-disabled-background-color: $ams-color-neutral-grey3;
+$ams-button-primary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey3;
 $ams-button-primary-hover-background-color: $ams-color-dark-blue;
 $ams-button-primary-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-dark-blue;
 $ams-button-secondary-background-color: $ams-color-primary-white;
@@ -276,13 +273,13 @@ $ams-button-secondary-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-pr
 $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
 $ams-button-secondary-hover-color: $ams-color-dark-blue;
 $ams-button-secondary-disabled-background-color: $ams-color-primary-white;
-$ams-button-secondary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
-$ams-button-secondary-disabled-color: $ams-color-neutral-grey2;
+$ams-button-secondary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey3;
+$ams-button-secondary-disabled-color: $ams-color-neutral-grey3;
 $ams-button-secondary-focus-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
 $ams-button-tertiary-color: $ams-color-primary-blue;
 $ams-button-tertiary-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-dark-blue;
 $ams-button-tertiary-hover-color: $ams-color-dark-blue;
-$ams-button-tertiary-disabled-color: $ams-color-neutral-grey2;
+$ams-button-tertiary-disabled-color: $ams-color-neutral-grey3;
 $ams-button-icon-only-padding-block: $ams-space-sm;
 $ams-button-icon-only-padding-inline: $ams-space-sm;
 $ams-card-gap: $ams-space-sm;
@@ -343,8 +340,8 @@ $ams-date-input-outline-offset: $ams-focus-outline-offset;
 $ams-date-input-padding-block: $ams-space-sm;
 $ams-date-input-padding-inline: $ams-space-md;
 $ams-date-input-disabled-background-color: $ams-color-primary-white;
-$ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-date-input-disabled-color: $ams-color-neutral-grey2;
+$ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-date-input-disabled-color: $ams-color-neutral-grey3;
 $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-date-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
@@ -369,6 +366,7 @@ $ams-error-message-color: $ams-color-primary-red;
 $ams-error-message-font-family: $ams-text-font-family;
 $ams-error-message-font-size: $ams-text-level-6-font-size;
 $ams-error-message-font-weight: $ams-text-font-weight-normal;
+$ams-error-message-gap: $ams-space-xs;
 $ams-error-message-line-height: $ams-text-level-6-line-height;
 $ams-field-set-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
 $ams-field-set-invalid-padding-inline-start: $ams-space-md;
@@ -381,6 +379,13 @@ $ams-field-set-legend-margin-block-end: $ams-space-md;
 $ams-field-gap: $ams-space-sm;
 $ams-field-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
 $ams-field-invalid-padding-inline-start: $ams-space-md;
+$ams-figure-gap: $ams-space-sm;
+$ams-figure-caption-color: $ams-color-primary-black;
+$ams-figure-caption-font-family: $ams-text-font-family;
+$ams-figure-caption-font-size: $ams-text-level-6-font-size;
+$ams-figure-caption-font-weight: $ams-text-font-weight-normal;
+$ams-figure-caption-line-height: $ams-text-level-6-line-height;
+$ams-figure-caption-inverse-color: $ams-color-primary-white;
 $ams-file-input-background-color: $ams-color-primary-white;
 $ams-file-input-border: $ams-border-width-sm dashed $ams-color-neutral-grey3;
 $ams-file-input-color: $ams-color-primary-black;
@@ -392,7 +397,7 @@ $ams-file-input-line-height: $ams-text-level-5-line-height;
 $ams-file-input-outline-offset: $ams-focus-outline-offset;
 $ams-file-input-padding-block: $ams-space-md;
 $ams-file-input-padding-inline: $ams-space-md;
-$ams-file-input-disabled-color: $ams-color-neutral-grey2;
+$ams-file-input-disabled-color: $ams-color-neutral-grey3;
 $ams-file-input-disabled-cursor: $ams-action-disabled-cursor;
 $ams-file-input-file-selector-button-background-color: $ams-color-primary-white;
 $ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
@@ -403,10 +408,19 @@ $ams-file-input-file-selector-button-padding-block: $ams-space-sm;
 $ams-file-input-file-selector-button-padding-inline: $ams-space-md;
 $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
 $ams-file-input-file-selector-button-hover-color: $ams-color-dark-blue;
-$ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
-$ams-file-input-file-selector-button-disabled-color: $ams-color-neutral-grey2;
+$ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey3;
+$ams-file-input-file-selector-button-disabled-color: $ams-color-neutral-grey3;
 $ams-file-input-file-selector-button-disabled-cursor: $ams-action-disabled-cursor;
 $ams-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-md solid;
+$ams-file-list-gap: $ams-space-md;
+$ams-file-list-padding-block: $ams-space-md;
+$ams-file-list-file-font-family: $ams-text-font-family;
+$ams-file-list-file-font-size: $ams-text-level-6-font-size;
+$ams-file-list-file-font-weight: $ams-text-font-weight-normal;
+$ams-file-list-file-gap: $ams-space-sm;
+$ams-file-list-file-line-height: $ams-text-level-6-line-height;
+$ams-file-list-file-details-color: $ams-color-neutral-grey3;
+$ams-footer-top-background-color: $ams-color-primary-blue;
 $ams-form-error-list-outline-offset: $ams-focus-outline-offset;
 $ams-gap-xs: $ams-space-grid-xs;
 $ams-gap-sm: $ams-space-grid-sm;
@@ -421,9 +435,25 @@ $ams-grid-padding-inline: $ams-space-grid-lg;
 $ams-grid-row-gap-sm: $ams-space-grid-sm;
 $ams-grid-row-gap-md: $ams-space-grid-md;
 $ams-grid-row-gap-lg: $ams-space-grid-lg;
-$ams-header-column-gap: $ams-space-grid-md; // Must have the same value as `ams.grid.column-gap`.
-$ams-header-padding-block: $ams-space-md;
+$ams-header-padding-block: $ams-space-grid-sm;
+$ams-header-branding-column-gap: $ams-space-md;
+$ams-header-branding-row-gap: $ams-space-grid-xs;
 $ams-header-logo-link-outline-offset: $ams-focus-outline-offset;
+$ams-header-mega-menu-button-label-open-font-weight: $ams-text-font-weight-bold;
+$ams-header-menu-column-gap: $ams-space-lg;
+$ams-header-menu-row-gap: $ams-space-xs;
+$ams-header-menu-item-column-gap: $ams-space-xs;
+$ams-header-menu-item-font-family: $ams-text-font-family;
+$ams-header-menu-item-font-size: $ams-text-level-5-font-size;
+$ams-header-menu-item-font-weight: $ams-text-font-weight-normal;
+$ams-header-menu-item-line-height: $ams-text-level-5-line-height;
+$ams-header-menu-item-outline-offset: $ams-focus-outline-offset;
+$ams-header-menu-item-padding-block: $ams-space-xs;
+$ams-header-menu-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
+$ams-header-menu-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
+$ams-header-menu-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
+$ams-header-navigation-column-gap: $ams-space-lg;
+$ams-header-navigation-row-gap: $ams-space-grid-md;
 $ams-heading-color: $ams-color-primary-black;
 $ams-heading-font-family: $ams-text-font-family;
 $ams-heading-font-weight: $ams-text-font-weight-bold;
@@ -444,16 +474,17 @@ $ams-hint-color: $ams-color-neutral-grey3;
 $ams-icon-button-color: $ams-color-primary-blue;
 $ams-icon-button-outline-offset: $ams-focus-outline-offset;
 $ams-icon-button-hover-color: $ams-color-dark-blue;
-$ams-icon-button-disabled-color: $ams-color-neutral-grey2;
+$ams-icon-button-disabled-color: $ams-color-neutral-grey3;
 $ams-icon-button-contrast-color-color: $ams-color-primary-black;
 $ams-icon-button-contrast-color-hover-color: $ams-color-primary-black;
-$ams-icon-button-contrast-color-disabled-color: $ams-color-neutral-grey2;
+$ams-icon-button-contrast-color-disabled-color: $ams-color-neutral-grey3;
 $ams-icon-button-inverse-color-background-color: $ams-color-primary-blue;
 $ams-icon-button-inverse-color-color: $ams-color-primary-white;
 $ams-icon-button-inverse-color-hover-background-color: $ams-color-dark-blue;
 $ams-icon-button-inverse-color-hover-color: $ams-color-primary-white;
 $ams-icon-button-inverse-color-disabled-color: $ams-color-primary-white;
-$ams-icon-button-inverse-color-disabled-background-color: $ams-color-neutral-grey2;
+$ams-icon-button-inverse-color-disabled-background-color: $ams-color-neutral-grey3;
+$ams-icon-inverse-color: $ams-color-primary-white;
 $ams-icon-size-3-font-size: $ams-text-level-3-font-size;
 $ams-icon-size-3-line-height: $ams-text-level-3-line-height;
 $ams-icon-size-4-font-size: $ams-text-level-4-font-size;
@@ -468,6 +499,7 @@ $ams-image-slider-scroller-outline-offset: $ams-focus-outline-offset;
 $ams-image-slider-thumbnails-gap: $ams-space-xs;
 $ams-image-slider-thumbnails-thumbnail-cursor: $ams-action-activate-cursor;
 $ams-image-slider-thumbnails-thumbnail-outline-offset: $ams-focus-outline-offset;
+$ams-image-aspect-ratio: $ams-aspect-ratio-x-wide;
 $ams-label-color: $ams-color-primary-black;
 $ams-label-font-family: $ams-text-font-family;
 $ams-label-font-size: $ams-text-level-4-font-size;
@@ -500,8 +532,8 @@ $ams-link-standalone-text-decoration-line: $ams-link-appearance-regular-text-dec
 $ams-link-standalone-text-underline-offset: $ams-link-appearance-text-underline-offset;
 $ams-link-standalone-hover-text-underline-offset: $ams-link-appearance-regular-hover-text-underline-offset;
 $ams-logo-emblem-color: $ams-color-primary-red;
-$ams-logo-title-color: $ams-color-primary-red;
 $ams-logo-subsite-color: $ams-color-primary-black;
+$ams-logo-title-color: $ams-color-primary-red;
 $ams-margin-xs: $ams-space-grid-xs;
 $ams-margin-sm: $ams-space-grid-sm;
 $ams-margin-md: $ams-space-grid-md;
@@ -571,8 +603,8 @@ $ams-password-input-outline-offset: $ams-focus-outline-offset;
 $ams-password-input-padding-block: $ams-space-sm;
 $ams-password-input-padding-inline: $ams-space-md;
 $ams-password-input-disabled-background-color: $ams-color-primary-white;
-$ams-password-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-password-input-disabled-color: $ams-color-neutral-grey2;
+$ams-password-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-password-input-disabled-color: $ams-color-neutral-grey3;
 $ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-password-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
@@ -592,6 +624,9 @@ $ams-radio-checked-indicator-disabled-invalid-hover-fill: $ams-color-neutral-gre
 $ams-radio-checked-indicator-hover-fill: $ams-color-dark-blue;
 $ams-radio-checked-indicator-invalid-fill: $ams-color-primary-red;
 $ams-radio-checked-indicator-invalid-hover-fill: $ams-color-primary-red;
+$ams-radio-hover-indicator-hover-stroke: $ams-color-primary-blue;
+$ams-radio-hover-indicator-invalid-hover-stroke: $ams-color-primary-red;
+$ams-radio-circle-fill: $ams-color-primary-white;
 $ams-radio-circle-stroke: $ams-color-primary-blue;
 $ams-radio-circle-disabled-stroke: $ams-color-neutral-grey3;
 $ams-radio-circle-disabled-invalid-stroke: $ams-color-neutral-grey3;
@@ -608,12 +643,6 @@ $ams-row-gap-md: $ams-space-md;
 $ams-row-gap-lg: $ams-space-lg;
 $ams-row-gap-xl: $ams-space-xl;
 $ams-screen-background-color: $ams-color-primary-white;
-$ams-search-field-button-background-color: $ams-color-primary-blue;
-$ams-search-field-button-color: $ams-color-primary-white;
-$ams-search-field-button-outline-offset: $ams-focus-outline-offset;
-$ams-search-field-button-padding-block: $ams-space-sm;
-$ams-search-field-button-padding-inline: $ams-space-sm;
-$ams-search-field-button-hover-background-color: $ams-color-dark-blue;
 $ams-search-field-input-background-color: $ams-color-primary-white;
 $ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
 $ams-search-field-input-color: $ams-color-primary-black;
@@ -642,12 +671,12 @@ $ams-select-line-height: $ams-text-level-5-line-height;
 $ams-select-outline-offset: $ams-focus-outline-offset;
 $ams-select-padding-block: $ams-space-sm;
 $ams-select-padding-inline: $ams-space-md calc(2 * $ams-space-md + 1em);
-$ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-select-disabled-color: $ams-color-neutral-grey2;
+$ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-select-disabled-color: $ams-color-neutral-grey3;
 $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-select-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
-$ams-select-option-disabled-color: $ams-color-neutral-grey2;
+$ams-select-option-disabled-color: $ams-color-neutral-grey3;
 $ams-skip-link-background-color: $ams-color-primary-blue;
 $ams-skip-link-color: $ams-color-primary-white;
 $ams-skip-link-font-family: $ams-text-font-family;
@@ -658,13 +687,12 @@ $ams-skip-link-outline-offset: $ams-focus-outline-offset;
 $ams-skip-link-padding-block: $ams-space-sm;
 $ams-skip-link-padding-inline: $ams-space-md;
 $ams-skip-link-hover-background-color: $ams-color-dark-blue;
+$ams-spotlight-background-color: $ams-color-purple;
 $ams-spotlight-blue-background-color: $ams-color-blue;
-$ams-spotlight-dark-blue-background-color: $ams-color-primary-blue;
 $ams-spotlight-dark-green-background-color: $ams-color-dark-green;
 $ams-spotlight-green-background-color: $ams-color-green;
 $ams-spotlight-magenta-background-color: $ams-color-magenta;
 $ams-spotlight-orange-background-color: $ams-color-orange;
-$ams-spotlight-purple-background-color: $ams-color-purple;
 $ams-spotlight-yellow-background-color: $ams-color-yellow;
 $ams-switch-background-color: $ams-color-neutral-grey3;
 $ams-switch-font-family: $ams-text-font-family;
@@ -672,7 +700,7 @@ $ams-switch-outline-offset: $ams-focus-outline-offset;
 $ams-switch-thumb-background-color: $ams-color-primary-white;
 $ams-switch-thumb-hover-color: $ams-color-dark-blue;
 $ams-switch-checked-background-color: $ams-color-primary-blue;
-$ams-switch-disabled-background-color: $ams-color-neutral-grey2;
+$ams-switch-disabled-background-color: $ams-color-neutral-grey3;
 $ams-table-of-contents-font-family: $ams-text-font-family;
 $ams-table-of-contents-font-size: $ams-text-level-5-font-size;
 $ams-table-of-contents-font-weight: $ams-text-font-weight-normal;
@@ -694,13 +722,12 @@ $ams-table-font-size: $ams-text-level-5-font-size;
 $ams-table-font-weight: $ams-text-font-weight-normal;
 $ams-table-line-height: $ams-text-level-5-line-height;
 $ams-table-caption-font-weight: $ams-text-font-weight-bold;
-$ams-table-cell-border-block-end: $ams-border-width-sm solid $ams-color-neutral-grey1;
+$ams-table-cell-border-block-end: $ams-border-width-sm solid #d1d1d1; // TODO: replace with color token
 $ams-table-cell-padding-block: $ams-space-sm;
 $ams-table-cell-padding-inline: $ams-space-md;
 $ams-table-header-cell-font-weight: $ams-text-font-weight-bold;
 $ams-tabs-gap: $ams-space-md;
-$ams-tabs-list-background-color: $ams-color-primary-white;
-$ams-tabs-list-border-block-end: $ams-border-width-md solid $ams-color-primary-blue;
+$ams-tabs-list-box-shadow: inset 0 calc($ams-border-width-md * -1) #d1d1d1; // TODO: replace with color token
 $ams-tabs-button-color: $ams-color-primary-blue;
 $ams-tabs-button-cursor: $ams-action-activate-cursor;
 $ams-tabs-button-font-family: $ams-text-font-family;
@@ -710,10 +737,11 @@ $ams-tabs-button-line-height: $ams-text-level-5-line-height;
 $ams-tabs-button-padding-block: $ams-space-sm;
 $ams-tabs-button-padding-inline: $ams-space-md;
 $ams-tabs-button-hover-color: $ams-color-dark-blue;
-$ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $ams-color-dark-blue;
-$ams-tabs-button-selected-background-color: $ams-color-primary-blue;
-$ams-tabs-button-selected-color: $ams-color-primary-white;
-$ams-tabs-button-disabled-color: $ams-color-neutral-grey2;
+$ams-tabs-button-hover-box-shadow: inset 0 calc($ams-border-width-md * -1) $ams-color-dark-blue;
+$ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1) $ams-color-primary-blue;
+$ams-tabs-button-selected-color: $ams-color-primary-blue;
+$ams-tabs-button-selected-font-weight: $ams-text-font-weight-bold;
+$ams-tabs-button-disabled-color: $ams-color-neutral-grey3;
 $ams-tabs-button-disabled-cursor: $ams-action-disabled-cursor;
 $ams-text-area-background-color: $ams-color-primary-white;
 $ams-text-area-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
@@ -722,13 +750,13 @@ $ams-text-area-font-family: $ams-text-font-family;
 $ams-text-area-font-size: $ams-text-level-5-font-size;
 $ams-text-area-font-weight: $ams-text-font-weight-normal;
 $ams-text-area-line-height: $ams-text-level-5-line-height;
-$ams-text-area-padding-block: $ams-space-sm;
 $ams-text-area-min-block-size: calc($ams-text-level-5-line-height * 1em + 2 * $ams-text-area-padding-block);
 $ams-text-area-outline-offset: $ams-focus-outline-offset;
+$ams-text-area-padding-block: $ams-space-sm;
 $ams-text-area-padding-inline: $ams-space-md;
 $ams-text-area-disabled-background-color: $ams-color-primary-white;
-$ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-text-area-disabled-color: $ams-color-neutral-grey2;
+$ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-text-area-disabled-color: $ams-color-neutral-grey3;
 $ams-text-area-disabled-cursor: $ams-action-disabled-cursor;
 $ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-text-area-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
@@ -745,8 +773,8 @@ $ams-text-input-outline-offset: $ams-focus-outline-offset;
 $ams-text-input-padding-block: $ams-space-sm;
 $ams-text-input-padding-inline: $ams-space-md;
 $ams-text-input-disabled-background-color: $ams-color-primary-white;
-$ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-text-input-disabled-color: $ams-color-neutral-grey2;
+$ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-text-input-disabled-color: $ams-color-neutral-grey3;
 $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-text-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
@@ -762,8 +790,8 @@ $ams-time-input-outline-offset: $ams-focus-outline-offset;
 $ams-time-input-padding-block: $ams-space-sm;
 $ams-time-input-padding-inline: $ams-space-md;
 $ams-time-input-disabled-background-color: $ams-color-primary-white;
-$ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
-$ams-time-input-disabled-color: $ams-color-neutral-grey2;
+$ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey3;
+$ams-time-input-disabled-color: $ams-color-neutral-grey3;
 $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-time-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
@@ -798,6 +826,10 @@ $ams-breadcrumb-link-text-decoration-thickness: $ams-link-appearance-text-decora
 $ams-card-link-color: $ams-link-appearance-color;
 $ams-card-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-card-link-hover-color: $ams-link-appearance-hover-color;
+$ams-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
+$ams-header-menu-item-color: $ams-link-appearance-color;
+$ams-header-menu-item-hover-color: $ams-link-appearance-hover-color;
+$ams-header-menu-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-list-link-color: $ams-link-appearance-color;
 $ams-link-list-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-list-link-hover-color: $ams-link-appearance-hover-color;