@sage/design-tokens 14.0.0 → 14.1.0

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