@sage/design-tokens 14.9.1 → 15.1.0

package/css/marketing/small/components/form.css

@@ -1,306 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --form-space-datepicker-pr-s: 0; /* right padding on small date picker input */
-  --form-space-datepicker-pr-m: 0; /* right padding on medium date picker input */
-  --form-space-datepicker-pr-l: 0; /* right padding on large date picker input */
-  --form-color-switch-border-active: transparent;
-  --form-color-switch-border-activedisabled: transparent;
-  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
-  --form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container),   */
-  --form-radius-radio: var(--global-radius-circle); /* Radio button */
-  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
-  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
-  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
-  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
-  --form-color-validation-border-error: var(--modes-color-status-negative-default);
-  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
-  --form-color-validation-bar-warning: var(--modes-color-status-caution-default); /* warning bar to left of inputs */
-  --form-color-validation-label-error: var(--modes-color-status-negative-text);
-  --form-color-validation-label-success: var(--modes-color-status-positive-default);
-  --form-color-validation-label-warning: var(--modes-color-status-caution-text);
-  --form-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
-  --form-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --form-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --form-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
-  --form-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --form-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --form-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
-  --form-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --form-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --form-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
-  --form-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --form-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-active);
-  --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
-  --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-active);
-  --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
-  --form-color-typical-bg-enabled: var(--modes-color-interactive-data-entry-default);
-  --form-color-typical-border-hover: var(--modes-color-interactive-data-entry-with-hover); /* File input draggable border state */
-  --form-color-typical-icon-active: var(--modes-color-interactive-data-entry-with-active); /* used on tick in color picker and selected tick on dropdowns */
-  --form-color-typical-icon-hover: var(--modes-color-interactive-data-entry-with-hover);
-  --form-color-typical-text-hover: var(--modes-color-interactive-data-entry-with-hover); /* text hover state when dragging a file over file input */
-  --form-color-typical-text-read-only: var(--modes-color-generic-content-harsh);
-  --form-color-switch-bg-active: var(--modes-color-interactive-monochrome-active);
-  --form-color-switch-bg-enabled: var(--modes-color-interactive-data-entry-default); /* for switch */
-  --form-space-none: var(--global-space-none);
-  --form-space-calendar-x-m: var(--global-space-macro-m);
-  --form-space-calendar-y-m: var(--global-space-macro-m);
-  --form-space-calendar-yg-m: var(--global-space-micro-l); /* Space between date rows */
-  --form-space-chip-xg-m: var(--global-space-micro-l); /* gap between medium chip buttons */
-  --form-space-chip-xg-l: var(--global-space-micro-xxl); /* gap between large chip buttons */
-  --form-space-chip-yg-m: var(--global-space-micro-l); /* gap between medium chip buttons */
-  --form-space-chip-yg-l: var(--global-space-micro-xxl); /* gap between large chip buttons */
-  --form-space-checkradio-y-s: calc(var(--global-space-micro-m) / 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-checkradio-y-m: var(--global-space-micro-xs); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-checkradio-y-l: calc(var(--global-space-micro-xs) * 2); /* Space above single checkbox/radio OR label to vertically centre checkbox and label. */
-  --form-space-dropdown-button-x-s: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-button-x-m: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-button-x-l: var(--global-space-macro-s); /* DD only, left right padding on footer button. */
-  --form-space-dropdown-heading-pr-s: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pr-m: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pr-l: var(--global-space-micro-xxl); /* DD only, right padding. */
-  --form-space-dropdown-heading-pt-s: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pt-m: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pt-l: var(--global-space-micro-xxl); /* DD only, top padding. */
-  --form-space-dropdown-heading-pl-s: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-heading-pl-m: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-heading-pl-l: var(--global-space-macro-s); /* DD only, left padding. */
-  --form-space-dropdown-menu-x-s: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-menu-x-m: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-menu-x-l: var(--global-space-macro-s); /* left and right padding of menu parent container to make message content align with the option text */
-  --form-space-dropdown-option-xg-s: var(--global-space-micro-xs); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-xg-m: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-xg-l: var(--global-space-micro-s); /* DD only. Space between optional icon, prefix, and label. */
-  --form-space-dropdown-option-colorpicker-xg-s: var(--global-space-micro-s); /* space on right of swatch */
-  --form-space-dropdown-option-colorpicker-xg-m: var(--global-space-micro-l); /* space on right of swatch */
-  --form-space-dropdown-option-colorpicker-xg-l: var(--global-space-micro-xxl); /* space on right of swatch */
-  --form-space-dropdown-option-subtext-x-s: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-x-m: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-x-l: var(--global-space-macro-s); /* used for left indentation on descriptive hint text underneath main option text */
-  --form-space-dropdown-option-subtext-y-s: var(--global-space-micro-xs); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-option-subtext-y-m: var(--global-space-micro-s); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-option-subtext-y-l: var(--global-space-micro-s); /* top padding for the subtext text underneath standard option text */
-  --form-space-dropdown-pill-xg-s: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-pill-xg-m: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-pill-xg-l: var(--global-space-micro-s); /* space between pills inside pill wrapper */
-  --form-space-dropdown-trigger-subtle-s: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-dropdown-trigger-subtle-m: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-dropdown-trigger-subtle-l: var(--global-space-micro-s); /* Left and right padding on subtle dropdown triggers. */
-  --form-space-fileinput-status-xl-m: var(--global-space-macro-ml); /* Left padding in File input (no-thumbnail variant), status text. */
-  --form-space-fileinput-status-y-m: var(--global-space-micro-s); /* Vertical padding in status text. */
-  --form-space-fileinput-thumbnail-m: var(--global-space-micro-s); /* All padding in File input (thumbnail container). */
-  --form-space-fileinput-preview-x-m: var(--global-space-micro-xxl); /* Right left padding in File input (preview container). */
-  --form-space-fileinput-preview-y-m: var(--global-space-micro-l); /* Top padding in file input (preview container). */
-  --form-space-fileinput-dropzone-x-m: var(--global-space-macro-m); /* Right left padding in File input (preview container). */
-  --form-space-fileinput-dropzone-y-m: var(--global-space-macro-m); /* Top padding in file input (preview container). */
-  --form-space-fileinput-dropzone-yg-m: var(--global-space-micro-xxl); /* Vertical gap in file input (input container). */
-  --form-space-input-button-x-s: var(--global-space-macro-xxxs); /* left and right padding used on small buttons inside small inputs */
-  --form-space-input-button-x-m: var(--global-space-macro-xxs); /* left and right padding used on medium buttons inside medium inputs */
-  --form-space-input-button-x-l: var(--global-space-macro-xs); /* left and right padding used on large buttons inside large inputs */
-  --form-space-input-stack-s: var(--global-space-macro-xs); /* Vertical gap on custom date range between the 2 inputs. */
-  --form-space-input-stack-m: var(--global-space-macro-s); /* Vertical gap on custom date range between the 2 inputs. Horizontal gap between start and end date inputs in Date range. */
-  --form-space-input-stack-l: var(--global-space-macro-m); /* Vertical gap on custom date range between the 2 inputs. */
-  --form-space-input-x-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-input-x-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-input-x-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-input-xg-s: var(--global-space-macro-xs); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group. */
-  --form-space-input-xg-m: var(--global-space-macro-s); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group, and between elements in Pagination. */
-  --form-space-input-xg-l: var(--global-space-macro-m); /* Horizontal gap between checkboxes and radios within a group, and between date or time inputs within a group. */
-  --form-space-input-y-s: var(--global-space-micro-s); /* Top bottom padding on input. */
-  --form-space-input-y-m: var(--global-space-micro-l); /* Top bottom padding on input. */
-  --form-space-input-y-l: var(--global-space-micro-xl); /* Top bottom padding on input. */
-  --form-space-input-yg-s: var(--global-space-micro-l); /* Gap between rows of checkboxes or radios within a group. */
-  --form-space-input-yg-m: var(--global-space-micro-xxl); /* Gap between rows of checkboxes or radios within a group. Gap betwen input text and file preview in Text editor.  */
-  --form-space-input-yg-l: var(--global-space-macro-xs); /* Gap between rows of checkboxes or radios within a group. */
-  --form-space-integral-secondarylabel: var(--global-space-micro-s); /* Space between secondarylabel and input */
-  --form-space-integral-xg-s: var(--global-space-micro-m); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button) */
-  --form-space-integral-xg-m: var(--global-space-micro-l); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button, dropdown option icon and label), Switch and processing text. */
-  --form-space-integral-xg-l: var(--global-space-micro-xl); /* Space between integral elements (ie checkbox&label, inputtext&icon,inputtext&button) */
-  --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
-  --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
-  --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-yg-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
-  --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
-  --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
-  --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
-  --form-space-layout-stack-m: var(--global-space-macro-s); /* Spacing between horizontal and vertical M form components */
-  --form-space-layout-stack-l: var(--global-space-macro-m); /* Spacing between horizontal and vertical L form components */
-  --form-space-switch-xg-m: var(--global-space-micro-s); /* Space between elements within switch asset */
-  --form-space-switch-xg-l: var(--global-space-micro-m); /* Space between elements within switch asset */
-  --form-space-switch-handleside-m: var(--global-space-micro-s); /* Padding on handle side. */
-  --form-space-switch-handleside-l: var(--global-space-micro-m); /* Padding on handle side. */
-  --form-space-switch-labelside-m: var(--global-space-micro-l); /* Padding on label side. */
-  --form-space-switch-labelside-l: var(--global-space-micro-xxl); /* Padding on label side. */
-  --form-space-texteditor-y-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-texteditor-y-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-y-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-texteditor-yg-s: var(--global-space-micro-s); /* Top bottom padding on input. */
-  --form-space-texteditor-yg-m: var(--global-space-micro-l); /* Top bottom padding on input. */
-  --form-space-texteditor-yg-l: var(--global-space-micro-xl); /* Top bottom padding on input. */
-  --form-space-texteditor-x-s: var(--global-space-micro-l); /* Left right padding on input. */
-  --form-space-texteditor-x-m: var(--global-space-micro-xxl); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-x-l: var(--global-space-macro-xs); /* Left right padding on input. */
-  --form-space-texteditor-processing-y-s: var(--global-space-macro-m); /* Left right padding on input. */
-  --form-space-texteditor-processing-y-m: var(--global-space-macro-l); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-processing-y-l: var(--global-space-macro-xl); /* Left right padding on input. */
-  --form-space-texteditor-processing-yg-s: var(--global-space-micro-xxl); /* padding between cancel and loader */
-  --form-space-texteditor-processing-yg-m: var(--global-space-macro-xs); /* padding between cancel and loader */
-  --form-space-texteditor-processing-yg-l: var(--global-space-macro-m); /* padding between cancel and loader */
-  --form-space-texteditor-processing-x-s: var(--global-space-macro-m); /* Left right padding on input. */
-  --form-space-texteditor-processing-x-m: var(--global-space-macro-l); /* Left right padding on input. Right padding on dropdown option. */
-  --form-space-texteditor-processing-x-l: var(--global-space-macro-xl); /* Left right padding on input. */
-  --form-space-password-requirement-xg-s: var(--global-space-micro-m);
-  --form-space-password-requirement-xg-m: var(--global-space-micro-l);
-  --form-space-password-requirement-xg-l: var(--global-space-micro-xl);
-  --form-space-password-requirement-x-s: var(--global-space-micro-xs);
-  --form-space-password-requirement-x-m: var(--global-space-micro-s);
-  --form-space-password-requirement-x-l: var(--global-space-micro-s);
-  --form-space-password-requirement-y-s: var(--global-space-micro-xs);
-  --form-space-password-requirement-y-m: var(--global-space-micro-s);
-  --form-space-password-requirement-y-l: var(--global-space-micro-s);
-  --form-size-none: var(--global-size-none);
-  --form-size-calendar-date: var(--global-size-macro-m); /* date buttons */
-  --form-size-calendar-day: var(--global-size-macro-m); /* day of the week HEIGHT */
-  --form-size-calendar-month: calc(var(--global-size-macro-xxxxl) + var(--global-size-macro-m)); /* Min width of month dropdown */
-  --form-size-calendar-year: var(--global-size-macro-xxxl); /* Min width of month dropdown */
-  --form-size-calendar-today-width: var(--global-size-macro-xxs); /* today indicator */
-  --form-size-calendar-today-height: var(--global-size-micro-xs); /* today indicator */
-  --form-size-checkbox-s: var(--global-size-macro-xxs); /* S checkboxes */
-  --form-size-checkbox-m: var(--global-size-macro-xs); /* M checkboxes */
-  --form-size-checkbox-l: var(--global-size-macro-s); /* L checkboxes */
-  --form-size-dropdown-colorpicker-s: var(--global-size-macro-xs); /* Swatch size. */
-  --form-size-dropdown-colorpicker-m: var(--global-size-macro-xs); /* Swatch size. */
-  --form-size-dropdown-colorpicker-l: var(--global-size-macro-xs)+4; /* Swatch size. */
-  --form-size-dropdown-subtle-s: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-dropdown-subtle-m: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-dropdown-subtle-l: calc(var(--global-size-macro-m) * 2); /* Min width of subtle dropdown */
-  --form-size-fileinput-fileicon: var(--global-size-macro-s); /* File input thumbnail icon */
-  --form-size-fileinput-preview: var(--global-size-macro-xxxl); /* File input container for thumbnail, progress, or icon. */
-  --form-size-icon-s: var(--global-size-icon-s); /* Currently for checkbox S only. */
-  --form-size-icon-m: var(--global-size-icon-m); /* Used for all form icons except for checkbox S and L */
-  --form-size-icon-l: var(--global-size-icon-l); /* Currently for checkbox L only. */
-  --form-size-input-s: var(--global-size-macro-s); /* min-height on S inputs */
-  --form-size-input-m: var(--global-size-macro-m); /* Min height on M Inputs and M Dropdowns. Fixed height on Calendar days */
-  --form-size-input-l: var(--global-size-macro-l); /* L Inputs, Color picker square */
-  --form-size-input-timeinput-s: calc(var(--global-size-macro-xs) + var(--global-size-micro-l)); /* Min width for input field. */
-  --form-size-input-timeinput-m: calc(var(--global-size-macro-m) + var(--global-size-micro-xs)); /* Min width for input field. */
-  --form-size-input-timeinput-l: var(--global-size-macro-xl); /* Min width for input field. */
-  --form-size-radio-circle-s: var(--global-size-macro-xxs); /* S radios */
-  --form-size-radio-circle-m: var(--global-size-macro-xs); /* M radios */
-  --form-size-radio-circle-l: var(--global-size-macro-s); /* L radios */
-  --form-size-radio-dot-s: var(--global-size-micro-m); /* S radio dot */
-  --form-size-radio-dot-m: var(--global-size-micro-xl); /* M radio dot */
-  --form-size-radio-dot-l: var(--global-size-micro-xxl); /* L radio dot */
-  --form-size-switch-container-height-m: var(--global-size-macro-xs); /* Switch container height for medium */
-  --form-size-switch-container-height-l: var(--global-size-macro-m); /* Switch container height for large */
-  --form-size-switch-container-width-m: var(--global-size-macro-m); /* Switch container width for medium */
-  --form-size-switch-container-width-l: var(--global-size-macro-xxxl); /* Switch container width for large */
-  --form-size-switch-handle-m: var(--global-size-macro-xxs); /* S switch knob */
-  --form-size-switch-handle-l: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L switch knob */
-  --form-size-switch-handle-icon-m: calc(var(--global-size-icon-s) - var(--global-size-micro-xs)); /* S switch knob */
-  --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
-  --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
-  --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
-  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
-  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
-  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
-  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
-  --form-color-calendar-bg-duration: var(--modes-color-interactive-data-entry-hover-alt);
-  --form-color-calendar-text-active: var(--modes-color-interactive-monochrome-with-active);
-  --form-color-calendar-text-alt: var(--modes-color-interactive-data-entry-content-alt); /* Days of the week subheaders */
-  --form-color-calendar-text-disabled: var(--modes-color-interactive-inactive-content);
-  --form-color-calendar-text-duration: var(--modes-color-interactive-data-entry-content);
-  --form-color-calendar-text-enabled: var(--modes-color-interactive-data-entry-content);
-  --form-color-calendar-text-alt-enabled: var(--modes-color-interactive-data-entry-content-alt);
-  --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER  */
-  --form-color-dropdown-label-active: var(--modes-color-interactive-monochrome-with-active);
-  --form-color-dropdown-label-alt: var(--modes-color-interactive-monochrome-default);
-  --form-color-dropdown-label-disabled: var(--modes-color-interactive-inactive-content);
-  --form-color-dropdown-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
-  --form-color-labelset-label-default: var(--modes-color-interactive-data-entry-content);
-  --form-color-labelset-label-alt: var(--modes-color-interactive-data-entry-content-alt); /* used for '(optional)' text and hint text. */
-  --form-color-labelset-label-disabled: var(--modes-color-interactive-inactive-content);
-  --form-color-labelset-label-read-only: var(--modes-color-interactive-data-entry-content);
-  --form-color-typical-bg-alt: var(--modes-color-interactive-data-entry-default-alt); /* progress bar bg, text editor preview and text editor footer */
-  --form-color-typical-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
-  --form-color-typical-bg-hover: var(--modes-color-interactive-data-entry-hover-alt);
-  --form-color-typical-bg-read-only: var(--modes-color-interactive-inactive-default-alt);
-  --form-color-typical-icon-default: var(--modes-color-interactive-data-entry-content);
-  --form-color-typical-icon-disabled: var(--modes-color-interactive-inactive-icon);
-  --form-color-typical-icon-enabled: var(--modes-color-interactive-data-entry-content);
-  --form-color-typical-icon-read-only: var(--modes-color-interactive-inactive-icon-alt);
-  --form-color-typical-icon-alt-active: var(--modes-color-interactive-data-entry-with-active-alt); /* used on tick in color picker */
-  --form-color-typical-text-active: var(--modes-color-interactive-data-entry-content);
-  --form-color-typical-text-alt: var(--modes-color-interactive-data-entry-content-alt);
-  --form-color-typical-text-default: var(--modes-color-interactive-data-entry-content);
-  --form-color-typical-text-disabled: var(--modes-color-interactive-inactive-content);
-  --form-color-typical-text-enabled: var(--modes-color-interactive-data-entry-content); /* Dropdown text (subtle dropdown). */
-  --form-color-switch-bg-disabled: var(--modes-color-interactive-inactive-default-alt); /* for switch */
-  --form-color-switch-border-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
-  --form-color-switch-fg-active: var(--modes-color-interactive-monochrome-with-active);
-  --form-color-switch-fg-activedisabled: var(--modes-color-interactive-inactive-content-alt);
-  --form-color-switch-fg-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
-  --form-color-switch-label-active: var(--modes-color-interactive-data-entry-content);
-  --form-color-switch-label-enabled: var(--modes-color-interactive-data-entry-content-alt);
-  --form-color-switch-icon-enabled: var(--modes-color-interactive-data-entry-content-alt);
-  --form-radius-checkbox: var(--global-radius-interactive-s); /* S and M checkbox */
-  --form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
-  --form-radius-fileupload: var(--global-radius-container-m); /* File input (file uploads) */
-  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
-  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
-  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
-  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
-  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
-  --form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
-  --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
-  --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
-  --form-borderwidth-dragover: var(--global-borderwidth-s); /* File upload (drag over state) */
-  --form-borderwidth-ratingstar: var(--global-borderwidth-s); /* empty rating star border width */
-  --form-borderwidth-error: var(--global-borderwidth-s); /* Error border */
-  --form-borderwidth-fileupload: var(--global-borderwidth-xs); /* File input (file uploads) */
-  --form-borderwidth-input: var(--global-borderwidth-xs); /* Input border */
-  --form-borderwidth-searchunderline: var(--global-borderwidth-s); /* Search (without button variant) */
-  --form-borderwidth-switch: var(--global-borderwidth-s); /* Switch */
-  --form-borderwidth-tile: var(--global-borderwidth-xs); /* Tile border */
-  --form-borderwidth-calendar-duration: var(--global-borderwidth-s); /* Calendar (duration date top and bottom borders) */
-  --form-borderwidth-divider-item: var(--global-borderwidth-xs); /* Dropdown menu (item divider) */
-  --form-boxshadow-dropdown: var(--popover-boxshadow-container); /* REF POPOVER. popover container */
-  --form-space-dropdown-menu-y-s: var(--popover-space-menu-y-s); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-menu-y-m: var(--popover-space-menu-y-m); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-menu-y-l: var(--popover-space-menu-y-l); /* REF POPOVER. Top and bottom padding on container */
-  --form-space-dropdown-option-x-s: var(--popover-space-option-x-s); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-x-m: var(--popover-space-option-x-m); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-x-l: var(--popover-space-option-x-l); /* REF POPOVER. Right padding on option. */
-  --form-space-dropdown-option-y-s: var(--popover-space-option-y-s); /* REF POPOVER. Vertical padding on option. */
-  --form-space-dropdown-option-y-m: var(--popover-space-option-y-m); /* REF POPOVER. Vertical padding on option. */
-  --form-space-dropdown-option-y-l: var(--popover-space-option-y-l); /* REF POPOVER. Vertical padding on option. */
-  --form-size-dropdown-colorpicker-input-minwidth: var(--container-size-responsive-m); /* Min width of dropdown and colorpicker inputs */
-  --form-size-dropdown-item-s: var(--popover-size-item-s); /* REF POPOVER. Menu item min height. */
-  --form-size-dropdown-item-m: var(--popover-size-item-m); /* REF POPOVER. Menu item min height. */
-  --form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
-  --form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
-  --form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
-  --form-color-typical-border-alt: var(--modes-color-interactive-inactive-default);
-  --form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-with-default);
-  --form-color-typical-border-disabled: var(--modes-color-interactive-inactive-default);
-  --form-color-typical-border-read-only: var(--modes-color-interactive-inactive-default);
-  --form-color-switch-bg-activedisabled: var(--modes-color-interactive-inactive-default);
-  --form-color-switch-border-disabled: var(--modes-color-interactive-inactive-default);
-  --form-color-switch-fg-disabled: var(--modes-color-interactive-inactive-default);
-  --form-color-switch-label-activedisabled: var(--modes-color-interactive-inactive-default);
-  --form-color-switch-label-disabled: var(--modes-color-interactive-inactive-default);
-  --form-radius-dropdown: var(--popover-radius-container); /* REF POPOVER. Popover container. */
-}

package/css/marketing/small/components/link.css

@@ -1,39 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --link-typography-responsive-default-s: var(--global-typography-responsive-component-underlined-moderate-s); /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
-  --link-typography-responsive-default-m: var(--global-typography-responsive-component-underlined-moderate-m); /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
-  --link-typography-responsive-default-l: var(--global-typography-responsive-component-underlined-moderate-l); /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */
-  --link-typography-responsive-heading-s: var(--global-typography-responsive-component-underlined-firm-s);
-  --link-typography-responsive-heading-m: var(--global-typography-responsive-component-underlined-firm-m);
-  --link-typography-responsive-heading-l: var(--global-typography-responsive-component-underlined-firm-l);
-  --link-typography-adaptive-default-s: var(--global-typography-adaptive-component-underlined-moderate-s);
-  --link-typography-adaptive-default-m: var(--global-typography-adaptive-component-underlined-moderate-m);
-  --link-typography-adaptive-default-l: var(--global-typography-adaptive-component-underlined-moderate-l);
-  --link-typography-adaptive-heading-s: var(--global-typography-adaptive-component-underlined-firm-s);
-  --link-typography-adaptive-heading-m: var(--global-typography-adaptive-component-underlined-firm-m);
-  --link-typography-adaptive-heading-l: var(--global-typography-adaptive-component-underlined-firm-l);
-  --link-color-destructive-label-default: var(--modes-color-interactive-danger-default-alt); /* . */
-  --link-color-destructive-inverse-label-default: var(--modes-color-interactive-danger-inverse-default-alt); /* . */
-  --link-color-subtle-label-hover: var(--modes-color-interactive-monochrome-active);
-  --link-color-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-active);
-  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
-  --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
-  --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
-  --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt2);
-  --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt2);
-  --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
-  --link-color-subtle-inverse-label-default: var(--modes-color-interactive-monochrome-inverse-default);
-  --link-size-skiplink-m: var(--global-size-macro-m);
-  --link-size-icon-m: var(--global-size-icon-m);
-  --link-radius-link: var(--global-radius-interactive-xs); /* Link (focus bg and bottom corners of focus underline) */
-  --link-radius-skiplink: var(--global-radius-interactive-m); /* Skiplink (right corners of focus bg and border) */
-  --link-space-integral-xg-m: var(--global-space-micro-l); /* Space between icon and link text. */
-  --link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
-  --link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
-  --link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
-  --link-color-typical-label-hover: var(--modes-color-interactive-primary-hover-alt2);
-  --link-color-typical-inverse-label-hover: var(--modes-color-interactive-primary-inverse-hover-alt2);
-}

package/css/marketing/small/components/logo.css

@@ -1,14 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --logo-size-ai-m: 14px; /* AI star */
-  --logo-color-sage-bg-default: var(--modes-color-brand-default); /* sage logo */
-  --logo-color-sage-bg-alt: var(--modes-color-brand-default-alt);
-  --logo-color-copilot-no-bg-fg-default: var(--modes-color-brand-copilot-no-bg-monochrome);
-  --logo-color-ai-identifier-bg-star: var(--modes-color-brand-copilot-ai-identifier-default); /* star bg color */
-  --logo-color-ai-identifier-bg-dot: var(--modes-color-brand-copilot-ai-identifier-with-default);
-  --logo-color-ai-identifier-outline: var(--modes-color-brand-copilot-ai-identifier-default); /* star outline variant */
-  --logo-space-ai-xg-m: var(--global-space-micro-l); /* Space between star icon and text */
-}

package/css/marketing/small/components/nav.css

@@ -1,159 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --nav-size-leftnav-parent-container-fixed-width: 140; /* fixed width of parent container */
-  --nav-size-leftnav-child-container-fixed-width: 250; /* fixed width of parent container */
-  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
-  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
-  --nav-color-item-bg-enabled: var(--modes-color-none);
-  --nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of horizontal nav variant that launches the left nav */
-  --nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
-  --nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
-  --nav-color-leftnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
-  --nav-color-modal-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of container holding stack of items in modal nav */
-  --nav-color-modal-item-bg-active: var(--modes-color-interactive-nav-active);
-  --nav-color-modal-item-bg-enabled: var(--modes-color-none);
-  --nav-color-modal-item-bg-hover: var(--modes-color-interactive-nav-hover);
-  --nav-color-topnav-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of of horizontal nav variant that launches the left nav */
-  --nav-color-topnav-item-bg-active: var(--modes-color-interactive-nav-active);
-  --nav-color-topnav-item-bg-enabled: var(--modes-color-none);
-  --nav-color-topnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
-  --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-xs);
-  --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
-  --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
-  --nav-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-xs);
-  --nav-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
-  --nav-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
-  --nav-typography-responsive-label-s: var(--global-typography-responsive-component-firm-xs);
-  --nav-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
-  --nav-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --nav-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-xs);
-  --nav-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
-  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
-  --nav-color-item-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt);
-  --nav-color-item-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
-  --nav-color-item-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
-  --nav-color-item-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
-  --nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
-  --nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
-  --nav-color-leftnav-container-bg-default-alt: var(--modes-color-generic-backdrop-faint); /* bg of the parent container */
-  --nav-color-leftnav-item-label-active: var(--modes-color-interactive-nav-with-active);
-  --nav-color-leftnav-item-label-hover: var(--modes-color-interactive-nav-with-hover);
-  --nav-color-modal-container-bg-default-alt: var(--modes-color-generic-backdrop-faint); /* bg of the sticky header within modal */
-  --nav-color-modal-item-label-active: var(--modes-color-interactive-nav-with-active);
-  --nav-color-modal-item-label-hover: var(--modes-color-interactive-nav-with-hover);
-  --nav-color-modal-headeritem-label-default: var(--modes-color-generic-content-firm); /* color for subheaders passed into modal nav */
-  --nav-color-topnav-item-label-active: var(--modes-color-interactive-nav-with-active);
-  --nav-color-topnav-item-label-hover: var(--modes-color-interactive-nav-with-hover);
-  --nav-boxshadow-menu: var(--global-boxshadow-cleanedge-near); /* Menu */
-  --nav-boxshadow-leftnav-childcontainer: var(--global-boxshadow-container-near); /* box shadow on progressively shown child container */
-  --nav-color-item-label-active: var(--modes-color-interactive-monochrome-with-active);
-  --nav-color-item-label-enabled: var(--modes-color-interactive-monochrome-default);
-  --nav-color-item-label-alt: var(--modes-color-interactive-monochrome-default-alt);
-  --nav-color-menu-border-default: var(--modes-color-generic-fg-delicate); /* level 1 border */
-  --nav-color-leftnav-container-border-default: var(--modes-color-generic-fg-soft); /* dividing lines within parent container */
-  --nav-color-leftnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
-  --nav-color-modal-container-border-default: var(--modes-color-generic-fg-soft); /* dividing lines within parent container */
-  --nav-color-modal-item-label-enabled: var(--modes-color-interactive-nav-with-default);
-  --nav-color-topnav-container-border-default: var(--modes-color-generic-fg-soft); /* dividing lines within parent container */
-  --nav-color-topnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
-  --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
-  --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
-  --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
-  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
-  --nav-borderwidth-divider-item: var(--global-borderwidth-xs); /* Menu (option divider) */
-  --nav-borderwidth-divider-menu: var(--global-borderwidth-xs); /* level 1 border */
-  --nav-borderwidth-divider-segment: var(--global-borderwidth-l); /* Menu (segment divider) */
-  --nav-borderwidth-leftnav-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
-  --nav-borderwidth-modal-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
-  --nav-borderwidth-topnav-divider: var(--global-borderwidth-xs); /* bottom border on secondary horizontal nav */
-  --nav-size-menu-content-y-m: var(--global-size-macro-s); /* Min height of menu content */
-  --nav-size-menu-content-icon-m: var(--global-size-icon-m); /* Icon size */
-  --nav-size-menu-content-icon-l: var(--global-size-icon-l); /* Icon size */
-  --nav-size-menu-option-x-m: var(--global-size-flex-m); /* Min width of options */
-  --nav-size-menu-option-y-m: var(--global-size-macro-m); /* Min height of menu option */
-  --nav-size-navbar-content-y-m: var(--global-size-macro-s); /* Min height of nav content */
-  --nav-size-navbar-content-icon-m: var(--global-size-icon-m); /* Chevron and caret icons */
-  --nav-size-navbar-content-icon-l: var(--global-size-icon-l); /* Icon size */
-  --nav-size-navbar-item-x-m: var(--global-size-flex-m); /* Max width of nav item */
-  --nav-size-navbar-item-y-m: var(--global-size-macro-m); /* Min height of nav item */
-  --nav-size-leftnav-parent-minheight: var(--global-size-macro-l); /* Min height of parent items */
-  --nav-size-leftnav-child-minheight: var(--global-size-macro-m); /* Min height of children items */
-  --nav-size-leftnav-grandchild-minheight: var(--global-size-macro-s); /* Min height of grandchildren */
-  --nav-size-modal-parentitem-minheight: var(--global-size-macro-m); /* Min height of parent items */
-  --nav-size-modal-childitem-minheight: var(--global-size-macro-s); /* Min height of children items */
-  --nav-size-modal-headeritem-identifier-m: var(--global-size-icon-l); /* Icon size */
-  --nav-size-modal-headeritem-icon-m: var(--global-size-icon-m); /* Icon size */
-  --nav-size-topnav-parent-minheight: var(--global-size-macro-s); /* Min height of parent items across items in secondary top nav  */
-  --nav-size-topnav-container-minheight: var(--global-size-macro-m); /* Min height of secondary nav containers */
-  --nav-space-menu-container-x-m: var(--global-space-micro-s); /* Horizontal space on menu complex and menu items wrapper in sidebar menu */
-  --nav-space-menu-container-y-m: var(--global-space-micro-l); /* Vertical space on mobile menu items */
-  --nav-space-menu-content-x-m: var(--global-space-micro-l); /* Horizontal space on content within menu item */
-  --nav-space-menu-content-x-l: var(--global-space-macro-xs); /* Left padding for indented content in options */
-  --nav-space-menu-content-xg-m: var(--global-space-micro-l); /* Space between content elements within menu item */
-  --nav-space-menu-content-y-m: var(--global-space-micro-s); /* Vertical space on content within menu item */
-  --nav-space-menu-item-x-s: var(--global-space-micro-s); /* Horizontal space on menu option complex, small screen option */
-  --nav-space-menu-item-x-m: var(--global-space-micro-l); /* Horizontal space on nav menu item */
-  --nav-space-menu-item-y-m: var(--global-space-micro-s); /* Vertical space on nav menu item */
-  --nav-space-menu-item-yg-m: var(--global-space-micro-s); /* Space between menu item and submenu */
-  --nav-space-navbar-x-m: var(--global-space-macro-m);
-  --nav-space-navbar-y-m: var(--global-space-micro-xs); /* Vertical padding on nav bar */
-  --nav-space-navbar-content-x-m: var(--global-space-micro-l); /* Horizontal space in content within nav item */
-  --nav-space-navbar-content-xg-m: var(--global-space-micro-l); /* Gap between content elements within nav item */
-  --nav-space-navbar-content-y-m: var(--global-space-micro-s); /* Vertical space in content within nav item */
-  --nav-space-navbar-item-x-m: var(--global-space-micro-l); /* Horizontal space in nav item */
-  --nav-space-navbar-item-y-m: var(--global-space-micro-s); /* Vertical space in nav item */
-  --nav-space-navbar-logo-x-m: var(--global-space-macro-xs); /* Horizontal space around logo */
-  --nav-space-navbar-logo-xg-m: var(--global-space-macro-xs); /* Gap between logo and divider */
-  --nav-space-navbar-logo-y-m: var(--global-space-micro-s); /* Top padding on logo */
-  --nav-space-leftnav-container-x-m: var(--global-space-macro-xxxs); /* horizontal padding on sticky quick actions header */
-  --nav-space-leftnav-container-y-s: var(--global-space-macro-xxs); /* sticky header top and bottom padding */
-  --nav-space-leftnav-container-y-m: var(--global-space-macro-xs); /* vertical padding inside parent and child containers */
-  --nav-space-leftnav-container-yg-s: var(--global-space-macro-xxxs); /* vertical gap betweenparent items */
-  --nav-space-leftnav-container-yg-m: var(--global-space-macro-xs); /* vertical gap between child and grandchild items */
-  --nav-space-leftnav-container-outer-y-m: calc(var(--global-space-macro-ml) * 2); /* margin outside of item containers to make items show underneath sticky headers */
-  --nav-space-leftnav-parentitem-vertical-x-m: var(--global-space-micro-s); /* horizontal padding on stacked parent items */
-  --nav-space-leftnav-parentitem-vertical-y-m: var(--global-space-micro-s); /* vertical padding on stacked parent items */
-  --nav-space-leftnav-parentitem-vertical-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-xg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
-  --nav-space-leftnav-parentitem-horizontal-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
-  --nav-space-leftnav-childitem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical gap inside child items */
-  --nav-space-leftnav-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
-  --nav-space-leftnav-childitem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
-  --nav-space-leftnav-childitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
-  --nav-space-leftnav-grandchilditem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
-  --nav-space-leftnav-grandchilditem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
-  --nav-space-leftnav-grandchilditem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
-  --nav-space-leftnav-grandchilditem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical gap inside grandchild items */
-  --nav-space-modal-container-x-m: var(--global-space-macro-xxxs); /* left and right padding on modal small screen container across leftnav and horizontal */
-  --nav-space-modal-container-y-m: var(--global-space-macro-xs); /* top and bottom padding on modal small screen container across leftnav and horizontal */
-  --nav-space-modal-container-yg-m: calc(var(--global-space-macro-xxxs) - var(--global-space-micro-xs)); /* vertical gap between modal nav items */
-  --nav-space-modal-container-outer-y-m: calc(var(--global-space-macro-ml) * 2); /* margin outside of item containers to make items show underneath sticky headers */
-  --nav-space-modal-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-modal-parentitem-xg-m: var(--global-space-macro-xxxs); /* horizontal padding between parent label and chevron */
-  --nav-space-modal-parentitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
-  --nav-space-modal-parentitem-yg-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding between parent label and pill */
-  --nav-space-modal-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-modal-childitem-xg-m: calc(var(--global-space-macro-xxxs) / 2); /* horizontal padding between child label and pill */
-  --nav-space-modal-childitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked child items */
-  --nav-space-modal-headeritem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on header item */
-  --nav-space-modal-headeritem-xg-m: var(--global-space-macro-xxxs); /* horizontal gap between header label and idebntifiers or icons */
-  --nav-space-modal-headeritem-y-m: var(--global-space-macro-xxxs); /* bottom padding on header items */
-  --nav-space-modal-headeritem-y-l: var(--global-space-macro-xs); /* top padding on header items */
-  --nav-space-topnav-container-x-s: var(--global-space-macro-xxxs); /* horizontal padding on secondary horizontal nav on small screens */
-  --nav-space-topnav-container-x-m: var(--global-space-macro-l); /* horizontal padding on secondary horizontal nav on large screens */
-  --nav-space-topnav-container-xg-m: calc(var(--global-space-macro-xxxs) / 2); /* horizontal gap on secondary horizontal nav on large screens */
-  --nav-space-topnav-container-y-s: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on secondary horizontal nav on small screens */
-  --nav-space-topnav-container-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on secondary horizontal nav on large screens */
-  --nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
-  --nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
-  --nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
-}

package/css/marketing/small/components/page.css

@@ -1,61 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-:root {
-  --page-color-bg-default: var(--modes-color-generic-backdrop-nought);
-  --page-typography-responsive-h1: var(--global-typography-responsive-heading-l);
-  --page-typography-responsive-h2: var(--global-typography-responsive-heading-m);
-  --page-typography-responsive-h3: var(--global-typography-responsive-heading-s);
-  --page-typography-responsive-h4: var(--global-typography-responsive-subheading-l);
-  --page-typography-responsive-h5: var(--global-typography-responsive-subheading-m);
-  --page-typography-responsive-section-heading-s: var(--global-typography-responsive-section-heading-s);
-  --page-typography-responsive-section-heading-m: var(--global-typography-responsive-section-heading-m);
-  --page-typography-responsive-p-regular-typical: var(--global-typography-responsive-body-regular-s);
-  --page-typography-responsive-p-regular-large: var(--global-typography-responsive-body-regular-l);
-  --page-typography-responsive-p-medium-typical: var(--global-typography-responsive-body-medium-s);
-  --page-typography-responsive-p-medium-large: var(--global-typography-responsive-body-medium-l);
-  --page-typography-adaptive-h1: var(--global-typography-adaptive-heading-l);
-  --page-typography-adaptive-h2: var(--global-typography-adaptive-heading-m);
-  --page-typography-adaptive-h3: var(--global-typography-adaptive-heading-s);
-  --page-typography-adaptive-h4: var(--global-typography-adaptive-subheading-l);
-  --page-typography-adaptive-h5: var(--global-typography-adaptive-subheading-m);
-  --page-typography-adaptive-section-heading-s: var(--global-typography-adaptive-section-heading-s);
-  --page-typography-adaptive-section-heading-m: var(--global-typography-adaptive-section-heading-m);
-  --page-typography-adaptive-p-regular-typical: var(--global-typography-adaptive-body-regular-s);
-  --page-typography-adaptive-p-regular-large: var(--global-typography-adaptive-body-regular-l);
-  --page-typography-adaptive-p-medium-typical: var(--global-typography-adaptive-body-medium-s);
-  --page-typography-adaptive-p-medium-large: var(--global-typography-adaptive-body-medium-l);
-  --page-color-bg-alt: var(--modes-color-generic-backdrop-faint);
-  --page-color-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
-  --page-color-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
-  --page-space-x-l: var(--global-space-macro-xl);
-  --page-space-x-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-x-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-x-xs: var(--global-space-macro-xs);
-  --page-space-x-s: var(--global-space-macro-m);
-  --page-space-x-m: var(--global-space-macro-l);
-  --page-space-x-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-y-l: var(--global-space-macro-xl);
-  --page-space-y-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-y-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-y-xs: var(--global-space-macro-xs);
-  --page-space-y-s: var(--global-space-macro-m);
-  --page-space-y-m: var(--global-space-macro-l);
-  --page-space-y-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-none: var(--global-space-none);
-  --page-space-xg-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-xg-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-xg-xs: var(--global-space-macro-xs);
-  --page-space-xg-s: var(--global-space-macro-m);
-  --page-space-xg-m: var(--global-space-macro-l);
-  --page-space-xg-l: var(--global-space-macro-xl);
-  --page-space-xg-xl: calc(var(--global-space-macro-xl) * 2);
-  --page-space-yg-xxxs: calc(var(--global-space-macro-xs) / 4);
-  --page-space-yg-xxs: calc(var(--global-space-macro-xs) / 2);
-  --page-space-yg-xs: var(--global-space-macro-xs);
-  --page-space-yg-s: var(--global-space-macro-m);
-  --page-space-yg-m: var(--global-space-macro-l);
-  --page-space-yg-l: var(--global-space-macro-xl);
-  --page-space-yg-xl: calc(var(--global-space-macro-xl) * 2);
-}