@sage/design-tokens 14.9.1 → 15.0.0

package/scss/marketing/large/components/button.scss

@@ -1,330 +0,0 @@
-/**
- * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
- */
-
-
-// Do not edit directly, this file was auto-generated.
-
-$button-space-none: 0; // top and bottom padding on small buttons
-$button-space-bar-iconbutton-x-inner-l: 14px; // Inner sides of all buttons. 
-$button-space-bar-iconbutton-x-outer-m: 14px; // Outer buttons, outer sides. 
-$button-dimension-video: 40px; // background blur on video
-$button-color-ai-bg-active: $modes-color-interactive-ai-active;
-$button-color-ai-bg-hover: $modes-color-interactive-ai-hover;
-$button-radius-none: $global-radius-none;
-$button-radius-fab: $global-radius-circle; // FAB Button radius
-$button-borderwidth-none: $global-borderwidth-none; // Override on tertiary buttons within Button-toggle. 
-$button-borderwidth-primary: $global-borderwidth-none; // primary button border 
-$button-borderwidth-tertiarymarketing: $global-borderwidth-none; // tertiary button border used for a marketing override
-$button-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
-$button-color-ai-border-active: $modes-color-interactive-ai-default;
-$button-color-ai-border-enabled: $modes-color-interactive-ai-default;
-$button-color-ai-border-hover: $modes-color-interactive-ai-default;
-$button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
-$button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
-$button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
-$button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
-$button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
-$button-color-typical-primary-bg-default: $modes-color-interactive-primary-with-default; // For spacer in Split button
-$button-color-typical-primary-label-active: $modes-color-interactive-primary-with-active;
-$button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
-$button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
-$button-color-typical-primary-inverse-bg-default: $modes-color-interactive-primary-inverse-with-default; // For spacer in Split button
-$button-color-typical-primary-inverse-bg-disabled: $modes-color-interactive-inactive-inverse-default;
-$button-color-typical-primary-inverse-label-active: $modes-color-interactive-primary-inverse-with-active;
-$button-color-typical-primary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content-alt;
-$button-color-typical-primary-inverse-label-enabled: $modes-color-interactive-primary-inverse-with-default;
-$button-color-typical-primary-inverse-label-hover: $modes-color-interactive-primary-inverse-with-default;
-$button-color-typical-secondary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
-$button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
-$button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
-$button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
-$button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
-$button-typography-adaptive-secondary-xs: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-secondary-s: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-secondary-m: $global-typography-adaptive-component-firm-m;
-$button-typography-adaptive-secondary-l: $global-typography-adaptive-component-firm-l;
-$button-typography-adaptive-subtle-xs: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-subtle-s: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-subtle-m: $global-typography-adaptive-component-firm-m;
-$button-typography-adaptive-subtle-l: $global-typography-adaptive-component-firm-l;
-$button-typography-adaptive-tertiary-xs: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-tertiary-s: $global-typography-adaptive-component-firm-s;
-$button-typography-adaptive-tertiary-m: $global-typography-adaptive-component-firm-m;
-$button-typography-adaptive-tertiary-l: $global-typography-adaptive-component-firm-l;
-$button-typography-responsive-primary-s: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-primary-m: $global-typography-responsive-component-firm-m;
-$button-typography-responsive-primary-l: $global-typography-responsive-component-firm-l;
-$button-typography-responsive-secondary-xs: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-secondary-s: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-secondary-m: $global-typography-responsive-component-firm-m;
-$button-typography-responsive-secondary-l: $global-typography-responsive-component-firm-l;
-$button-typography-responsive-subtle-xs: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
-$button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
-$button-typography-responsive-tertiary-xs: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-tertiary-s: $global-typography-responsive-component-firm-s;
-$button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
-$button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
-$button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
-$button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
-$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
-$button-color-destructive-secondary-border-hover: $modes-color-interactive-danger-hover;
-$button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
-$button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
-$button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
-$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
-$button-color-typical-tertiary-bg-enabled: $button-color-none;
-$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
-$button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
-$button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
-$button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
-$button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
-$button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
-$button-size-split: $global-size-micro-xxs; // Split button (divider width)
-$button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
-$button-size-s: $global-size-macro-s; // min-height on S Buttons
-$button-size-m: $global-size-macro-m; // min-height on M Buttons
-$button-size-l: $global-size-macro-l; // min-height on L Buttons
-$button-size-toggle-xs: $global-size-macro-xs; // min-height on button within S toggle group
-$button-size-toggle-s: $global-size-macro-s; // min-height on S single toggle, and on button within M toggle group
-$button-size-toggle-m: $global-size-macro-m; // min-height on M single toggle, and on button within L toggle group
-$button-size-toggle-l: $global-size-macro-l; // min-height on L single toggle
-$button-size-icon-s: $global-size-icon-s;
-$button-size-icon-m: $global-size-icon-m;
-$button-size-video-s: $global-size-macro-m;
-$button-size-video-m: $global-size-macro-xxl;
-$button-size-video-l: $global-size-macro-m * 2;
-$button-space-bar-iconbutton-x-inner-m: $global-space-micro-xl; // Inner sides of all buttons. 
-$button-space-bar-iconbutton-x-outer-l: $global-space-macro-s; // Outer buttons, outer sides. 
-$button-space-fab-child-x-m: $global-space-macro-xxxs; // Left padding on FAB child container and text within FAB single 
-$button-space-fab-child-x-l: $global-space-macro-xs; // Right padding on FAB child container 
-$button-space-fab-parent-x-m: $global-space-macro-xs; // Left and right padding on FAB parent container 
-$button-space-fab-parent-xg-m: $global-space-micro-xxl; // Item spacing inside buttons
-$button-space-fab-parent-y-m: $global-space-macro-xs; // Top and bottom padding on FAB parent container 
-$button-space-layout-x-xs: $global-space-macro-xxxs; // XS left and right padding
-$button-space-layout-x-s: $global-space-macro-xs; // Small left and right padding
-$button-space-layout-x-m: $global-space-macro-m; // Medium left and right padding
-$button-space-layout-x-l: $global-space-macro-l; // Large left and right padding
-$button-space-layout-y-xs: $global-space-macro-xxxs; // XS top and bottom padding
-$button-space-layout-y-s: $global-space-macro-xs; // Small top bottom padding
-$button-space-layout-y-m: $global-space-macro-m; // Medium top bottom padding
-$button-space-layout-y-l: $global-space-macro-l; // Large top bottom padding
-$button-space-layout-xg-s: $global-space-macro-xxxs; // Horizontal spacing between small buttons
-$button-space-layout-xg-m: $global-space-micro-xxl; // Horizontal spacing between medium buttons
-$button-space-layout-xg-l: $global-space-macro-xs; // Horizontal spacing between Large buttons
-$button-space-layout-yg-s: $global-space-macro-xxxs; // Vertical spacing between small buttons
-$button-space-layout-yg-m: $global-space-micro-xxl; // Vertical spacing between medium buttons
-$button-space-layout-yg-l: $global-space-macro-xs; // Vertical spacing between Large buttons
-$button-space-primary-x-s: $global-space-macro-xxs; // Left and right padding on small buttons
-$button-space-primary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
-$button-space-primary-x-l: $global-space-macro-s; // Left and right padding on large buttons
-$button-space-primary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-primary-xg-m: $global-space-macro-xs / 2; // Item spacing inside buttons
-$button-space-primary-xg-l: $global-space-macro-xs / 2; // Item spacing inside buttons
-$button-space-primary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
-$button-space-primary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
-$button-space-primary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-primary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size primary buttons
-$button-space-primary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size primary buttons
-$button-space-primary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size primary buttons
-$button-space-primary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size primary buttons
-$button-space-primary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size primary buttons
-$button-space-primary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size primary buttons
-$button-space-secondary-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
-$button-space-secondary-x-s: $global-space-micro-xxl; // Left and right padding on small buttons
-$button-space-secondary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
-$button-space-secondary-x-l: $global-space-macro-s; // Left and right padding on large buttons
-$button-space-secondary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
-$button-space-secondary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
-$button-space-secondary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
-$button-space-secondary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-secondary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size secondary buttons
-$button-space-secondary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size secondary buttons
-$button-space-secondary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size secondary buttons
-$button-space-secondary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size secondary buttons
-$button-space-secondary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size secondary buttons
-$button-space-secondary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size secondary buttons
-$button-space-secondary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size secondary buttons
-$button-space-secondary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size secondary buttons
-$button-space-tertiary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
-$button-space-tertiary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
-$button-space-tertiary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
-$button-space-tertiary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-tertiary-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
-$button-space-tertiary-x-s: $global-space-macro-xxs; // Left and right padding on small buttons
-$button-space-tertiary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
-$button-space-tertiary-x-l: $global-space-macro-s; // Left and right padding on large buttons
-$button-space-tertiary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-tertiary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size tertiary buttons
-$button-space-tertiary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size tertiary buttons
-$button-space-tertiary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size tertiary buttons
-$button-space-tertiary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size tertiary buttons
-$button-space-tertiary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size tertiary buttons
-$button-space-tertiary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size tertiary buttons
-$button-space-tertiary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size tertiary buttons
-$button-space-tertiary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size tertiary buttons
-$button-space-subtle-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
-$button-space-subtle-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
-$button-space-subtle-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
-$button-space-subtle-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-subtle-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
-$button-space-subtle-x-s: $global-space-macro-xxxs; // left and right padding on subtle buttons
-$button-space-subtle-x-m: $global-space-macro-xxxs; // left and right padding on subtle buttons
-$button-space-subtle-x-l: $global-space-macro-xxxs; // left and right padding on subtle buttons
-$button-space-subtle-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-subtle-xg-s: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-xg-m: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-xg-l: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size subtle buttons
-$button-space-subtle-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size subtle buttons
-$button-space-subtle-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size subtle buttons
-$button-space-subtle-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size subtle buttons
-$button-space-subtle-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size subtle buttons
-$button-space-subtle-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size subtle buttons
-$button-space-subtle-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size subtle buttons
-$button-space-subtle-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size subtle buttons
-$button-space-toggle-button-x-xs: $global-space-macro-xxxs; // Left and right padding on XS asset used within S toggle group
-$button-space-toggle-button-x-s: $global-space-macro-xxs; // Left and right padding on S toggle buttons
-$button-space-toggle-button-x-m: $global-space-macro-xs; // Left and right padding on medium toggle buttons
-$button-space-toggle-button-x-l: $global-space-macro-s; // Left and right padding on buttons
-$button-space-toggle-button-xg-s: $global-space-macro-xxxs; // Item spacing inside toggle buttons
-$button-space-toggle-button-xg-m: $global-space-macro-xxxs; // Item spacing inside toggle buttons
-$button-space-toggle-button-xg-l: $global-space-macro-xxxs; // Item spacing inside toggle buttons
-$button-space-toggle-button-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // Top and bottom padding on toggle buttons 
-$button-space-toggle-button-y-s: $global-space-micro-s; // Top and bottom padding on toggle buttons 
-$button-space-toggle-button-y-m: $global-space-micro-l; // Top and bottom padding on toggle buttons 
-$button-space-toggle-button-y-l: $global-space-micro-xl-0.5; // Top and bottom padding on toggle buttons 
-$button-space-toggle-container-x-s: $global-space-micro-s; // Horizontal padding
-$button-space-toggle-container-x-m: $global-space-micro-s; // Horizontal padding
-$button-space-toggle-container-x-l: $global-space-micro-s; // Horizontal padding
-$button-space-toggle-container-xg-s: $global-space-micro-l; // Spacing between buttons in Toggle. 
-$button-space-toggle-container-xg-m: $global-space-micro-l; // Spacing between buttons in Toggle. 
-$button-space-toggle-container-xg-l: $global-space-micro-l; // Spacing between buttons in Toggle. 
-$button-space-toggle-container-y-s: $global-space-micro-s; // Vertical padding
-$button-space-toggle-container-y-m: $global-space-micro-s; // Vertical padding
-$button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
-$button-space-toggle-container-yg-s: $global-space-micro-l; // Row gap between buttons in wrapped toggle group. 
-$button-space-toggle-container-yg-m: $global-space-micro-l; // Row gap between buttons in wrapped toggle group. 
-$button-space-toggle-container-yg-l: $global-space-micro-l; // Row gap between buttons in wrapped toggle group. 
-$button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
-$button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
-$button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
-$button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
-$button-color-typical-primary-bg-hover: $modes-color-interactive-primary-hover;
-$button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-typical-primary-inverse-bg-active: $modes-color-interactive-primary-inverse-active;
-$button-color-typical-primary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover;
-$button-color-typical-secondary-bg-active: $modes-color-interactive-primary-active-alt;
-$button-color-typical-secondary-bg-enabled: $modes-color-interactive-primary-default-alt3;
-$button-color-typical-secondary-bg-hover: $modes-color-interactive-primary-hover-alt;
-$button-color-typical-secondary-border-active: $modes-color-interactive-primary-active;
-$button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
-$button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
-$button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
-$button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
-$button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
-$button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
-$button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
-$button-color-typical-secondary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
-$button-color-typical-secondary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
-$button-color-typical-secondary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-tertiary-bg-active: $modes-color-interactive-primary-active-alt;
-$button-color-typical-tertiary-bg-hover: $modes-color-interactive-primary-hover-alt;
-$button-color-typical-tertiary-border-active: $modes-color-interactive-primary-active;
-$button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt;
-$button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
-$button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
-$button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
-$button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
-$button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
-$button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
-$button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
-$button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
-$button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
-$button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
-$button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
-$button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
-$button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
-$button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
-$button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
-$button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
-$button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
-$button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
-$button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
-$button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
-$button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
-$button-radius-chip: $global-radius-interactive-m; // Buttons chip
-$button-radius-primary-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
-$button-radius-primary-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
-$button-radius-primary-l: $global-radius-interactive-xxl; // large tertiary button
-$button-radius-secondary-xs: $global-radius-interactive-m + $global-radius-interactive-s; // Consumed within XS buttons only in table context.
-$button-radius-secondary-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
-$button-radius-secondary-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
-$button-radius-secondary-l: $global-radius-interactive-xxl; // large tertiary button
-$button-radius-tertiary-xs: $global-radius-interactive-m + $global-radius-interactive-s; // Consumed within XS buttons only in table context.
-$button-radius-tertiary-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
-$button-radius-tertiary-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
-$button-radius-tertiary-l: $global-radius-interactive-xxl; // large tertiary button
-$button-radius-subtle-xs: $global-radius-interactive-m + $global-radius-interactive-s; // Consumed within XS buttons only in table context.
-$button-radius-subtle-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
-$button-radius-subtle-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)
-$button-radius-subtle-l: $global-radius-interactive-xxl; // large subtle button
-$button-radius-toggle-button-xs: $global-radius-interactive-xxl/2; // XS single toggle button (used within S toggle group)
-$button-radius-toggle-button-s: $global-radius-interactive-l; // S single toggle button (used within M toggle group)
-$button-radius-toggle-button-m: $global-radius-interactive-xl; // M single toggle button (used within L toggle group)
-$button-radius-toggle-button-l: $global-radius-interactive-xxl; // L single toggle button
-$button-radius-toggle-container-s: $global-radius-interactive-l; // S toggle group
-$button-radius-toggle-container-m: $global-radius-interactive-xl; // M toggle group
-$button-radius-toggle-container-l: $global-radius-interactive-xxl; // L toggle group
-$button-borderwidth-chip: $global-borderwidth-xs; // chip button border width
-$button-borderwidth-secondary: $global-borderwidth-s; // Secondary button. 
-$button-borderwidth-tertiary: $global-borderwidth-xs; // tertiary button border 
-$button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
-$button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
-$button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
-$button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
-$button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
-$button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;