@spark-web/button 1.2.0 → 1.4.0

package/README.md

@@ -1,6 +1,7 @@
 ---
 title: Button
 storybookPath: forms-buttons-button--default
+isExperimentalPackage: true
 ---
 
 Buttons are clickable elements that are used to trigger actions. They

package/dist/declarations/src/ButtonLink.d.ts

@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
 /** The appearance of a `Button`, with the semantics of a link. */
 export declare const ButtonLink: <Comp extends import("react").ElementType<any> = "a">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/declarations/src/index.d.ts

@@ -1,6 +1,8 @@
 export { BaseButton } from './BaseButton';
 export { Button } from './Button';
 export { ButtonLink } from './ButtonLink';
+export { useButtonStyles } from './useButtonStyles';
 export type { BaseButtonProps } from './BaseButton';
 export type { ButtonProps } from './Button';
 export type { ButtonLinkProps } from './ButtonLink';
+export type { UseButtonStylesProps } from './useButtonStyles';

package/dist/declarations/src/types.d.ts

@@ -5,10 +5,10 @@ import type { ButtonHTMLAttributes, ReactElement } from 'react';
 import type { mapTokens } from './utils';
 export declare type ButtonSize = keyof typeof mapTokens[keyof typeof mapTokens];
 export declare type ButtonProminence = 'high' | 'low' | 'none';
-export declare type ButtonTone = BackgroundTone;
+export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
 declare type ChildrenWithText = {
     label?: never;
-    children: string | [ReactElement<IconProps>, string] | [string, ReactElement<IconProps>];
+    children: string | number | [ReactElement<IconProps>, string | number] | [string | number, ReactElement<IconProps>];
 };
 declare type IconOnly = {
     /**

package/dist/declarations/src/useButtonStyles.d.ts

@@ -1,10 +1,88 @@
-import type { BoxProps } from '@spark-web/box';
 import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
-declare type UseButtonStylesProps = {
+/**
+ * useButtonStyles
+ *
+ * Custom hook for styling buttons and certain links.
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying `Box` component, and the second item is a CSS object that can be
+ * passed to Emotion's `css` function.
+ */
+export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
+    readonly alignItems: "center";
+    readonly background: "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
+    readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive"> | undefined;
+    readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
+    readonly borderRadius: "small" | "medium";
+    readonly cursor: "pointer";
+    readonly display: "inline-flex";
+    readonly gap: "small";
+    readonly height: "large" | "medium";
+    readonly justifyContent: "center";
+    readonly paddingX: "medium" | "xlarge" | undefined;
+    readonly position: "relative";
+    readonly width: "large" | "medium" | undefined;
+}, {
+    readonly '&:not([aria-disabled=true])': {
+        readonly ':hover': {
+            readonly borderColor: string | undefined;
+            readonly backgroundColor: string | undefined;
+            readonly '> *': {
+                readonly color: string | undefined;
+                readonly stroke: string | undefined;
+                readonly transitionProperty: string;
+                readonly transitionTimingFunction: string;
+                readonly transitionDuration: string;
+            };
+        };
+        readonly ':active': {
+            readonly borderColor: string | undefined;
+            readonly backgroundColor: string | undefined;
+            readonly transform: "scale(0.98)";
+            readonly '> *': {
+                readonly color: string | undefined;
+                readonly stroke: string | undefined;
+                readonly transitionProperty: string;
+                readonly transitionTimingFunction: string;
+                readonly transitionDuration: string;
+            };
+        };
+        readonly ':focus': {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    readonly '&[aria-disabled=true]': {
+        readonly backgroundColor: string | undefined;
+        readonly borderColor: string | undefined;
+        readonly cursor: "default";
+        readonly '*': {
+            readonly color: string | undefined;
+            readonly stroke: string | undefined;
+        };
+        readonly ':focus': {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            outline: string;
+            outlineOffset: string;
+        };
+    };
+    readonly transitionProperty: string;
+    readonly transitionTimingFunction: string;
+    readonly transitionDuration: string;
+}];
+export declare type UseButtonStylesProps = {
+    /** Whether the children of the button is a single icon or not. */
     iconOnly: boolean;
+    /** Sets the visual prominence of the button. */
     prominence: ButtonProminence;
+    /** Sets the size of the button. */
     size: ButtonSize;
+    /** Sets the tone of the button. */
     tone: ButtonTone;
 };
-export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): Partial<BoxProps>;
-export {};

package/dist/declarations/src/utils.d.ts

@@ -2,19 +2,30 @@ import type { BoxProps } from '@spark-web/box';
 import type { ForegroundTone } from '@spark-web/text';
 import type { BrighteTheme } from '@spark-web/theme';
 import type { ButtonProminence, ButtonTone } from './types';
-declare type ButtonStyles = {
+declare type BaseButtonStyles = {
     background: BoxProps['background'];
     border?: BoxProps['border'];
     borderWidth?: BoxProps['borderWidth'];
     textTone?: ForegroundTone;
+};
+declare type HoverButtonStyles = {
     backgroundHover: keyof BrighteTheme['backgroundInteractions'];
     borderHover?: keyof BrighteTheme['border']['color'];
     textToneHover?: keyof BrighteTheme['color']['foreground'];
+};
+declare type ActiveButtonStyles = {
     backgroundActive: keyof BrighteTheme['backgroundInteractions'];
     borderActive?: keyof BrighteTheme['border']['color'];
     textToneActive?: keyof BrighteTheme['color']['foreground'];
 };
-export declare const variants: Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
+declare type DisabledButtonStyles = {
+    backgroundDisabled: keyof BrighteTheme['color']['background'];
+    borderDisabled?: keyof BrighteTheme['border']['color'];
+    textToneDisabled: keyof BrighteTheme['color']['foreground'];
+};
+declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
+declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
+export declare const variants: Variants;
 export declare const mapTokens: {
     readonly fontSize: {
         readonly medium: "small";

package/dist/spark-web-button.cjs.dev.js

@@ -8,13 +8,13 @@ var box = require('@spark-web/box');
 var utils = require('@spark-web/utils');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var css = require('@emotion/css');
 var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
 var text = require('@spark-web/text');
-var css = require('@emotion/css');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
-var internal = require('@spark-web/utils/internal');
 var ts = require('@spark-web/utils/ts');
 
 var _excluded$2 = ["onClick", "disabled", "type"];
@@ -24,7 +24,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'button' : _ref$type,
-      rest = _objectWithoutProperties(_ref, _excluded$2);
+      consumerProps = _objectWithoutProperties(_ref, _excluded$2);
 
   var internalRef = react.useRef(null);
   var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
@@ -42,11 +42,12 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
     preventableClickHandler(event);
   }, [disabled, onClickProp]);
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
-    as: "button"
-  }, rest), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+    as: "button",
+    ref: composedRef // Hide aria-disabled attribute when button is not disabled
+    ,
+    "aria-disabled": disabled || undefined,
     onClick: onClick,
-    ref: composedRef,
     type: type
   }));
 });
@@ -66,39 +67,62 @@ function getPreventableClickHandler(onClick, disabled) {
   };
 }
 
+var highDisabledStyles = {
+  backgroundDisabled: 'disabled',
+  borderDisabled: 'fieldDisabled',
+  textToneDisabled: 'neutralInverted'
+};
+var highDisabledAltStyles = {
+  backgroundDisabled: 'neutral',
+  borderDisabled: 'standard',
+  textToneDisabled: 'placeholder'
+};
+var lowDisabledStyles = {
+  backgroundDisabled: 'inputDisabled',
+  textToneDisabled: 'disabled'
+};
+var lowDisabledAltStyles = {
+  backgroundDisabled: 'inputDisabled',
+  borderDisabled: 'fieldDisabled',
+  textToneDisabled: 'disabled'
+};
+var noneDisabledStyles = {
+  backgroundDisabled: 'neutral',
+  textToneDisabled: 'disabled'
+};
 var variants = {
   high: {
-    primary: {
+    primary: _objectSpread({
       background: 'primary',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
-    },
-    secondary: {
+    }, highDisabledStyles),
+    secondary: _objectSpread({
       background: 'secondary',
       backgroundHover: 'secondaryHover',
       backgroundActive: 'secondaryActive'
-    },
-    neutral: {
+    }, highDisabledStyles),
+    neutral: _objectSpread({
       background: 'neutral',
       border: 'field',
       backgroundHover: 'neutralHover',
       backgroundActive: 'neutralActive'
-    },
-    positive: {
+    }, highDisabledAltStyles),
+    positive: _objectSpread({
       background: 'positive',
       backgroundHover: 'positiveHover',
       backgroundActive: 'positiveActive'
-    },
-    critical: {
+    }, highDisabledStyles),
+    critical: _objectSpread({
       background: 'critical',
       backgroundHover: 'criticalHover',
       backgroundActive: 'criticalActive'
-    },
+    }, highDisabledStyles),
     caution: undefined,
     info: undefined
   },
   low: {
-    primary: {
+    primary: _objectSpread({
       background: 'surface',
       border: 'primary',
       borderWidth: 'large',
@@ -109,8 +133,8 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
-    },
-    secondary: {
+    }, lowDisabledAltStyles),
+    secondary: _objectSpread({
       background: 'surface',
       border: 'secondary',
       borderWidth: 'large',
@@ -121,76 +145,76 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'secondaryActive',
       textToneActive: 'secondaryActive'
-    },
-    neutral: {
+    }, lowDisabledAltStyles),
+    neutral: _objectSpread({
       background: 'neutralLow',
       backgroundHover: 'neutralLowHover',
       backgroundActive: 'neutralLowActive'
-    },
-    positive: {
+    }, lowDisabledStyles),
+    positive: _objectSpread({
       background: 'positiveLow',
       backgroundHover: 'positiveLowHover',
       backgroundActive: 'positiveLowActive'
-    },
-    caution: {
+    }, lowDisabledStyles),
+    caution: _objectSpread({
       background: 'cautionLow',
       backgroundHover: 'cautionLowHover',
       backgroundActive: 'cautionLowActive'
-    },
-    critical: {
+    }, lowDisabledStyles),
+    critical: _objectSpread({
       background: 'criticalLow',
       backgroundHover: 'criticalLowHover',
       backgroundActive: 'criticalLowActive'
-    },
-    info: {
+    }, lowDisabledStyles),
+    info: _objectSpread({
       background: 'infoLow',
       backgroundHover: 'infoLowHover',
       backgroundActive: 'infoLowActive'
-    }
+    }, lowDisabledStyles)
   },
   none: {
-    primary: {
+    primary: _objectSpread({
       background: 'surface',
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
-    },
-    secondary: {
+    }, noneDisabledStyles),
+    secondary: _objectSpread({
       background: 'surface',
       textTone: 'secondaryActive',
       backgroundHover: 'secondaryLowHover',
       backgroundActive: 'secondaryLowActive'
-    },
-    neutral: {
+    }, noneDisabledStyles),
+    neutral: _objectSpread({
       background: 'surface',
       textTone: 'neutral',
       backgroundHover: 'neutralLowHover',
       backgroundActive: 'neutralLowActive'
-    },
-    positive: {
+    }, noneDisabledStyles),
+    positive: _objectSpread({
       background: 'surface',
       textTone: 'positive',
       backgroundHover: 'positiveLowHover',
       backgroundActive: 'positiveLowActive'
-    },
-    caution: {
+    }, noneDisabledStyles),
+    caution: _objectSpread({
       background: 'surface',
       textTone: 'caution',
       backgroundHover: 'cautionLowHover',
       backgroundActive: 'cautionLowActive'
-    },
-    critical: {
+    }, noneDisabledStyles),
+    critical: _objectSpread({
       background: 'surface',
       textTone: 'critical',
       backgroundHover: 'criticalLowHover',
       backgroundActive: 'criticalLowActive'
-    },
-    info: {
+    }, noneDisabledStyles),
+    info: _objectSpread({
       background: 'surface',
       textTone: 'info',
       backgroundHover: 'infoLowHover',
       backgroundActive: 'infoLowActive'
-    }
+    }, noneDisabledStyles)
   }
 };
 var mapTokens = {
@@ -216,7 +240,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
       tone = _ref.tone;
   var variant = variants[prominence][tone];
   return react.Children.map(children, function (child) {
-    if (typeof child === 'string') {
+    if (typeof child === 'string' || typeof child === 'number') {
       return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
         isLoading: isLoading,
         children: /*#__PURE__*/jsxRuntime.jsx(text.Text, {
@@ -263,6 +287,15 @@ function HiddenWhenLoading(_ref2) {
   });
 }
 
+/**
+ * useButtonStyles
+ *
+ * Custom hook for styling buttons and certain links.
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying `Box` component, and the second item is a CSS object that can be
+ * passed to Emotion's `css` function.
+ */
+
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -272,14 +305,17 @@ function useButtonStyles(_ref) {
   var focusRingStyles = a11y.useFocusRing({
     tone: tone
   });
+  var disabledFocusRingStyles = a11y.useFocusRing({
+    tone: 'disabled'
+  });
   var variant = variants[prominence][tone];
   var isLarge = size === 'large';
-  var transitionColours = {
-    transitionProperty: 'color, background-color, border-color, text-decoration-color',
-    transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
+  var transitionColors = {
+    transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+    transitionTimingFunction: theme$1.animation.standard.easing,
     transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
   };
-  var buttonStyleProps = {
+  return [{
     alignItems: 'center',
     background: variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
@@ -292,32 +328,44 @@ function useButtonStyles(_ref) {
     justifyContent: 'center',
     paddingX: iconOnly ? undefined : mapTokens.spacing[size],
     position: 'relative',
-    width: iconOnly ? mapTokens.size[size] : undefined,
-    // interactions styles
-    className: css.css(_objectSpread(_objectSpread({}, transitionColours), {}, {
-      '&:hover': {
+    width: iconOnly ? mapTokens.size[size] : undefined
+  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
+    // Styles for buttons that aren't disabled.
+    // Using the :not() pseudo-class so we don't have to undo the styles when
+    // the button is disabled.
+    '&:not([aria-disabled=true])': {
+      ':hover': {
         borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
         // Style button text when hovering
-        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
         })
       },
-      '&:active': {
+      ':active': {
         borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme$1.border.color[variant.borderActive] : undefined,
         backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
         transform: 'scale(0.98)',
         // Style button text when it's active
-        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
+        '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
           color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
           stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
         })
       },
       ':focus': focusRingStyles
-    }))
-  };
-  return buttonStyleProps;
+    },
+    '&[aria-disabled=true]': {
+      backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme$1.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
+      borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme$1.border.color[variant.borderDisabled] : undefined,
+      cursor: 'default',
+      '*': {
+        color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined,
+        stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined
+      },
+      ':focus': disabledFocusRingStyles
+    }
+  })];
 }
 
 var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
@@ -346,21 +394,26 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var iconOnly = Boolean(props.label);
-  var buttonStyleProps = useButtonStyles({
+
+  var _useButtonStyles = useButtonStyles({
     iconOnly: iconOnly,
     size: size,
     tone: tone,
     prominence: prominence
-  });
+  }),
+      _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+      boxProps = _useButtonStyles2[0],
+      buttonStyles = _useButtonStyles2[1];
+
   var isDisabled = disabled || loading;
   var isLoading = loading && !disabled;
   var variant = variants[prominence][tone];
-  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
-    "aria-disabled": isDisabled,
     "aria-expanded": ariaExpanded,
     "aria-label": props.label,
+    className: css.css(buttonStyles),
     data: data,
     disabled: isDisabled,
     id: id,
@@ -403,7 +456,7 @@ function Loading(_ref2) {
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
 
 /** The appearance of a `Button`, with the semantics of a link. */
-var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
+var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var data = _ref.data,
       href = _ref.href,
       id = _ref.id,
@@ -413,25 +466,31 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-      props = _objectWithoutProperties(_ref, _excluded);
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
 
-  var LinkComponent = link.useLinkComponent(ref);
-  var iconOnly = Boolean(props.label);
-  var buttonStyleProps = useButtonStyles({
+  var LinkComponent = link.useLinkComponent(forwardedRef);
+  var iconOnly = Boolean(consumerProps.label);
+
+  var _useButtonStyles = useButtonStyles({
     iconOnly: iconOnly,
     prominence: prominence,
     size: size,
     tone: tone
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
-    "aria-label": props.label,
+  }),
+      _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+      boxProps = _useButtonStyles2[0],
+      buttonStyles = _useButtonStyles2[1];
+
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+    "aria-label": consumerProps.label,
     as: LinkComponent,
     asElement: "a",
-    id: id,
+    className: css.css(buttonStyles),
+    data: data,
     href: href,
-    ref: ref
-  }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
-    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+    id: id,
+    ref: forwardedRef,
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, consumerProps), {}, {
       isLoading: false,
       prominence: prominence,
       size: size,
@@ -443,3 +502,4 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
 exports.BaseButton = BaseButton;
 exports.Button = Button;
 exports.ButtonLink = ButtonLink;
+exports.useButtonStyles = useButtonStyles;