@sage/design-tokens 14.0.0 → 14.0.1

package/scss/product/large/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/product/large/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/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

@@ -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