@aurora-ds/components 0.16.0 → 0.16.1

package/dist/cjs/components/actions/button/Button.props.d.ts

@@ -20,6 +20,12 @@ export type ButtonProps = {
     disabled?: boolean;
     /** Custom text color (overrides variant color) */
     textColor?: keyof Theme['colors'];
+    /** Custom backgroundColor (overrides variant backgroundColor) */
+    backgroundColor?: keyof Theme['colors'];
+    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
+    hoverBackgroundColor?: keyof Theme['colors'];
+    /** Custom active backgroundColor (overrides variant active backgroundColor) */
+    activeBackgroundColor?: keyof Theme['colors'];
     /** Size of the button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -37,5 +43,8 @@ export type ButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
     textColor?: keyof Theme['colors'];
+    backgroundColor?: keyof Theme['colors'];
+    hoverBackgroundColor?: keyof Theme['colors'];
+    activeBackgroundColor?: keyof Theme['colors'];
     size?: IconButtonSizes;
 };

package/dist/cjs/components/actions/icon-button/IconButton.props.d.ts

@@ -16,6 +16,12 @@ export type IconButtonProps = {
     disabled?: boolean;
     /** Custom text/icon color (overrides variant color) */
     textColor?: keyof Theme['colors'];
+    /** Custom backgroundColor (overrides variant backgroundColor) */
+    backgroundColor?: keyof Theme['colors'];
+    /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
+    hoverBackgroundColor?: keyof Theme['colors'];
+    /** Custom active backgroundColor (overrides variant active backgroundColor) */
+    activeBackgroundColor?: keyof Theme['colors'];
     /** Size of the icon button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -34,4 +40,7 @@ export type IconButtonStyleParams = {
     active?: boolean;
     size?: IconButtonSizes;
     textColor?: keyof Theme['colors'];
+    backgroundColor?: keyof Theme['colors'];
+    hoverBackgroundColor?: keyof Theme['colors'];
+    activeBackgroundColor?: keyof Theme['colors'];
 };

package/dist/cjs/index.js

@@ -673,12 +673,15 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, textColor, size = 'medium' }) => {
+        root: ({ variant = 'contained', active = false, textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium' }) => {
             const sizeConfig = sizeStyles[size];
             const overrides = textColor ? {
                 ...(variant !== 'contained' && { color: theme.colors[textColor] }),
                 ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
             } : {};
+            const backgroundOverride = backgroundColor ? { backgroundColor: theme.colors[backgroundColor] } : {};
+            const hoverBackgroundOverride = hoverBackgroundColor ? { backgroundColor: theme.colors[hoverBackgroundColor] } : {};
+            const activeBackgroundOverride = activeBackgroundColor ? { backgroundColor: theme.colors[activeBackgroundColor] } : {};
             return {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -694,10 +697,17 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
                 fontFamily: 'inherit',
                 ...variantStyles[variant].default,
                 ...(active && variantStyles[variant].pressed),
-                ':hover': variantStyles[variant].hover,
-                ':active': variantStyles[variant].pressed,
+                ':hover': {
+                    ...variantStyles[variant].hover,
+                    ...hoverBackgroundOverride,
+                },
+                ':active': {
+                    ...variantStyles[variant].pressed,
+                    ...activeBackgroundOverride,
+                },
                 ':disabled': variantStyles[variant].disabled,
                 ...overrides,
+                ...backgroundOverride,
             };
         },
     };
@@ -711,12 +721,12 @@ const BUTTON_STYLES = theme.createStyles((theme) => {
  * - `outlined`: Border only button
  * - `text`: Text only button without background
  */
-const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const sizeStyles = getButtonSizeStyles();
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor, size }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
+    return (jsxRuntime.jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [startIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: startIcon })), jsxRuntime.jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsxRuntime.jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
 
@@ -742,12 +752,15 @@ const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getIconButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, size = 'medium', textColor }) => {
+        root: ({ variant = 'contained', active = false, size = 'medium', textColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }) => {
             const sizeConfig = sizeStyles[size];
             const overrides = textColor ? {
                 ...(variant !== 'contained' && { color: theme.colors[textColor] }),
                 ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
             } : {};
+            const backgroundOverride = backgroundColor ? { backgroundColor: theme.colors[backgroundColor] } : {};
+            const hoverBackgroundOverride = hoverBackgroundColor ? { backgroundColor: theme.colors[hoverBackgroundColor] } : {};
+            const activeBackgroundOverride = activeBackgroundColor ? { backgroundColor: theme.colors[activeBackgroundColor] } : {};
             return {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -765,21 +778,28 @@ const ICON_BUTTON_STYLES = theme.createStyles((theme) => {
                 fontFamily: 'inherit',
                 ...variantStyles[variant].default,
                 ...(active && variantStyles[variant].pressed),
-                ':hover': variantStyles[variant].hover,
-                ':active': variantStyles[variant].pressed,
+                ':hover': {
+                    ...variantStyles[variant].hover,
+                    ...hoverBackgroundOverride,
+                },
+                ':active': {
+                    ...variantStyles[variant].pressed,
+                    ...activeBackgroundOverride,
+                },
                 ':disabled': variantStyles[variant].disabled,
                 ...overrides,
+                ...backgroundOverride,
             };
         },
     };
 });
 
-const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme$1 = theme.useTheme();
     const variantStyles = getButtonVariantStyles(theme$1);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     const iconSize = getIconButtonSizeStyles()[size].iconSize;
-    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
+    return (jsxRuntime.jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor, backgroundColor, hoverBackgroundColor, activeBackgroundColor }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: jsxRuntime.jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';