@sage/design-tokens 14.0.0 → 14.1.0

package/scss/product/small/components/button.scss

@@ -226,11 +226,14 @@ $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-
 $button-color-typical-primary-inverse-bg-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-primary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-secondary-bg-active: $modes-color-interactive-primary-active-alt;
+$button-color-typical-secondary-bg-enabled: $modes-color-interactive-primary-default-alt3;
+$button-color-typical-secondary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-secondary-border-active: $modes-color-interactive-primary-active;
 $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-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-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;
@@ -238,13 +241,14 @@ $button-color-typical-secondary-inverse-label-active: $modes-color-interactive-m
 $button-color-typical-secondary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-secondary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-tertiary-bg-active: $modes-color-interactive-primary-active-alt;
+$button-color-typical-tertiary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-active;
-$button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt2;
+$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-inverse-bg-active: $modes-color-interactive-primary-inverse-active-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-alt2;
+$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;
@@ -298,10 +302,8 @@ $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
 $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-bg-hover: $modes-color-interactive-primary-hover-alt;
 $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-bg-hover: $modes-color-interactive-primary-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-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;

package/scss/product/small/components/container.scss

@@ -6,12 +6,12 @@
 // Do not edit directly, this file was auto-generated.
 
 $container-size-carousel-mediaslide-minheight: 300; // max height for media visual
+$container-opacity-carousel-hidden: 0.3; // opacity applied to next and previous carousel slides
 $container-opacity-dialog-dimmer: 0.4; // dimmer opacity value
 $container-opacity-drag-ghost: 0.5; // drag ghost state opacity value
 $container-radius-none: $global-radius-none; // Card select (inner adjacent corners), Subscription tile footer top corners
 $container-radius-scrollbar: $global-radius-circle; // Scrollbar
 $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquote bar
-$container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
 $container-color-ai-dialog-borderhorizontal: $modes-color-generic-fg-ai-default; // top border for AI dialog component
 $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
 $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
@@ -55,6 +55,7 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
 $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
 $container-color-blockquote-border: $modes-color-interactive-primary-default;
 $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds 
+$container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
 $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
 $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
 $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
@@ -287,6 +288,5 @@ $container-borderwidth-tileselect-inactive: $global-borderwidth-xs; // Subscript
 $container-borderwidth-tileselect-selected: $global-borderwidth-s; // Tile select (selected tile)
 $container-borderwidth-tileselect-unavailable: $global-borderwidth-xs; // Subscription tile (unavailable product)
 $container-borderwidth-tileselect-enabled: $global-borderwidth-xs; // Tile select (enabled tile)
-$container-color-interactive-borderalt-hover: $container-color-interactive-border-alt; // For hover border on Link preview.
 $container-size-drawer-minwidth: $container-size-responsive-xl; // min-width for drawer component
 $container-size-drawer-maxwidth: $container-size-responsive-xxxxl; // max-width for drawer component

package/scss/product/small/components/link.scss

@@ -25,8 +25,8 @@ $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inve
 $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-alt3;
-$link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt3;
+$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-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/product/small/components/progress.scss

@@ -28,7 +28,7 @@ $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-datavis-fg-default: $modes-color-status-custom-teal-default;
 $progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
 $progress-color-loader-fg-error: $modes-color-status-negative-default;
 $progress-color-loader-fg-complete: $modes-color-status-positive-default;
@@ -69,6 +69,7 @@ $progress-size-carouselselector-dot-m: $global-size-micro-l;
 $progress-size-carouselselector-activedot-m: $global-size-macro-xxs;
 $progress-size-carouselselector-hitarea-m: $global-size-macro-xs;
 $progress-size-carouselslide-x-m: $global-size-macro-xl; // Inactive slide
+$progress-size-spinner-xxs: $global-size-macro-xxs; // Loader ring for XXS size loader spinners
 $progress-size-spinner-xs: $global-size-macro-xs - $global-size-micro-xs; // Loader ring for XS size loader spinners
 $progress-size-spinner-s: $global-size-macro-s; // Loader ring
 $progress-size-spinner-m: $global-size-macro-s * 2; // Loader ring

package/scss/product/small/components/status.scss

@@ -7,10 +7,6 @@
 
 $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
@@ -31,6 +27,40 @@ $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-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 +109,40 @@ $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-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-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 +151,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 +160,14 @@ $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/product/small/components/table.scss

@@ -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/product/small/dark.scss

@@ -65,27 +65,27 @@ $modes-color-generic-backdrop-faint: #181818; // used on full page backgrounds a
 $modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
 $modes-color-interactive-ai-hover: linear-gradient(90deg, #00D63914 0%, #00d6de14 40%, #9d60ff14 90%);
 $modes-color-interactive-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-$modes-color-interactive-danger-active: #f28486; // active button on dark
+$modes-color-interactive-danger-active: #f28083; // active button on dark
 $modes-color-interactive-danger-default: #E13E53;
 $modes-color-interactive-danger-default-alt: #e85b66; // for links in datatables 
-$modes-color-interactive-danger-hover: #eb646c;
-$modes-color-interactive-danger-hover-alt: #e13e5314; // button hover on dark
-$modes-color-interactive-danger-hover-alt2: #ec6a71; // for links in datatables
+$modes-color-interactive-danger-hover: #ea626a;
+$modes-color-interactive-danger-hover-alt: #e13e531a; // button hover on dark
+$modes-color-interactive-danger-hover-alt2: #ed6e74; // for links in datatables
 $modes-color-interactive-danger-with-active: #000000;
 $modes-color-interactive-danger-with-default: #000000;
-$modes-color-interactive-danger-inverse-active: #882b34; // used on pill hover states
+$modes-color-interactive-danger-inverse-active: #8c2c35; // used on pill hover states
 $modes-color-interactive-danger-inverse-default: #CD384B;
 $modes-color-interactive-danger-inverse-default-alt: #b23342; // For links in datatables
-$modes-color-interactive-danger-inverse-hover: #aa323f; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-inverse-hover-alt: #cd384b14; // used on secondary-button hover states
-$modes-color-interactive-danger-inverse-hover-alt2: #a3303d; // used on link hover state
+$modes-color-interactive-danger-inverse-hover: #ac3240; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #cd384b1a; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #9f303c; // used on link hover state
 $modes-color-interactive-danger-inverse-with-active: #FFFFFF;
 $modes-color-interactive-danger-inverse-with-default: #FFFFFF;
 $modes-color-interactive-data-entry-default: #000000; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #FFFFFF; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #000000;
 $modes-color-interactive-data-entry-with-hover: #FFFFFF; // text for draggable area on file input
-$modes-color-interactive-data-entry-hover-alt: #181818; // bg hover for draggable area on file input
+$modes-color-interactive-data-entry-hover-alt: #1b1b1b; // bg hover for draggable area on file input
 $modes-color-interactive-data-entry-with-default: #777; // Input borders.
 $modes-color-interactive-data-entry-default-alt: #0e0e0e; // Input footer bgs (e.g text editor)
 $modes-color-interactive-data-entry-content: #fffffff2; // Input Text
@@ -111,31 +111,31 @@ $modes-color-interactive-inactive-inverse-default: #a6a6a6; // Inversed disabled
 $modes-color-interactive-inactive-inverse-content: #0000006b; // Inversed disabled text inside buttons and form inputs.
 $modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #FFFFFF;
-$modes-color-interactive-monochrome-active-alt: #ffffff29;
+$modes-color-interactive-monochrome-active-alt: #ffffff26;
 $modes-color-interactive-monochrome-default: #ffffffe6;
 $modes-color-interactive-monochrome-default-alt: #ffffffab; // subtle and toggle button text
 $modes-color-interactive-monochrome-default-alt2: #ffffff6b; // Tertiary border color
-$modes-color-interactive-monochrome-hover-alt: #ffffff14; // Accordion, secondary, tertiary, menu bg on hover
-$modes-color-interactive-monochrome-hover: #ffffff29; // subtle table header hover
+$modes-color-interactive-monochrome-hover-alt: #ffffff1a; // Accordion, secondary, tertiary, menu bg on hover
+$modes-color-interactive-monochrome-hover: #ffffff26; // subtle table header hover
 $modes-color-interactive-monochrome-with-active: #000000;
 $modes-color-interactive-monochrome-with-active-alt: #FFFFFF;
 $modes-color-interactive-monochrome-with-default: #000000;
 $modes-color-interactive-monochrome-with-hover: #FFFFFF;
 $modes-color-interactive-monochrome-frozen-active: #FFFFFF;
-$modes-color-interactive-monochrome-frozen-active-alt: #ffffff29;
+$modes-color-interactive-monochrome-frozen-active-alt: #ffffff26;
 $modes-color-interactive-monochrome-frozen-default: #ffffffe6;
 $modes-color-interactive-monochrome-frozen-default-alt: #ffffffab;
-$modes-color-interactive-monochrome-frozen-hover-alt: #ffffff14;
+$modes-color-interactive-monochrome-frozen-hover-alt: #ffffff1a;
 $modes-color-interactive-monochrome-frozen-with-active: #000000;
 $modes-color-interactive-monochrome-frozen-with-hover: #FFFFFF;
 $modes-color-interactive-monochrome-frozen-with-hover-alt: #000000;
 $modes-color-interactive-monochrome-inverse-active: #000000;
-$modes-color-interactive-monochrome-inverse-active-alt: #00000029;
+$modes-color-interactive-monochrome-inverse-active-alt: #00000026;
 $modes-color-interactive-monochrome-inverse-default: #000000e6;
 $modes-color-interactive-monochrome-inverse-default-alt: #000000ab; // subtle and toggle button text
 $modes-color-interactive-monochrome-inverse-default-alt2: #0000006b; // Tertiary border color
-$modes-color-interactive-monochrome-inverse-hover-alt: #00000014; // Accordion, secondary, tertiary, menu bg on hover
-$modes-color-interactive-monochrome-inverse-hover: #00000029; // subtle table header hover
+$modes-color-interactive-monochrome-inverse-hover-alt: #0000001a; // Accordion, secondary, tertiary, menu bg on hover
+$modes-color-interactive-monochrome-inverse-hover: #00000026; // subtle table header hover
 $modes-color-interactive-monochrome-inverse-with-active: #FFFFFF;
 $modes-color-interactive-monochrome-inverse-with-active-alt: #000000;
 $modes-color-interactive-monochrome-inverse-with-default: #FFFFFF;
@@ -147,39 +147,39 @@ $modes-color-interactive-monochrome-subtle-default: #ffffff14; // subtle table h
 $modes-color-interactive-nav-active: #ffffff59; // active bg for nav items
 $modes-color-interactive-nav-default: #000000; // default bg for global nav
 $modes-color-interactive-nav-default-alt: #282828; // default bg for left nav container
-$modes-color-interactive-nav-hover: #ffffff29; // hover bg for nav items
+$modes-color-interactive-nav-hover: #ffffff26; // hover bg for nav items
 $modes-color-interactive-nav-with-active: #FFFFFF; // text and icons on top of active bgs in nav contexts
 $modes-color-interactive-nav-with-default: #fffffff2; // hover bg for nav items
 $modes-color-interactive-nav-with-hover: #FFFFFF; // hover bg for nav items
-$modes-color-interactive-primary-active: #81e57d;
-$modes-color-interactive-primary-active-alt: #00d63952; // Active color for secondary and tertiary buttons
+$modes-color-interactive-primary-active: #7ce47a;
+$modes-color-interactive-primary-active-alt: #00d6394d; // Active color for secondary and tertiary buttons
 $modes-color-interactive-primary-default: #00D639;
-$modes-color-interactive-primary-default-alt: #00d639cc; // Border color for secondary buttons
-$modes-color-interactive-primary-default-alt2: #00d63980; // Border color for tertiary buttons
-$modes-color-interactive-primary-default-alt3: #4cdc55; // default value for links
-$modes-color-interactive-primary-hover: #58de5d;
-$modes-color-interactive-primary-hover-alt: #00d63914; // Secondary and tertiary button hover
-$modes-color-interactive-primary-hover-alt2: #73e372; // hover for links
+$modes-color-interactive-primary-default-alt: #00d639cc; // Border color for secondary and tertiary buttons
+$modes-color-interactive-primary-default-alt2: #4cdc55; // default value for links
+$modes-color-interactive-primary-default-alt3: #00d63908; // Default background color of secondary buttons
+$modes-color-interactive-primary-hover: #55dd5b;
+$modes-color-interactive-primary-hover-alt: #00d6391a; // Secondary and tertiary button hover
+$modes-color-interactive-primary-hover-alt2: #71e270; // hover for links
 $modes-color-interactive-primary-with-active: #000000;
 $modes-color-interactive-primary-with-default: #000000;
 $modes-color-interactive-primary-with-hover: #000000;
-$modes-color-interactive-primary-frozen-active: #81e57d;
+$modes-color-interactive-primary-frozen-active: #7ce47a;
 $modes-color-interactive-primary-frozen-default: #00D639;
 $modes-color-interactive-primary-frozen-default-alt: #4cdc55;
-$modes-color-interactive-primary-frozen-hover: #58de5d;
-$modes-color-interactive-primary-frozen-hover-alt: #73e372; // for link hover
+$modes-color-interactive-primary-frozen-hover: #55dd5b;
+$modes-color-interactive-primary-frozen-hover-alt: #71e270; // for link hover
 $modes-color-interactive-primary-frozen-nav-hover: #008046;
 $modes-color-interactive-primary-frozen-nav-label-hover: #FFFFFF;
 $modes-color-interactive-primary-frozen-table-default: #18232a;
-$modes-color-interactive-primary-inverse-active: #14571a;
-$modes-color-interactive-primary-inverse-active-alt: #00811f52; // Active color for inverse secondary and tertiary buttons
+$modes-color-interactive-primary-inverse-active: #13591a;
+$modes-color-interactive-primary-inverse-active-alt: #00811f4d; // Active color for inverse secondary and tertiary buttons
 $modes-color-interactive-primary-inverse-default: #00811F;
-$modes-color-interactive-primary-inverse-default-alt: #00811fcc; // Borders on secondary inverse buttons
-$modes-color-interactive-primary-inverse-default-alt2: #00811f80; // Borders on tertiary inverse buttons
-$modes-color-interactive-primary-inverse-default-alt3: #0c711d; // Default color for links
-$modes-color-interactive-primary-inverse-hover: #0e6b1d;
-$modes-color-interactive-primary-inverse-hover-alt: #00811f14; // Secondary and tertiary inverse button hover
-$modes-color-interactive-primary-inverse-hover-alt2: #10681c; // hover for links
+$modes-color-interactive-primary-inverse-default-alt: #00811fcc; // Borders on secondary and tertiary inverse buttons
+$modes-color-interactive-primary-inverse-default-alt2: #0c711d; // Default color for links
+$modes-color-interactive-primary-inverse-default-alt3: #00811f08; // Default background color of inverse secondary buttons
+$modes-color-interactive-primary-inverse-hover: #0e6d1d;
+$modes-color-interactive-primary-inverse-hover-alt: #0c711d1a; // Secondary and tertiary inverse button hover
+$modes-color-interactive-primary-inverse-hover-alt2: #11651c; // hover for links
 $modes-color-interactive-primary-inverse-with-active: #FFFFFF;
 $modes-color-interactive-primary-inverse-with-default: #FFFFFF;
 $modes-color-interactive-primary-inverse-with-hover: #FFFFFF;
@@ -191,18 +191,19 @@ $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: #eb6732; // used on pill hover states
-$modes-color-status-caution-hover-alt: #3f1b0b; // used on pill hover states and message bg
+$modes-color-status-caution-hover: #eb6530; // used on pill hover states
+$modes-color-status-caution-hover-alt: #3e1a0b; // used on pill hover states and message bg
 $modes-color-status-caution-text: #e75b23;
 $modes-color-status-caution-frozenglobal-default: #E04500; // Global message bg
-$modes-color-status-caution-frozenglobal-hover: #eb6732; // used on global message bg
+$modes-color-status-caution-frozenglobal-hover: #eb6530; // used on global message bg
 $modes-color-status-caution-inverse-default: #D64309; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-caution-inverse-default-alt: #ffede5; // Subtle message bg
-$modes-color-status-caution-inverse-hover: #b13a0d; // used on pill hover states
-$modes-color-status-caution-inverse-hover-alt: #fdd3c0; // used on pill hover states and message bg
+$modes-color-status-caution-inverse-hover: #b33b0d; // used on pill hover states
+$modes-color-status-caution-inverse-hover-alt: #fed5c3; // used on pill hover states and message bg
 $modes-color-status-caution-inverse-text: #bf3e0c;
 $modes-color-status-content-with-default: #000000;
 $modes-color-status-content-with-default-alt: #fffffff2;
@@ -213,65 +214,104 @@ $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: #5291e0; // used on pill hover states
-$modes-color-status-info-hover-alt: #17253b; // used on pill hover states and message bg
+$modes-color-status-info-hover: #4f90df; // used on pill hover states
+$modes-color-status-info-hover-alt: #17253a; // used on pill hover states and message bg
 $modes-color-status-info-frozenglobal-default: #007ED9; // Global message bg
-$modes-color-status-info-frozenglobal-hover: #5291e0; // used on global message bg
+$modes-color-status-info-frozenglobal-hover: #4f90df; // used on global message bg
 $modes-color-status-info-inverse-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-info-inverse-default-alt: #eaeef6; // Subtle message bg
-$modes-color-status-info-inverse-hover: #10508a; // used on pill hover states
-$modes-color-status-info-inverse-hover-alt: #cbd6e9; // used on pill hover states and message bg
+$modes-color-status-info-inverse-hover: #10518c; // used on pill hover states
+$modes-color-status-info-inverse-hover-alt: #cdd7ea; // used on pill hover states and message bg
 $modes-color-status-negative-default: #E13E53;
 $modes-color-status-negative-default-alt: #241212; // Subtle message bg
-$modes-color-status-negative-hover: #eb646c; // used on pill hover states
-$modes-color-status-negative-hover-alt: #3f1a1c; // used on pill hover states and message bg
+$modes-color-status-negative-hover: #ea626a; // used on pill hover states
+$modes-color-status-negative-hover-alt: #3d1a1c; // used on pill hover states and message bg
 $modes-color-status-negative-text: #E13E53;
 $modes-color-status-negative-inverse-default: #CD384B; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-negative-inverse-default-alt: #fdeceb; // Subtle message bg
-$modes-color-status-negative-inverse-hover: #aa323f; // used on pill hover states
-$modes-color-status-negative-inverse-hover-alt: #f9d1cf; // used on pill hover states and message bg
+$modes-color-status-negative-inverse-hover: #ac3240; // used on pill hover states
+$modes-color-status-negative-inverse-hover-alt: #f9d3d1; // used on pill hover states and message bg
 $modes-color-status-negative-inverse-text: #CD384B;
 $modes-color-status-neutral-default: #7C7C7C;
 $modes-color-status-neutral-default-alt: #171717; // Subtle message bg
-$modes-color-status-neutral-hover: #909090; // used on pill hover states
-$modes-color-status-neutral-hover-alt: #252525; // used on pill hover states and message bg
+$modes-color-status-neutral-hover: #8e8e8e; // used on pill hover states
+$modes-color-status-neutral-hover-alt: #242424; // used on pill hover states and message bg
 $modes-color-status-neutral-frozen-default: #9e9e9e;
 $modes-color-status-neutral-frozen-default-alt: #171717; // Subtle message bg
-$modes-color-status-neutral-frozen-hover: #909090;
-$modes-color-status-neutral-frozen-hover-alt: #262626; // used on pill hover states and message bg
+$modes-color-status-neutral-frozen-hover: #8e8e8e;
+$modes-color-status-neutral-frozen-hover-alt: #2a2a2a; // used on pill hover states and message bg
 $modes-color-status-neutral-inverse-default: #656565;
 $modes-color-status-neutral-inverse-default-alt: #efefef; // Subtle message bg
-$modes-color-status-neutral-inverse-hover: #676767; // used on pill hover states
-$modes-color-status-neutral-inverse-hover-alt: #d8d8d8; // used on pill hover states and message bg
+$modes-color-status-neutral-inverse-hover: #696969; // used on pill hover states
+$modes-color-status-neutral-inverse-hover-alt: #d9d9d9; // used on pill hover states and message bg
 $modes-color-status-positive-default: #009023;
 $modes-color-status-positive-default-alt: #0e1a0b; // Subtle message bg
-$modes-color-status-positive-hover: #2e9936; // used on pill hover states
-$modes-color-status-positive-hover-alt: #132b12; // used on pill hover states and message bg
+$modes-color-status-positive-hover: #359b3b; // used on pill hover states
+$modes-color-status-positive-hover-alt: #132912; // used on pill hover states and message bg
 $modes-color-status-positive-inverse-default: #00811F; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-positive-inverse-default-alt: #e9f2e8; // Subtle message bg
-$modes-color-status-positive-inverse-hover: #0e6b1d; // used on pill hover states 
-$modes-color-status-positive-inverse-hover-alt: #c9e0c7; // 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: #223121; // marketing banner hover
+$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-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: #18b032; // used on pill hover states
+$modes-color-status-reviews-hover: #17b333; // used on pill hover states
 $modes-color-status-reviews-frozen-default: #00D639;
 $modes-color-status-reviews-frozen-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-$modes-color-status-reviews-frozen-hover: #18b032; // used on pill hover states
+$modes-color-status-reviews-frozen-hover: #17b333; // used on pill hover states
 $modes-color-modifier-contrast-less: #000000;
 $modes-color-modifier-contrast-more: #FFFFFF;
-$modes-color-modifiers-button-active: 0.32; // Active modifier used when 16% hover is used
-$modes-color-modifiers-button-active-alt: 0.16; // Active appled when 8% hover is used
-$modes-color-modifiers-button-hover: 0.16; // Hover used on primary buttons
-$modes-color-modifiers-button-hover-alt: 0.08; // Hover used on secondary and tertiary buttons
-$modes-color-modifiers-input-disabled-bg: 0.04; // less contrast
-$modes-color-modifiers-input-disabled-fg: 0.30; // less contrast
-$modes-color-modifiers-shadow-standard: 0.5; // standard mixer for shadow