@sage/design-tokens 14.9.1 → 15.0.0

package/css/marketing/large/components/popover.css

@@ -1,63 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --popover-radius-none: var(--global-radius-none); /* Navigation menu top corners */
-  --popover-color-bg-default: var(--modes-color-generic-bg-nought); /* REF'D IN FORM. Popover container bg */
-  --popover-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --popover-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --popover-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --popover-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
-  --popover-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --popover-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --popover-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --popover-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --popover-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --popover-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
-  --popover-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --popover-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --popover-boxshadow-container: var(--global-boxshadow-container-near); /* REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)  */
-  --popover-color-bg-active: var(--modes-color-interactive-monochrome-active); /* previously action minor 850 */
-  --popover-color-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM.  */
-  --popover-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM.  */
-  --popover-color-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
-  --popover-color-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --popover-color-submenu-bg-default: var(--modes-color-generic-bg-faint); /* popover small screen submenu container bg */
-  --popover-size-icon-m: var(--global-size-icon-m);
-  --popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
-  --popover-size-item-m: var(--global-size-macro-m); /* REF'D IN FORM. Menu item min height. */
-  --popover-size-item-l: var(--global-size-macro-l); /* REF'D IN FORM. Menu item min height. */
-  --popover-radius-container: var(--global-radius-container-m); /* REF'D IN FORM. Menu container. */
-  --popover-radius-optionfocus: var(--global-radius-container-m); /* Popover menu option focus */
-  --popover-space-menu-x-s: calc(var(--global-space-macro-xxs) / 2); /* Left and right padding token used on small popover container consumed inside number input. */
-  --popover-space-menu-x-m: var(--global-space-macro-xxxs); /* Left and right padding token used on medium popover container consumed inside number input. */
-  --popover-space-menu-x-l: var(--global-space-macro-xxs); /* Left and right padding token used on large popover container consumed inside number input. */
-  --popover-space-menu-y-s: calc(var(--global-space-macro-xxs) / 2); /* Top and bottom padding inside S size popover menu container */
-  --popover-space-menu-y-m: var(--global-space-macro-xxxs); /* Top and bottom padding inside M size popover menu container */
-  --popover-space-menu-y-l: var(--global-space-macro-xxs); /* Top and bottom padding inside L size popover menu container */
-  --popover-space-menu-yg-s: calc(var(--global-space-macro-xxs) / 2); /* Gap spacing token used on small popover container consumed inside number input. */
-  --popover-space-menu-yg-m: var(--global-space-macro-xxxs); /* Gap spacing token used on medium popover container consumed inside number input. */
-  --popover-space-menu-yg-l: var(--global-space-macro-xxs); /* Gap spacing token used on large popover container consumed inside number input. */
-  --popover-space-option-x-s: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-x-m: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-x-l: var(--global-space-micro-xxl); /* REF'D in FORM. Right left padding on popover option. */
-  --popover-space-option-xg-s: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-xg-m: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-xg-l: var(--global-space-micro-l); /* Gap between left icon and menu button label */
-  --popover-space-option-y-s: var(--global-space-micro-s); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-option-y-m: var(--global-space-micro-l); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-option-y-l: var(--global-space-micro-xl); /* REF'D in FORM. Vertical padding on popover option. */
-  --popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
-  --popover-color-label-active: var(--modes-color-interactive-monochrome-with-active);
-  --popover-color-label-disabled: var(--modes-color-interactive-inactive-content);
-  --popover-color-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
-  --popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
-  --popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
-  --popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */
-  --popover-size-menu-maxwidth-s: var(--container-size-responsive-m); /* maxwidth of small size popover menu container */
-  --popover-size-menu-maxwidth-m: var(--container-size-responsive-l); /* maxwidth of medium size popover menu container */
-  --popover-size-menu-maxwidth-l: var(--container-size-responsive-xl); /* maxwidth of large size popover menu container */
-}

package/css/marketing/large/components/profile.css

@@ -1,77 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --profile-radius-portrait: var(--global-radius-circle); /* Portrait */
-  --profile-color-bg-default: var(--modes-color-generic-bg-nought);
-  --profile-typography-adaptive-initials-xs: var(--global-typography-adaptive-component-placeholdertext-xs);
-  --profile-typography-adaptive-initials-s: var(--global-typography-adaptive-component-placeholdertext-s);
-  --profile-typography-adaptive-initials-m: var(--global-typography-adaptive-component-placeholdertext-m);
-  --profile-typography-adaptive-initials-ml: var(--global-typography-adaptive-component-placeholdertext-ml);
-  --profile-typography-adaptive-initials-l: var(--global-typography-adaptive-component-placeholdertext-l);
-  --profile-typography-adaptive-initials-xl: var(--global-typography-adaptive-component-placeholdertext-xl);
-  --profile-typography-adaptive-initials-xxl: var(--global-typography-adaptive-component-placeholdertext-xxl);
-  --profile-typography-adaptive-default-xs: var(--global-typography-adaptive-component-moderate-s);
-  --profile-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-m);
-  --profile-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --profile-typography-adaptive-default-ml: var(--global-typography-adaptive-component-moderate-m);
-  --profile-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --profile-typography-adaptive-default-xl: var(--global-typography-adaptive-component-moderate-l);
-  --profile-typography-adaptive-default-xxl: var(--global-typography-adaptive-component-moderate-l);
-  --profile-typography-adaptive-heading-xs: var(--global-typography-adaptive-component-firm-s);
-  --profile-typography-adaptive-heading-s: var(--global-typography-adaptive-component-firm-m);
-  --profile-typography-adaptive-heading-m: var(--global-typography-adaptive-subheading-l);
-  --profile-typography-adaptive-heading-ml: var(--global-typography-adaptive-subheading-l);
-  --profile-typography-adaptive-heading-l: var(--global-typography-adaptive-subheading-l);
-  --profile-typography-adaptive-heading-xl: var(--global-typography-adaptive-heading-m);
-  --profile-typography-adaptive-heading-xxl: var(--global-typography-adaptive-heading-l);
-  --profile-typography-responsive-initials-xs: var(--global-typography-responsive-component-placeholdertext-xs);
-  --profile-typography-responsive-initials-s: var(--global-typography-responsive-component-placeholdertext-s); /* Small Viewports: 16, Large Viewports: 16 */
-  --profile-typography-responsive-initials-m: var(--global-typography-responsive-component-placeholdertext-m); /* Small Viewports: 18.66, Large Viewports: 21.53 */
-  --profile-typography-responsive-initials-ml: var(--global-typography-responsive-component-placeholdertext-ml); /* Small Viewports: 21.77, Large Viewports: 28.97 */
-  --profile-typography-responsive-initials-l: var(--global-typography-responsive-component-placeholdertext-l); /* Small Viewports: 25.39, Large Viewports: 38.98 */
-  --profile-typography-responsive-initials-xl: var(--global-typography-responsive-component-placeholdertext-xl); /* Small Viewports: 29.61, Large Viewports: 52.45 */
-  --profile-typography-responsive-initials-xxl: var(--global-typography-responsive-component-placeholdertext-xxl); /* Small Viewports: 34.54, Large Viewports: 70.58 */
-  --profile-typography-responsive-default-xs: var(--global-typography-responsive-component-moderate-s);
-  --profile-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-m);
-  --profile-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --profile-typography-responsive-default-ml: var(--global-typography-responsive-component-moderate-m);
-  --profile-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --profile-typography-responsive-default-xl: var(--global-typography-responsive-component-moderate-l);
-  --profile-typography-responsive-default-xxl: var(--global-typography-responsive-component-moderate-l);
-  --profile-typography-responsive-heading-xs: var(--global-typography-responsive-component-firm-s);
-  --profile-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-m);
-  --profile-typography-responsive-heading-m: var(--global-typography-responsive-subheading-l);
-  --profile-typography-responsive-heading-ml: var(--global-typography-responsive-subheading-l);
-  --profile-typography-responsive-heading-l: var(--global-typography-responsive-subheading-l);
-  --profile-typography-responsive-heading-xl: var(--global-typography-responsive-heading-m);
-  --profile-typography-responsive-heading-xxl: var(--global-typography-responsive-heading-l);
-  --profile-color-bg-alt: var(--modes-color-generic-content-harsh); /* For portrait image */
-  --profile-color-label-default: var(--modes-color-generic-content-harsh);
-  --profile-size-profileeditor: calc(var(--global-size-macro-s) * 10); /* size of the circle inside the profile editor component */
-  --profile-size-outside-xs: var(--global-size-macro-xs); /* XS Portraits */
-  --profile-size-outside-s: var(--global-size-macro-s); /* S Portraits */
-  --profile-size-outside-m: var(--global-size-macro-m); /* M Portraits */
-  --profile-size-outside-ml: var(--global-size-macro-xl); /* L Portraits */
-  --profile-size-outside-l: calc(var(--global-size-macro-xs) * 3); /* XL Portraits */
-  --profile-size-outside-xl: calc(var(--global-size-micro-m) * 13); /* XL Portraits */
-  --profile-size-outside-xxl: calc(var(--global-size-macro-s) * 4); /* XXL Portraits */
-  --profile-size-inside-xs: var(--global-size-micro-xl); /* XS Portrait icons */
-  --profile-size-inside-s: var(--global-size-macro-xxs); /* S Portrait icons */
-  --profile-size-inside-m: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* M Portrait icons */
-  --profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
-  --profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
-  --profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
-  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
-  --profile-color-border-default: var(--modes-color-generic-fg-delicate);
-  --profile-space-none: var(--global-space-none);
-  --profile-space-x-xs: var(--global-space-macro-xxxs); /* gap between avatar and name */
-  --profile-space-x-s: var(--global-space-macro-xxs); /* gap between avatar and name */
-  --profile-space-x-m: var(--global-space-macro-xs); /* gap between avatar and name */
-  --profile-space-x-ml: var(--global-space-macro-xs); /* gap between avatar and name */
-  --profile-space-x-l: var(--global-space-macro-s); /* gap between avatar and name */
-  --profile-space-x-xl: var(--global-space-macro-m); /* gap between avatar and name */
-  --profile-space-x-xxl: var(--global-space-macro-l); /* gap between avatar and name */
-  --profile-borderwidth-portrait: var(--global-borderwidth-xs); /* Border thickness on portrait. */
-}

package/css/marketing/large/components/progress.css

@@ -1,145 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --progress-opacity-carousel-inactive: 0.3; /* Inactive slide IMAGE layer. */
-  --progress-size-skeleton-responsive-text-xs: var(--primitives-font-size-responsive-product-step0); /* Skeleton paragraph and H5 */
-  --progress-size-skeleton-responsive-text-s: var(--primitives-font-size-responsive-product-step2); /* H4 Skeletons */
-  --progress-size-skeleton-responsive-text-m: var(--primitives-font-size-responsive-product-step2); /* H3 Skeletons */
-  --progress-size-skeleton-responsive-text-l: var(--primitives-font-size-responsive-product-step3); /* H2 Skeletons */
-  --progress-size-skeleton-responsive-text-xl: var(--primitives-font-size-responsive-product-step5); /* H1 Skeletons */
-  --progress-size-skeleton-adaptive-text-xs: var(--global-font-size-adaptive-step0); /* Skeleton paragraph and H5 */
-  --progress-size-skeleton-adaptive-text-s: var(--global-font-size-adaptive-step2); /* H4 Skeletons */
-  --progress-size-skeleton-adaptive-text-m: var(--global-font-size-adaptive-step2); /* H3 Skeletons */
-  --progress-size-skeleton-adaptive-text-l: var(--global-font-size-adaptive-step3); /* H2 Skeletons */
-  --progress-size-skeleton-adaptive-text-xl: var(--global-font-size-adaptive-step5); /* H1 Skeletons */
-  --progress-color-bg-skeleton: var(--modes-color-status-content-loading);
-  --progress-radius-none: var(--global-radius-none); /* File input (top corners of integrated progress bar), */
-  --progress-radius-stepflow: var(--global-radius-circle); /* Step flow (step indicators) */
-  --progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
-  --progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
-  --progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
-  --progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
-  --progress-color-fg-alt: var(--modes-color-status-positive-default);
-  --progress-color-fg-caution: var(--modes-color-status-caution-default);
-  --progress-color-fg-error: var(--modes-color-status-negative-default);
-  --progress-color-fg-info: var(--modes-color-status-info-default);
-  --progress-color-datavis-fg-default: var(--modes-color-status-custom-teal-default);
-  --progress-color-loader-fg-error: var(--modes-color-status-negative-default);
-  --progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
-  --progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
-  --progress-color-stepindicator-bg-complete: var(--modes-color-status-positive-default);
-  --progress-color-stepindicator-border-success: var(--modes-color-status-positive-default);
-  --progress-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --progress-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --progress-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --progress-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
-  --progress-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --progress-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --progress-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --progress-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --progress-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --progress-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
-  --progress-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --progress-color-bg-default: var(--modes-color-interactive-progress-bg);
-  --progress-color-fg-alt2: var(--modes-color-generic-content-firm);
-  --progress-color-fg-default: var(--modes-color-interactive-monochrome-active);
-  --progress-color-label-alt: var(--modes-color-generic-content-firm);
-  --progress-color-label-default: var(--modes-color-generic-content-harsh);
-  --progress-color-loader-bg-default: var(--modes-color-interactive-progress-bg);
-  --progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-active); /* used for loader standard loader spinner */
-  --progress-color-loader-inverse-bg-default: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
-  --progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-active);
-  --progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
-  --progress-color-stepflow-border-active-inner: var(--modes-color-generic-fg-nought);
-  --progress-color-stepflow-border-active-outer: var(--modes-color-interactive-monochrome-active);
-  --progress-color-stepflow-label-alt: var(--modes-color-generic-content-firm);
-  --progress-color-stepflow-label-default: var(--modes-color-generic-content-harsh);
-  --progress-color-stepindicator-bg-active: var(--modes-color-interactive-monochrome-active);
-  --progress-color-stepindicator-border-active-outer: var(--modes-color-interactive-monochrome-active);
-  --progress-color-stepindicator-label-default: var(--modes-color-generic-content-harsh);
-  --progress-size-bar-s: var(--global-size-micro-xs); /* S loader bar */
-  --progress-size-bar-m: var(--global-size-micro-m); /* M progress tracker bar, M loader bar */
-  --progress-size-bar-l: var(--global-size-micro-xl); /* L loader bar */
-  --progress-size-carouselselector-dot-m: var(--global-size-micro-l);
-  --progress-size-carouselselector-activedot-m: var(--global-size-macro-xxs);
-  --progress-size-carouselselector-hitarea-m: var(--global-size-macro-xs);
-  --progress-size-carouselslide-x-m: var(--global-size-macro-xl); /* Inactive slide */
-  --progress-size-spinner-xxs: var(--global-size-macro-xxs); /* Loader ring for XXS size loader spinners */
-  --progress-size-spinner-xs: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Loader ring for XS size loader spinners */
-  --progress-size-spinner-s: var(--global-size-macro-s); /* Loader ring */
-  --progress-size-spinner-m: calc(var(--global-size-macro-s) * 2); /* Loader ring */
-  --progress-size-spinner-l: calc(var(--global-size-macro-xs) * 4); /* Loader ring */
-  --progress-size-stepflow-m: var(--global-size-micro-m); /* Step height */
-  --progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
-  --progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
-  --progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
-  --progress-color-border-default: var(--modes-color-generic-fg-soft);
-  --progress-color-loader-inverse-fg-default: var(--modes-color-interactive-monochrome-with-active); /* used on inverse loading spinner */
-  --progress-color-stepflow-border-default: var(--modes-color-generic-fg-soft);
-  --progress-color-stepindicator-border-default: var(--modes-color-generic-fg-soft);
-  --progress-color-stepindicator-label-active: var(--modes-color-interactive-monochrome-with-active);
-  --progress-color-stepindicator-label-complete: var(--modes-color-interactive-monochrome-with-active);
-  --progress-radius-integrated: var(--global-radius-container-s); /* File input (bottom corners of integrated status bar) */
-  --progress-radius-skeleton-moderate: var(--global-radius-container-m); /* used to represent headings, inputs and text */
-  --progress-radius-skeleton-curved: var(--global-radius-container-l); /* used to represent elements such as icons */
-  --progress-radius-skeleton-sweeping: var(--global-radius-container-xxl); /* used to represent buttons */
-  --progress-radius-bar-s: var(--global-radius-container-xs); /* Progress tracker S */
-  --progress-radius-bar-m: var(--global-radius-container-s); /* File input (bottom corners of integrated status bar), Progress tracker M,  */
-  --progress-radius-bar-l: var(--global-radius-container-sm); /* Progress tracker L */
-  --progress-borderwidth-bar: var(--global-borderwidth-xs); /* Progress bar (all sizes)  */
-  --progress-borderwidth-carouselector: var(--global-borderwidth-xs); /* Carousel slide selector dots  */
-  --progress-borderwidth-integrated: var(--global-borderwidth-xs); /* Progress bar in File upload  */
-  --progress-borderwidth-stepflow-inner: var(--global-borderwidth-xs); /* Step flow default (not started) */
-  --progress-borderwidth-stepflow-active-inner: var(--global-borderwidth-s); /* Step flow active step border outer */
-  --progress-borderwidth-stepflow-active-outer: var(--global-borderwidth-l); /* Step flow active step border outermost */
-  --progress-borderwidth-stepindicator-s-active: var(--global-borderwidth-s);
-  --progress-borderwidth-stepindicator-s-default: var(--global-borderwidth-s);
-  --progress-borderwidth-stepindicator-m-active: var(--global-borderwidth-m);
-  --progress-borderwidth-stepindicator-m-default: var(--global-borderwidth-m);
-  --progress-space-carouselselector-xg-m: var(--global-space-micro-l); /* Gap between selectors. */
-  --progress-space-carouselselector-y-m: var(--global-space-macro-xs); /* Vertical padding on selector group. */
-  --progress-space-integral-x: var(--global-space-micro-s); /* Little space between words in progress components */
-  --progress-space-loader-yg-s: var(--global-space-micro-m); /* gap between loader visual and loading text */
-  --progress-space-loader-yg-m: var(--global-space-micro-l); /* gap between loader visual and loading text */
-  --progress-space-loader-yg-l: var(--global-space-micro-xl); /* gap between loader visual and loading text */
-  --progress-space-loader-xg-s: var(--global-space-micro-l); /* Gap between loader graphic and label. */
-  --progress-space-loader-xg-m: var(--global-space-micro-xxl); /* Gap between loader graphic and label. */
-  --progress-space-loader-xg-l: var(--global-space-macro-xs); /* Gap between loader graphic and label. */
-  --progress-space-skeleton-multiline-yg-xs: var(--global-space-micro-l); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-s: var(--global-space-micro-xl); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-m: var(--global-space-micro-m); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-l: var(--global-space-micro-l); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-yg-xl: var(--global-space-micro-xl); /* vertical gap between skeleton bars */
-  --progress-space-skeleton-multiline-y-xs: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-s: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-m: var(--global-space-micro-xs); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-l: var(--global-space-micro-xs); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-multiline-y-xl: var(--global-space-micro-s); /* Top bottom padding on grouped lines */
-  --progress-space-skeleton-singleline-xg-xs: var(--global-space-micro-l); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-s: var(--global-space-micro-l); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-m: var(--global-space-micro-xxl); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-l: var(--global-space-micro-xxl); /* horizontal gap between elements */
-  --progress-space-skeleton-singleline-xg-xl: var(--global-space-macro-xs); /* horizontal gap between elements */
-  --progress-space-stepflow-y-m: var(--global-space-micro-s); /* Vertical padding around step indicators */
-  --progress-space-stepflow-yg-m: var(--global-space-micro-l); /* Gap between step heading and back link. */
-  --progress-space-stepflow-steps-xg-m: var(--global-space-macro-xs); /* Gap between step indicators */
-  --progress-space-stepflow-steps-yg-m: var(--global-space-micro-s); /* Gap between glow heading, step label and step indicators */
-  --progress-space-tracker-yg-s: var(--global-space-micro-m); /* Space between bar and label */
-  --progress-space-tracker-yg-m: var(--global-space-micro-l); /* Space between bar and label */
-  --progress-space-tracker-yg-l: var(--global-space-micro-xxl); /* Space between bar and label */
-  --progress-space-tracker-xg-m: var(--global-space-micro-l); /* Gap between tracker value text and description */
-  --progress-space-stepindicator-generic-g-s: var(--global-space-micro-xxl); /* gap between timeline visual and text */
-  --progress-space-stepindicator-generic-g-m: var(--global-space-macro-xs); /* gap between timeline visual and text */
-  --progress-space-stepindicator-generic-text-yg-s: var(--global-space-micro-s); /* gap between label and subtext */
-  --progress-space-stepindicator-generic-text-yg-m: var(--global-space-micro-s); /* gap between label and subtext */
-  --progress-space-stepindicator-generic-visual-g-s: var(--global-space-micro-l); /* gap between step number and line */
-  --progress-space-stepindicator-generic-visual-g-m: var(--global-space-micro-l); /* gap between step number and line */
-  --progress-space-stepindicator-vertical-y-s: var(--global-space-micro-l); /* Vertical variant top padding on parent container */
-  --progress-space-stepindicator-vertical-y-m: var(--global-space-micro-l); /* Vertical variant top padding on parent container */
-  --progress-space-stepindicator-vertical-text-y-s: var(--global-space-micro-xs); /* space above text and parent container on vertical variant */
-  --progress-space-stepindicator-horizontal-text-x-s: var(--global-space-micro-s); /* horizontal variant left and right padding on text container */
-  --progress-space-stepindicator-horizontal-text-x-m: var(--global-space-micro-l); /* horizontal variant left and right padding on text container */
-}

package/css/marketing/large/components/status.css

@@ -1,223 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
-  --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
-  --status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
-  --status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
-  --status-color-message-contextual-icon-alt: var(--modes-color-status-neutral-default); /* icon on neutral status dialogs */
-  --status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
-  --status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
-  --status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
-  --status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
-  --status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
-  --status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
-  --status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
-  --status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
-  --status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
-  --status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
-  --status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
-  --status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
-  --status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
-  --status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
-  --status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
-  --status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
-  --status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
-  --status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
-  --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
-  --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
-  --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
-  --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
-  --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
-  --status-color-pill-custom-blue-bg-default: var(--modes-color-status-custom-blue-default);
-  --status-color-pill-custom-blue-bg-alt-default: var(--modes-color-status-custom-blue-default-alt); /* outline pill bg */
-  --status-color-pill-custom-blue-border-default: var(--modes-color-status-custom-blue-default);
-  --status-color-pill-custom-teal-bg-default: var(--modes-color-status-custom-teal-default);
-  --status-color-pill-custom-teal-bg-alt-default: var(--modes-color-status-custom-teal-default-alt); /* outline pill bg */
-  --status-color-pill-custom-teal-border-default: var(--modes-color-status-custom-teal-default);
-  --status-color-pill-custom-green-bg-default: var(--modes-color-status-custom-green-default);
-  --status-color-pill-custom-green-bg-alt-default: var(--modes-color-status-custom-green-default-alt); /* outline pill bg */
-  --status-color-pill-custom-green-border-default: var(--modes-color-status-custom-green-default);
-  --status-color-pill-custom-lime-bg-default: var(--modes-color-status-custom-lime-default);
-  --status-color-pill-custom-lime-bg-alt-default: var(--modes-color-status-custom-lime-default-alt); /* outline pill bg */
-  --status-color-pill-custom-lime-border-default: var(--modes-color-status-custom-lime-default);
-  --status-color-pill-custom-orange-bg-default: var(--modes-color-status-custom-orange-default);
-  --status-color-pill-custom-orange-bg-alt-default: var(--modes-color-status-custom-orange-default-alt); /* outline pill bg */
-  --status-color-pill-custom-orange-border-default: var(--modes-color-status-custom-orange-default);
-  --status-color-pill-custom-red-bg-default: var(--modes-color-status-custom-red-default);
-  --status-color-pill-custom-red-bg-alt-default: var(--modes-color-status-custom-red-default-alt); /* outline pill bg */
-  --status-color-pill-custom-red-border-default: var(--modes-color-status-custom-red-default);
-  --status-color-pill-custom-pink-bg-default: var(--modes-color-status-custom-pink-default);
-  --status-color-pill-custom-pink-bg-alt-default: var(--modes-color-status-custom-pink-default-alt); /* outline pill bg */
-  --status-color-pill-custom-pink-border-default: var(--modes-color-status-custom-pink-default);
-  --status-color-pill-custom-purple-bg-default: var(--modes-color-status-custom-purple-default);
-  --status-color-pill-custom-purple-bg-alt-default: var(--modes-color-status-custom-purple-default-alt); /* outline pill bg */
-  --status-color-pill-custom-purple-border-default: var(--modes-color-status-custom-purple-default);
-  --status-color-pill-custom-gray-bg-default: var(--modes-color-status-custom-gray-default);
-  --status-color-pill-custom-gray-bg-alt-default: var(--modes-color-status-custom-gray-default-alt); /* outline pill bg */
-  --status-color-pill-custom-gray-border-default: var(--modes-color-status-custom-gray-default);
-  --status-color-pill-custom-slate-bg-default: var(--modes-color-status-custom-slate-default);
-  --status-color-pill-custom-slate-bg-alt-default: var(--modes-color-status-custom-slate-default-alt); /* outline pill bg */
-  --status-color-pill-custom-slate-border-default: var(--modes-color-status-custom-slate-default);
-  --status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
-  --status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
-  --status-color-pill-error-border-default: var(--modes-color-status-negative-default);
-  --status-color-pill-error-inverse-bg-default: var(--modes-color-status-negative-inverse-default);
-  --status-color-pill-error-inverse-bg-alt-default: var(--modes-color-status-negative-inverse-default-alt); /* outline pill bg */
-  --status-color-pill-error-inverse-border-default: var(--modes-color-status-negative-inverse-default);
-  --status-color-pill-important-bg-default: var(--modes-color-status-important-default);
-  --status-color-pill-important-bg-alt-default: var(--modes-color-status-important-default-alt); /* outline pill bg */
-  --status-color-pill-important-border-default: var(--modes-color-status-important-default);
-  --status-color-pill-important-inverse-bg-default: var(--modes-color-status-important-inverse-default);
-  --status-color-pill-important-inverse-bg-alt-default: var(--modes-color-status-important-inverse-default-alt); /* outline pill bg */
-  --status-color-pill-important-inverse-border-default: var(--modes-color-status-important-inverse-default);
-  --status-color-pill-info-bg-default: var(--modes-color-status-info-default);
-  --status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
-  --status-color-pill-info-border-default: var(--modes-color-status-info-default);
-  --status-color-pill-info-inverse-bg-default: var(--modes-color-status-info-inverse-default);
-  --status-color-pill-info-inverse-bg-alt-default: var(--modes-color-status-info-inverse-default-alt); /* outline pill bg */
-  --status-color-pill-info-inverse-border-default: var(--modes-color-status-info-inverse-default);
-  --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
-  --status-color-pill-neutral-bg-alt-default: var(--modes-color-status-neutral-default-alt); /* outline pill bg */
-  --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
-  --status-color-pill-neutral-inverse-bg-default: var(--modes-color-status-neutral-inverse-default);
-  --status-color-pill-neutral-inverse-bg-alt-default: var(--modes-color-status-neutral-inverse-default-alt); /* outline pill bg */
-  --status-color-pill-neutral-inverse-border-default: var(--modes-color-status-neutral-inverse-default);
-  --status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
-  --status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
-  --status-color-pill-success-border-default: var(--modes-color-status-positive-default);
-  --status-color-pill-success-inverse-bg-default: var(--modes-color-status-positive-inverse-default);
-  --status-color-pill-success-inverse-bg-alt-default: var(--modes-color-status-positive-inverse-default-alt); /* outline pill bg */
-  --status-color-pill-success-inverse-border-default: var(--modes-color-status-positive-inverse-default);
-  --status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
-  --status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
-  --status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
-  --status-color-pill-warning-inverse-bg-default: var(--modes-color-status-caution-inverse-default);
-  --status-color-pill-warning-inverse-bg-alt-default: var(--modes-color-status-caution-inverse-default-alt); /* Global message bg */
-  --status-color-pill-warning-inverse-border-default: var(--modes-color-status-caution-inverse-default);
-  --status-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --status-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --status-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --status-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
-  --status-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --status-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --status-typography-adaptive-heading-s: var(--global-typography-adaptive-component-firm-s);
-  --status-typography-adaptive-heading-m: var(--global-typography-adaptive-component-firm-m);
-  --status-typography-adaptive-heading-l: var(--global-typography-adaptive-component-firm-l);
-  --status-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --status-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --status-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --status-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
-  --status-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --status-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --status-typography-responsive-heading-s: var(--global-typography-responsive-component-firm-s);
-  --status-typography-responsive-heading-m: var(--global-typography-responsive-component-firm-m);
-  --status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
-  --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
-  --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
-  --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
-  --status-color-message-global-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
-  --status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
-  --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
-  --status-color-pill-custom-blue-bg-alt-hover: var(--modes-color-status-custom-blue-hover-alt);
-  --status-color-pill-custom-blue-bg-hover: var(--modes-color-status-custom-blue-hover);
-  --status-color-pill-custom-teal-bg-alt-hover: var(--modes-color-status-custom-teal-hover-alt);
-  --status-color-pill-custom-teal-bg-hover: var(--modes-color-status-custom-teal-hover);
-  --status-color-pill-custom-green-bg-alt-hover: var(--modes-color-status-custom-green-hover-alt);
-  --status-color-pill-custom-green-bg-hover: var(--modes-color-status-custom-green-hover);
-  --status-color-pill-custom-lime-bg-alt-hover: var(--modes-color-status-custom-lime-hover-alt);
-  --status-color-pill-custom-lime-bg-hover: var(--modes-color-status-custom-lime-hover);
-  --status-color-pill-custom-orange-bg-alt-hover: var(--modes-color-status-custom-orange-hover-alt);
-  --status-color-pill-custom-orange-bg-hover: var(--modes-color-status-custom-orange-hover);
-  --status-color-pill-custom-red-bg-alt-hover: var(--modes-color-status-custom-red-hover-alt);
-  --status-color-pill-custom-red-bg-hover: var(--modes-color-status-custom-red-hover);
-  --status-color-pill-custom-pink-bg-alt-hover: var(--modes-color-status-custom-pink-hover-alt);
-  --status-color-pill-custom-pink-bg-hover: var(--modes-color-status-custom-pink-hover);
-  --status-color-pill-custom-purple-bg-alt-hover: var(--modes-color-status-custom-purple-hover-alt);
-  --status-color-pill-custom-purple-bg-hover: var(--modes-color-status-custom-purple-hover);
-  --status-color-pill-custom-gray-bg-alt-hover: var(--modes-color-status-custom-gray-hover-alt);
-  --status-color-pill-custom-gray-bg-hover: var(--modes-color-status-custom-gray-hover);
-  --status-color-pill-custom-slate-bg-alt-hover: var(--modes-color-status-custom-slate-hover-alt);
-  --status-color-pill-custom-slate-bg-hover: var(--modes-color-status-custom-slate-hover);
-  --status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
-  --status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
-  --status-color-pill-error-inverse-bg-alt-hover: var(--modes-color-status-negative-inverse-hover-alt);
-  --status-color-pill-error-inverse-bg-hover: var(--modes-color-status-negative-inverse-hover);
-  --status-color-pill-generic-inverse-label-default: var(--modes-color-status-content-inverse-with-default);
-  --status-color-pill-generic-inverse-label-hover: var(--modes-color-status-content-inverse-with-hover);
-  --status-color-pill-important-bg-alt-hover: var(--modes-color-status-important-hover-alt);
-  --status-color-pill-important-bg-hover: var(--modes-color-status-important-hover);
-  --status-color-pill-important-inverse-bg-alt-hover: var(--modes-color-status-important-inverse-hover-alt);
-  --status-color-pill-important-inverse-bg-hover: var(--modes-color-status-important-inverse-hover);
-  --status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
-  --status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
-  --status-color-pill-info-inverse-bg-alt-hover: var(--modes-color-status-info-inverse-hover-alt);
-  --status-color-pill-info-inverse-bg-hover: var(--modes-color-status-info-inverse-hover);
-  --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
-  --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
-  --status-color-pill-neutral-inverse-bg-alt-hover: var(--modes-color-status-neutral-inverse-hover-alt);
-  --status-color-pill-neutral-inverse-bg-hover: var(--modes-color-status-neutral-inverse-hover);
-  --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
-  --status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
-  --status-color-pill-success-inverse-bg-alt-hover: var(--modes-color-status-positive-inverse-hover-alt);
-  --status-color-pill-success-inverse-bg-hover: var(--modes-color-status-positive-inverse-hover);
-  --status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
-  --status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
-  --status-color-pill-warning-inverse-bg-alt-hover: var(--modes-color-status-caution-inverse-hover-alt);
-  --status-color-pill-warning-inverse-bg-hover: var(--modes-color-status-caution-inverse-hover);
-  --status-color-rating-bg-default: var(--modes-color-status-reviews-default);
-  --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
-  --status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
-  --status-color-rating-border-default: var(--modes-color-status-reviews-default);
-  --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
-  --status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
-  --status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
-  --status-color-pill-generic-label-default: var(--modes-color-status-content-with-default);
-  --status-color-pill-generic-label-hover: var(--modes-color-status-content-with-hover);
-  --status-color-pill-generic-label-alt-default: var(--modes-color-status-content-with-default-alt);
-  --status-color-pill-generic-label-alt-hover: var(--modes-color-status-content-with-default-alt);
-  --status-color-pill-generic-inverse-label-alt-default: var(--modes-color-status-content-inverse-with-default-alt);
-  --status-color-pill-generic-inverse-label-alt-hover: var(--modes-color-status-content-inverse-with-default-alt);
-  --status-size-pill-s: calc(var(--global-size-macro-xs) - var(--global-size-micro-xs)); /* Min height */
-  --status-size-pill-m: var(--global-size-macro-xs); /* Min height and removable button. */
-  --status-size-pill-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* Min height and removable button */
-  --status-size-message-statuscontainer-m: var(--global-size-macro-s); /* message and toast icon container width */
-  --status-size-message-statuscontainer-l: var(--global-size-macro-m); /* message and toast icon container width */
-  --status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
-  --status-size-icon-m: var(--global-size-icon-m);
-  --status-radius-message: var(--global-radius-container-m); /* Message */
-  --status-radius-pill: var(--global-radius-container-sm); /* Pill (outer corners) */
-  --status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
-  --status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
-  --status-space-none: var(--global-space-none);
-  --status-space-integral-x: var(--global-space-micro-s); /* Space between pill label and icon. Space between message text and link. */
-  --status-space-pill-x-s: calc(var(--global-space-macro-xs) / 2);
-  --status-space-pill-x-m: calc(var(--global-space-macro-xs) / 2);
-  --status-space-pill-x-l: calc(var(--global-space-macro-xs) / 2);
-  --status-space-tooltip-x: var(--global-space-micro-xxl); /* Right left padding.  */
-  --status-space-tooltip-y: var(--global-space-micro-l); /* Top bottom padding.  */
-  --status-space-message-contextual-x-m: var(--global-space-micro-xxl); /* Left and right padding on Medium message */
-  --status-space-message-contextual-x-l: var(--global-space-macro-s); /* Left and right paddding on Large Message */
-  --status-space-message-contextual-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on Medium message */
-  --status-space-message-contextual-y-l: var(--global-space-macro-s); /* Top and bottom paddding on Large Message */
-  --status-space-message-contextual-xg-m: var(--global-space-micro-l); /* Gap between icon and text in subtle message, and between text and action button in typical message */
-  --status-space-message-contextual-xg-l: var(--global-space-macro-xs); /* Gap between icon and text in subtle message, and between text and action button in typical message */
-  --status-space-message-contextual-yg-m: var(--global-space-micro-xs); /* Gap between heading and other content */
-  --status-space-message-contextual-yg-l: var(--global-space-micro-s); /* Gap between heading and other content */
-  --status-space-message-contextual-subtle-iconwrapper-y-m: var(--global-space-micro-xs); /* space above icon on subtle message for medium variant */
-  --status-space-message-contextual-subtle-iconwrapper-y-l: var(--global-space-micro-s); /* space above icon on subtle message for large variant */
-  --status-space-message-global-x-m: var(--global-space-macro-xl); /* Left and right padding on global message */
-  --status-space-message-global-y-m: var(--global-space-micro-l); /* Top and bottom padding on global message. */
-  --status-space-message-global-xg-m: var(--global-space-macro-xs); /* Space between icon wrapper and text wrapper */
-  --status-space-message-global-yg-m: var(--global-space-micro-s); /* Gap between heading and other content. */
-  --status-space-message-global-cta-y-m: var(--global-space-macro-xs); /* Top and bottom padding on global message for countdown */
-  --status-space-message-global-cta-yg-m: var(--global-space-macro-m); /* Gap between countdown spacing for global message */
-  --status-space-message-global-iconwrapper-y-m: var(--global-space-micro-xxl); /* Top padding on global message icon wrapper. */
-  --status-color-pill-readonly-bg-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-color-pill-readonly-border-default: var(--modes-color-status-inactive-default); /* Pill (all types, readonly, when nested in disabled parent components) */
-  --status-size-message-messagecontent-maxwidth: var(--container-size-responsive-xxxl); /* max width of content inside message to make sure there are roughly 12 works per line */
-}

package/css/marketing/large/components/tab.css

@@ -1,57 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --tab-color-bg-enabled: var(--modes-color-none);
-  --tab-color-navigation-bg-default: var(--modes-color-generic-bg-nought); /* For previous/next buttons on responsive tabs */
-  --tab-color-validation-border-warning: var(--modes-color-status-caution-default);
-  --tab-color-validation-border-error: var(--modes-color-status-negative-default);
-  --tab-color-validation-icon-error: var(--modes-color-status-negative-default);
-  --tab-color-validation-icon-warning: var(--modes-color-status-caution-default);
-  --tab-radius-none: var(--button-radius-none); /* For previous/next buttons */
-  --tab-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --tab-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --tab-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --tab-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --tab-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --tab-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --tab-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* For anchor nav, not tab. */
-  --tab-color-border-active: var(--modes-color-interactive-monochrome-active);
-  --tab-color-icon-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --tab-color-label-active: var(--modes-color-interactive-monochrome-active);
-  --tab-color-icon-active: var(--modes-color-interactive-monochrome-active);
-  --tab-color-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --tab-size-m: var(--global-size-macro-m); /* Anchor nav, M Tab */
-  --tab-size-l: var(--global-size-macro-l); /* L tab */
-  --tab-size-shadow-arrow: var(--global-size-micro-m); /* Shadow width for linear gradient shadow on repsonsive tab arrows. */
-  --tab-size-baseline-m: var(--global-size-micro-xxs); /* Thickness of baseline. */
-  --tab-size-baseline-l: var(--global-size-micro-xxs); /* Thickness of baseline. */
-  --tab-size-icon-m: var(--global-size-icon-m);
-  --tab-size-icon-l: var(--global-size-icon-m);
-  --tab-size-indicator-m: var(--global-size-micro-xs); /* Thickness of indicator for active and hover. */
-  --tab-size-indicator-l: var(--global-size-micro-xs); /* Thickness of indicator for active and hover. */
-  --tab-space-x-m: var(--global-space-macro-xs); /* Left and right padding on Tab. */
-  --tab-space-x-l: var(--global-space-macro-m); /* Left and right padding on Tab. */
-  --tab-space-xg-m: var(--global-space-micro-l); /* Gap between elements in Tab. */
-  --tab-space-xg-l: var(--global-space-micro-l); /* Gap between elements in Tab. */
-  --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
-  --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
-  --tab-color-bg-active: var(--modes-color-interactive-monochrome-with-active);
-  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
-  --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
-  --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
-  --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-default-alt);
-  --tab-color-label-enabled: var(--modes-color-interactive-monochrome-default);
-  --tab-color-validation-label-error: var(--modes-color-interactive-monochrome-default-alt);
-  --tab-color-validation-label-warning: var(--modes-color-interactive-monochrome-default-alt);
-  --tab-radius-m: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
-  --tab-radius-l: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
-  --tab-radius-baseline-m: var(--global-radius-interactive-xxs);
-  --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
-  --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
-  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
-}