@sage/design-tokens 5.3.0 → 7.0.0

package/scss/marketing/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-generic-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,30 +26,31 @@ $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-generic-hover;
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default-alt; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
-$table-color-header-harsh-border-default: $modes-color-interactive-monochrome-subtle-default-alt;
-$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-bg-activated: $modes-color-interactive-primary-default;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-generic-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-generic-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
+$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
+$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default-alt; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
+$table-color-header-harsh-border-default: $modes-color-interactive-monochrome-subtle-default-alt;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-generic-with-default;
+$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-row-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-footer-label-default: $modes-color-interactive-monochrome-generic-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
@@ -65,8 +65,6 @@ $table-space-row-xg-s: $global-space-micro-l; // internal spacing between text,
 $table-space-row-xg-m: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
 $table-space-row-xg-l: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
 $table-space-row-xg-xl: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
-$table-space-row-y-m: $global-space-micro-l; // top and bottom adding inside pagination
-$table-space-row-yg-m: $global-space-micro-l; // gap between table and pagination
 $table-space-rowchild-x-xs: $global-space-macro-l + $global-space-micro-s; // Left padding inside XS child row cells
 $table-space-rowchild-x-s: $global-space-macro-xl + $global-space-micro-s; // Left padding inside S child row cells
 $table-space-rowchild-x-m: $global-space-macro-xl + $global-space-micro-s; // Left padding inside M child row cells

package/scss/marketing/large/dark.scss

@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #FFFFFF;
 $modes-color-brand-with-default-alt: #000000;
 $modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
 $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-$modes-color-brand-copilot-no-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-$modes-color-brand-copilot-no-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-$modes-color-brand-copilot-no-bg-mono: #FFFFFF;
-$modes-color-brand-copilot-with-bg-s: #000000;
-$modes-color-brand-copilot-with-bg-star: #000000;
-$modes-color-brand-copilot-with-bg-bg: #FFFFFF;
+$modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
 $modes-color-custom-default: #00D639; // This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs.
 $modes-color-custom-frozen: #00D639; // Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg.
 $modes-color-generic-bg-nought: #000000;
@@ -124,8 +119,8 @@ $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: #34211a; // used on pill hover states and message bg
 $modes-color-status-caution-text: #e75b23;
-$modes-color-status-caution-frozen-default: #251206; // Global message bg
-$modes-color-status-caution-frozen-icon: #e75b23; // Global message icon.
+$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-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%);
@@ -142,19 +137,21 @@ $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: #212631; // used on pill hover states and message bg
-$modes-color-status-info-frozen-default: #111722; // Global 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-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: #332122; // used on pill hover states and message bg
 $modes-color-status-negative-text: #E13E53;
-$modes-color-status-neutral-alt: #7C7C7C;
 $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: #262626; // 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-positive-default: #009023;
 $modes-color-status-positive-default-alt: #0e1a0b; // Subtle message bg
 $modes-color-status-positive-hover: #2e9936; // used on pill hover states

package/scss/marketing/large/light.scss

@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #000000;
 $modes-color-brand-with-default-alt: #FFFFFF;
 $modes-color-brand-copilot-ai-identifier-default: #000000;
 $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-$modes-color-brand-copilot-no-bg-s: #000000;
-$modes-color-brand-copilot-no-bg-star: #000000;
-$modes-color-brand-copilot-no-bg-mono: #000000;
-$modes-color-brand-copilot-with-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-$modes-color-brand-copilot-with-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-$modes-color-brand-copilot-with-bg-bg: #000000;
+$modes-color-brand-copilot-no-bg-monochrome: #000000;
 $modes-color-custom-default: #00811F; // This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg. 
 $modes-color-custom-frozen: #008046; // This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg.
 $modes-color-generic-bg-nought: #FFFFFF;
@@ -129,8 +124,8 @@ $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
 $modes-color-status-caution-hover: #b13a0d; // used on pill hover states
 $modes-color-status-caution-hover-alt: #f1e0d8; // used on pill hover states and message bg
 $modes-color-status-caution-text: #bf3e0c;
-$modes-color-status-caution-frozen-default: #FF8629; // used on global message bg
-$modes-color-status-caution-frozen-icon: #000000; // used on global message icon
+$modes-color-status-caution-frozenglobal-default: #ff8629; // used on global message bg
+$modes-color-status-caution-frozenglobal-hover: #ff9a4e; // used on global message bg
 $modes-color-status-content-with-default: #FFFFFF;
 $modes-color-status-content-with-default-alt: #000000f2;
 $modes-color-status-content-with-hover: #FFFFFF; // for pill hover X
@@ -142,19 +137,21 @@ $modes-color-status-info-default: #0060A7; // For pills and messages. Not access
 $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
 $modes-color-status-info-hover: #10508a; // used on pill hover states
 $modes-color-status-info-hover-alt: #dde1e8; // used on pill hover states and message bg
-$modes-color-status-info-frozen-default: #65a9ff; // used on global message bg
+$modes-color-status-info-frozenglobal-default: #65a9ff; // used on global message bg
+$modes-color-status-info-frozenglobal-hover: #84b6ff; // used on global message bg
 $modes-color-status-negative-default: #CD384B; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-negative-default-alt: #fdeceb; // Subtle message bg
 $modes-color-status-negative-hover: #aa323f; // used on pill hover states
 $modes-color-status-negative-hover-alt: #efdfde; // used on pill hover states and message bg
 $modes-color-status-negative-text: #CD384B;
-$modes-color-status-neutral-alt: #656565;
 $modes-color-status-neutral-default: #656565;
 $modes-color-status-neutral-default-alt: #efefef; // Subtle message bg
 $modes-color-status-neutral-hover: #555; // used on pill hover states
 $modes-color-status-neutral-hover-alt: #e2e2e2; // used on pill hover states and message bg
 $modes-color-status-neutral-frozen-default: #335B70;
+$modes-color-status-neutral-frozen-default-alt: #eaedf0; // Subtle message bg
 $modes-color-status-neutral-frozen-hover: #20313b;
+$modes-color-status-neutral-frozen-hover-alt: #dde0e2; // used on pill hover states and message bg
 $modes-color-status-positive-default: #008A21; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-positive-default-alt: #eaf3e8; // Subtle message bg
 $modes-color-status-positive-hover: #0f731e; // used on pill hover states 

package/scss/marketing/small/components/container.scss

@@ -217,9 +217,11 @@ $container-space-linkpreview-y-l: $global-space-macro-xs; // Content horizontal
 $container-space-linkpreview-yg-s: $global-space-micro-s; // Content horizontal padding for small variant
 $container-space-linkpreview-yg-m: $global-space-micro-l; // Content horizontal padding for medium variant
 $container-space-linkpreview-yg-l: $global-space-micro-xxl; // Content horizontal padding for large variant
-$container-space-pagination-xg-m: $global-space-micro-l; // gap between elements in pagination
+$container-space-pagination-xg-m: $global-space-macro-xxxs; // gap between elements in pagination
 $container-space-pagination-xg-l: $global-space-macro-xs; // gap between page nav buttons in pagination
-$container-space-pagination-y-m: $global-space-micro-l; // top and bottom padding inside pagination
+$container-space-pagination-y-m: $global-space-macro-xxs; // top and bottom padding inside pagination
+$container-space-pagination-y-l: $global-space-macro-xs; // external margin on top of floating pagination variant
+$container-space-pagination-yg-m: $global-space-macro-xxxs; // gap between left and right pagination elements when stacked vertically on small screens
 $container-space-pagination-x-m: $global-space-macro-xs; // left and right padding inside pagination
 $container-space-scrollbar-y-inner: $global-space-micro-xxs; // top and bottom padding around scrollbar handle.
 $container-space-scrollbar-y-outer: $global-space-micro-xs; // top and bottom padding inside scrollbar outer container

package/scss/marketing/small/components/logo.scss

@@ -6,16 +6,11 @@
 // Do not edit directly, this file was auto-generated.
 
 $logo-size-ai-m: 14px; // AI star
-$logo-color-copilot-no-bg-bg-s: $modes-color-brand-copilot-no-bg-s;
-$logo-color-copilot-no-bg-bg-star: $modes-color-brand-copilot-no-bg-star;
 $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
 $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
 $logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
 $logo-color-trust-outline: $modes-color-generic-content-extreme;
-$logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-mono;
-$logo-color-copilot-with-bg-bg-s: $modes-color-brand-copilot-with-bg-s;
-$logo-color-copilot-with-bg-bg-star: $modes-color-brand-copilot-with-bg-star;
-$logo-color-copilot-with-bg-bg-default: $modes-color-brand-copilot-with-bg-bg;
+$logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
 $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
 $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;
 $logo-color-ai-identifier-outline: $modes-color-brand-copilot-ai-identifier-default; // star outline variant

package/scss/marketing/small/components/status.scss

@@ -7,29 +7,44 @@
 
 $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-bg-default: $modes-color-generic-bg-nought;
-$status-color-error-bg-default: $modes-color-status-negative-default;
-$status-color-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
-$status-color-error-border-default: $modes-color-status-negative-default;
-$status-color-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
-$status-color-info-bg-default: $modes-color-status-info-default;
-$status-color-info-bg-alt: $modes-color-status-info-default-alt; // Subtle message bg
-$status-color-info-bg-alt-default: $modes-color-status-info-default-alt; // Global message bg
-$status-color-info-border-default: $modes-color-status-info-default;
-$status-color-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
-$status-color-neutral-bg-default: $modes-color-status-neutral-default;
-$status-color-neutral-bg-alt: $modes-color-status-neutral-default-alt; // Subtle message bg
-$status-color-neutral-border-default: $modes-color-status-neutral-default;
-$status-color-neutral-icon: $modes-color-status-neutral-alt; // Icon on tinted bgs
-$status-color-success-bg-default: $modes-color-status-positive-default;
-$status-color-success-bg-alt: $modes-color-status-positive-default-alt; // Subtle message bg
-$status-color-success-border-default: $modes-color-status-positive-default;
-$status-color-success-icon: $modes-color-status-positive-default; // Icon on tinted bgs
-$status-color-warning-bg-default: $modes-color-status-caution-default;
-$status-color-warning-bg-alt: $modes-color-status-caution-default-alt; // Subtle message bg
-$status-color-warning-bg-alt-default: $modes-color-status-caution-default-alt; // Global message bg
-$status-color-warning-border-default: $modes-color-status-caution-default;
-$status-color-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-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-ai-bg-alt: $modes-color-status-neutral-default-alt;
+$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;
+$status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
+$status-color-message-contextual-info-bg-default: $modes-color-status-info-default;
+$status-color-message-contextual-info-bg-alt: $modes-color-status-info-default-alt; // Subtle message bg
+$status-color-message-contextual-info-border-default: $modes-color-status-info-default;
+$status-color-message-contextual-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
+$status-color-message-contextual-success-bg-default: $modes-color-status-positive-default;
+$status-color-message-contextual-success-bg-alt: $modes-color-status-positive-default-alt; // Subtle message bg
+$status-color-message-contextual-success-border-default: $modes-color-status-positive-default;
+$status-color-message-contextual-success-icon: $modes-color-status-positive-default; // Icon on tinted bgs
+$status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
+$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-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;
+$status-color-pill-info-bg-default: $modes-color-status-info-default;
+$status-color-pill-info-bg-alt-default: $modes-color-status-info-default-alt; // outline pill bg
+$status-color-pill-info-border-default: $modes-color-status-info-default;
+$status-color-pill-neutral-bg-default: $modes-color-status-neutral-default;
+$status-color-pill-neutral-bg-alt-default: $modes-color-status-neutral-default-alt; // outline pill bg
+$status-color-pill-neutral-border-default: $modes-color-status-neutral-default;
+$status-color-pill-success-bg-default: $modes-color-status-positive-default;
+$status-color-pill-success-bg-alt-default: $modes-color-status-positive-default-alt; // outline pill bg
+$status-color-pill-success-border-default: $modes-color-status-positive-default;
+$status-color-pill-warning-bg-default: $modes-color-status-caution-default;
+$status-color-pill-warning-bg-alt-default: $modes-color-status-caution-default-alt; // Global message bg
+$status-color-pill-warning-border-default: $modes-color-status-caution-default;
 $status-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $status-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
 $status-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
@@ -48,33 +63,37 @@ $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-label-alt-readonly: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
-$status-color-label-alt-hover: $modes-color-status-content-with-hover-alt;
-$status-color-text: $modes-color-status-content-with-hover-alt; // Message text.
-$status-color-ai-bg-default: $modes-color-status-ai-default-alt;
-$status-color-ai-border-default: $modes-color-status-ai-default-alt;
-$status-color-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
-$status-color-callout-bg-alt-default: $modes-color-status-callout-default-alt; // Global message bg
-$status-color-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
-$status-color-error-bg-hover: $modes-color-status-negative-hover;
-$status-color-info-bg-alt-hover: $modes-color-status-info-hover-alt;
-$status-color-info-bg-hover: $modes-color-status-info-hover;
-$status-color-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
-$status-color-neutral-bg-hover: $modes-color-status-neutral-hover;
+$status-color-message-global-label-hover: $modes-color-interactive-monochrome-generic-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-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
+$status-color-pill-error-bg-hover: $modes-color-status-negative-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-neutral-bg-alt-hover: $modes-color-status-neutral-hover-alt;
+$status-color-pill-neutral-bg-hover: $modes-color-status-neutral-hover;
+$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-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
+$status-color-pill-warning-bg-hover: $modes-color-status-caution-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-success-bg-alt-hover: $modes-color-status-positive-hover-alt;
-$status-color-success-bg-hover: $modes-color-status-positive-hover;
-$status-color-warning-bg-alt-hover: $modes-color-status-caution-hover-alt;
-$status-color-warning-bg-hover: $modes-color-status-caution-hover;
-$status-color-icon-default: $modes-color-status-content-with-default; // Decorative message icons
-$status-color-label-default: $modes-color-status-content-with-default;
-$status-color-label-readonly: $modes-color-interactive-monochrome-generic-with-default; // Pill (all types, readonly, when nested in disabled parent components)
-$status-color-label-hover: $modes-color-status-content-with-hover;
-$status-color-label-alt-default: $modes-color-status-content-with-default-alt;
-$status-color-callout-bg-alt-hover: $modes-color-status-callout-hover-alt; // Subtle message bg
+$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-label-default: $modes-color-status-content-with-default;
+$status-color-pill-label-hover: $modes-color-status-content-with-hover;
+$status-color-pill-label-alt-default: $modes-color-status-content-with-default-alt;
+$status-color-pill-label-alt-hover: $modes-color-status-content-with-default-alt;
 $status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
 $status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
 $status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button
@@ -110,6 +129,6 @@ $status-space-message-global-yg-m: $global-space-micro-s; // Gap between heading
 $status-space-message-global-cta-y-m: $global-space-macro-xs; // Top and bottom padding on global message for countdown
 $status-space-message-global-cta-yg-m: $global-space-macro-m; // Gap between countdown spacing for global message
 $status-space-message-global-iconwrapper-y-m: $global-space-micro-xxl; // Top padding on global message icon wrapper.
-$status-color-bg-readonly: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
-$status-color-border-readonly: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
+$status-color-pill-readonly-bg-default: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
+$status-color-pill-readonly-border-default: $modes-color-status-inactive-default; // Pill (all types, readonly, when nested in disabled parent components)
 $status-size-message-messagecontent-maxwidth: $container-size-responsive-xxxl; // max width of content inside message to make sure there are roughly 12 works per line

package/scss/marketing/small/components/table.scss

@@ -65,8 +65,6 @@ $table-space-row-xg-s: $global-space-micro-l; // internal spacing between text,
 $table-space-row-xg-m: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
 $table-space-row-xg-l: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
 $table-space-row-xg-xl: $global-space-micro-l; // internal spacing between text, checkboxes, icons etc
-$table-space-row-y-m: $global-space-micro-l; // top and bottom adding inside pagination
-$table-space-row-yg-m: $global-space-micro-l; // gap between table and pagination
 $table-space-rowchild-x-xs: $global-space-macro-l + $global-space-micro-s; // Left padding inside XS child row cells
 $table-space-rowchild-x-s: $global-space-macro-xl + $global-space-micro-s; // Left padding inside S child row cells
 $table-space-rowchild-x-m: $global-space-macro-xl + $global-space-micro-s; // Left padding inside M child row cells

package/scss/marketing/small/dark.scss

@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #FFFFFF;
 $modes-color-brand-with-default-alt: #000000;
 $modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
 $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-$modes-color-brand-copilot-no-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-$modes-color-brand-copilot-no-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-$modes-color-brand-copilot-no-bg-mono: #FFFFFF;
-$modes-color-brand-copilot-with-bg-s: #000000;
-$modes-color-brand-copilot-with-bg-star: #000000;
-$modes-color-brand-copilot-with-bg-bg: #FFFFFF;
+$modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
 $modes-color-custom-default: #00D639; // This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs.
 $modes-color-custom-frozen: #00D639; // Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg.
 $modes-color-generic-bg-nought: #000000;
@@ -124,8 +119,8 @@ $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: #34211a; // used on pill hover states and message bg
 $modes-color-status-caution-text: #e75b23;
-$modes-color-status-caution-frozen-default: #251206; // Global message bg
-$modes-color-status-caution-frozen-icon: #e75b23; // Global message icon.
+$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-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%);
@@ -142,19 +137,21 @@ $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: #212631; // used on pill hover states and message bg
-$modes-color-status-info-frozen-default: #111722; // Global 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-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: #332122; // used on pill hover states and message bg
 $modes-color-status-negative-text: #E13E53;
-$modes-color-status-neutral-alt: #7C7C7C;
 $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: #262626; // 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-positive-default: #009023;
 $modes-color-status-positive-default-alt: #0e1a0b; // Subtle message bg
 $modes-color-status-positive-hover: #2e9936; // used on pill hover states

package/scss/marketing/small/light.scss

@@ -11,12 +11,7 @@ $modes-color-brand-default-alt: #000000;
 $modes-color-brand-with-default-alt: #FFFFFF;
 $modes-color-brand-copilot-ai-identifier-default: #000000;
 $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-$modes-color-brand-copilot-no-bg-s: #000000;
-$modes-color-brand-copilot-no-bg-star: #000000;
-$modes-color-brand-copilot-no-bg-mono: #000000;
-$modes-color-brand-copilot-with-bg-s: linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%);
-$modes-color-brand-copilot-with-bg-star: radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%);
-$modes-color-brand-copilot-with-bg-bg: #000000;
+$modes-color-brand-copilot-no-bg-monochrome: #000000;
 $modes-color-custom-default: #00811F; // This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg. 
 $modes-color-custom-frozen: #008046; // This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg.
 $modes-color-generic-bg-nought: #FFFFFF;
@@ -129,8 +124,8 @@ $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
 $modes-color-status-caution-hover: #b13a0d; // used on pill hover states
 $modes-color-status-caution-hover-alt: #f1e0d8; // used on pill hover states and message bg
 $modes-color-status-caution-text: #bf3e0c;
-$modes-color-status-caution-frozen-default: #FF8629; // used on global message bg
-$modes-color-status-caution-frozen-icon: #000000; // used on global message icon
+$modes-color-status-caution-frozenglobal-default: #ff8629; // used on global message bg
+$modes-color-status-caution-frozenglobal-hover: #ff9a4e; // used on global message bg
 $modes-color-status-content-with-default: #FFFFFF;
 $modes-color-status-content-with-default-alt: #000000f2;
 $modes-color-status-content-with-hover: #FFFFFF; // for pill hover X
@@ -142,19 +137,21 @@ $modes-color-status-info-default: #0060A7; // For pills and messages. Not access
 $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
 $modes-color-status-info-hover: #10508a; // used on pill hover states
 $modes-color-status-info-hover-alt: #dde1e8; // used on pill hover states and message bg
-$modes-color-status-info-frozen-default: #65a9ff; // used on global message bg
+$modes-color-status-info-frozenglobal-default: #65a9ff; // used on global message bg
+$modes-color-status-info-frozenglobal-hover: #84b6ff; // used on global message bg
 $modes-color-status-negative-default: #CD384B; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-negative-default-alt: #fdeceb; // Subtle message bg
 $modes-color-status-negative-hover: #aa323f; // used on pill hover states
 $modes-color-status-negative-hover-alt: #efdfde; // used on pill hover states and message bg
 $modes-color-status-negative-text: #CD384B;
-$modes-color-status-neutral-alt: #656565;
 $modes-color-status-neutral-default: #656565;
 $modes-color-status-neutral-default-alt: #efefef; // Subtle message bg
 $modes-color-status-neutral-hover: #555; // used on pill hover states
 $modes-color-status-neutral-hover-alt: #e2e2e2; // used on pill hover states and message bg
 $modes-color-status-neutral-frozen-default: #335B70;
+$modes-color-status-neutral-frozen-default-alt: #eaedf0; // Subtle message bg
 $modes-color-status-neutral-frozen-hover: #20313b;
+$modes-color-status-neutral-frozen-hover-alt: #dde0e2; // used on pill hover states and message bg
 $modes-color-status-positive-default: #008A21; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-positive-default-alt: #eaf3e8; // Subtle message bg
 $modes-color-status-positive-hover: #0f731e; // used on pill hover states 

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

@@ -23,6 +23,9 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
 $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
+$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
+$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -47,6 +50,7 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
 $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
 $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -54,17 +58,25 @@ $button-color-destructive-secondary-border-hover: $modes-color-interactive-dange
 $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
+$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
+$button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
 $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
 $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -154,8 +166,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
 $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
+$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
 $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -167,30 +179,25 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
 $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
 $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
-$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
+$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
+$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
-$button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
+$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
+$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-tertiary-label-active-copy: $modes-color-interactive-monochrome-frozen-with-active;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -211,17 +218,10 @@ $button-borderwidth-chip: $global-borderwidth-xs; // chip button border width
 $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button. 
 $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
 $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $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-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
-$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;