@sage/design-tokens 14.9.1 → 15.1.0

package/scss/marketing/small/components/popover.scss

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

package/scss/marketing/small/components/profile.scss

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

package/scss/marketing/small/components/progress.scss

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

package/scss/marketing/small/components/status.scss

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

package/scss/marketing/small/components/tab.scss

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