@sage/design-tokens 13.2.0 → 14.0.1

package/scss/frozenproduct/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;
@@ -194,15 +194,15 @@ $modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00
 $modes-color-status-generic-default: #008a89;
 $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;
@@ -220,58 +220,51 @@ $modes-color-status-inactive-inverse-with-default: #000000ab; // For readonly fi
 $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-positive-inverse-hover: #0e6d1d; // used on pill hover states 
+$modes-color-status-positive-inverse-hover-alt: #cbe1c9; // used on pill hover states and message bg
 $modes-color-status-callout-default-alt: #122211; // used for marketing banners
-$modes-color-status-callout-hover-alt: #223121; // marketing banner hover
+$modes-color-status-callout-hover-alt: #263525; // marketing banner hover
 $modes-color-status-reviews-default: #00D639;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%);
-$modes-color-status-reviews-hover: #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

package/scss/frozenproduct/small/light.scss

@@ -65,27 +65,27 @@ $modes-color-generic-backdrop-faint: #f6f8f9; // used on full page backgrounds a
 $modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
 $modes-color-interactive-ai-hover: linear-gradient(90deg, #13A03814 0%, #14919714 40%, #a87cfb14 90%);
 $modes-color-interactive-ai-default: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
-$modes-color-interactive-danger-active: #882b34; // used on pill hover states
+$modes-color-interactive-danger-active: #8c2c35; // used on pill hover states
 $modes-color-interactive-danger-default: #CD384B;
 $modes-color-interactive-danger-default-alt: #b23342; // For links in datatables
-$modes-color-interactive-danger-hover: #aa323f; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-hover-alt: #cd384b14; // used on secondary-button hover states
-$modes-color-interactive-danger-hover-alt2: #a3303d; // used on link hover state
+$modes-color-interactive-danger-hover: #ac3240; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-hover-alt: #cd384b1a; // used on secondary-button hover states
+$modes-color-interactive-danger-hover-alt2: #9f303c; // used on link hover state
 $modes-color-interactive-danger-with-active: #FFFFFF;
 $modes-color-interactive-danger-with-default: #FFFFFF;
-$modes-color-interactive-danger-inverse-active: #f28486; // used on pill hover states
+$modes-color-interactive-danger-inverse-active: #f28083; // used on pill hover states
 $modes-color-interactive-danger-inverse-default: #E13E53;
 $modes-color-interactive-danger-inverse-default-alt: #e85b66; // For links in datatables
-$modes-color-interactive-danger-inverse-hover: #eb646c; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-inverse-hover-alt: #e13e5314; // used on secondary-button hover states
-$modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; // used on link hover state
+$modes-color-interactive-danger-inverse-hover: #ea626a; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #e13e531a; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #ed6e74; // used on link hover state
 $modes-color-interactive-danger-inverse-with-active: #000000;
 $modes-color-interactive-danger-inverse-with-default: #000000;
 $modes-color-interactive-data-entry-default: #FFFFFF; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #000000; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
 $modes-color-interactive-data-entry-with-hover: #000000; // text for draggable area on file input
-$modes-color-interactive-data-entry-hover-alt: #e8e8e8; // bg hover for draggable area on file input
+$modes-color-interactive-data-entry-hover-alt: #e2e2e2; // 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: #f3f3f3; // Input footer bgs (e.g text editor).
 $modes-color-interactive-data-entry-content: #000000f2; // Input Text
@@ -111,31 +111,31 @@ $modes-color-interactive-inactive-inverse-default: #4b4b4b; // Inversed disabled
 $modes-color-interactive-inactive-inverse-content: #ffffff6b; // Inversed disabled text inside buttons and form inputs.
 $modes-color-interactive-inactive-inverse-content-alt: #000000; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #000000;
-$modes-color-interactive-monochrome-active-alt: #00000029;
+$modes-color-interactive-monochrome-active-alt: #00000026;
 $modes-color-interactive-monochrome-default: #000000e6;
 $modes-color-interactive-monochrome-default-alt: #000000ab; // subtle and toggle button text
 $modes-color-interactive-monochrome-default-alt2: #0000006b; // Tertiary border color
-$modes-color-interactive-monochrome-hover-alt: #00000014; // Accordion, secondary, tertiary, menu bg on hover
-$modes-color-interactive-monochrome-hover: #00000029; // subtle table header hover
+$modes-color-interactive-monochrome-hover-alt: #0000001a; // Accordion, secondary, tertiary, menu bg on hover
+$modes-color-interactive-monochrome-hover: #00000026; // subtle table header hover
 $modes-color-interactive-monochrome-with-active: #FFFFFF;
 $modes-color-interactive-monochrome-with-active-alt: #000000;
 $modes-color-interactive-monochrome-with-default: #FFFFFF;
 $modes-color-interactive-monochrome-with-hover: #000000; // maybe should be white to align with primary group logic
 $modes-color-interactive-monochrome-frozen-active: #223743;
-$modes-color-interactive-monochrome-frozen-active-alt: #22374329;
+$modes-color-interactive-monochrome-frozen-active-alt: #22374326;
 $modes-color-interactive-monochrome-frozen-default: #335B70;
 $modes-color-interactive-monochrome-frozen-default-alt: #476a7d;
-$modes-color-interactive-monochrome-frozen-hover-alt: #22374314;
+$modes-color-interactive-monochrome-frozen-hover-alt: #2237431a;
 $modes-color-interactive-monochrome-frozen-with-active: #FFFFFF;
 $modes-color-interactive-monochrome-frozen-with-hover: #223743;
 $modes-color-interactive-monochrome-frozen-with-hover-alt: #FFFFFF;
 $modes-color-interactive-monochrome-inverse-active: #FFFFFF;
-$modes-color-interactive-monochrome-inverse-active-alt: #ffffff29;
+$modes-color-interactive-monochrome-inverse-active-alt: #ffffff26;
 $modes-color-interactive-monochrome-inverse-default: #ffffffe6;
 $modes-color-interactive-monochrome-inverse-default-alt: #ffffffab; // subtle and toggle button text
 $modes-color-interactive-monochrome-inverse-default-alt2: #ffffff6b; // Tertiary border color
-$modes-color-interactive-monochrome-inverse-hover-alt: #ffffff14; // Accordion, secondary, tertiary, menu bg on hover
-$modes-color-interactive-monochrome-inverse-hover: #ffffff29; // subtle table header hover
+$modes-color-interactive-monochrome-inverse-hover-alt: #ffffff1a; // Accordion, secondary, tertiary, menu bg on hover
+$modes-color-interactive-monochrome-inverse-hover: #ffffff26; // subtle table header hover
 $modes-color-interactive-monochrome-inverse-with-active: #000000;
 $modes-color-interactive-monochrome-inverse-with-active-alt: #FFFFFF;
 $modes-color-interactive-monochrome-inverse-with-default: #000000;
@@ -147,39 +147,39 @@ $modes-color-interactive-monochrome-subtle-default: #0000000a; // bg color for t
 $modes-color-interactive-nav-active: #00000029; // active bg for nav items
 $modes-color-interactive-nav-default: #FFFFFF;
 $modes-color-interactive-nav-default-alt: #f3f3f3; // default bg for left nav container
-$modes-color-interactive-nav-hover: #00000014; // hover bg for nav items
+$modes-color-interactive-nav-hover: #0000001a; // hover bg for nav items
 $modes-color-interactive-nav-with-active: #000000; // text and icons on top of active bgs in nav contexts
 $modes-color-interactive-nav-with-default: #000000f2; // hover bg for nav items
 $modes-color-interactive-nav-with-hover: #000000; // hover bg for nav items
-$modes-color-interactive-primary-active: #14571a;
-$modes-color-interactive-primary-active-alt: #00811f52; // Active color for secondary and tertiary buttons
+$modes-color-interactive-primary-active: #13591a;
+$modes-color-interactive-primary-active-alt: #00811f4d; // Active color for secondary and tertiary buttons
 $modes-color-interactive-primary-default: #00811F;
-$modes-color-interactive-primary-default-alt: #00811fcc; // border color for secondary buttons
-$modes-color-interactive-primary-default-alt2: #00811f80; // border color for tertiary buttons
-$modes-color-interactive-primary-default-alt3: #0c711d; // default value for links
-$modes-color-interactive-primary-hover: #0e6b1d;
-$modes-color-interactive-primary-hover-alt: #00811f14; // hover for secondary and tertiary buttons
-$modes-color-interactive-primary-hover-alt2: #125e1b; // hover for links
+$modes-color-interactive-primary-default-alt: #00811fcc; // border color for secondary and tertiary buttons
+$modes-color-interactive-primary-default-alt2: #0c711d; // default value for links
+$modes-color-interactive-primary-default-alt3: #00811f08; // Default background color of secondary button
+$modes-color-interactive-primary-hover: #0e6d1d;
+$modes-color-interactive-primary-hover-alt: #00811f1a; // hover for secondary and tertiary buttons
+$modes-color-interactive-primary-hover-alt2: #12601b; // hover for links
 $modes-color-interactive-primary-with-active: #FFFFFF;
 $modes-color-interactive-primary-with-default: #FFFFFF;
 $modes-color-interactive-primary-with-hover: #FFFFFF;
-$modes-color-interactive-primary-frozen-active: #135631;
+$modes-color-interactive-primary-frozen-active: #135932;
 $modes-color-interactive-primary-frozen-default: #008046;
 $modes-color-interactive-primary-frozen-default-alt: #0b703e; // for links
-$modes-color-interactive-primary-frozen-hover: #0e6b3b;
+$modes-color-interactive-primary-frozen-hover: #0d6c3c;
 $modes-color-interactive-primary-frozen-hover-alt: #106237; // 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: #9badb8;
-$modes-color-interactive-primary-inverse-active: #81e57d;
-$modes-color-interactive-primary-inverse-active-alt: #00d63952; // Active color for inverse secondary and tertiary buttons
+$modes-color-interactive-primary-inverse-active: #7ce47a;
+$modes-color-interactive-primary-inverse-active-alt: #00d6394d; // Active color for inverse secondary and tertiary buttons
 $modes-color-interactive-primary-inverse-default: #00D639;
-$modes-color-interactive-primary-inverse-default-alt: #00d639cc; // border color for secondary inverse buttons
-$modes-color-interactive-primary-inverse-default-alt2: #00d63980; // border color for tertiary inverse buttons
-$modes-color-interactive-primary-inverse-default-alt3: #4cdc55; // Default color for links
-$modes-color-interactive-primary-inverse-hover: #58de5d;
-$modes-color-interactive-primary-inverse-hover-alt: #00d63914; // Hover for inverse secondary and tertiary buttons
-$modes-color-interactive-primary-inverse-hover-alt2: #73e372; // hover for links
+$modes-color-interactive-primary-inverse-default-alt: #00d639cc; // border color for secondary and tertiary inverse buttons
+$modes-color-interactive-primary-inverse-default-alt2: #4cdc55; // Default color for links
+$modes-color-interactive-primary-inverse-default-alt3: #00d63908; // Default background color of inverse secondary buttons
+$modes-color-interactive-primary-inverse-hover: #55dd5b;
+$modes-color-interactive-primary-inverse-hover-alt: #00d6391a; // Hover for inverse secondary and tertiary buttons
+$modes-color-interactive-primary-inverse-hover-alt2: #71e270; // hover for links
 $modes-color-interactive-primary-inverse-with-active: #000000;
 $modes-color-interactive-primary-inverse-with-default: #000000;
 $modes-color-interactive-primary-inverse-with-hover: #000000;
@@ -194,15 +194,15 @@ $modes-color-status-ai-default-vertical: linear-gradient(180deg, #13A038 0%, #14
 $modes-color-status-generic-default: #007c7b; // used in progress bar 
 $modes-color-status-caution-default: #D64309; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-caution-default-alt: #ffede5; // Subtle message bg
-$modes-color-status-caution-hover: #b13a0d; // used on pill hover states
-$modes-color-status-caution-hover-alt: #fdd3c0; // used on pill hover states and message bg
+$modes-color-status-caution-hover: #b33b0d; // used on pill hover states
+$modes-color-status-caution-hover-alt: #fed5c3; // used on pill hover states and message bg
 $modes-color-status-caution-text: #bf3e0c;
 $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-caution-frozenglobal-hover: #ff994c; // used on global message bg
 $modes-color-status-caution-inverse-default: #E04500;
 $modes-color-status-caution-inverse-default-alt: #251206; // Subtle message bg
-$modes-color-status-caution-inverse-hover: #eb6732; // used on pill hover states
-$modes-color-status-caution-inverse-hover-alt: #3f1b0b; // used on pill hover states and message bg
+$modes-color-status-caution-inverse-hover: #eb6530; // used on pill hover states
+$modes-color-status-caution-inverse-hover-alt: #3e1a0b; // used on pill hover states and message bg
 $modes-color-status-caution-inverse-text: #e75b23;
 $modes-color-status-content-with-default: #FFFFFF;
 $modes-color-status-content-with-default-alt: #000000f2;
@@ -220,58 +220,51 @@ $modes-color-status-inactive-inverse-with-default: #ffffffab; // For readonly fi
 $modes-color-status-important-default: #8F4CD7; // For tile status keylines to show if something is of high importance.
 $modes-color-status-info-default: #0060A7; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-info-default-alt: #eaeef6; // Subtle message bg
-$modes-color-status-info-hover: #10508a; // used on pill hover states
-$modes-color-status-info-hover-alt: #cbd6e9; // used on pill hover states and message bg
+$modes-color-status-info-hover: #10518c; // used on pill hover states
+$modes-color-status-info-hover-alt: #cdd7ea; // used on pill hover states and 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-info-frozenglobal-hover: #82b5ff; // used on global message bg
 $modes-color-status-info-inverse-default: #007ED9;
 $modes-color-status-info-inverse-default-alt: #111722; // Subtle message bg
-$modes-color-status-info-inverse-hover: #5291e0; // used on pill hover states
-$modes-color-status-info-inverse-hover-alt: #17253b; // used on pill hover states and message bg
+$modes-color-status-info-inverse-hover: #4f90df; // used on pill hover states
+$modes-color-status-info-inverse-hover-alt: #17253a; // used on pill hover states and 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: #f9d1cf; // used on pill hover states and message bg
+$modes-color-status-negative-hover: #ac3240; // used on pill hover states
+$modes-color-status-negative-hover-alt: #f9d3d1; // used on pill hover states and message bg
 $modes-color-status-negative-text: #CD384B;
 $modes-color-status-negative-inverse-default: #E13E53;
 $modes-color-status-negative-inverse-default-alt: #241212; // Subtle message bg
-$modes-color-status-negative-inverse-hover: #eb646c; // used on pill hover states
-$modes-color-status-negative-inverse-hover-alt: #3f1a1c; // used on pill hover states and message bg
+$modes-color-status-negative-inverse-hover: #ea626a; // used on pill hover states
+$modes-color-status-negative-inverse-hover-alt: #3d1a1c; // used on pill hover states and message bg
 $modes-color-status-negative-inverse-text: #E13E53;
 $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: #d8d8d8; // used on pill hover states and message bg
+$modes-color-status-neutral-hover: #565656; // used on pill hover states
+$modes-color-status-neutral-hover-alt: #d9d9d9; // 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-neutral-inverse-default: #7C7C7C;
 $modes-color-status-neutral-inverse-default-alt: #171717; // Subtle message bg
-$modes-color-status-neutral-inverse-hover: #909090; // used on pill hover states
-$modes-color-status-neutral-inverse-hover-alt: #252525; // used on pill hover states and message bg
+$modes-color-status-neutral-inverse-hover: #8e8e8e; // used on pill hover states
+$modes-color-status-neutral-inverse-hover-alt: #242424; // used on pill hover states and message bg
 $modes-color-status-positive-default: #00811F; // For pills and messages. Not accessible with white TEXT.
 $modes-color-status-positive-default-alt: #e9f2e8; // Subtle message bg
-$modes-color-status-positive-hover: #0e6b1d; // used on pill hover states 
-$modes-color-status-positive-hover-alt: #c9e0c7; // used on pill hover states and message bg
+$modes-color-status-positive-hover: #0e6d1d; // used on pill hover states 
+$modes-color-status-positive-hover-alt: #cbe1c9; // used on pill hover states and message bg
 $modes-color-status-positive-inverse-default: #009023;
 $modes-color-status-positive-inverse-default-alt: #0e1a0b; // Subtle message bg
-$modes-color-status-positive-inverse-hover: #2b8b32; // used on pill hover states
-$modes-color-status-positive-inverse-hover-alt: #132b12; // used on pill hover states and message bg
+$modes-color-status-positive-inverse-hover: #328e37; // used on pill hover states
+$modes-color-status-positive-inverse-hover-alt: #132912; // used on pill hover states and message bg
 $modes-color-status-callout-default-alt: #e5fae2; // used for marketing banners
 $modes-color-status-callout-hover-alt: #d8ecd5; // used for marketing banners
 $modes-color-status-reviews-default: #00811F;
 $modes-color-status-reviews-default-alt: linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
-$modes-color-status-reviews-hover: #0e6b1d;
+$modes-color-status-reviews-hover: #0e6d1d;
 $modes-color-status-reviews-frozen-default: #008046;
 $modes-color-status-reviews-frozen-default-alt: linear-gradient(90deg, #008046 0%, #008046 50%, #d1d1d1 50%, #d1d1d1 100%); // half fill
-$modes-color-status-reviews-frozen-hover: #0e6b3b;
+$modes-color-status-reviews-frozen-hover: #0d6c3c;
 $modes-color-modifier-contrast-less: #FFFFFF;
 $modes-color-modifier-contrast-more: #000000;
-$modes-color-modifiers-button-active: 0.32; // Actve 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

package/scss/marketing/large/components/badge.scss

@@ -8,11 +8,16 @@
 $badge-radius-badge: $global-radius-circle; // Badge
 $badge-color-notification-bg-default: $modes-color-status-negative-default; // Used in global nav notification badges
 $badge-color-notification-bg-alt: $modes-color-status-info-default;
+$badge-color-notification-inverse-border-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-bg-default: $modes-color-status-negative-inverse-default; // Used in global nav notification badges
+$badge-color-notification-inverse-bg-alt: $modes-color-status-info-inverse-default;
+$badge-color-notification-inverse-label-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-label-alt: $modes-color-generic-content-extreme;
 $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
 $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
-$badge-color-notification-border-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-alt: $modes-color-generic-fg-nought;
+$badge-color-notification-border-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-alt: $modes-color-generic-content-nought;
 $badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
 $badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
 $badge-size-micro-numbered-max: $global-size-macro-s; // Micro dot badge size max width