@sage/design-tokens 14.0.1 → 14.1.0

package/scss/frozenproduct/large/components/form.scss

@@ -13,10 +13,7 @@ $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-active: $modes-color-interactive-monochrome-active;
-$form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
 $form-color-labelset-label-required: $modes-color-interactive-danger-default;
-$form-color-switch-bg-active: $modes-color-interactive-monochrome-active;
 $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
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
 $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-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
+$form-color-calendar-border-duration: $modes-color-interactive-monochrome-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-typical-bg-default: $modes-color-interactive-data-entry-default;
 $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $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-active;
 $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
-$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
-$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-space-none: $global-space-none;
 $form-space-calendar-x-m: $global-space-macro-m;
 $form-space-calendar-y-m: $global-space-macro-m;
@@ -227,7 +223,9 @@ $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-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;
@@ -247,8 +245,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
 $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
 $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
 $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
+$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-fg-active: $modes-color-interactive-monochrome-with-active;
 $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
+$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
 $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;

package/scss/frozenproduct/large/components/link.scss

@@ -5,7 +5,6 @@
 
 // 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.
@@ -20,13 +19,14 @@ $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-default: $modes-color-interactive-monochrome-default;
+$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
 $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-default-alt2;
 $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/large/components/nav.scss

@@ -7,15 +7,12 @@
 
 $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-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,17 +32,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
 $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $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-bg-hover: $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-hover: $modes-color-interactive-monochrome-with-hover;
-$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
@@ -54,6 +52,8 @@ $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-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;

package/scss/frozenproduct/large/components/page.scss

@@ -6,7 +6,6 @@
 // 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;
@@ -25,6 +24,7 @@ $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-none: $global-space-none;

package/scss/frozenproduct/large/components/popover.scss

@@ -6,7 +6,6 @@
 // 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-active; // previously action minor 850
 $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;
@@ -21,11 +20,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-active; // previously action minor 850
 $popover-color-bg-activealt: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM. 
 $popover-color-bg-hover: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM. 
 $popover-color-label-activealt: $modes-color-interactive-monochrome-with-hover;
 $popover-color-label-hover: $modes-color-interactive-monochrome-with-hover;
-$popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $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.
@@ -56,6 +55,7 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
 $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
 $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
 $popover-color-label-disabled: $modes-color-interactive-inactive-content;
+$popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $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/large/components/progress.scss

@@ -25,19 +25,13 @@ $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent ci
 $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-default: $modes-color-interactive-monochrome-active;
 $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-generic-default;
-$progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
+$progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
 $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;
@@ -53,14 +47,20 @@ $progress-typography-responsive-default-m: $global-typography-responsive-compone
 $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $progress-color-bg-default: $modes-color-interactive-progress-bg;
 $progress-color-fg-alt2: $modes-color-generic-content-firm;
+$progress-color-fg-default: $modes-color-interactive-monochrome-active;
 $progress-color-label-alt: $modes-color-generic-content-firm;
 $progress-color-label-default: $modes-color-generic-content-harsh;
 $progress-color-loader-bg-default: $modes-color-interactive-progress-bg;
+$progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // 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

package/scss/frozenproduct/large/components/status.scss

@@ -7,14 +7,11 @@
 
 $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-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
-$status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
-$status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
-$status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
 $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-ai-bg-alt: $modes-color-status-neutral-default-alt;
+$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-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
 $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
@@ -31,6 +28,41 @@ $status-color-message-contextual-warning-bg-default: $modes-color-status-caution
 $status-color-message-contextual-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
 $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-default: $modes-color-status-info-default-alt; // Global message bg
+$status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
+$status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
+$status-color-message-global-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
+$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;
+$status-color-pill-custom-teal-bg-default: $modes-color-status-custom-teal-default;
+$status-color-pill-custom-teal-bg-alt-default: $modes-color-status-custom-teal-default-alt; // outline pill bg
+$status-color-pill-custom-teal-border-default: $modes-color-status-custom-teal-default;
+$status-color-pill-custom-green-bg-default: $modes-color-status-custom-green-default;
+$status-color-pill-custom-green-bg-alt-default: $modes-color-status-custom-green-default-alt; // outline pill bg
+$status-color-pill-custom-green-border-default: $modes-color-status-custom-green-default;
+$status-color-pill-custom-lime-bg-default: $modes-color-status-custom-lime-default;
+$status-color-pill-custom-lime-bg-alt-default: $modes-color-status-custom-lime-default-alt; // outline pill bg
+$status-color-pill-custom-lime-border-default: $modes-color-status-custom-lime-default;
+$status-color-pill-custom-orange-bg-default: $modes-color-status-custom-orange-default;
+$status-color-pill-custom-orange-bg-alt-default: $modes-color-status-custom-orange-default-alt; // outline pill bg
+$status-color-pill-custom-orange-border-default: $modes-color-status-custom-orange-default;
+$status-color-pill-custom-red-bg-default: $modes-color-status-custom-red-default;
+$status-color-pill-custom-red-bg-alt-default: $modes-color-status-custom-red-default-alt; // outline pill bg
+$status-color-pill-custom-red-border-default: $modes-color-status-custom-red-default;
+$status-color-pill-custom-pink-bg-default: $modes-color-status-custom-pink-default;
+$status-color-pill-custom-pink-bg-alt-default: $modes-color-status-custom-pink-default-alt; // outline pill bg
+$status-color-pill-custom-pink-border-default: $modes-color-status-custom-pink-default;
+$status-color-pill-custom-purple-bg-default: $modes-color-status-custom-purple-default;
+$status-color-pill-custom-purple-bg-alt-default: $modes-color-status-custom-purple-default-alt; // outline pill bg
+$status-color-pill-custom-purple-border-default: $modes-color-status-custom-purple-default;
+$status-color-pill-custom-gray-bg-default: $modes-color-status-custom-gray-default;
+$status-color-pill-custom-gray-bg-alt-default: $modes-color-status-custom-gray-default-alt; // outline pill bg
+$status-color-pill-custom-gray-border-default: $modes-color-status-custom-gray-default;
+$status-color-pill-custom-slate-bg-default: $modes-color-status-custom-slate-default;
+$status-color-pill-custom-slate-bg-alt-default: $modes-color-status-custom-slate-default-alt; // outline pill bg
+$status-color-pill-custom-slate-border-default: $modes-color-status-custom-slate-default;
 $status-color-pill-error-bg-default: $modes-color-status-negative-default;
 $status-color-pill-error-bg-alt-default: $modes-color-status-negative-default-alt; // outline pill bg
 $status-color-pill-error-border-default: $modes-color-status-negative-default;
@@ -79,20 +111,39 @@ $status-typography-responsive-default-l: $global-typography-responsive-component
 $status-typography-responsive-heading-s: $global-typography-responsive-component-firm-s;
 $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
 $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
-$status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
-$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-hover-alt;
-$status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
 $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
 $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
 $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-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
-$status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
+$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-info-bg-hover: $modes-color-status-info-hover-alt;
+$status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
+$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;
+$status-color-pill-custom-teal-bg-hover: $modes-color-status-custom-teal-hover;
+$status-color-pill-custom-green-bg-alt-hover: $modes-color-status-custom-green-hover-alt;
+$status-color-pill-custom-green-bg-hover: $modes-color-status-custom-green-hover;
+$status-color-pill-custom-lime-bg-alt-hover: $modes-color-status-custom-lime-hover-alt;
+$status-color-pill-custom-lime-bg-hover: $modes-color-status-custom-lime-hover;
+$status-color-pill-custom-orange-bg-alt-hover: $modes-color-status-custom-orange-hover-alt;
+$status-color-pill-custom-orange-bg-hover: $modes-color-status-custom-orange-hover;
+$status-color-pill-custom-red-bg-alt-hover: $modes-color-status-custom-red-hover-alt;
+$status-color-pill-custom-red-bg-hover: $modes-color-status-custom-red-hover;
+$status-color-pill-custom-pink-bg-alt-hover: $modes-color-status-custom-pink-hover-alt;
+$status-color-pill-custom-pink-bg-hover: $modes-color-status-custom-pink-hover;
+$status-color-pill-custom-purple-bg-alt-hover: $modes-color-status-custom-purple-hover-alt;
+$status-color-pill-custom-purple-bg-hover: $modes-color-status-custom-purple-hover;
+$status-color-pill-custom-gray-bg-alt-hover: $modes-color-status-custom-gray-hover-alt;
+$status-color-pill-custom-gray-bg-hover: $modes-color-status-custom-gray-hover;
+$status-color-pill-custom-slate-bg-alt-hover: $modes-color-status-custom-slate-hover-alt;
+$status-color-pill-custom-slate-bg-hover: $modes-color-status-custom-slate-hover;
 $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
 $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
 $status-color-pill-error-inverse-bg-alt-hover: $modes-color-status-negative-inverse-hover-alt;
 $status-color-pill-error-inverse-bg-hover: $modes-color-status-negative-inverse-hover;
+$status-color-pill-generic-inverse-label-default: $modes-color-status-content-inverse-with-default;
+$status-color-pill-generic-inverse-label-hover: $modes-color-status-content-inverse-with-hover;
 $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;
@@ -101,6 +152,7 @@ $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
 $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-hover;
 $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)
 $status-color-pill-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
 $status-color-pill-success-bg-hover: $modes-color-status-positive-hover;
 $status-color-pill-success-inverse-bg-alt-hover: $modes-color-status-positive-inverse-hover-alt;
@@ -109,15 +161,13 @@ $status-color-pill-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
 $status-color-pill-warning-bg-hover: $modes-color-status-caution-hover;
 $status-color-pill-warning-inverse-bg-alt-hover: $modes-color-status-caution-inverse-hover-alt;
 $status-color-pill-warning-inverse-bg-hover: $modes-color-status-caution-inverse-hover;
-$status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
 $status-color-rating-bg-default: $modes-color-status-reviews-default;
 $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
 $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
 $status-color-rating-border-default: $modes-color-status-reviews-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-contextual-callout-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;
 $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-default-alt;

package/scss/frozenproduct/large/components/tab.scss

@@ -6,9 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $tab-color-bg-enabled: $modes-color-none;
-$tab-color-border-active: $modes-color-interactive-monochrome-active;
-$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;
@@ -22,12 +19,11 @@ $tab-typography-responsive-label-s: $global-typography-responsive-component-firm
 $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-hover-alt; // For anchor nav, not tab.
-$tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
+$tab-color-border-active: $modes-color-interactive-monochrome-active;
 $tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
-$tab-color-label-enabled: $modes-color-interactive-monochrome-default;
+$tab-color-label-active: $modes-color-interactive-monochrome-active;
+$tab-color-icon-active: $modes-color-interactive-monochrome-active;
 $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.
@@ -47,6 +43,10 @@ $tab-color-bg-active: $modes-color-interactive-monochrome-with-active;
 $tab-color-border-activealt: $modes-color-generic-fg-delicate;
 $tab-color-border-enabled: $modes-color-generic-fg-delicate;
 $tab-color-border-hover: $modes-color-generic-fg-moderate;
+$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-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-l: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-baseline-m: $global-radius-interactive-xxs;

package/scss/frozenproduct/large/components/table.scss

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $table-color-header-subtle-bg-default: $modes-color-none;
-$table-color-row-bg-active: $modes-color-interactive-monochrome-active;
 $table-color-row-bg-default: $modes-color-generic-bg-nought;
 $table-color-row-label-hover: $modes-color-generic-content-extreme;
 $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
@@ -27,33 +26,34 @@ $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-default; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
-$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-activated: $modes-color-interactive-primary-default;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-active;
 $table-color-row-bg-alt: $modes-color-generic-bg-delicate; // Zebra stripes
 $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
 $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
 $table-color-row-bg-hover: $modes-color-generic-bg-soft;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
 $table-color-footer-bg-default: $modes-color-generic-bg-soft;
-$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
 $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-alt: $modes-color-interactive-monochrome-default; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
+$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-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active;
 $table-color-row-label-active: $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
 $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle
@@ -80,7 +80,7 @@ $table-size-row-standard-m: $global-size-macro-m;
 $table-size-row-standard-l: $global-size-macro-l;
 $table-size-row-standard-xl: $global-size-macro-xl + $global-size-micro-m;
 $table-size-icon-xs: $global-size-icon-s;
-$table-size-icon-s: $global-size-icon-s;
+$table-size-icon-s: $global-size-icon-m;
 $table-size-icon-m: $global-size-icon-m;
 $table-size-icon-l: $global-size-icon-l;
 $table-size-icon-xl: $global-size-icon-xl;

package/scss/frozenproduct/large/dark.scss

@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #000000;
 $modes-color-status-ai-default-alt: #FFFFFF; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
 $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-$modes-color-status-generic-default: #008a89;
+$modes-color-status-callout-default-alt: #122211; // used for marketing banners
+$modes-color-status-callout-hover-alt: #263525; // marketing banner hover
 $modes-color-status-caution-default: #E04500;
 $modes-color-status-caution-default-alt: #251206; // Subtle message bg
 $modes-color-status-caution-hover: #eb6530; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #FFFFFF;
 $modes-color-status-content-inverse-with-default-alt: #000000f2;
 $modes-color-status-content-inverse-with-hover: #FFFFFF;
 $modes-color-status-content-inverse-with-hover-alt: #000000;
+$modes-color-status-custom-blue-default: #007FD9; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-blue-default-alt: #0d1219; // Pill bg
+$modes-color-status-custom-blue-hover: #4f91df; // used on pill hover states
+$modes-color-status-custom-blue-hover-alt: #142131; // used on pill hover states
+$modes-color-status-custom-teal-default: #008A89; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-teal-default-alt: #0a1313; // Pill bg
+$modes-color-status-custom-teal-hover: #449b9a; // used on pill hover states
+$modes-color-status-custom-teal-hover-alt: #082427; // used on pill hover states
+$modes-color-status-custom-green-default: #009023; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-green-default-alt: #0a1408; // Pill bg
+$modes-color-status-custom-green-hover: #44a146; // used on pill hover states
+$modes-color-status-custom-green-hover-alt: #0b2418; // used on pill hover states
+$modes-color-status-custom-lime-default: #6E8500; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-lime-default-alt: #111205; // Pill bg
+$modes-color-status-custom-lime-hover: #859635; // used on pill hover states
+$modes-color-status-custom-lime-hover-alt: #162311; // used on pill hover states
+$modes-color-status-custom-orange-default: #DB4B00; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-orange-default-alt: #1c0e04; // Pill bg
+$modes-color-status-custom-orange-hover: #e66930; // used on pill hover states
+$modes-color-status-custom-orange-hover-alt: #331816; // used on pill hover states
+$modes-color-status-custom-red-default: #F50058; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-red-default-alt: #1e0d0d; // Pill bg
+$modes-color-status-custom-red-hover: #fc4e6e; // used on pill hover states
+$modes-color-status-custom-red-hover-alt: #331720; // used on pill hover states
+$modes-color-status-custom-pink-default: #DD2BAB; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-pink-default-alt: #1b0d16; // Pill bg
+$modes-color-status-custom-pink-hover: #e558b7; // used on pill hover states
+$modes-color-status-custom-pink-hover-alt: #2d192b; // used on pill hover states
+$modes-color-status-custom-purple-default: #985FDC; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-purple-default-alt: #150f19; // Pill bg
+$modes-color-status-custom-purple-hover: #a977e2; // used on pill hover states
+$modes-color-status-custom-purple-hover-alt: #231c30; // used on pill hover states
+$modes-color-status-custom-gray-default: #7C7C7C; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-gray-default-alt: #111; // Pill bg
+$modes-color-status-custom-gray-hover: #8e8e8e; // used on pill hover states
+$modes-color-status-custom-gray-hover-alt: #1a202b; // used on pill hover states
+$modes-color-status-custom-slate-default: #5C8196; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-slate-default-alt: #0f1214; // Pill bg
+$modes-color-status-custom-slate-hover: #7493a5; // used on pill hover states
+$modes-color-status-custom-slate-hover-alt: #13222c; // used on pill hover states
+$modes-color-status-generic-default: #F0F;
+$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
+$modes-color-status-important-default-alt: #150d19; // Subtle message bg
+$modes-color-status-important-hover: #a267de; // used on pill hover states
+$modes-color-status-important-hover-alt: #231b30; // used on pill hover states and message bg
+$modes-color-status-important-inverse-default: #985FDC;
+$modes-color-status-important-inverse-default-alt: #f1e6fa; // Subtle message bg
+$modes-color-status-important-inverse-hover: #8051b8; // used on pill hover states
+$modes-color-status-important-inverse-hover-alt: #daceed; // used on pill hover states and message bg
 $modes-color-status-inactive-default: #4b4b4b; // For readonly pill bg and border
 $modes-color-status-inactive-with-default: #ffffffab; // For readonly filled pill text
 $modes-color-status-inactive-inverse-default: #a6a6a6; // For readonly pill bg and border
 $modes-color-status-inactive-inverse-with-default: #000000ab; // For readonly filled pill text
-$modes-color-status-important-default: #985FDC; // For tile status keylines to show if something is of high importance.
 $modes-color-status-info-default: #007ED9;
 $modes-color-status-info-default-alt: #111722; // Subtle message bg
 $modes-color-status-info-hover: #4f90df; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #00811F; // For pills and messages
 $modes-color-status-positive-inverse-default-alt: #e9f2e8; // Subtle message bg
 $modes-color-status-positive-inverse-hover: #0e6d1d; // used on pill hover states 
 $modes-color-status-positive-inverse-hover-alt: #cbe1c9; // used on pill hover states and message bg
-$modes-color-status-callout-default-alt: #122211; // used for marketing banners
-$modes-color-status-callout-hover-alt: #263525; // marketing banner hover
 $modes-color-status-reviews-default: #00D639;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
 $modes-color-status-reviews-hover: #17b333; // used on pill hover states

package/scss/frozenproduct/large/light.scss

@@ -191,7 +191,8 @@ $modes-color-status-ai-default: #FFFFFF;
 $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
 $modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-$modes-color-status-generic-default: #007c7b; // used in progress bar 
+$modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
+$modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
 $modes-color-status-caution-default: #D64309; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
 $modes-color-status-caution-hover: #b33b0d; // used on pill hover states
@@ -213,11 +214,59 @@ $modes-color-status-content-inverse-with-default: #000000;
 $modes-color-status-content-inverse-with-default-alt: #fffffff2;
 $modes-color-status-content-inverse-with-hover: #000000; // for pill hover X
 $modes-color-status-content-inverse-with-hover-alt: #FFFFFF; // for message text
+$modes-color-status-custom-blue-default: #0071C3; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-blue-default-alt: #ebf0f9; // Pill bg
+$modes-color-status-custom-blue-hover: #135fa3; // used on pill hover states
+$modes-color-status-custom-blue-hover-alt: #ced9ed; // used on pill hover states
+$modes-color-status-custom-teal-default: #007C7B; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-teal-default-alt: #e9f1f1; // Pill bg
+$modes-color-status-custom-teal-hover: #0e6968; // used on pill hover states
+$modes-color-status-custom-teal-hover-alt: #c4dde0; // used on pill hover states
+$modes-color-status-custom-green-default: #00811F; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-green-default-alt: #e9f2e8; // Pill bg
+$modes-color-status-custom-green-hover: #0e6d1d; // used on pill hover states
+$modes-color-status-custom-green-hover-alt: #c4decf; // used on pill hover states
+$modes-color-status-custom-lime-default: #637700; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-lime-default-alt: #eff1e6; // Pill bg
+$modes-color-status-custom-lime-hover: #546408; // used on pill hover states
+$modes-color-status-custom-lime-hover-alt: #cdddc9; // used on pill hover states
+$modes-color-status-custom-orange-default: #C54300; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-orange-default-alt: #feece5; // Pill bg
+$modes-color-status-custom-orange-hover: #a53a06; // used on pill hover states
+$modes-color-status-custom-orange-hover-alt: #f2d0ce; // used on pill hover states
+$modes-color-status-custom-red-default: #DC004E; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-red-default-alt: #ffebec; // Pill bg
+$modes-color-status-custom-red-hover: #b81242; // used on pill hover states
+$modes-color-status-custom-red-hover-alt: #f1cfd9; // used on pill hover states
+$modes-color-status-custom-pink-default: #C8269A; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-pink-default-alt: #fcecf5; // Pill bg
+$modes-color-status-custom-pink-hover: #a82581; // used on pill hover states
+$modes-color-status-custom-pink-hover-alt: #ead2e5; // used on pill hover states
+$modes-color-status-custom-purple-default: #8F4CD7; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-purple-default-alt: #f5edfc; // Pill bg
+$modes-color-status-custom-purple-hover: #7941b4; // used on pill hover states
+$modes-color-status-custom-purple-hover-alt: #ded4ee; // used on pill hover states
+$modes-color-status-custom-gray-default: #6F6F6F; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-gray-default-alt: #f0f0f0; // Pill bg
+$modes-color-status-custom-gray-hover: #5e5e5e; // used on pill hover states
+$modes-color-status-custom-gray-hover-alt: #d3d9e5; // used on pill hover states
+$modes-color-status-custom-slate-default: #527386; // For pills. Not accessible with white TEXT.
+$modes-color-status-custom-slate-default-alt: #edf0f2; // Pill bg
+$modes-color-status-custom-slate-hover: #466171; // used on pill hover states
+$modes-color-status-custom-slate-hover-alt: #cbdae6; // used on pill hover states
+$modes-color-status-generic-default: #F0F; // TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour.
+$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
+$modes-color-status-important-default-alt: #f5edfc; // Subtle message bg
+$modes-color-status-important-hover: #7941b4; // used on pill hover states
+$modes-color-status-important-hover-alt: #ded4ee; // used on pill hover states and message bg
+$modes-color-status-important-inverse-default: #985FDC;
+$modes-color-status-important-inverse-default-alt: #1b1422; // Subtle message bg
+$modes-color-status-important-inverse-hover: #a977e2; // used on pill hover states
+$modes-color-status-important-inverse-hover-alt: #282039; // used on pill hover states and message bg
 $modes-color-status-inactive-default: #a6a6a6; // For readonly pill bg and border
 $modes-color-status-inactive-with-default: #000000ab; // For readonly filled pill text
 $modes-color-status-inactive-inverse-default: #4b4b4b; // For readonly pill bg and border
 $modes-color-status-inactive-inverse-with-default: #ffffffab; // For readonly filled pill text
-$modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
 $modes-color-status-info-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
 $modes-color-status-info-hover: #10518c; // used on pill hover states
@@ -258,8 +307,6 @@ $modes-color-status-positive-inverse-default: #009023;
 $modes-color-status-positive-inverse-default-alt: #0e1a0b; // Subtle message bg
 $modes-color-status-positive-inverse-hover: #328e37; // used on pill hover states
 $modes-color-status-positive-inverse-hover-alt: #132912; // used on pill hover states and message bg
-$modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
-$modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
 $modes-color-status-reviews-default: #00811F;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
 $modes-color-status-reviews-hover: #0e6d1d;