@sage/design-tokens 14.9.1 → 15.1.0

package/css/marketing/small/components/container.css

@@ -1,301 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
-  --container-size-dialog-max-width-xxs: 300;
-  --container-size-dialog-max-width-xs: 380;
-  --container-size-dialog-max-width-s: 540;
-  --container-size-dialog-max-width-m: 850;
-  --container-size-dialog-max-width-l: 1080;
-  --container-size-dialog-max-width-xl: 960;
-  --container-size-dialog-max-width-xxl: 1080;
-  --container-size-dialog-min-width-s: 288;
-  --container-size-dialog-min-width-m: 288;
-  --container-size-dialog-min-width-l: 288;
-  --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
-  --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
-  --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
-  --container-radius-none: var(--global-radius-none); /* Card select (inner adjacent corners), Subscription tile footer top corners */
-  --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
-  --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
-  --container-color-ai-dialog-borderhorizontal: var(--modes-color-generic-fg-ai-default); /* top border for AI dialog component */
-  --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
-  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
-  --container-color-ai-tile-bordervertical: var(--modes-color-status-ai-default-vertical); /* left border for AI tiles and bubbles. */
-  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /*   */
-  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
-  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
-  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
-  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
-  --container-color-interactive-droptarget-bg-default: var(--modes-color-status-info-default); /* draggable drop target background color */
-  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
-  --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
-  --container-color-standard-statusborder-bg-negative: var(--modes-color-status-negative-default);
-  --container-color-standard-statusborder-bg-important: var(--modes-color-status-important-default);
-  --container-color-standard-statusborder-bg-info: var(--modes-color-status-info-default);
-  --container-color-standard-statusborder-bg-neutral: var(--modes-color-status-neutral-default);
-  --container-color-standard-statusborder-bg-positive: var(--modes-color-status-positive-default);
-  --container-boxshadow-none: var(--global-boxshadow-none);
-  --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
-  --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
-  --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
-  --container-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --container-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --container-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --container-typography-adaptive-paragraph-s: var(--global-typography-adaptive-component-moderate-s);
-  --container-typography-adaptive-paragraph-m: var(--global-typography-adaptive-component-moderate-m);
-  --container-typography-adaptive-paragraph-l: var(--global-typography-adaptive-component-moderate-l);
-  --container-typography-responsive-heading-m: var(--global-typography-responsive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
-  --container-typography-responsive-heading-l: var(--global-typography-responsive-heading-m); /* Dialog, drawer and sidebar headings */
-  --container-typography-responsive-subheading-m: var(--global-typography-responsive-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
-  --container-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --container-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --container-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
-  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
-  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
-  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
-  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
-  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* Used for accordion hover backgrounds  */
-  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
-  --container-color-interactive-icon-active: var(--modes-color-interactive-monochrome-active); /* Active chevron for any accordion. */
-  --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-active); /* Active label for any accordion. */
-  --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
-  --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
-  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
-  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
-  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
-  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-active);
-  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
-  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
-  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
-  --container-color-standard-statusborder-bg-ai: var(--container-color-ai-tile-bordervertical);
-  --container-boxshadow-carousel: var(--global-boxshadow-container-distant); /* Carousel  */
-  --container-boxshadow-colorpicker: var(--global-boxshadow-container-near); /* Color picker (advanced)  */
-  --container-boxshadow-dialog: var(--global-boxshadow-container-distant); /* Dialog  */
-  --container-boxshadow-filepreview: var(--global-boxshadow-container-distant); /* File preview */
-  --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
-  --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
-  --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
-  --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
-  --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
-  --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
-  --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
-  --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview.  */
-  --container-color-interactive-borderalt-hover: var(--modes-color-interactive-monochrome-default); /* For hover border on Link preview. */
-  --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
-  --container-color-interactive-border-enabled: var(--modes-color-generic-fg-moderate);
-  --container-color-interactive-icon-enabled: var(--modes-color-interactive-monochrome-default); /* Enabled chevron for any accordion. */
-  --container-color-interactive-icon-alt-enabled: var(--modes-color-interactive-monochrome-default-alt); /* Enabled label for subtle accordion. */
-  --container-color-interactive-icon-hover: var(--modes-color-interactive-monochrome-default); /* Hover chevron for any accordion. */
-  --container-color-interactive-label-footer-active: var(--modes-color-interactive-monochrome-with-active);
-  --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-with-active);
-  --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
-  --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-default); /* Hover label for any accordion. */
-  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
-  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
-  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
-  --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
-  --container-size-none: var(--global-size-none);
-  --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
-  --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
-  --container-size-chatbubble-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max width for chat bubbles */
-  --container-size-copilot-emptystate-illustration: calc(var(--global-size-macro-m) * 5); /* Illustration size */
-  --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
-  --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
-  --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
-  --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
-  --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
-  --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
-  --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-icon-s: var(--global-size-icon-m);
-  --container-size-icon-m: var(--global-size-icon-m);
-  --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */
-  --container-size-linkpreview-thumbnail-s: calc(var(--global-size-macro-xxxxl) - 3); /* Thumbnail height and width for small variant */
-  --container-size-linkpreview-thumbnail-m: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-xxs)); /* Thumbnail height and width for medium variant */
-  --container-size-linkpreview-thumbnail-l: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-l)); /* Thumbnail height and width for large variant */
-  --container-size-linkpreview-headertext-s: var(--global-size-macro-s); /* fixed text layer size for small header */
-  --container-size-linkpreview-headertext-m: var(--global-size-macro-s); /* fixed text layer size for large header */
-  --container-size-linkpreview-headertext-l: var(--global-size-macro-m); /* fixed text layer size for small header */
-  --container-size-linkpreview-descriptiontext-s: calc(var(--global-size-macro-m) + var(--global-size-micro-xs)); /* Fixed height for small note description text string */
-  --container-size-linkpreview-descriptiontext-m: var(--global-size-macro-l); /* Fixed height for medium note description text string */
-  --container-size-linkpreview-descriptiontext-l: var(--global-size-macro-xl); /* Fixed height for large note description text string */
-  --container-size-responsive-xxs: var(--global-size-flex-xxs); /* min and max widths for responsive tile items */
-  --container-size-responsive-xs: var(--global-size-flex-xs); /* min and max widths for responsive tile items */
-  --container-size-responsive-s: var(--global-size-flex-s); /* min and max widths for responsive tile items. Min width for Tile select content wrapper. */
-  --container-size-responsive-m: var(--global-size-flex-m); /* min and max widths for responsive tile items */
-  --container-size-responsive-l: var(--global-size-flex-l); /* min and max widths for responsive tile items */
-  --container-size-responsive-xl: var(--global-size-flex-xl); /* Small screen mid width inside page margins. */
-  --container-size-responsive-xxl: var(--global-size-flex-xxl); /* Small screen full page width. */
-  --container-size-responsive-xxxl: var(--global-size-flex-xxxl); /* min and max widths for responsive tile items */
-  --container-size-responsive-xxxxl: var(--global-size-flex-xxxxl); /* Max width for single line of text. */
-  --container-size-scrollbar-container: var(--global-size-micro-xl); /* Container that the scrollbar sits within  */
-  --container-size-sidebar-responsive-min: var(--global-size-flex-xl); /* min-width for sidebar */
-  --container-size-sidebar-responsive-max: var(--global-size-flex-xxxxl); /* max-width for sidebar */
-  --container-size-tile-statusborder: var(--global-size-micro-m); /* width of left status borders on tiles. */
-  --container-size-tileselect-footer: var(--global-size-macro-l); /* Product identifier  */
-  --container-size-tileselect-productidentifier-m: var(--global-size-macro-s); /* Product identifier  */
-  --container-size-tileselect-productidentifier-l: var(--global-size-macro-l); /* Product identifier  */
-  --container-size-tooltip-arrow-width: var(--global-size-micro-xxl); /* tooltip arrow width */
-  --container-size-tooltip-arrow-height: var(--global-size-micro-m); /* tooltip arrow height */
-  --container-size-uploadpreview-m: var(--global-size-macro-xxxl); /* Thumbnail container */
-  --container-radius-carouselslide: var(--global-radius-container-l); /* Carousel slides */
-  --container-radius-colorpicker: var(--global-radius-container-l); /* Color picker container radius */
-  --container-radius-contacttile: var(--global-radius-container-m);
-  --container-radius-dialog: var(--global-radius-container-xl); /* Dialog */
-  --container-radius-filepreview: var(--global-radius-container-m); /* File preview (parent container),  */
-  --container-radius-linkpreview: var(--global-radius-interactive-s); /* Link preview (outer corners) */
-  --container-radius-heroimage: var(--global-radius-container-xxxxl); /* hero image radius */
-  --container-radius-note: var(--global-radius-container-m); /* Note */
-  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
-  --container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
-  --container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners)  */
-  --container-radius-card-moderate: var(--global-radius-container-l); /* Card (less rounded) */
-  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
-  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
-  --container-radius-tile-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tile-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tile-sweeping: var(--global-radius-container-xxl); /* Tile largest roundedness  */
-  --container-radius-tileselect-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tileselect-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tileselect-sweeping: var(--global-radius-container-xxl);
-  --container-space-none: var(--global-space-none);
-  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
-  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
-  --container-space-filepreview-preview-y-m: var(--global-space-micro-l); /* Vertical padding on large thumbnail image. */
-  --container-space-flex-xg-s: var(--global-space-macro-xs); /* Small horizontal item spacing */
-  --container-space-flex-xg-m: var(--global-space-macro-m); /* Medium horizontal item spacing */
-  --container-space-flex-xg-l: var(--global-space-macro-l); /* Large horizontal item spacing */
-  --container-space-flex-yg-s: var(--global-space-macro-xs); /* Small row gap */
-  --container-space-flex-yg-m: var(--global-space-macro-m); /* Medium row gap */
-  --container-space-flex-yg-l: var(--global-space-macro-l); /* Large row gap */
-  --container-space-flex-item-x-s: var(--global-space-macro-xs); /* Small left and right padding on flex items */
-  --container-space-flex-item-x-m: var(--global-space-macro-m); /* Medium left and right padding on flex items */
-  --container-space-flex-item-x-l: var(--global-space-macro-l); /* Large left and right padding on flex items */
-  --container-space-flex-item-y-s: var(--global-space-macro-xs); /* Small top bottom padding on flex items */
-  --container-space-flex-item-y-m: var(--global-space-macro-m); /* Medium top bottom padding on flex items */
-  --container-space-flex-item-y-l: var(--global-space-macro-l); /* Large top bottom padding on flex items */
-  --container-space-generic-content-x-xs: var(--global-space-micro-l);
-  --container-space-generic-content-x-s: var(--global-space-macro-xs); /* Left and right padding copilot chat history items, S accordions, S cards and S tiles */
-  --container-space-generic-content-x-m: var(--global-space-macro-m); /* Left and right padding on dialog, drawer, M cards, M tiles and sidebar */
-  --container-space-generic-content-x-l: var(--global-space-macro-l); /* Left and right padding on large card and tile  */
-  --container-space-generic-content-y-xs: var(--global-space-micro-l);
-  --container-space-generic-content-y-s: var(--global-space-macro-xs); /* Top and bottom padding S Accordions, S cards and S tiles */
-  --container-space-generic-content-y-m: var(--global-space-macro-m); /* Vertical padding on content in dialog, drawer, sidebar card and tile */
-  --container-space-generic-content-y-l: var(--global-space-macro-l);
-  --container-space-generic-content-xg-xs: var(--global-space-micro-s); /* Gap padding within timestamp in Note. */
-  --container-space-generic-content-xg-s: var(--global-space-macro-xs); /* gap padding between carousel tiles */
-  --container-space-generic-content-xg-m: var(--global-space-macro-m); /* gap padding between carousel tiles */
-  --container-space-generic-content-yg-s: var(--global-space-micro-l); /* Vertical gap between content items in Anchor nav quick links  */
-  --container-space-generic-content-yg-m: var(--global-space-macro-xs); /* Vertical gap between content items in copilot content, dialog, drawer, sidebar, M card and M tile.  */
-  --container-space-generic-content-yg-l: var(--global-space-macro-m); /* vertical gap between block quote text and avatar */
-  --container-space-generic-outer-x-m: var(--global-space-macro-m); /* Left and right margins on dialog and sidebar in small screen full width contexts */
-  --container-space-generic-outer-y-m: var(--global-space-macro-m); /* Top and Bottom margins on dialog and sidebar in small screen full width contexts */
-  --container-space-generic-header-x-s: var(--global-space-macro-xs); /* Left and right padding on accordion */
-  --container-space-generic-header-x-m: var(--global-space-macro-m); /* Left and right padding on copilot, dialog, drawer, M cards, M tiles and sidebar. */
-  --container-space-generic-header-y-xs: var(--global-space-micro-xxl); /* Top and bottom padding copilot header and subheader. */
-  --container-space-generic-header-y-s: var(--global-space-macro-xs); /* Top and bottom padding on small accordion. */
-  --container-space-generic-header-y-m: var(--global-space-macro-m); /* Vertical padding on accordion, dialog headers and on sub-page headers inside copilot (e.g insights and chat history). */
-  --container-space-generic-header-xg-m: var(--global-space-macro-xs); /* horizontal space between dialog heading and icon */
-  --container-space-generic-header-yg-m: var(--global-space-micro-s); /* vertical space between heading and subheading in dialog, accordion and sub-pages inside copilot. */
-  --container-space-generic-header-yg-l: var(--global-space-macro-xs); /* vertical space between heading and Powered By AI identifier in dialog header */
-  --container-space-generic-emptystate-y-m: var(--global-space-macro-m); /* Spacing between empty state heading and body copy below it. */
-  --container-space-generic-emptystate-y-l: var(--global-space-macro-xl); /* Spacing between empty state roundel and heading below it. */
-  --container-space-generic-footer-x-m: var(--global-space-macro-m); /* Left and right padding on copilot footer */
-  --container-space-generic-footer-y-m: var(--global-space-macro-xs); /* Top and bottom padding on copilot footer */
-  --container-space-note-x-m: var(--global-space-macro-m); /* Left and right padding on Note */
-  --container-space-note-xg-m: var(--global-space-macro-xs); /* Gap between columns in editor detail in Note. */
-  --container-space-note-timestamp-xg-m: var(--global-space-macro-m); /* Gap between created and updated editor columns */
-  --container-space-note-timestamp-yg-m: var(--global-space-micro-s); /* gap between create or updated title and timestamp */
-  --container-space-note-y-m: var(--global-space-macro-m); /* Top bottom padding on Note */
-  --container-space-note-yg-m: var(--global-space-macro-xs); /* Vertical gap on Note */
-  --container-space-linkpreview-x-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-x-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-x-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-xg-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-xg-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-xg-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-y-s: var(--global-space-micro-l); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-y-m: var(--global-space-micro-xxl); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-y-l: var(--global-space-macro-xs); /* Content horizontal padding for large variant */
-  --container-space-linkpreview-yg-s: var(--global-space-micro-s); /* Content horizontal padding for small variant */
-  --container-space-linkpreview-yg-m: var(--global-space-micro-l); /* Content horizontal padding for medium variant */
-  --container-space-linkpreview-yg-l: var(--global-space-micro-xxl); /* Content horizontal padding for large variant */
-  --container-space-pagination-xg-m: var(--global-space-macro-xxxs); /* gap between elements in pagination */
-  --container-space-pagination-xg-l: var(--global-space-macro-m); /* gap between button group and advanced left area */
-  --container-space-pagination-y-m: var(--global-space-macro-xxxs); /* top and bottom padding inside pagination */
-  --container-space-pagination-y-l: var(--global-space-macro-xs); /* external margin on top of floating pagination variant */
-  --container-space-pagination-yg-m: var(--global-space-macro-xs); /* Vertical gap between elements on small screens */
-  --container-space-pagination-x-m: var(--global-space-macro-xs); /* left and right padding inside pagination */
-  --container-space-scrollbar-y-inner: var(--global-space-micro-xxs); /* top and bottom padding around scrollbar handle. */
-  --container-space-scrollbar-y-outer: var(--global-space-micro-xs); /* top and bottom padding inside scrollbar outer container */
-  --container-space-summarylist-item-xg-m: var(--global-space-micro-l); /* gap between summary list item content */
-  --container-space-summarylist-item-y-m: var(--global-space-micro-xxl); /* top and bottom padding for each item  */
-  --container-space-summarylist-title-xg-m: var(--global-space-macro-xs); /* gap between summary list title and edit link */
-  --container-space-summarylist-title-y-m: var(--global-space-micro-xxl); /* bottom padding for each section title */
-  --container-space-summarylist-title-y-l: var(--global-space-macro-l); /* top padding for each section title */
-  --container-space-tilecard-x-xs: var(--global-space-macro-xs); /* Left and right padding on Link preview */
-  --container-space-tilecard-x-s: var(--global-space-macro-xs); /* Right left padding on Tile or Card. */
-  --container-space-tilecard-x-m: var(--global-space-macro-m); /* Right left padding on drag wrapper */
-  --container-space-tilecard-x-l: var(--global-space-macro-l); /* Right left padding on Tile or Card. */
-  --container-space-tilecard-x-xxxl: calc(var(--global-space-macro-xl) * 2); /* Right margin on AI response bubbles and left margin on user prompt bubbles. */
-  --container-space-tilecard-xg-m: var(--global-space-micro-l); /* horizontal gap between icons and text */
-  --container-space-tilecard-y-xs: var(--global-space-micro-l); /* Top bottom padding on Link preview and on card drag wrapper */
-  --container-space-tilecard-y-s: var(--global-space-macro-xs); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-y-m: var(--global-space-macro-m); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-y-l: var(--global-space-macro-l); /* Top bottom padding on Tile or Card. */
-  --container-space-tilecard-yg-s: var(--global-space-micro-s);
-  --container-space-tileselect-x-s: var(--global-space-macro-xs); /* Left and right padding on tile select container */
-  --container-space-tileselect-x-m: var(--global-space-macro-m); /* Left and right padding on tile select container */
-  --container-space-tileselect-x-l: var(--global-space-macro-l); /* Left and right padding on tile select container */
-  --container-space-tileselect-y-s: var(--global-space-macro-xs); /* Top and bottom padding on tile select container */
-  --container-space-tileselect-y-m: var(--global-space-macro-m); /* Top bottom padding on tile select container */
-  --container-space-tileselect-y-l: var(--global-space-macro-l); /* Top and bottom padding on tile select container */
-  --container-space-tileselect-yg-s: var(--global-space-macro-xs); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-yg-m: var(--global-space-macro-m); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-yg-l: var(--global-space-macro-l); /* Vertical gap between content blocks in Subscription tile. */
-  --container-space-tileselect-content-yg-m: var(--global-space-micro-l); /* Vertical gap between strings of text */
-  --container-space-tileselect-header-xg-m: var(--global-space-macro-xs); /* gap between identifier and header content */
-  --container-space-tileselect-header-yg-s: var(--global-space-micro-l); /* Vertical gap between header content wrapper items */
-  --container-space-tileselect-footer-y-m: var(--global-space-micro-l); /* Top bottom padding in footer. */
-  --container-space-tileselect-footer-y-l: var(--global-space-macro-xs); /* Top bottom margins on carousel dots */
-  --container-space-tileselect-footer-xg-s: var(--global-space-micro-l); /* Gap between carousel dots */
-  --container-space-nudge-x-m: var(--global-space-macro-m); /* Left and right padding on medium nudge */
-  --container-space-nudge-x-l: var(--global-space-macro-l); /* left and right padding on large nudge  */
-  --container-space-nudge-y-m: var(--global-space-macro-m); /* Top and bottom padding on medium nudge */
-  --container-space-nudge-y-l: var(--global-space-macro-l); /* Top and bottom paddding on large nudge */
-  --container-space-nudge-yg-m: var(--global-space-micro-l); /* Gap between message elements */
-  --container-space-nudge-yg-l: var(--global-space-micro-xxl); /* Gap between message elements */
-  --container-space-nudge-header-xg-m: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-space-nudge-header-xg-l: var(--global-space-macro-xs); /* gap between header and ai logo */
-  --container-borderwidth-a-igradient: var(--global-borderwidth-xxl); /* AI gradient used on all containers such as dialog, chat bubbles etc */
-  --container-borderwidth-dialog: var(--global-borderwidth-xs); /* Dialog */
-  --container-borderwidth-divider: var(--global-borderwidth-xs); /* Divider */
-  --container-borderwidth-drawer: var(--global-borderwidth-xs); /* Drawer */
-  --container-borderwidth-footer: var(--global-borderwidth-xs); /* Footer (in Card, Dialog)  */
-  --container-borderwidth-header: var(--global-borderwidth-xs); /* Global header (next to logo)  */
-  --container-borderwidth-linkpreview: var(--global-borderwidth-xs); /* Link preview in Text editor and Note  */
-  --container-borderwidth-note: var(--global-borderwidth-xs); /* Note  */
-  --container-borderwidth-profileselector: var(--global-borderwidth-xs); /* Profile selector list container. */
-  --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
-  --container-borderwidth-sidebar: var(--global-borderwidth-xs); /* Sidebar */
-  --container-borderwidth-summarylist: var(--global-borderwidth-xs); /* Summary list */
-  --container-borderwidth-tile: var(--global-borderwidth-xs); /* Tile */
-  --container-borderwidth-accordion-standard: var(--global-borderwidth-xs); /* Accordion standard (top and bottom borders) */
-  --container-borderwidth-accordion-subtle: var(--global-borderwidth-s); /* Accordion subtle (content vertical line) */
-  --container-borderwidth-filepreview-container: var(--global-borderwidth-xs); /* File preview (internal borders)  */
-  --container-borderwidth-filepreview-enabled: var(--global-borderwidth-xs); /* File preview (file selector)  */
-  --container-borderwidth-filepreview-active: var(--global-borderwidth-s); /* File preview (file selector)  */
-  --container-borderwidth-tileselect-active: var(--global-borderwidth-xs); /* Subscription tile (active product) */
-  --container-borderwidth-tileselect-inactive: var(--global-borderwidth-xs); /* Subscription tile (inactive product) */
-  --container-borderwidth-tileselect-selected: var(--global-borderwidth-s); /* Tile select (selected tile) */
-  --container-borderwidth-tileselect-unavailable: var(--global-borderwidth-xs); /* Subscription tile (unavailable product) */
-  --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
-  --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
-  --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
-}

package/css/marketing/small/components/dataviz.css

@@ -1,48 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --dataviz-color-generic-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
-  --dataviz-color-generic-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
-  --dataviz-color-generic-blue-bg-default: var(--modes-color-colorcode-blue-muted);
-  --dataviz-color-generic-blue-border: var(--modes-color-colorcode-blue-deep);
-  --dataviz-color-generic-blue-pattern: var(--modes-color-colorcode-blue-deep);
-  --dataviz-color-generic-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
-  --dataviz-color-generic-teal-bg-default: var(--modes-color-colorcode-teal-muted);
-  --dataviz-color-generic-teal-border: var(--modes-color-colorcode-teal-deep);
-  --dataviz-color-generic-teal-pattern: var(--modes-color-colorcode-teal-deep);
-  --dataviz-color-generic-green-bg-alt: var(--modes-color-colorcode-green-deep);
-  --dataviz-color-generic-green-bg-default: var(--modes-color-colorcode-green-muted);
-  --dataviz-color-generic-green-border: var(--modes-color-colorcode-green-deep);
-  --dataviz-color-generic-green-pattern: var(--modes-color-colorcode-green-deep);
-  --dataviz-color-generic-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
-  --dataviz-color-generic-lime-bg-default: var(--modes-color-colorcode-lime-muted);
-  --dataviz-color-generic-lime-border: var(--modes-color-colorcode-lime-deep);
-  --dataviz-color-generic-lime-pattern: var(--modes-color-colorcode-lime-deep);
-  --dataviz-color-generic-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
-  --dataviz-color-generic-orange-bg-default: var(--modes-color-colorcode-orange-muted);
-  --dataviz-color-generic-orange-border: var(--modes-color-colorcode-orange-deep);
-  --dataviz-color-generic-orange-pattern: var(--modes-color-colorcode-orange-deep);
-  --dataviz-color-generic-red-bg-alt: var(--modes-color-colorcode-red-deep);
-  --dataviz-color-generic-red-bg-default: var(--modes-color-colorcode-red-muted);
-  --dataviz-color-generic-red-border: var(--modes-color-colorcode-red-deep);
-  --dataviz-color-generic-red-pattern: var(--modes-color-colorcode-red-deep);
-  --dataviz-color-generic-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
-  --dataviz-color-generic-pink-bg-default: var(--modes-color-colorcode-pink-muted);
-  --dataviz-color-generic-pink-border: var(--modes-color-colorcode-pink-deep);
-  --dataviz-color-generic-pink-pattern: var(--modes-color-colorcode-pink-deep);
-  --dataviz-color-generic-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
-  --dataviz-color-generic-purple-bg-default: var(--modes-color-colorcode-purple-muted);
-  --dataviz-color-generic-purple-border: var(--modes-color-colorcode-purple-deep);
-  --dataviz-color-generic-purple-pattern: var(--modes-color-colorcode-purple-deep);
-  --dataviz-color-generic-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
-  --dataviz-color-generic-gray-bg-default: var(--modes-color-colorcode-gray-muted);
-  --dataviz-color-generic-gray-border: var(--modes-color-colorcode-gray-deep);
-  --dataviz-color-generic-gray-pattern: var(--modes-color-colorcode-gray-deep);
-  --dataviz-color-generic-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
-  --dataviz-color-generic-slate-bg-default: var(--modes-color-colorcode-slate-muted);
-  --dataviz-color-generic-slate-border: var(--modes-color-colorcode-slate-deep);
-  --dataviz-color-generic-slate-pattern: var(--modes-color-colorcode-slate-deep);
-  --dataviz-color-generic-label-alt: var(--modes-color-generic-content-nought); /* Accessible on colorpicker bg-alt colors. */
-}

package/css/marketing/small/components/focus.css

@@ -1,18 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --focus-color-bg: var(--modes-color-interactive-focus-with-default-alt);
-  --focus-color-borderalt: var(--modes-color-interactive-focus-default);
-  --focus-color-border: var(--modes-color-interactive-focus-with-default);
-  --focus-color-label: var(--modes-color-interactive-focus-content);
-  --focus-color-inverse-bg: var(--modes-color-interactive-focus-inverse-with-default-alt);
-  --focus-color-inverse-borderalt: var(--modes-color-interactive-focus-inverse-default);
-  --focus-color-inverse-border: var(--modes-color-interactive-focus-inverse-with-default);
-  --focus-color-inverse-label: var(--modes-color-interactive-focus-inverse-content);
-  --focus-size-underline: var(--global-size-micro-xs); /* focus black underline on links and skiplink */
-  --focus-borderwidth-secondary: var(--global-borderwidth-s); /* Secondary focus (dropdown item) */
-  --focus-borderwidth-inner: var(--global-borderwidth-s); /* Focus border (inner) */
-  --focus-borderwidth-outer: var(--global-borderwidth-l); /* Focus border (outer) */
-}