@sage/design-tokens 14.9.1 → 15.1.0

package/css/marketing/large/components/table.css

@@ -1,92 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --table-color-header-subtle-bg-default: var(--modes-color-none);
-  --table-color-row-bg-default: var(--modes-color-generic-bg-nought);
-  --table-color-row-label-hover: var(--modes-color-generic-content-extreme);
-  --table-typography-adaptive-heading-s: var(--global-typography-adaptive-component-firm-s);
-  --table-typography-adaptive-heading-m: var(--global-typography-adaptive-component-firm-m);
-  --table-typography-adaptive-heading-l: var(--global-typography-adaptive-component-firm-l);
-  --table-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
-  --table-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --table-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --table-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --table-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --table-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --table-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-s);
-  --table-typography-responsive-heading-m: var(--global-typography-responsive-component-firm-m);
-  --table-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
-  --table-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
-  --table-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --table-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --table-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --table-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --table-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --table-color-row-bg-activated: var(--modes-color-interactive-primary-default);
-  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
-  --table-color-row-bg-alt: var(--modes-color-generic-bg-delicate); /* Zebra stripes */
-  --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. */
-  --table-color-row-bg-alt3: var(--modes-color-generic-bg-faint); /* Child rows. */
-  --table-color-row-bg-hover: var(--modes-color-generic-bg-soft);
-  --table-color-row-label-default: var(--modes-color-generic-content-harsh);
-  --table-color-footer-bg-default: var(--modes-color-generic-bg-soft);
-  --table-boxshadow-parentrow: var(--global-boxshadow-container-far);
-  --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
-  --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
-  --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
-  --table-boxshadow-row-dragging: var(--global-boxshadow-interactive-drag); /* dragging state for a table row */
-  --table-color-header-subtle-bg-alt: var(--modes-color-interactive-monochrome-subtle-default); /* header alt */
-  --table-color-header-subtle-bg-hover: var(--modes-color-interactive-monochrome-hover);
-  --table-color-header-subtle-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
-  --table-color-header-subtle-label-default: var(--modes-color-interactive-monochrome-default);
-  --table-color-header-subtle-label-hover: var(--modes-color-interactive-monochrome-default);
-  --table-color-header-harsh-bg-alt: var(--modes-color-interactive-monochrome-default); /* header alt */
-  --table-color-header-harsh-bg-default: var(--modes-color-interactive-monochrome-default-alt);
-  --table-color-header-harsh-bg-hover: var(--modes-color-interactive-monochrome-hover);
-  --table-color-header-harsh-border-default: var(--modes-color-generic-fg-soft);
-  --table-color-header-harsh-label-default: var(--modes-color-interactive-monochrome-with-default);
-  --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
-  --table-color-row-border-default: var(--modes-color-generic-fg-delicate);
-  --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active);
-  --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active);
-  --table-color-footer-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
-  --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
-  --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */
-  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
-  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
-  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
-  --table-space-none: var(--global-space-none);
-  --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
-  --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */
-  --table-space-row-x-s: var(--global-space-macro-xs); /* Left and right padding inside S row cells */
-  --table-space-row-x-m: var(--global-space-macro-xs); /* Left and right padding inside M row cells */
-  --table-space-row-x-l: var(--global-space-macro-xs); /* Left and right padding inside L row cells */
-  --table-space-row-x-xl: var(--global-space-macro-xs); /* Left and right padding inside XL row cells */
-  --table-space-row-xg-xs: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-s: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-m: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-l: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-row-xg-xl: var(--global-space-micro-l); /* internal spacing between text, checkboxes, icons etc */
-  --table-space-rowchild-x-xs: calc(var(--global-space-macro-l) + var(--global-space-micro-s)); /* Left padding inside XS child row cells */
-  --table-space-rowchild-x-s: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside S child row cells */
-  --table-space-rowchild-x-m: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside M child row cells */
-  --table-space-rowchild-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside L child row cells */
-  --table-space-rowchild-x-xl: calc(var(--global-space-macro-xl) + var(--global-space-micro-s)); /* Left padding inside XL child row cells */
-  --table-size-row-standard-xs: var(--global-size-macro-xs);
-  --table-size-row-standard-s: var(--global-size-macro-s);
-  --table-size-row-standard-m: var(--global-size-macro-m);
-  --table-size-row-standard-l: var(--global-size-macro-l);
-  --table-size-row-standard-xl: calc(var(--global-size-macro-xl) + var(--global-size-micro-m));
-  --table-size-icon-xs: var(--global-size-icon-s);
-  --table-size-icon-s: var(--global-size-icon-m);
-  --table-size-icon-m: var(--global-size-icon-m);
-  --table-size-icon-l: var(--global-size-icon-l);
-  --table-size-icon-xl: var(--global-size-icon-xl);
-  --table-size-row-doubleheight-xs: calc(var(--table-size-row-standard-xs) * 2);
-  --table-size-row-doubleheight-s: calc(var(--table-size-row-standard-s) * 2);
-  --table-size-row-doubleheight-m: calc(var(--table-size-row-standard-m) * 2);
-  --table-size-row-doubleheight-l: calc(var(--table-size-row-standard-l) * 2);
-  --table-size-row-doubleheight-xl: calc(var(--table-size-row-standard-xl) * 2);
-}

package/css/marketing/large/dark.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: #00D639;
-  --modes-color-brand-default-alt: #FFFFFF;
-  --modes-color-brand-with-default-alt: #000000;
-  --modes-color-brand-copilot-ai-identifier-default: #FFFFFF;
-  --modes-color-brand-copilot-ai-identifier-with-default: #00D639;
-  --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
-  --modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
-  --modes-color-custom-default-alt: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
-  --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
-  --modes-color-colorcode-blue-deep: #007FD9;
-  --modes-color-colorcode-blue-muted: #00293F;
-  --modes-color-colorcode-teal-deep: #008A89;
-  --modes-color-colorcode-teal-muted: #002B2A;
-  --modes-color-colorcode-green-deep: #009023;
-  --modes-color-colorcode-green-muted: #002D05;
-  --modes-color-colorcode-lime-deep: #6E8500;
-  --modes-color-colorcode-lime-muted: #171e00;
-  --modes-color-colorcode-orange-deep: #DB4B00;
-  --modes-color-colorcode-orange-muted: #380D00;
-  --modes-color-colorcode-red-deep: #F50058;
-  --modes-color-colorcode-red-muted: #400011;
-  --modes-color-colorcode-pink-deep: #DD2BAB;
-  --modes-color-colorcode-pink-muted: #3C002C;
-  --modes-color-colorcode-purple-deep: #985FDC;
-  --modes-color-colorcode-purple-muted: #270E41;
-  --modes-color-colorcode-slate-deep: #5C8196;
-  --modes-color-colorcode-slate-muted: #121D23;
-  --modes-color-colorcode-gray-deep: #7C7C7C;
-  --modes-color-colorcode-gray-muted: #1b1b1b;
-  --modes-color-generic-bg-nought: #000000;
-  --modes-color-generic-bg-faint: #0e0e0e;
-  --modes-color-generic-bg-delicate: #181818;
-  --modes-color-generic-bg-soft: #1f1f1f;
-  --modes-color-generic-bg-moderate: #282828;
-  --modes-color-generic-bg-firm: #393939;
-  --modes-color-generic-bg-harsh: #4b4b4b;
-  --modes-color-generic-bg-severe: #5e5e5e;
-  --modes-color-generic-bg-extreme: #FFFFFF; /* Consumed within generic monochrome, progress */
-  --modes-color-generic-bg-frozen-delicate: #020303; /* Consumed within frozen table */
-  --modes-color-generic-bg-frozen-soft: #040607; /* Consumed within frozen table */
-  --modes-color-generic-content-extreme: #FFFFFF;
-  --modes-color-generic-content-harsh: #fffffff2;
-  --modes-color-generic-content-firm: #ffffffab;
-  --modes-color-generic-content-moderate: #ffffff8c; /* 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: #ffffff6b; /* accessible OBJECT against white. */
-  --modes-color-generic-content-soft: #ffffff4d; /* Used for disabled text */
-  --modes-color-generic-content-nought: #000000;
-  --modes-color-generic-fg-nought: #000000;
-  --modes-color-generic-fg-faint: #181818; /* table dividers and borders */
-  --modes-color-generic-fg-delicate: #282828; /* table dividers and borders */
-  --modes-color-generic-fg-soft: #4b4b4b;
-  --modes-color-generic-fg-moderate: #777;
-  --modes-color-generic-fg-frozen-soft: #4b4b4b;
-  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment */
-  --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
-  --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
-  --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: #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: #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: #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: #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: #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 */
-  --modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
-  --modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
-  --modes-color-interactive-focus-default: #FFB500;
-  --modes-color-interactive-focus-content: #FFFFFF;
-  --modes-color-interactive-focus-with-default: #000000;
-  --modes-color-interactive-focus-with-default-alt: #926916;
-  --modes-color-interactive-focus-inverse-default: #000000;
-  --modes-color-interactive-focus-inverse-content: #000000;
-  --modes-color-interactive-focus-inverse-with-default: #FFB500;
-  --modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
-  --modes-color-interactive-inactive-default: #4b4b4b; /* disabled buttons on dark */
-  --modes-color-interactive-inactive-mask: #FFFFFF; /* full screen takeover token for modal dimmer */
-  --modes-color-interactive-inactive-default-alt: #0e0e0e; /* Disabled button backgrounds and borders ON DARK */
-  --modes-color-interactive-inactive-content: #ffffff4d; /* Disabled text inside buttons */
-  --modes-color-interactive-inactive-content-alt: #000000;
-  --modes-color-interactive-inactive-icon: #ffffff4d; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt: #ffffff8c; /* Readonly icon inside form inputs.  */
-  --modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; /* Disabled input and button backgrounds, button borders and input backgrounds. */
-  --modes-color-interactive-inactive-inverse-default: #a6a6a6; /* Inversed disabled form secondary, tertiary and input borders borders. */
-  --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: #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: #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: #ffffff26;
-  --modes-color-interactive-monochrome-frozen-default: #ffffffe6;
-  --modes-color-interactive-monochrome-frozen-default-alt: #ffffffab;
-  --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: #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: #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;
-  --modes-color-interactive-monochrome-inverse-with-hover: #000000;
-  --modes-color-interactive-monochrome-marketing-with-active: #000000; /* use for marketing overrides for switch handle on standard */
-  --modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
-  --modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
-  --modes-color-interactive-monochrome-subtle-default: #ffffff14; /* subtle table header hover */
-  --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: #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: #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 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: #7ce47a;
-  --modes-color-interactive-primary-frozen-default: #00D639;
-  --modes-color-interactive-primary-frozen-default-alt: #4cdc55;
-  --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: #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 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;
-  --modes-color-interactive-progress-bg: #ffffff14;
-  --modes-color-interactive-progress-bg-alt: #00000014;
-  --modes-color-interactive-progress-frozen-bg: #ffffff14;
-  --modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
-  --modes-color-status-ai-default: #000000;
-  --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-callout-default-alt: #122211; /* used for marketing banners */
-  --modes-color-status-callout-hover-alt: #263525; /* marketing banner hover */
-  --modes-color-status-caution-default: #E04500;
-  --modes-color-status-caution-default-alt: #251206; /* Subtle 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: #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: #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;
-  --modes-color-status-content-with-hover: #000000;
-  --modes-color-status-content-with-hover-alt: #FFFFFF;
-  --modes-color-status-content-loading: linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%); /* used on skeleton text */
-  --modes-color-status-content-inverse-with-default: #FFFFFF;
-  --modes-color-status-content-inverse-with-default-alt: #000000f2;
-  --modes-color-status-content-inverse-with-hover: #FFFFFF;
-  --modes-color-status-content-inverse-with-hover-alt: #000000;
-  --modes-color-status-custom-blue-default: #007FD9; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-blue-default-alt: #0d1219; /* Pill bg */
-  --modes-color-status-custom-blue-hover: #4f91df; /* used on pill hover states */
-  --modes-color-status-custom-blue-hover-alt: #142131; /* used on pill hover states */
-  --modes-color-status-custom-teal-default: #008A89; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-teal-default-alt: #0a1313; /* Pill bg */
-  --modes-color-status-custom-teal-hover: #449b9a; /* used on pill hover states */
-  --modes-color-status-custom-teal-hover-alt: #082427; /* used on pill hover states */
-  --modes-color-status-custom-green-default: #009023; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-green-default-alt: #0a1408; /* Pill bg */
-  --modes-color-status-custom-green-hover: #44a146; /* used on pill hover states */
-  --modes-color-status-custom-green-hover-alt: #0b2418; /* used on pill hover states */
-  --modes-color-status-custom-lime-default: #6E8500; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-lime-default-alt: #111205; /* Pill bg */
-  --modes-color-status-custom-lime-hover: #859635; /* used on pill hover states */
-  --modes-color-status-custom-lime-hover-alt: #162311; /* used on pill hover states */
-  --modes-color-status-custom-orange-default: #DB4B00; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-orange-default-alt: #1c0e04; /* Pill bg */
-  --modes-color-status-custom-orange-hover: #e66930; /* used on pill hover states */
-  --modes-color-status-custom-orange-hover-alt: #331816; /* used on pill hover states */
-  --modes-color-status-custom-red-default: #F50058; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-red-default-alt: #1e0d0d; /* Pill bg */
-  --modes-color-status-custom-red-hover: #fc4e6e; /* used on pill hover states */
-  --modes-color-status-custom-red-hover-alt: #331720; /* used on pill hover states */
-  --modes-color-status-custom-pink-default: #DD2BAB; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-pink-default-alt: #1b0d16; /* Pill bg */
-  --modes-color-status-custom-pink-hover: #e558b7; /* used on pill hover states */
-  --modes-color-status-custom-pink-hover-alt: #2d192b; /* used on pill hover states */
-  --modes-color-status-custom-purple-default: #985FDC; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-purple-default-alt: #150f19; /* Pill bg */
-  --modes-color-status-custom-purple-hover: #a977e2; /* used on pill hover states */
-  --modes-color-status-custom-purple-hover-alt: #231c30; /* used on pill hover states */
-  --modes-color-status-custom-gray-default: #7C7C7C; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-gray-default-alt: #111; /* Pill bg */
-  --modes-color-status-custom-gray-hover: #8e8e8e; /* used on pill hover states */
-  --modes-color-status-custom-gray-hover-alt: #1a202b; /* used on pill hover states */
-  --modes-color-status-custom-slate-default: #5C8196; /* For pills. Not accessible with white TEXT. */
-  --modes-color-status-custom-slate-default-alt: #0f1214; /* Pill bg */
-  --modes-color-status-custom-slate-hover: #7493a5; /* used on pill hover states */
-  --modes-color-status-custom-slate-hover-alt: #13222c; /* used on pill hover states */
-  --modes-color-status-generic-default: #F0F;
-  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
-  --modes-color-status-important-default-alt: #150d19; /* Subtle message bg */
-  --modes-color-status-important-hover: #a267de; /* used on pill hover states */
-  --modes-color-status-important-hover-alt: #231b30; /* used on pill hover states and message bg */
-  --modes-color-status-important-inverse-default: #985FDC;
-  --modes-color-status-important-inverse-default-alt: #f1e6fa; /* Subtle message bg */
-  --modes-color-status-important-inverse-hover: #8051b8; /* used on pill hover states */
-  --modes-color-status-important-inverse-hover-alt: #daceed; /* used on pill hover states and message bg */
-  --modes-color-status-inactive-default: #4b4b4b; /* For readonly pill bg and border */
-  --modes-color-status-inactive-with-default: #ffffffab; /* For readonly filled pill text */
-  --modes-color-status-inactive-inverse-default: #a6a6a6; /* For readonly pill bg and border */
-  --modes-color-status-inactive-inverse-with-default: #000000ab; /* For readonly filled pill text */
-  --modes-color-status-info-default: #007ED9;
-  --modes-color-status-info-default-alt: #111722; /* Subtle 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: #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: #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: #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: #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: #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: #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: #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: #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: #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-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: #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: #17b333; /* used on pill hover states */
-  --modes-color-modifier-contrast-less: #000000;
-  --modes-color-modifier-contrast-more: #FFFFFF;
-}

package/css/marketing/large/global.css

@@ -1,195 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --global-borderwidth-scale: 1px;
-  --global-borderwidth-none: 0;
-  --global-borderwidth-xs: 1px; /* Buttons, Inputs. Dividing lines and container borders. */
-  --global-borderwidth-s: 2px; /* Buttons. Step flow, Validation bars */
-  --global-borderwidth-m: 3px; /* Focus  */
-  --global-borderwidth-l: 4px; /* Focus underline. Dividing lines.  */
-  --global-borderwidth-xl: 6px; /* Double Focus Border */
-  --global-borderwidth-xxl: 8px;
-  --global-radius-scale: 1px; /* We can override this to locally change the size of radius in the future if required. */
-  --global-radius-none: 0; /* Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
-  --global-radius-circle: 999px; /* CIRCLE. Badge, Calendar date (today indicator and selected), Carousel selector dots, Loader bar, Portrait, Progress tracker, Radio button, Step flow (step indicators), Switch,  */
-  --global-radius-container-xxs: 1px; /* Validation bar on input components */
-  --global-radius-container-xs: 2px; /* Pill */
-  --global-radius-container-s: 4px;
-  --global-radius-container-sm: 6px; /* L size loader and tracker corners */
-  --global-radius-container-m: 8px; /* Card select group (outer corners), Card select (single), Color picker advanced (inner swatch container), File input (file uploads & integrated progress bar (bottom corners),  File preview (File selector assets on left), Link preview, Message, Note, Popover (menu container in Action popover, Button-split, Button-multi-action, Calendar, Dropdown), Subscription tile (currently a pattern), Table (parent container), Tile & Tile flexbox (less rounded), Toast, Tooltip */
-  --global-radius-container-l: 16px; /* Card (less rounded), Carousel (slides), Color picker advanced (parent container), File preview (parent container), Medium Tile & Tile flexbox, Medium Card. */
-  --global-radius-container-xl: 24px; /* Card (more  rounded), Copilot Container, Carousel (parent container), Dialog (not full screen), Large Tile & Tile flexbox, Large cards */
-  --global-radius-container-xxl: 32px;
-  --global-radius-container-xxxl: 40px; /* marketing cards and tiles */
-  --global-radius-container-xxxxl: 80px; /* marketing images  */
-  --global-radius-interactive-xs: 2px; /* Link (focus background and underline) */
-  --global-radius-interactive-xxs: 1px; /* Tab baseline. */
-  --global-radius-interactive-s: 4px; /* S & M Checkboxes */
-  --global-radius-interactive-m: 8px; /* Button subtle, L Checkboxes, Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area),  Menu (bottom corners), Navigation: left (state bg shape), Skip focus, Tab, Text area, Text input, */
-  --global-radius-interactive-l: 16px; /* Buttons S (typical and destructive, and inc bar, split and multi), Navigation left (collapsible Assets/Menu select top-right and bottom-right corners),  */
-  --global-radius-interactive-xl: 20px; /* Buttons M (typical and destructive and inc bar split and multi), Button toggle M (parent container) */
-  --global-radius-interactive-xxl: 24px; /* Buttons L (typical and destructive and inc bar split and multi), Button toggle L (parent container) */
-  --global-boxshadow-none: dropShadow 0 0 0 0 rgba(0,0,0,0);
-  --global-boxshadow-cleanedge-near: dropShadow 0 2 2 0 #0000001A, dropShadow 2 5 5 0 #0000001A; /* Popovers used in navigation */
-  --global-boxshadow-cleanedge-near-left: dropShadow -2 0 2 0 #0000001A, dropShadow -5 0 5 0 #0000001A; /* Right sticky column in Table. */
-  --global-boxshadow-cleanedge-near-right: dropShadow 2 0 2 0 #0000001A, dropShadow 5 0 5 0 #0000001A; /* Left sticky column in Table. */
-  --global-boxshadow-container-near: dropShadow 0 1 2 0 #0000001A, dropShadow 2 2 10 0 #00000033; /* Popover menus used on split, multiaction, dropdown and action popovers */
-  --global-boxshadow-container-far: dropShadow 0 2 3 0 #0000001A, dropShadow 6 6 30 0 #00000026; /* Toasts */
-  --global-boxshadow-container-distant: dropShadow 0 3 4 0 #0000001A, dropShadow 10 10 60 0 #0000001A; /* Dialog, Menu, Sidebar  */
-  --global-boxshadow-container-sticky-footer: dropShadow 0 -1 2 0 #0000001A, dropShadow 2 -2 10 0 #00000033; /* Sticky footer on dialogs, drawer and sidebar */
-  --global-boxshadow-container-solid-border: innerShadow 0 -1 0 0 #0000004D; /* Solid border using box shadow tokens when using the border property is not possible.  */
-  --global-boxshadow-inner-near: innerShadow 0 8 4 -4 #0000001A; /* inner downward shadow, used in first child table cell */
-  --global-boxshadow-interactive-enabled: dropShadow 0 1 2 0 #0000001A, dropShadow 2 2 10 0 #00000033; /* Default card state */
-  --global-boxshadow-interactive-hover: dropShadow 0 2 3 0 #0000001A, dropShadow 6 6 30 0 #00000026; /* Card hover state */
-  --global-boxshadow-interactive-drag: dropShadow 0 3 4 0 #0000001A, dropShadow 10 10 60 0 #0000001A; /* Card drag state */
-  --global-size-scale: 1px;
-  --global-size-none: 0px;
-  --global-size-container-m: 288px; /* Inside page margins full width component in smallest mobile screen. */
-  --global-size-container-l: 320px; /* Full width component in smallest mobile screen. */
-  --global-size-icon-s: 16px;
-  --global-size-icon-m: 20px;
-  --global-size-icon-l: 24px;
-  --global-size-icon-xl: 32px;
-  --global-size-flex-xxs: 80px;
-  --global-size-flex-xs: 128px;
-  --global-size-flex-s: 160px;
-  --global-size-flex-m: 200px;
-  --global-size-flex-l: 240px;
-  --global-size-flex-xl: 288px;
-  --global-size-flex-xxl: 320px;
-  --global-size-flex-xxxl: 560px;
-  --global-size-flex-xxxxl: 760px;
-  --global-size-macro-xxs: 16px;
-  --global-size-macro-xs: 24px;
-  --global-size-macro-s: 32px;
-  --global-size-macro-m: 40px;
-  --global-size-macro-l: 48px;
-  --global-size-macro-xl: 56px;
-  --global-size-macro-xxl: 64px;
-  --global-size-macro-xxxl: 72px;
-  --global-size-macro-xxxxl: 120px;
-  --global-size-micro-xxs: 2px;
-  --global-size-micro-xs: 4px;
-  --global-size-micro-s: 6px;
-  --global-size-micro-m: 8px;
-  --global-size-micro-l: 10px;
-  --global-size-micro-xl: 12px;
-  --global-size-micro-xxl: 16px;
-  --global-size-breakpoint-min-width: 1200px;
-  --global-space-none: 0px;
-  --global-space-macro-scale: 1px;
-  --global-space-micro-scale: 1px;
-  --global-space-micro-xxs: 1px;
-  --global-space-micro-xs: 2px;
-  --global-space-micro-s: 4px;
-  --global-space-micro-m: 6px;
-  --global-space-micro-l: 8px;
-  --global-space-micro-xl: 10px;
-  --global-space-micro-xxl: 12px;
-  --global-space-macro-xxxs: 8px;
-  --global-space-macro-xxs: 12px;
-  --global-space-macro-xs: 16px;
-  --global-space-macro-s: 20px;
-  --global-space-macro-m: 24px;
-  --global-space-macro-ml: 28px;
-  --global-space-macro-l: 32px;
-  --global-space-macro-xl: 40px;
-  --global-space-macro-xxl: 48px;
-  --global-typography-responsive-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
-  --global-typography-responsive-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
-  --global-typography-responsive-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
-  --global-typography-responsive-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
-  --global-typography-responsive-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;
-  --global-typography-responsive-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
-  --global-typography-responsive-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
-  --global-typography-responsive-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-responsive-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-responsive-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-responsive-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-responsive-component-firm-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89 */
-  --global-typography-responsive-component-firm-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --global-typography-responsive-component-firm-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --global-typography-responsive-component-firm-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --global-typography-responsive-component-moderate-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89 */
-  --global-typography-responsive-component-moderate-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --global-typography-responsive-component-moderate-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --global-typography-responsive-component-moderate-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI; /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --global-typography-responsive-component-icon-s: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-responsive-component-icon-m: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-responsive-component-icon-l: 20px sage-icons; /* Small Viewports: 20, Large Viewports: 20.  */
-  --global-typography-responsive-component-underlined-moderate-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-component-underlined-moderate-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-component-underlined-moderate-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-responsive-component-underlined-firm-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-component-underlined-firm-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-component-underlined-firm-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;
-  --global-typography-responsive-component-placeholdertext-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;
-  --global-typography-responsive-component-notification-m: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-typography-adaptive-heading-s: 500 21px/1.25 Sage UI;
-  --global-typography-adaptive-heading-m: 700 24px/1.25 Sage UI;
-  --global-typography-adaptive-heading-l: 700 30px/1.25 Sage UI;
-  --global-typography-adaptive-subheading-m: 500 16px/1.25 Sage UI;
-  --global-typography-adaptive-subheading-l: 500 18px/1.25 Sage UI;
-  --global-typography-adaptive-section-heading-s: 700 16px/1.25 Sage UI;
-  --global-typography-adaptive-section-heading-m: 700 21px/1.25 Sage UI;
-  --global-typography-adaptive-body-regular-s: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-body-regular-m: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-body-regular-l: 400 16px/1.5 Sage UI;
-  --global-typography-adaptive-body-medium-s: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-body-medium-m: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-body-medium-l: 500 16px/1.5 Sage UI;
-  --global-typography-adaptive-component-firm-xs: 500 13px/1.5 Sage UI;
-  --global-typography-adaptive-component-firm-s: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-firm-m: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-firm-l: 500 16px/1.5 Sage UI;
-  --global-typography-adaptive-component-moderate-xs: 400 13px/1.5 Sage UI;
-  --global-typography-adaptive-component-moderate-s: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-moderate-m: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-moderate-l: 400 16px/1.5 Sage UI;
-  --global-typography-adaptive-component-icon-s: 20px sage-icons;
-  --global-typography-adaptive-component-icon-m: 20px sage-icons;
-  --global-typography-adaptive-component-icon-l: 20px sage-icons;
-  --global-typography-adaptive-component-underlined-moderate-s: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-underlined-moderate-m: 400 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-underlined-moderate-l: 400 16px/1.5 Sage UI;
-  --global-typography-adaptive-component-underlined-firm-s: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-underlined-firm-m: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-underlined-firm-l: 500 16px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-xs: 500 12px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-s: 500 14px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-m: 500 18px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-ml: 500 24px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-l: 500 30px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-xl: 500 40px/1.5 Sage UI;
-  --global-typography-adaptive-component-placeholdertext-xxl: 500 52px/1.5 Sage UI;
-  --global-typography-adaptive-component-notification-m: 500 13px/1 Sage UI; /* used for badge text - notifications on buttons and in global nav */
-  --global-font-size-adaptive-step-minus2: 12px;
-  --global-font-size-adaptive-step-minus1: 13px;
-  --global-font-size-adaptive-step0: 14px;
-  --global-font-size-adaptive-step1: 16px;
-  --global-font-size-adaptive-step2: 18px;
-  --global-font-size-adaptive-step3: 21px;
-  --global-font-size-adaptive-step4: 24px;
-  --global-font-size-adaptive-step5: 27px;
-  --global-font-size-adaptive-step6: 30px;
-  --global-font-size-adaptive-step7: 35px;
-  --global-font-size-adaptive-step8: 40px;
-  --global-font-size-adaptive-step9: 46px;
-  --global-font-size-adaptive-step10: 52px;
-  --global-font-families-sage-icons: sage-icons;
-  --global-font-families-heading: Sage UI;
-  --global-font-families-subheading: Sage UI;
-  --global-font-families-body: Sage UI;
-  --global-font-families-component: Sage UI; /* Used in componentry such as tables, buttons, inputs etc. */
-  --global-font-families-other: Open Sans; /* Fallback for when Sage fonts cannot load. */
-}