@sage/design-tokens 14.9.1 → 15.0.0

package/css/marketing/large/light.css

@@ -1,316 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --modes-color-none: #fff0;
-  --modes-color-brand-default: #000000;
-  --modes-color-brand-default-alt: #000000;
-  --modes-color-brand-with-default-alt: #FFFFFF;
-  --modes-color-brand-copilot-ai-identifier-default: #000000;
-  --modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-  --modes-color-brand-copilot-no-bg-monochrome: #000000;
-  --modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
-  --modes-color-custom-default-alt: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
-  --modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
-  --modes-color-colorcode-blue-deep: #0071C3;
-  --modes-color-colorcode-blue-muted: #CDE5FF;
-  --modes-color-colorcode-teal-deep: #007C7B;
-  --modes-color-colorcode-teal-muted: #C1FBFB;
-  --modes-color-colorcode-green-deep: #00811F;
-  --modes-color-colorcode-green-muted: #C5FFC9;
-  --modes-color-colorcode-lime-deep: #637700;
-  --modes-color-colorcode-lime-muted: #FFFF9C;
-  --modes-color-colorcode-orange-deep: #C54300;
-  --modes-color-colorcode-orange-muted: #FEEAB0;
-  --modes-color-colorcode-red-deep: #DC004E;
-  --modes-color-colorcode-red-muted: #FFDBCF;
-  --modes-color-colorcode-pink-deep: #C8269A;
-  --modes-color-colorcode-pink-muted: #FFD7EE;
-  --modes-color-colorcode-purple-deep: #8F4CD7;
-  --modes-color-colorcode-purple-muted: #E7DEF8;
-  --modes-color-colorcode-slate-deep: #527386;
-  --modes-color-colorcode-slate-muted: #D4E5F1;
-  --modes-color-colorcode-gray-deep: #6F6F6F;
-  --modes-color-colorcode-gray-muted: #E2E2E2;
-  --modes-color-generic-bg-nought: #FFFFFF;
-  --modes-color-generic-bg-faint: #f3f3f3;
-  --modes-color-generic-bg-delicate: #e8e8e8;
-  --modes-color-generic-bg-soft: #dedede;
-  --modes-color-generic-bg-moderate: #d1d1d1;
-  --modes-color-generic-bg-firm: #bbb;
-  --modes-color-generic-bg-harsh: #a6a6a6;
-  --modes-color-generic-bg-severe: #919191;
-  --modes-color-generic-bg-extreme: #000000; /* Consumed within generic monochrome, progress */
-  --modes-color-generic-bg-frozen-soft: #f2f4f6; /* Consumed within frozen table */
-  --modes-color-generic-bg-frozen-delicate: #fbfbfc; /* Consumed within frozen table */
-  --modes-color-generic-content-harsh: #000000f2;
-  --modes-color-generic-content-extreme: #000000;
-  --modes-color-generic-content-firm: #000000ab;
-  --modes-color-generic-content-moderate: #0000008c; /* was 0.5. Increased to 0.55 so that we can use this for hint text etc too, and still be accessible. */
-  --modes-color-generic-content-muted: #0000006b; /* accessible OBJECT against white. */
-  --modes-color-generic-content-soft: #00000052; /* Used for disabled text */
-  --modes-color-generic-content-nought: #FFFFFF; /* pill hover X */
-  --modes-color-generic-fg-nought: #FFFFFF;
-  --modes-color-generic-fg-faint: #e8e8e8; /* used for dividers */
-  --modes-color-generic-fg-delicate: #d1d1d1; /* table dividers and borders */
-  --modes-color-generic-fg-soft: #a6a6a6;
-  --modes-color-generic-fg-moderate: #777;
-  --modes-color-generic-fg-frozen-soft: #335B70; /* frozen progress tracker border */
-  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
-  --modes-color-generic-backdrop-nought: #FFFFFF; /* used on full page backgrounds */
-  --modes-color-generic-backdrop-faint: #f6f8f9; /* used on full page backgrounds as an alternative option */
-  --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: #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: #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: #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: #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: #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 */
-  --modes-color-interactive-data-entry-content-alt: #0000008c; /* Hint text, placeholder text, character count etc */
-  --modes-color-interactive-data-entry-frozen-with-default: #698495; /* Input borders. */
-  --modes-color-interactive-focus-default: #000000;
-  --modes-color-interactive-focus-content: #000000;
-  --modes-color-interactive-focus-with-default: #FFB500;
-  --modes-color-interactive-focus-with-default-alt: #ffd27e;
-  --modes-color-interactive-focus-inverse-default: #FFB500;
-  --modes-color-interactive-focus-inverse-content: #FFFFFF;
-  --modes-color-interactive-focus-inverse-with-default: #000000;
-  --modes-color-interactive-focus-inverse-with-default-alt: #926916;
-  --modes-color-interactive-inactive-default: #a6a6a6; /* Disabled form secondary, tertiary and input borders borders. */
-  --modes-color-interactive-inactive-mask: #000000; /* full screen takeover token for modal dimmer */
-  --modes-color-interactive-inactive-default-alt: #f3f3f3; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-content: #0000006b; /* Disabled text inside buttons and form inputs. */
-  --modes-color-interactive-inactive-content-alt: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
-  --modes-color-interactive-inactive-icon: #00000052; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt: #0000008c; /* Readonly icon inside form inputs. */
-  --modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-inverse-default: #4b4b4b; /* Inversed disabled form secondary, tertiary and input borders borders. */
-  --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: #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: #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: #22374326;
-  --modes-color-interactive-monochrome-frozen-default: #335B70;
-  --modes-color-interactive-monochrome-frozen-default-alt: #476a7d;
-  --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: #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: #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;
-  --modes-color-interactive-monochrome-inverse-with-hover: #FFFFFF;
-  --modes-color-interactive-monochrome-marketing-active: #000000; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
-  --modes-color-interactive-monochrome-subtle-default: #0000000a; /* bg color for tertiary buttons and table headers */
-  --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: #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: #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 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: #135932;
-  --modes-color-interactive-primary-frozen-default: #008046;
-  --modes-color-interactive-primary-frozen-default-alt: #0b703e; /* for links */
-  --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: #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 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;
-  --modes-color-interactive-progress-bg: #00000014;
-  --modes-color-interactive-progress-bg-alt: #ffffff14;
-  --modes-color-interactive-progress-frozen-bg: #00804614;
-  --modes-color-interactive-progress-frozen-bg-alt: #cad3d9; /* progress tracker bg */
-  --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-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: #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: #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: #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;
-  --modes-color-status-content-with-hover: #FFFFFF; /* for pill hover X */
-  --modes-color-status-content-with-hover-alt: #000000; /* for message text */
-  --modes-color-status-content-loading: linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%); /* used on skeleton text */
-  --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-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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #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: #0d6c3c;
-  --modes-color-modifier-contrast-less: #FFFFFF;
-  --modes-color-modifier-contrast-more: #000000;
-}

package/css/marketing/small/components/badge.css

@@ -1,29 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
-  --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
-  --badge-color-notification-inverse-border-default: var(--modes-color-generic-content-extreme);
-  --badge-color-notification-inverse-bg-default: var(--modes-color-status-negative-inverse-default); /* Used in global nav notification badges */
-  --badge-color-notification-inverse-bg-alt: var(--modes-color-status-info-inverse-default);
-  --badge-color-notification-inverse-label-default: var(--modes-color-generic-content-extreme);
-  --badge-color-notification-inverse-label-alt: var(--modes-color-generic-content-extreme);
-  --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
-  --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
-  --badge-color-notification-border-default: var(--modes-color-generic-content-nought);
-  --badge-color-notification-label-default: var(--modes-color-generic-content-nought);
-  --badge-color-notification-label-alt: var(--modes-color-generic-content-nought);
-  --badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
-  --badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
-  --badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */
-  --badge-size-standard-min: var(--global-size-macro-xs); /* standard badge size */
-  --badge-size-standard-max: calc(var(--global-size-macro-s) + var(--global-size-micro-xs)); /* Standard badge max-width */
-  --badge-space-x-s: var(--global-space-micro-xs); /* horizontal padding on micro badges with numbering */
-  --badge-space-x-m: var(--global-space-micro-s); /* horizontal padding on typical badge */
-  --badge-space-y-s: var(--global-space-micro-xxs); /* bottom padding on micro badge with number */
-  --badge-space-y-m: var(--global-space-micro-xxs); /* bottom padding on typical badge */
-  --badge-borderwidth-badge: var(--global-borderwidth-s); /* Badge */
-}