@amsterdam/design-system-tokens 0.15.0 → 1.0.0

package/dist/index.scss

@@ -37,7 +37,7 @@ $ams-color-text-inverse: #ffffff;
 $ams-color-text-secondary: #767676;
 $ams-cursor-disabled: not-allowed;
 $ams-cursor-interactive: pointer;
-$ams-focus-outline-offset: 0.125rem;
+$ams-focus-outline-offset: 0.25rem;
 $ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
 $ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
 $ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -67,6 +67,7 @@ $ams-typography-heading-4-line-height: 1.2928;
 $ams-typography-heading-5-line-height: 1.3345;
 $ams-typography-heading-6-line-height: 1.3776;
 $ams-typography-heading-font-weight: 800;
+$ams-typography-heading-text-wrap: balance;
 $ams-links-text-underline-offset: 0.3333em;
 $ams-links-hover-text-underline-offset: 0.2778em;
 $ams-links-subtle-text-decoration-line: none;
@@ -74,24 +75,33 @@ $ams-links-subtle-hover-text-decoration-line: underline;
 $ams-accordion-button-padding-inline: 0;
 $ams-accordion-panel-padding-block: 0;
 $ams-accordion-panel-padding-inline: 0;
+$ams-alert-border-style: solid;
+$ams-avatar-border-style: solid;
 $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
 $ams-breadcrumb-separator-block-size: 1ex;
 $ams-breadcrumb-separator-inline-size: 1ex;
+$ams-button-border-style: solid;
 $ams-button-tertiary-background-color: transparent;
-$ams-button-tertiary-disabled-background-color: transparent;
-$ams-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
-$ams-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
+$ams-button-tertiary-border-color: transparent;
+$ams-button-tertiary-hover-border-color: currentColor;
+$ams-checkbox-icon-container-inline-size: 1.5rem;
+$ams-date-input-border-color: currentColor;
+$ams-date-input-border-style: solid;
 $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='%23BEBEBE'><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='%23102E62'><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>");
+$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-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;
+$ams-dialog-border-style: solid;
 $ams-dialog-max-inline-size: 48rem;
 $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
 $ams-dialog-body-padding-block: 0;
+$ams-file-input-border-color: currentColor;
+$ams-file-input-border-style: dashed;
+$ams-file-input-file-selector-button-border-color: currentColor;
+$ams-file-input-file-selector-button-border-style: solid;
 $ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
-$ams-footer-spotlight-background-color: #004699;
 $ams-grid-column-count: 4;
 $ams-grid-medium-column-count: 8;
 $ams-grid-wide-column-count: 12;
@@ -101,13 +111,12 @@ $ams-image-slider-thumbnails-thumbnail-background-color: transparent;
 $ams-image-slider-thumbnails-thumbnail-opacity: 40%;
 $ams-image-slider-thumbnails-thumbnail-in-view-opacity: 100%;
 $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-link-font-family: inherit;
+$ams-link-font-size: inherit;
+$ams-link-line-height: inherit;
 $ams-logo-min-block-size: 2.5rem;
 $ams-logo-emblem-color: #ec0000;
 $ams-logo-title-color: #ec0000;
-$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.
 $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
@@ -115,22 +124,32 @@ $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-page-footer-spotlight-background-color: #004699;
+$ams-page-max-inline-size: 100rem;
+$ams-password-input-border-color: currentColor;
+$ams-password-input-border-style: solid;
 $ams-radio-icon-container-inline-size: 1.5rem;
-$ams-screen-wide-max-inline-size: 100rem;
-$ams-screen-x-wide-max-inline-size: 132rem;
+$ams-search-field-input-border-color: currentColor;
+$ams-search-field-input-border-style: solid;
 $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='%23BEBEBE' 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-border-color: currentColor;
+$ams-select-border-style: solid;
+$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>");
+$ams-select-hover-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
 $ams-switch-background-color: #767676;
 $ams-switch-inline-size: 3.5rem;
-$ams-switch-thumb-inline-size: 1.75rem;
 $ams-switch-thumb-block-size: 1.75rem;
-$ams-tabs-button-outline-offset: -0.25rem;
+$ams-switch-thumb-inline-size: 1.75rem;
+$ams-text-area-border-color: currentColor;
+$ams-text-area-border-style: solid;
+$ams-text-input-border-color: currentColor;
+$ams-text-input-border-style: solid;
+$ams-time-input-border-color: currentColor;
+$ams-time-input-border-style: solid;
 $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='%23BEBEBE'><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='%23102E62'><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>");
+$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-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.
@@ -159,25 +178,28 @@ $ams-accordion-button-gap: $ams-space-s;
 $ams-accordion-button-line-height: $ams-typography-heading-4-line-height;
 $ams-accordion-button-outline-offset: $ams-focus-outline-offset;
 $ams-accordion-button-padding-block: $ams-space-s;
+$ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
 $ams-accordion-button-hover-color: $ams-color-interactive-hover;
 $ams-action-group-gap: $ams-space-m;
 $ams-alert-background-color: $ams-color-background;
-$ams-alert-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-info;
-$ams-alert-forced-colors-border-width: $ams-border-width-xl;
+$ams-alert-border-color: $ams-color-feedback-info;
+$ams-alert-border-width: $ams-border-width-xl;
 $ams-alert-severity-indicator-background-color: $ams-color-feedback-info;
 $ams-alert-severity-indicator-padding-block: $ams-space-m;
-$ams-alert-severity-indicator-padding-inline: $ams-space-xs;
+$ams-alert-severity-indicator-padding-inline: $ams-space-s;
 $ams-alert-content-gap: $ams-space-s;
 $ams-alert-content-padding-block: $ams-space-m;
 $ams-alert-content-padding-inline: $ams-space-m;
-$ams-alert-error-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-error;
+$ams-alert-error-border-color: $ams-color-feedback-error;
 $ams-alert-error-severity-indicator-background-color: $ams-color-feedback-error;
-$ams-alert-success-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-success;
+$ams-alert-success-border-color: $ams-color-feedback-success;
 $ams-alert-success-severity-indicator-background-color: $ams-color-feedback-success;
-$ams-alert-warning-box-shadow: inset 0 0 0 $ams-border-width-xl $ams-color-feedback-warning;
+$ams-alert-warning-border-color: $ams-color-feedback-warning;
 $ams-alert-warning-severity-indicator-background-color: $ams-color-feedback-warning;
 $ams-avatar-aspect-ratio: $ams-aspect-ratio-1-1;
 $ams-avatar-background-color: $ams-color-highlight-purple;
+$ams-avatar-border-color: $ams-color-highlight-purple;
+$ams-avatar-border-width: $ams-border-width-m;
 $ams-avatar-color: $ams-color-text-inverse;
 $ams-avatar-font-family: $ams-typography-font-family;
 $ams-avatar-font-size: $ams-typography-body-text-small-font-size;
@@ -187,16 +209,22 @@ $ams-avatar-padding-block: $ams-space-xs;
 $ams-avatar-padding-inline: $ams-space-xs;
 $ams-avatar-forced-colors-border-width: $ams-border-width-m;
 $ams-avatar-azure-background-color: $ams-color-highlight-azure;
-$ams-avatar-azure-color: $ams-color-text;
+$ams-avatar-azure-border-color: $ams-color-highlight-azure;
+$ams-avatar-azure-color: $ams-color-text-inverse;
 $ams-avatar-green-background-color: $ams-color-highlight-green;
+$ams-avatar-green-border-color: $ams-color-highlight-green;
 $ams-avatar-green-color: $ams-color-text-inverse;
 $ams-avatar-lime-background-color: $ams-color-highlight-lime;
+$ams-avatar-lime-border-color: $ams-color-highlight-lime;
 $ams-avatar-lime-color: $ams-color-text;
 $ams-avatar-magenta-background-color: $ams-color-highlight-magenta;
+$ams-avatar-magenta-border-color: $ams-color-highlight-magenta;
 $ams-avatar-magenta-color: $ams-color-text-inverse;
 $ams-avatar-orange-background-color: $ams-color-highlight-orange;
+$ams-avatar-orange-border-color: $ams-color-highlight-orange;
 $ams-avatar-orange-color: $ams-color-text;
 $ams-avatar-yellow-background-color: $ams-color-highlight-yellow;
+$ams-avatar-yellow-border-color: $ams-color-highlight-yellow;
 $ams-avatar-yellow-color: $ams-color-text;
 $ams-badge-background-color: $ams-color-feedback-success;
 $ams-badge-color: $ams-color-text-inverse;
@@ -206,7 +234,7 @@ $ams-badge-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-badge-line-height: $ams-typography-body-text-line-height;
 $ams-badge-padding-inline: $ams-space-xs;
 $ams-badge-azure-background-color: $ams-color-feedback-info;
-$ams-badge-azure-color: $ams-color-text;
+$ams-badge-azure-color: $ams-color-text-inverse;
 $ams-badge-lime-background-color: $ams-color-highlight-lime;
 $ams-badge-lime-color: $ams-color-text;
 $ams-badge-magenta-background-color: $ams-color-highlight-magenta;
@@ -234,6 +262,7 @@ $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
 $ams-breadcrumb-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-breadcrumb-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-breadcrumb-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-button-border-width: $ams-border-width-m;
 $ams-button-cursor: $ams-cursor-interactive;
 $ams-button-font-family: $ams-typography-font-family;
 $ams-button-font-size: $ams-typography-body-text-font-size;
@@ -244,30 +273,27 @@ $ams-button-outline-offset: $ams-focus-outline-offset;
 $ams-button-padding-block: $ams-space-s;
 $ams-button-padding-inline: $ams-space-m;
 $ams-button-disabled-cursor: $ams-cursor-disabled;
-$ams-button-forced-color-mode-border: $ams-border-width-m solid;
 $ams-button-primary-background-color: $ams-color-interactive;
-$ams-button-primary-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
+$ams-button-primary-border-color: $ams-color-interactive;
 $ams-button-primary-color: $ams-color-text-inverse;
 $ams-button-primary-disabled-background-color: $ams-color-interactive-disabled;
-$ams-button-primary-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
+$ams-button-primary-disabled-border-color: $ams-color-interactive-disabled;
 $ams-button-primary-hover-background-color: $ams-color-interactive-hover;
-$ams-button-primary-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-hover;
+$ams-button-primary-hover-border-color: $ams-color-interactive-hover;
 $ams-button-secondary-background-color: $ams-color-background;
 $ams-button-secondary-color: $ams-color-interactive;
-$ams-button-secondary-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
-$ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-l $ams-color-interactive-hover;
+$ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
 $ams-button-secondary-hover-color: $ams-color-interactive-hover;
-$ams-button-secondary-disabled-background-color: $ams-color-background;
-$ams-button-secondary-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
 $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
 $ams-button-tertiary-color: $ams-color-interactive;
-$ams-button-tertiary-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-hover;
 $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
 $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
 $ams-button-icon-only-padding-block: $ams-space-s;
 $ams-button-icon-only-padding-inline: $ams-space-s;
-$ams-card-gap: $ams-space-s;
-$ams-card-heading-group-gap: $ams-space-s;
+$ams-card-heading-margin-block-end: $ams-space-xs;
+$ams-card-heading-group-gap: $ams-space-xs;
+$ams-card-heading-group-margin-block-end: $ams-space-xs;
+$ams-card-image-margin-block-end: $ams-space-s;
 $ams-card-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-card-link-text-underline-offset: $ams-links-text-underline-offset;
 $ams-card-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
@@ -286,26 +312,31 @@ $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
 $ams-checkbox-gap: $ams-space-s;
 $ams-checkbox-line-height: $ams-typography-body-text-line-height;
 $ams-checkbox-outline-offset: $ams-focus-outline-offset;
-$ams-checkbox-checkmark-border-color: $ams-color-interactive;
-$ams-checkbox-checkmark-border-width: $ams-border-width-m;
-$ams-checkbox-checkmark-checked-background-color: $ams-color-interactive;
-$ams-checkbox-checkmark-checked-hover-background-color: $ams-color-interactive-hover;
-$ams-checkbox-checkmark-disabled-border-color: $ams-color-interactive-disabled;
-$ams-checkbox-checkmark-disabled-border-width: $ams-border-width-m;
-$ams-checkbox-checkmark-disabled-checked-background-color: $ams-color-interactive-disabled;
-$ams-checkbox-checkmark-disabled-checked-hover-background-color: $ams-color-interactive-disabled;
-$ams-checkbox-checkmark-disabled-indeterminate-background-color: $ams-color-interactive-disabled;
-$ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: $ams-color-interactive-disabled;
-$ams-checkbox-checkmark-hover-border-color: $ams-color-interactive-hover;
-$ams-checkbox-checkmark-hover-border-width: $ams-border-width-l;
-$ams-checkbox-checkmark-invalid-border-color: $ams-color-interactive-invalid;
-$ams-checkbox-checkmark-invalid-checked-background-color: $ams-color-interactive-invalid;
-$ams-checkbox-checkmark-invalid-checked-hover-background-color: $ams-color-interactive-invalid-hover;
-$ams-checkbox-checkmark-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
-$ams-checkbox-checkmark-invalid-indeterminate-background-color: $ams-color-interactive-invalid;
-$ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: $ams-color-interactive-invalid-hover;
-$ams-checkbox-checkmark-indeterminate-background-color: $ams-color-interactive;
-$ams-checkbox-checkmark-indeterminate-hover-background-color: $ams-color-interactive-hover;
+$ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
+$ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
+$ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
+$ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
+$ams-checkbox-rectangle-fill: $ams-color-background;
+$ams-checkbox-rectangle-stroke: $ams-color-interactive;
+$ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
+$ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
+$ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-checked-invalid-fill: $ams-color-interactive-invalid;
+$ams-checkbox-rectangle-checked-invalid-hover-fill: $ams-color-interactive-invalid-hover;
+$ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
+$ams-checkbox-rectangle-hover-disabled-invalid-stroke: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
+$ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-indeterminate-disabled-hover-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
+$ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
+$ams-checkbox-rectangle-indeterminate-invalid-fill: $ams-color-interactive-invalid;
+$ams-checkbox-rectangle-indeterminate-invalid-hover-fill: $ams-color-interactive-invalid-hover;
+$ams-checkbox-rectangle-invalid-stroke: $ams-color-interactive-invalid;
+$ams-checkbox-rectangle-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
 $ams-checkbox-disabled-cursor: $ams-cursor-disabled;
 $ams-checkbox-disabled-color: $ams-color-interactive-disabled;
 $ams-checkbox-hover-color: $ams-color-interactive-hover;
@@ -316,7 +347,7 @@ $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-background-color: $ams-color-background;
-$ams-date-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-date-input-border-width: $ams-border-width-m;
 $ams-date-input-color: $ams-color-text;
 $ams-date-input-font-family: $ams-typography-font-family;
 $ams-date-input-font-size: $ams-typography-body-text-font-size;
@@ -326,13 +357,12 @@ $ams-date-input-outline-offset: $ams-focus-outline-offset;
 $ams-date-input-padding-block: $ams-space-s;
 $ams-date-input-padding-inline: $ams-space-m;
 $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
-$ams-date-input-disabled-background-color: $ams-color-background;
-$ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-date-input-disabled-color: $ams-color-interactive-disabled;
 $ams-date-input-disabled-cursor: $ams-cursor-disabled;
-$ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-date-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-date-input-invalid-border-color: $ams-color-interactive-invalid;
+$ams-date-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-description-list-color: $ams-color-text;
 $ams-description-list-column-gap: $ams-space-l;
 $ams-description-list-font-family: $ams-typography-font-family;
@@ -344,16 +374,23 @@ $ams-description-list-term-font-weight: $ams-typography-body-text-bold-font-weig
 $ams-description-list-description-font-weight: $ams-typography-body-text-font-weight;
 $ams-description-list-description-padding-inline-start: $ams-space-l;
 $ams-dialog-background-color: $ams-color-background;
-$ams-dialog-border: $ams-border-width-m solid $ams-dialog-background-color;
+$ams-dialog-border-width: $ams-border-width-m;
 $ams-dialog-gap: $ams-space-m;
-$ams-dialog-inline-size: calc(100% - 2 * $ams-space-xl);
-$ams-dialog-max-block-size: calc(100dvh - 2 * $ams-space-xl);
+$ams-dialog-inline-size: calc(100% - 2 * $ams-space-l);
+$ams-dialog-max-block-size: calc(100dvh - 2 * $ams-space-l);
+$ams-dialog-medium-inline-size: calc(100% - 2 * $ams-space-xl);
+$ams-dialog-medium-max-block-size: calc(100dvh - 2 * $ams-space-xl);
 $ams-dialog-header-gap: $ams-space-m;
-$ams-dialog-header-padding-block: $ams-space-xl 0;
-$ams-dialog-header-padding-inline: $ams-space-2xl;
-$ams-dialog-body-padding-inline: $ams-space-2xl;
-$ams-dialog-footer-padding-block: 0 $ams-space-xl;
-$ams-dialog-footer-padding-inline: $ams-space-2xl;
+$ams-dialog-header-padding-block: $ams-space-l 0;
+$ams-dialog-header-padding-inline: $ams-space-l;
+$ams-dialog-header-medium-padding-block: $ams-space-xl 0;
+$ams-dialog-header-medium-padding-inline: $ams-space-xl;
+$ams-dialog-body-padding-inline: $ams-space-l;
+$ams-dialog-body-medium-padding-inline: $ams-space-xl;
+$ams-dialog-footer-padding-block: 0 $ams-space-l;
+$ams-dialog-footer-padding-inline: $ams-space-l;
+$ams-dialog-footer-medium-padding-block: 0 $ams-space-xl;
+$ams-dialog-footer-medium-padding-inline: $ams-space-xl;
 $ams-error-message-color: $ams-color-feedback-error;
 $ams-error-message-font-family: $ams-typography-font-family;
 $ams-error-message-font-size: $ams-typography-body-text-small-font-size;
@@ -367,6 +404,7 @@ $ams-field-set-legend-font-family: $ams-typography-font-family;
 $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
 $ams-field-set-legend-line-height: $ams-typography-heading-4-line-height;
 $ams-field-set-legend-margin-block-end: $ams-space-m;
+$ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
 $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;
@@ -378,31 +416,29 @@ $ams-figure-caption-font-weight: $ams-typography-body-text-font-weight;
 $ams-figure-caption-line-height: $ams-typography-body-text-small-line-height;
 $ams-figure-caption-inverse-color: $ams-color-text-inverse;
 $ams-file-input-background-color: $ams-color-background;
-$ams-file-input-border: $ams-border-width-s dashed $ams-color-interactive-secondary;
+$ams-file-input-border-width: $ams-border-width-m;
 $ams-file-input-color: $ams-color-text;
 $ams-file-input-cursor: $ams-cursor-interactive;
 $ams-file-input-font-family: $ams-typography-font-family;
 $ams-file-input-font-size: $ams-typography-body-text-font-size;
 $ams-file-input-font-weight: $ams-typography-body-text-font-weight;
 $ams-file-input-line-height: $ams-typography-body-text-line-height;
-$ams-file-input-outline-offset: calc($ams-focus-outline-offset * 2); // Compensate for the dashed border
+$ams-file-input-outline-offset: $ams-focus-outline-offset;
 $ams-file-input-padding-block: $ams-space-m;
 $ams-file-input-padding-inline: $ams-space-m;
 $ams-file-input-disabled-color: $ams-color-interactive-disabled;
 $ams-file-input-disabled-cursor: $ams-cursor-disabled;
 $ams-file-input-file-selector-button-background-color: $ams-color-background;
-$ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive;
+$ams-file-input-file-selector-button-border-width: $ams-border-width-m;
 $ams-file-input-file-selector-button-color: $ams-color-interactive;
 $ams-file-input-file-selector-button-cursor: $ams-cursor-interactive;
 $ams-file-input-file-selector-button-margin-inline-end: $ams-space-m;
 $ams-file-input-file-selector-button-padding-block: $ams-space-s;
 $ams-file-input-file-selector-button-padding-inline: $ams-space-m;
-$ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-l $ams-color-interactive-hover;
+$ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
 $ams-file-input-file-selector-button-hover-color: $ams-color-interactive-hover;
-$ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-disabled;
 $ams-file-input-file-selector-button-disabled-color: $ams-color-interactive-disabled;
 $ams-file-input-file-selector-button-disabled-cursor: $ams-cursor-disabled;
-$ams-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-m solid;
 $ams-file-list-gap: $ams-space-m;
 $ams-file-list-padding-block: $ams-space-m;
 $ams-file-list-file-font-family: $ams-typography-font-family;
@@ -411,49 +447,16 @@ $ams-file-list-file-font-weight: $ams-typography-body-text-font-weight;
 $ams-file-list-file-gap: $ams-space-s;
 $ams-file-list-file-line-height: $ams-typography-body-text-small-line-height;
 $ams-file-list-file-details-color: $ams-color-text-secondary;
-$ams-footer-menu-column-gap: $ams-space-l;
-$ams-footer-menu-padding-block: $ams-space-l;
-$ams-footer-menu-row-gap: $ams-space-xs;
-$ams-footer-menu-link-font-family: $ams-typography-font-family;
-$ams-footer-menu-link-font-size: $ams-typography-body-text-small-font-size;
-$ams-footer-menu-link-font-weight: $ams-typography-body-text-font-weight;
-$ams-footer-menu-link-line-height: $ams-typography-body-text-small-line-height;
-$ams-footer-menu-link-outline-offset: $ams-focus-outline-offset;
-$ams-footer-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
-$ams-footer-menu-link-text-underline-offset: $ams-links-text-underline-offset;
-$ams-footer-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-grid-column-gap: $ams-space-xl;
-$ams-grid-padding-block-s: $ams-space-l;
-$ams-grid-padding-block-m: $ams-space-xl;
-$ams-grid-padding-block-l: $ams-space-2xl;
+$ams-grid-padding-block-l: $ams-space-l;
+$ams-grid-padding-block-xl: $ams-space-xl;
+$ams-grid-padding-block-2xl: $ams-space-2xl;
 $ams-grid-padding-inline: $ams-space-l;
-$ams-grid-row-gap-s: $ams-space-l;
-$ams-grid-row-gap-m: $ams-space-xl;
-$ams-grid-row-gap-l: $ams-space-2xl;
+$ams-grid-row-gap-l: $ams-space-l;
+$ams-grid-row-gap-xl: $ams-space-xl;
+$ams-grid-row-gap-2xl: $ams-space-2xl;
 $ams-grid-medium-padding-inline: $ams-space-xl;
 $ams-grid-wide-padding-inline: $ams-space-2xl;
-$ams-header-font-family: $ams-typography-font-family;
-$ams-header-padding-block: $ams-space-l;
-$ams-header-logo-link-column-gap: $ams-space-m;
-$ams-header-logo-link-outline-offset: $ams-focus-outline-offset;
-$ams-header-brand-name-color: $ams-color-text;
-$ams-header-brand-name-font-weight: $ams-typography-heading-font-weight;
-$ams-header-mega-menu-button-cursor: $ams-cursor-interactive;
-$ams-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
-$ams-header-menu-column-gap: $ams-space-l;
-$ams-header-menu-row-gap: $ams-space-xs;
-$ams-header-menu-item-column-gap: $ams-space-xs;
-$ams-header-menu-item-font-family: $ams-typography-font-family;
-$ams-header-menu-item-font-size: $ams-typography-body-text-font-size;
-$ams-header-menu-item-font-weight: $ams-typography-body-text-font-weight;
-$ams-header-menu-item-line-height: $ams-typography-body-text-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-links-subtle-text-decoration-line;
-$ams-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
-$ams-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
-$ams-header-navigation-column-gap: $ams-space-l;
-$ams-header-navigation-row-gap: $ams-space-s;
 $ams-heading-1-font-size: $ams-typography-heading-1-font-size;
 $ams-heading-1-line-height: $ams-typography-heading-1-line-height;
 $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
@@ -465,8 +468,9 @@ $ams-heading-6-line-height: $ams-typography-heading-6-line-height;
 $ams-heading-color: $ams-color-text;
 $ams-heading-font-family: $ams-typography-font-family;
 $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-color: $ams-color-text-secondary;
+$ams-hint-font-weight: $ams-typography-body-text-font-weight;
 $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 +509,7 @@ $ams-label-color: $ams-color-text;
 $ams-label-font-family: $ams-typography-font-family;
 $ams-label-font-weight: $ams-typography-heading-font-weight;
 $ams-label-line-height: $ams-typography-heading-4-line-height;
+$ams-label-text-wrap: $ams-typography-heading-text-wrap;
 $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;
@@ -519,21 +524,13 @@ $ams-link-list-link-small-line-height: $ams-typography-body-text-small-line-heig
 $ams-link-list-link-large-font-size: $ams-typography-body-text-large-font-size;
 $ams-link-list-link-large-line-height: $ams-typography-body-text-large-line-height;
 $ams-link-list-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
-$ams-link-font-family: $ams-typography-font-family;
 $ams-link-font-weight: $ams-typography-body-text-font-weight;
 $ams-link-outline-offset: $ams-focus-outline-offset;
-$ams-link-inline-text-underline-offset: $ams-links-text-underline-offset;
-$ams-link-inline-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
-$ams-link-standalone-font-size: $ams-typography-body-text-font-size;
-$ams-link-standalone-line-height: $ams-typography-body-text-line-height;
-$ams-link-standalone-text-underline-offset: $ams-links-text-underline-offset;
-$ams-link-standalone-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
+$ams-link-text-underline-offset: $ams-links-text-underline-offset;
+$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-mega-menu-list-category-column-gap: $ams-space-xl; // Must have the same value as `ams.grid.column-gap`.
-$ams-mega-menu-list-category-padding-block-start: $ams-space-m;
-$ams-mega-menu-list-category-padding-block-end: $ams-space-xl; // Must have the same value as `ams.grid.row-gap.md`.
 $ams-ordered-list-color: $ams-color-text;
 $ams-ordered-list-font-family: $ams-typography-font-family;
 $ams-ordered-list-font-size: $ams-typography-body-text-font-size;
@@ -545,23 +542,49 @@ $ams-ordered-list-small-line-height: $ams-typography-body-text-small-line-height
 $ams-ordered-list-inverse-color: $ams-color-text-inverse;
 $ams-ordered-list-ordered-list-gap: $ams-space-s;
 $ams-ordered-list-ordered-list-padding-block-start: $ams-space-s;
+$ams-page-footer-menu-column-gap: $ams-space-l;
+$ams-page-footer-menu-padding-block: $ams-space-l;
+$ams-page-footer-menu-row-gap: $ams-space-xs;
+$ams-page-footer-menu-link-font-family: $ams-typography-font-family;
+$ams-page-footer-menu-link-font-size: $ams-typography-body-text-small-font-size;
+$ams-page-footer-menu-link-font-weight: $ams-typography-body-text-font-weight;
+$ams-page-footer-menu-link-line-height: $ams-typography-body-text-small-line-height;
+$ams-page-footer-menu-link-outline-offset: $ams-focus-outline-offset;
+$ams-page-footer-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
+$ams-page-footer-menu-link-text-underline-offset: $ams-links-text-underline-offset;
+$ams-page-footer-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-page-header-font-family: $ams-typography-font-family;
+$ams-page-header-padding-block: $ams-space-l;
+$ams-page-header-logo-link-column-gap: $ams-space-m;
+$ams-page-header-logo-link-outline-offset: $ams-focus-outline-offset;
+$ams-page-header-brand-name-color: $ams-color-text;
+$ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
+$ams-page-header-brand-name-line-height: $ams-typography-heading-4-line-height;
+$ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
+$ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
+$ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
+$ams-page-header-menu-column-gap: $ams-space-l;
+$ams-page-header-menu-row-gap: $ams-space-xs;
+$ams-page-header-menu-item-column-gap: $ams-space-xs;
+$ams-page-header-menu-item-font-family: $ams-typography-font-family;
+$ams-page-header-menu-item-font-size: $ams-typography-body-text-font-size;
+$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-text-decoration-line: $ams-links-subtle-text-decoration-line;
+$ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
+$ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-page-header-navigation-column-gap: $ams-space-l;
+$ams-page-header-navigation-row-gap: $ams-space-s;
 $ams-page-heading-color: $ams-color-text;
 $ams-page-heading-font-family: $ams-typography-font-family;
 $ams-page-heading-font-size: $ams-typography-heading-0-font-size;
 $ams-page-heading-font-weight: $ams-typography-heading-font-weight;
 $ams-page-heading-line-height: $ams-typography-heading-0-line-height;
+$ams-page-heading-text-wrap: $ams-typography-heading-text-wrap;
 $ams-page-heading-inverse-color: $ams-color-text-inverse;
-$ams-page-menu-column-gap: $ams-space-xl;
-$ams-page-menu-row-gap: $ams-space-m;
-$ams-page-menu-item-font-family: $ams-typography-font-family;
-$ams-page-menu-item-font-size: $ams-typography-body-text-small-font-size;
-$ams-page-menu-item-font-weight: $ams-typography-body-text-font-weight;
-$ams-page-menu-item-gap: $ams-space-s;
-$ams-page-menu-item-line-height: $ams-typography-body-text-small-line-height;
-$ams-page-menu-item-outline-offset: $ams-focus-outline-offset;
-$ams-page-menu-item-text-decoration-line: $ams-links-subtle-text-decoration-line;
-$ams-page-menu-item-text-underline-offset: $ams-links-text-underline-offset;
-$ams-page-menu-item-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
+$ams-page-background-color: $ams-color-background;
 $ams-pagination-font-family: $ams-typography-font-family;
 $ams-pagination-font-size: $ams-typography-body-text-font-size;
 $ams-pagination-font-weight: $ams-typography-body-text-font-weight;
@@ -584,7 +607,7 @@ $ams-paragraph-small-line-height: $ams-typography-body-text-small-line-height;
 $ams-paragraph-large-font-size: $ams-typography-body-text-large-font-size;
 $ams-paragraph-large-line-height: $ams-typography-body-text-large-line-height;
 $ams-password-input-background-color: $ams-color-background;
-$ams-password-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-password-input-border-width: $ams-border-width-m;
 $ams-password-input-color: $ams-color-text;
 $ams-password-input-font-family: $ams-typography-font-family;
 $ams-password-input-font-size: $ams-typography-body-text-font-size;
@@ -593,13 +616,12 @@ $ams-password-input-line-height: $ams-typography-body-text-line-height;
 $ams-password-input-outline-offset: $ams-focus-outline-offset;
 $ams-password-input-padding-block: $ams-space-s;
 $ams-password-input-padding-inline: $ams-space-m;
-$ams-password-input-disabled-background-color: $ams-color-background;
-$ams-password-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-password-input-disabled-color: $ams-color-interactive-disabled;
 $ams-password-input-disabled-cursor: $ams-cursor-disabled;
-$ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-password-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-password-input-invalid-border-color: $ams-color-interactive-invalid;
+$ams-password-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-password-input-placeholder-color: $ams-color-text-secondary;
 $ams-radio-color: $ams-color-text;
 $ams-radio-cursor: $ams-cursor-interactive;
@@ -636,9 +658,8 @@ $ams-row-gap-small: $ams-space-s;
 $ams-row-gap-medium: $ams-space-m;
 $ams-row-gap-large: $ams-space-l;
 $ams-row-gap-x-large: $ams-space-xl;
-$ams-screen-background-color: $ams-color-background;
 $ams-search-field-input-background-color: $ams-color-background;
-$ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-search-field-input-border-width: $ams-border-width-m;
 $ams-search-field-input-color: $ams-color-text;
 $ams-search-field-input-font-family: $ams-typography-font-family;
 $ams-search-field-input-font-size: $ams-typography-body-text-font-size;
@@ -651,13 +672,14 @@ $ams-search-field-input-cancel-button-block-size: $ams-typography-body-text-font
 $ams-search-field-input-cancel-button-color: $ams-color-interactive;
 $ams-search-field-input-cancel-button-cursor: $ams-cursor-interactive;
 $ams-search-field-input-cancel-button-inline-size: $ams-typography-body-text-font-size;
-$ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-search-field-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-search-field-input-invalid-border-color: $ams-color-interactive-invalid;
+$ams-search-field-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-search-field-input-placeholder-color: $ams-color-text-secondary;
 $ams-select-background-color: $ams-color-background;
 $ams-select-background-position: right $ams-space-m center;
-$ams-select-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-select-border-width: $ams-border-width-m;
 $ams-select-color: $ams-color-text;
 $ams-select-font-family: $ams-typography-font-family;
 $ams-select-font-size: $ams-typography-body-text-font-size;
@@ -666,12 +688,12 @@ $ams-select-line-height: $ams-typography-body-text-line-height;
 $ams-select-outline-offset: $ams-focus-outline-offset;
 $ams-select-padding-block: $ams-space-s;
 $ams-select-padding-inline: $ams-space-m calc(2 * $ams-space-m + 1em);
-$ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-select-disabled-color: $ams-color-interactive-disabled;
 $ams-select-disabled-cursor: $ams-cursor-disabled;
-$ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-select-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-select-invalid-border-color: $ams-color-interactive-invalid;
+$ams-select-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-select-option-disabled-color: $ams-color-interactive-disabled;
 $ams-skip-link-background-color: $ams-color-interactive;
 $ams-skip-link-color: $ams-color-text-inverse;
@@ -690,10 +712,21 @@ $ams-spotlight-lime-background-color: $ams-color-highlight-lime;
 $ams-spotlight-magenta-background-color: $ams-color-highlight-magenta;
 $ams-spotlight-orange-background-color: $ams-color-highlight-orange;
 $ams-spotlight-yellow-background-color: $ams-color-highlight-yellow;
+$ams-standalone-link-column-gap: $ams-space-s;
+$ams-standalone-link-font-family: $ams-typography-font-family;
+$ams-standalone-link-font-size: $ams-typography-body-text-font-size;
+$ams-standalone-link-font-weight: $ams-typography-body-text-font-weight;
+$ams-standalone-link-line-height: $ams-typography-body-text-line-height;
+$ams-standalone-link-outline-offset: $ams-focus-outline-offset;
+$ams-standalone-link-text-underline-offset: $ams-links-text-underline-offset;
+$ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
+$ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line;
+$ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
 $ams-switch-cursor: $ams-cursor-interactive;
 $ams-switch-outline-offset: $ams-focus-outline-offset;
 $ams-switch-thumb-background-color: $ams-color-background;
 $ams-switch-thumb-hover-color: $ams-color-interactive-hover;
+$ams-switch-thumb-hover-box-shadow: 0 0 0 $ams-border-width-m $ams-switch-thumb-hover-color;
 $ams-switch-checked-background-color: $ams-color-interactive;
 $ams-switch-disabled-background-color: $ams-color-interactive-disabled;
 $ams-switch-disabled-cursor: $ams-cursor-disabled;
@@ -729,16 +762,17 @@ $ams-tabs-button-font-family: $ams-typography-font-family;
 $ams-tabs-button-font-size: $ams-typography-body-text-font-size;
 $ams-tabs-button-font-weight: $ams-typography-body-text-font-weight;
 $ams-tabs-button-line-height: $ams-typography-body-text-line-height;
+$ams-tabs-button-outline-offset: calc($ams-focus-outline-offset * -1);
 $ams-tabs-button-padding-block: $ams-space-s;
 $ams-tabs-button-padding-inline: $ams-space-m;
-$ams-tabs-button-hover-color: $ams-color-interactive-hover;
 $ams-tabs-button-hover-box-shadow: inset 0 calc($ams-border-width-m * -1);
+$ams-tabs-button-hover-color: $ams-color-interactive-hover;
 $ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
 $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
 $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
 $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
 $ams-text-area-background-color: $ams-color-background;
-$ams-text-area-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-text-area-border-width: $ams-border-width-m;
 $ams-text-area-color: $ams-color-text;
 $ams-text-area-font-family: $ams-typography-font-family;
 $ams-text-area-font-size: $ams-typography-body-text-font-size;
@@ -748,16 +782,15 @@ $ams-text-area-min-block-size: calc($ams-typography-body-text-line-height * 1em
 $ams-text-area-outline-offset: $ams-focus-outline-offset;
 $ams-text-area-padding-block: $ams-space-s;
 $ams-text-area-padding-inline: $ams-space-m;
-$ams-text-area-disabled-background-color: $ams-color-background;
-$ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-text-area-disabled-color: $ams-color-interactive-disabled;
 $ams-text-area-disabled-cursor: $ams-cursor-disabled;
-$ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-text-area-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-text-area-invalid-border-color: $ams-color-interactive-invalid;
+$ams-text-area-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-text-area-placeholder-color: $ams-color-text-secondary;
 $ams-text-input-background-color: $ams-color-background;
-$ams-text-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-text-input-border-width: $ams-border-width-m;
 $ams-text-input-color: $ams-color-text;
 $ams-text-input-font-family: $ams-typography-font-family;
 $ams-text-input-font-size: $ams-typography-body-text-font-size;
@@ -766,16 +799,15 @@ $ams-text-input-line-height: $ams-typography-body-text-line-height;
 $ams-text-input-outline-offset: $ams-focus-outline-offset;
 $ams-text-input-padding-block: $ams-space-s;
 $ams-text-input-padding-inline: $ams-space-m;
-$ams-text-input-disabled-background-color: $ams-color-background;
-$ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-text-input-disabled-color: $ams-color-interactive-disabled;
 $ams-text-input-disabled-cursor: $ams-cursor-disabled;
-$ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-text-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
+$ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-text-input-invalid-border-color: $ams-color-interactive-invalid;
+$ams-text-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $ams-text-input-placeholder-color: $ams-color-text-secondary;
 $ams-time-input-background-color: $ams-color-background;
-$ams-time-input-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-secondary;
+$ams-time-input-border-width: $ams-border-width-m;
 $ams-time-input-color: $ams-color-text;
 $ams-time-input-font-family: $ams-typography-font-family;
 $ams-time-input-font-size: $ams-typography-body-text-font-size;
@@ -785,26 +817,12 @@ $ams-time-input-outline-offset: $ams-focus-outline-offset;
 $ams-time-input-padding-block: $ams-space-s;
 $ams-time-input-padding-inline: $ams-space-m;
 $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
-$ams-time-input-disabled-background-color: $ams-color-background;
-$ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-disabled;
 $ams-time-input-disabled-color: $ams-color-interactive-disabled;
 $ams-time-input-disabled-cursor: $ams-cursor-disabled;
-$ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-secondary;
-$ams-time-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid;
-$ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-m $ams-color-interactive-invalid-hover;
-$ams-top-task-link-gap: $ams-space-s;
-$ams-top-task-link-description-color: $ams-color-text;
-$ams-top-task-link-description-font-family: $ams-typography-font-family;
-$ams-top-task-link-description-font-size: $ams-typography-body-text-small-font-size;
-$ams-top-task-link-description-font-weight: $ams-typography-body-text-font-weight;
-$ams-top-task-link-description-line-height: $ams-typography-body-text-small-line-height;
-$ams-top-task-link-label-font-family: $ams-typography-font-family;
-$ams-top-task-link-label-font-weight: $ams-typography-heading-font-weight;
-$ams-top-task-link-label-line-height: $ams-typography-heading-4-line-height;
-$ams-top-task-link-label-text-decoration-line: $ams-links-subtle-text-decoration-line;
-$ams-top-task-link-label-text-underline-offset: $ams-links-text-underline-offset;
-$ams-top-task-link-label-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
-$ams-top-task-link-outline-offset: $ams-focus-outline-offset;
+$ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
+$ams-time-input-invalid-border-color: $ams-color-interactive-invalid;
+$ams-time-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
+$ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
 $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;
@@ -823,16 +841,9 @@ $ams-breadcrumb-link-hover-color: $ams-links-hover-color;
 $ams-card-link-color: $ams-links-color;
 $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $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-dialog-border-color: $ams-dialog-background-color;
 $ams-field-set-legend-font-size: $ams-typography-heading-4-font-size;
-$ams-footer-menu-padding-inline: $ams-grid-padding-inline;
-$ams-footer-menu-link-color: $ams-links-color;
-$ams-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
-$ams-footer-menu-link-hover-color: $ams-links-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-brand-name-font-size: $ams-typography-heading-4-font-size;
-$ams-header-menu-item-color: $ams-links-color;
-$ams-header-menu-item-hover-color: $ams-links-hover-color;
-$ams-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-heading-3-font-size: $ams-typography-heading-3-font-size;
 $ams-heading-4-font-size: $ams-typography-heading-4-font-size;
 $ams-heading-5-font-size: $ams-typography-heading-5-font-size;
@@ -850,29 +861,40 @@ $ams-link-list-link-contrast-hover-color: $ams-links-contrast-hover-color;
 $ams-link-list-link-inverse-color: $ams-links-inverse-color;
 $ams-link-list-link-inverse-hover-color: $ams-links-inverse-hover-color;
 $ams-link-color: $ams-links-color;
+$ams-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-link-hover-color: $ams-links-hover-color;
-$ams-link-inline-text-decoration-thickness: $ams-links-text-decoration-thickness;
-$ams-link-inline-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
-$ams-link-standalone-text-decoration-thickness: $ams-links-text-decoration-thickness;
-$ams-link-standalone-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
+$ams-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
 $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-page-menu-item-color: $ams-links-color;
-$ams-page-menu-item-text-decoration-thickness: $ams-links-text-decoration-thickness;
-$ams-page-menu-item-hover-color: $ams-links-hover-color;
+$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;
+$ams-page-footer-menu-link-color: $ams-links-color;
+$ams-page-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
+$ams-page-footer-menu-link-hover-color: $ams-links-hover-color;
+$ams-page-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
+$ams-page-header-medium-padding-inline: $ams-grid-medium-padding-inline;
+$ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
+$ams-page-header-brand-name-font-size: $ams-typography-heading-4-font-size;
+$ams-page-header-menu-item-color: $ams-links-color;
+$ams-page-header-menu-item-hover-color: $ams-links-hover-color;
+$ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
 $ams-radio-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
-$ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-color;
+$ams-standalone-link-color: $ams-links-color;
+$ams-standalone-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
+$ams-standalone-link-contrast-color: $ams-links-contrast-color;
+$ams-standalone-link-contrast-hover-color: $ams-links-contrast-hover-color;
+$ams-standalone-link-hover-color: $ams-links-hover-color;
+$ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
+$ams-standalone-link-inverse-color: $ams-links-inverse-color;
+$ams-standalone-link-inverse-hover-color: $ams-links-inverse-hover-color;
 $ams-table-of-contents-link-color: $ams-links-color;
 $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-table-of-contents-link-hover-color: $ams-links-hover-color;
 $ams-table-of-contents-heading-font-size: $ams-typography-heading-4-font-size;
-$ams-top-task-link-label-color: $ams-links-color;
-$ams-top-task-link-label-font-size: $ams-typography-heading-4-font-size;
-$ams-top-task-link-label-text-decoration-thickness: $ams-links-text-decoration-thickness;
-$ams-top-task-link-label-hover-color: $ams-links-hover-color;