@sage/design-tokens 15.3.0 → 15.4.0

package/scss/frozenproduct/small/components/form.scss

@@ -8,6 +8,9 @@
 $form-space-datepicker-pr-s: 0; // right padding on small date picker input
 $form-space-datepicker-pr-m: 0; // right padding on medium date picker input
 $form-space-datepicker-pr-l: 0; // right padding on large date picker input
+$form-space-labelset-inline-pt-s: 31; // top padding on S inline input labelsets
+$form-space-labelset-inline-pt-m: 35; // top padding on inline input labelsets
+$form-space-labelset-inline-pt-l: 35; // top padding on inline L input labelsets
 $form-color-switch-border-active: transparent;
 $form-color-switch-border-activedisabled: transparent;
 $form-radius-none: $global-radius-none; // Text editor (internal corners)
@@ -15,12 +18,8 @@ $form-radius-radio: $global-radius-circle; // Radio button
 $form-radius-switch: $global-radius-circle; // Switch container and handle
 $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
 $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected), 
-$form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
+$form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
 $form-color-labelset-label-required: $modes-color-interactive-danger-default;
-$form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
-$form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
-$form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
-$form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
 $form-color-validation-border-error: $modes-color-status-negative-default;
 $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
 $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -41,10 +40,13 @@ $form-typography-responsive-default-xs: $global-typography-responsive-component-
 $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
-$form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
+$form-color-calendar-border-duration: $form-color-calendar-bg-active;
 $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
+$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
+$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
+$form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
 $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
 $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
 $form-color-typical-border-hover: $modes-color-interactive-data-entry-with-hover; // File input draggable border state
@@ -52,6 +54,7 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
 $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
 $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
 $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
+$form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
 $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
 $form-space-none: $global-space-none;
 $form-space-calendar-x-m: $global-space-macro-m;
@@ -224,18 +227,15 @@ $form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosur
 $form-size-rating-m: $global-size-icon-m; // medium rating stars
 $form-size-rating-l: $global-size-icon-xl; // large rating stars
 $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
-$form-color-calendar-border-duration: $form-color-calendar-bg-active;
 $form-color-calendar-text-active: $modes-color-interactive-monochrome-with-active;
 $form-color-calendar-text-alt: $modes-color-interactive-data-entry-content-alt; // Days of the week subheaders
 $form-color-calendar-text-disabled: $modes-color-interactive-inactive-content;
 $form-color-calendar-text-duration: $modes-color-interactive-data-entry-content;
 $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
 $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
+$form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER 
 $form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
-$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
 $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
-$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
-$form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
 $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
 $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
 $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -298,13 +298,16 @@ $form-size-dropdown-item-m: $popover-size-item-m; // REF POPOVER. Menu item min
 $form-size-dropdown-item-l: $popover-size-item-l; // REF POPOVER. Menu item min height.
 $form-size-search-input-minwidth: $container-size-responsive-xl; // minimum width for search input container
 $form-size-search-input-maxwidth: $container-size-responsive-xxl + $container-size-responsive-xxs; // maximum width for search input container
-$form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER 
+$form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
 $form-color-typical-border-alt: $modes-color-interactive-inactive-default;
+$form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
 $form-color-typical-border-disabled: $modes-color-interactive-inactive-default;
 $form-color-typical-border-read-only: $modes-color-interactive-inactive-default;
 $form-color-switch-bg-activedisabled: $modes-color-interactive-inactive-default;
 $form-color-switch-border-disabled: $modes-color-interactive-inactive-default;
+$form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
 $form-color-switch-fg-disabled: $modes-color-interactive-inactive-default;
+$form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
 $form-color-switch-label-activedisabled: $modes-color-interactive-inactive-default;
 $form-color-switch-label-disabled: $modes-color-interactive-inactive-default;
 $form-radius-dropdown: $popover-radius-container; // REF POPOVER. Popover container.

package/scss/frozenproduct/small/components/link.scss

@@ -5,6 +5,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
 $link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
 $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
 $link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
@@ -19,14 +20,13 @@ $link-typography-adaptive-heading-m: $global-typography-adaptive-component-under
 $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
 $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
 $link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
-$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
+$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
 $link-boxshadow-skiplink: $global-boxshadow-container-near;
 $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
 $link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
 $link-color-typical-label-default: $modes-color-interactive-primary-frozen-default-alt;
 $link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt2;
-$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;
 $link-size-skiplink-m: $global-size-macro-m;
 $link-size-icon-m: $global-size-icon-m;

package/scss/frozenproduct/small/components/nav.scss

@@ -9,13 +9,16 @@ $nav-size-leftnav-parent-container-fixed-width: 146; // fixed width of parent co
 $nav-size-leftnav-child-container-fixed-width: 250; // fixed width of parent container
 $nav-space-leftnav-grandchilditem-x-indent: 33; // indent on grandchild items
 $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
+$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
 $nav-color-item-bg-enabled: $modes-color-none;
 $nav-color-item-bg-hover: $modes-color-interactive-primary-frozen-nav-hover;
 $nav-color-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
+$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-leftnav-item-bg-enabled: $modes-color-none;
 $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
 $nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
+$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-modal-item-bg-enabled: $modes-color-none;
 $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -35,16 +38,15 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
 $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-xs;
 $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
-$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
 $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
 $nav-color-item-label-activealt: $modes-color-interactive-monochrome-with-hover;
+$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
+$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
 $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
 $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
 $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
-$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
-$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -53,8 +55,7 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
 $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
 $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
-$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
-$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
+$nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
 $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
 $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
 $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;
@@ -157,4 +158,3 @@ $nav-space-topnav-container-y-m: $global-space-macro-xxxs / 2; // vertical paddi
 $nav-space-topnav-parentitem-x-m: $global-space-macro-xxxs; // horizontal padding on stacked parent items
 $nav-space-topnav-parentitem-xg-m: $global-space-micro-s; // gap within horizontal parent items
 $nav-space-topnav-parentitem-y-m: $global-space-macro-xxxs / 2; // vertical padding on stacked parent items
-$nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;

package/scss/frozenproduct/small/components/page.scss

@@ -6,6 +6,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $page-color-bg-default: $modes-color-generic-backdrop-nought;
+$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-typography-responsive-h1: $global-typography-responsive-heading-l;
 $page-typography-responsive-h2: $global-typography-responsive-heading-m;
 $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -28,7 +29,6 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
 $page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
 $page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
 $page-typography-adaptive-p-medium-large: $global-typography-adaptive-body-medium-l;
-$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc 
 $page-space-x-l: $global-space-macro-xl;

package/scss/frozenproduct/small/components/popover.scss

@@ -6,6 +6,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $popover-radius-none: $global-radius-none; // Navigation menu top corners
+$popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
 $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
 $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -20,7 +21,11 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
 $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) 
-$popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
+$popover-color-bg-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
+$popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
+$popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
+$popover-color-label-hover: $modes-color-interactive-monochrome-default;
+$popover-color-label-enabled: $modes-color-interactive-monochrome-default;
 $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
 $popover-size-icon-m: $global-size-icon-m;
 $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -49,13 +54,8 @@ $popover-space-option-y-l: $global-space-micro-xl; // REF'D in FORM. Vertical pa
 $popover-space-submenu-x-s: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
 $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
 $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
-$popover-color-bg-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
-$popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
 $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
-$popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
 $popover-color-label-disabled: $modes-color-interactive-inactive-content;
-$popover-color-label-hover: $modes-color-interactive-monochrome-default;
-$popover-color-label-enabled: $modes-color-interactive-monochrome-default;
 $popover-size-menu-minwidth-s: $container-size-responsive-m / 2; // minwidth of small size popover menu container
 $popover-size-menu-minwidth-m: $container-size-responsive-xs; // minwidth of medium size popover menu container
 $popover-size-menu-minwidth-l: $container-size-responsive-s; // minwidth of large size popover menu container

package/scss/frozenproduct/small/components/progress.scss

@@ -22,18 +22,20 @@ $progress-radius-stepflow: $global-radius-circle; // Step flow (step indicators)
 $progress-radius-stepindicator: $global-radius-circle; // step indicator circles
 $progress-radius-carouselselector: $global-radius-circle; // Carousel (selector dot)
 $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent circular elements such as profiles, badges etc
-$progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
 $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
 $progress-color-fg-alt: $modes-color-status-positive-default;
 $progress-color-fg-caution: $modes-color-status-caution-default;
 $progress-color-fg-error: $modes-color-status-negative-default;
 $progress-color-fg-info: $modes-color-status-info-default;
 $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
-$progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
 $progress-color-loader-fg-error: $modes-color-status-negative-default;
 $progress-color-loader-fg-complete: $modes-color-status-positive-default;
+$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
+$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
+$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
+$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
 $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -47,21 +49,15 @@ $progress-typography-responsive-label-l: $global-typography-responsive-component
 $progress-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $progress-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
-$progress-color-border-default: $modes-color-generic-fg-frozen-soft;
 $progress-color-fg-alt2: $modes-color-generic-content-firm;
-$progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
 $progress-color-label-alt: $modes-color-generic-content-firm;
 $progress-color-label-default: $modes-color-generic-content-harsh;
 $progress-color-loader-fg-default: $modes-color-interactive-primary-frozen-default; // used for loader standard loader spinner
 $progress-color-loader-inverse-bg-default: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
-$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
 $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
-$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
 $progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
-$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
-$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
 $progress-size-bar-s: $global-size-micro-xs; // S loader bar
 $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar
@@ -79,6 +75,10 @@ $progress-size-stepflow-m: $global-size-micro-m; // Step height
 $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
 $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator
 $progress-size-stepindicator-stepcircle-m: $global-size-macro-s; // M size step indicator
+$progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
+$progress-color-border-default: $modes-color-generic-fg-frozen-soft;
+$progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
+$progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
 $progress-color-loader-inverse-fg-default: $modes-color-interactive-monochrome-with-active; // used on inverse loading spinner
 $progress-color-stepflow-border-default: $modes-color-generic-fg-soft;
 $progress-color-stepindicator-border-default: $modes-color-generic-fg-soft;

package/scss/frozenproduct/small/components/status.scss

@@ -5,14 +5,11 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
-$status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
 $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
 $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
 $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
 $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
 $status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
-$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
 $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
 $status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
@@ -25,9 +22,6 @@ $status-color-message-contextual-success-icon: $modes-color-status-positive-defa
 $status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
 $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
 $status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
-$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
-$status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
-$status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
 $status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
 $status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
 $status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
@@ -74,9 +68,6 @@ $status-color-pill-info-border-default: $modes-color-status-info-default;
 $status-color-pill-info-inverse-bg-default: $modes-color-status-info-inverse-default;
 $status-color-pill-info-inverse-bg-alt-default: $modes-color-status-info-inverse-default-alt; // outline pill bg
 $status-color-pill-info-inverse-border-default: $modes-color-status-info-inverse-default;
-$status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
-$status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
-$status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
 $status-color-pill-neutral-inverse-bg-default: $modes-color-status-neutral-inverse-default;
 $status-color-pill-neutral-inverse-bg-alt-default: $modes-color-status-neutral-inverse-default-alt; // outline pill bg
 $status-color-pill-neutral-inverse-border-default: $modes-color-status-neutral-inverse-default;
@@ -112,12 +103,15 @@ $status-color-message-contextual-text: $modes-color-status-content-with-hover-al
 $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
 $status-color-message-contextual-ai-bg-alt: $status-color-none; // Subtle message bg
 $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
+$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-message-contextual-error-bg-alt: $status-color-none; // Subtle message bg
 $status-color-message-contextual-info-bg-alt: $status-color-none; // Subtle message bg
 $status-color-message-contextual-success-bg-alt: $status-color-none; // Subtle message bg
 $status-color-message-contextual-warning-bg-alt: $status-color-none; // Subtle message bg
 $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
-$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
+$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
+$status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
+$status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
 $status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
 $status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
 $status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
@@ -154,8 +148,10 @@ $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
 $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
 $status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
 $status-color-pill-info-inverse-bg-hover: $modes-color-status-info-inverse-hover;
+$status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
 $status-color-pill-neutral-bg-alt-default: $status-color-none; // outline pill bg
 $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-frozen-hover-alt;
+$status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
 $status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
 $status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
 $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
@@ -175,8 +171,11 @@ $status-color-rating-bg-hover: $modes-color-status-reviews-frozen-hover;
 $status-color-rating-border-default: $modes-color-status-reviews-frozen-default;
 $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
 $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
+$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
 $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
+$status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
 $status-color-message-global-info-icon: $modes-color-status-content-with-default-alt;
+$status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
 $status-color-message-global-warning-icon: $modes-color-status-content-with-default-alt;
 $status-color-pill-generic-label-default: $modes-color-status-content-with-default;
 $status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
@@ -184,6 +183,7 @@ $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-d
 $status-color-pill-generic-label-alt-hover: $modes-color-status-content-with-default-alt;
 $status-color-pill-generic-inverse-label-alt-default: $modes-color-status-content-inverse-with-default-alt;
 $status-color-pill-generic-inverse-label-alt-hover: $modes-color-status-content-inverse-with-default-alt;
+$status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
 $status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
 $status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
 $status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button

package/scss/frozenproduct/small/components/tab.scss

@@ -6,6 +6,8 @@
 // Do not edit directly, this file was auto-generated.
 
 $tab-color-bg-enabled: $modes-color-none;
+$tab-color-label-active: $modes-color-interactive-monochrome-active;
+$tab-color-icon-active: $modes-color-interactive-monochrome-active;
 $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
 $tab-color-validation-border-warning: $modes-color-status-caution-default;
 $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -18,11 +20,16 @@ $tab-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
 $tab-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
 $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
+$tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
 $tab-color-border-active: $modes-color-interactive-primary-frozen-default;
+$tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
+$tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
+$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
 $tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
-$tab-color-label-active: $modes-color-interactive-monochrome-active;
-$tab-color-icon-active: $modes-color-interactive-monochrome-active;
+$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
 $tab-color-label-hover: $modes-color-interactive-monochrome-with-hover;
+$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
+$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
 $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
 $tab-size-l: $global-size-macro-l; // L tab
 $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -39,14 +46,7 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
 $tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
 $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
 $tab-color-bg-active: $modes-color-interactive-monochrome-with-default;
-$tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
 $tab-color-border-activealt: $modes-color-generic-fg-delicate;
-$tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
-$tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
-$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
-$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
-$tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
-$tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
 $tab-radius-m: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-l: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-baseline-m: $global-radius-interactive-xxs;

package/scss/frozenproduct/small/components/table.scss

@@ -6,11 +6,11 @@
 // Do not edit directly, this file was auto-generated.
 
 $table-color-header-subtle-bg-default: $modes-color-none;
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
 $table-color-row-bg-activated: $modes-color-interactive-primary-frozen-table-default;
 $table-color-row-bg-default: $modes-color-generic-bg-nought;
 $table-color-row-bg-alt: $modes-color-generic-bg-frozen-delicate;
 $table-color-row-bg-hover: $modes-color-generic-bg-frozen-soft;
+$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
 $table-color-row-label-hover: $modes-color-generic-content-extreme;
 $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
 $table-typography-adaptive-heading-m: $global-typography-adaptive-component-firm-m;
@@ -30,32 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
 $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
 $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
+$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
+$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
+$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
 $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
 $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
-$table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
 $table-color-footer-bg-default: $modes-color-generic-bg-moderate;
+$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-boxshadow-firstchild: $global-boxshadow-inner-near;
 $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
 $table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
 $table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
-$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
-$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
-$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
-$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
-$table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
-$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-radius-container: $global-radius-container-m; // Table (parent container)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
 $table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.

package/scss/product/large/components/button.scss

@@ -39,7 +39,6 @@ $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive
 $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -71,7 +70,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
 $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
 $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -80,25 +78,18 @@ $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
 $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-bg-enabled: $button-color-none;
 $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -236,6 +227,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
 $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
@@ -250,8 +242,10 @@ $button-color-typical-secondary-border-active: $modes-color-interactive-primary-
 $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
 $button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
+$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -264,28 +258,35 @@ $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-a
 $button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
+$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
 $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -321,9 +322,8 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
 $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;