@sage/design-tokens 14.9.1 → 15.0.0

package/css/marketing/small/components/button.css

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