@aurora-ds/components 0.16.0 → 0.16.2

package/dist/esm/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/esm/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/esm/index.js

@@ -111,7 +111,7 @@ const getTextVariantStyles = (theme) => ({
     },
     p: {
         tag: 'p',
-        fontSize: theme.fontSize.md,
+        fontSize: theme.fontSize.sm,
         fontWeight: theme.fontWeight.regular,
         lineHeight: theme.lineHeight.relaxed,
     },
@@ -123,7 +123,7 @@ const getTextVariantStyles = (theme) => ({
     },
     label: {
         tag: 'label',
-        fontSize: theme.fontSize.md,
+        fontSize: theme.fontSize.sm,
         fontWeight: theme.fontWeight.medium,
         lineHeight: theme.lineHeight.normal,
     },
@@ -574,7 +574,7 @@ const getButtonSizeStyles = () => ({
             vertical: 'sm',
             horizontal: 'md'
         },
-        fontSize: 'md'
+        fontSize: 'sm'
     },
     large: {
         height: BUTTON_SIZE + 8,
@@ -582,7 +582,7 @@ const getButtonSizeStyles = () => ({
             vertical: 'sm',
             horizontal: 'lg'
         },
-        fontSize: 'lg'
+        fontSize: 'md'
     }
 });
 
@@ -671,12 +671,15 @@ const BUTTON_STYLES = 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',
@@ -692,10 +695,17 @@ const BUTTON_STYLES = 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,
             };
         },
     };
@@ -709,12 +719,12 @@ const BUTTON_STYLES = 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 = useTheme();
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getButtonSizeStyles();
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (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 && (jsx(Icon, { color: textColor, children: startIcon })), jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsx(Icon, { color: textColor, children: endIcon }))] }));
+    return (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 && (jsx(Icon, { color: textColor, children: startIcon })), jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
 
@@ -740,12 +750,15 @@ const ICON_BUTTON_STYLES = 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',
@@ -763,21 +776,28 @@ const ICON_BUTTON_STYLES = 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 = useTheme();
     const variantStyles = getButtonVariantStyles(theme);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     const iconSize = getIconButtonSizeStyles()[size].iconSize;
-    return (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: jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
+    return (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: jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';
 
@@ -848,7 +868,7 @@ const INPUT_STYLES = createStyles((theme) => ({
         paddingRight: `calc(${theme.spacing.md} + ${hasEndIcon ? '1.5rem' : '0px'} + ${hasPasswordToggle ? '1.5rem' : '0px'})`,
         border: `1px solid ${theme.colors.border}`,
         borderRadius: theme.radius.md,
-        fontSize: theme.fontSize.md,
+        fontSize: theme.fontSize.sm,
         fontFamily: 'inherit',
         backgroundColor: theme.colors.surface,
         color: theme.colors.text,
@@ -865,7 +885,7 @@ const INPUT_STYLES = createStyles((theme) => ({
         },
         '::placeholder': {
             color: theme.colors.textTertiary,
-            fontSize: theme.fontSize.md,
+            fontSize: theme.fontSize.sm,
         },
         ...(disabled && {
             color: theme.colors.disabledText,
@@ -970,7 +990,7 @@ const TEXTAREA_STYLES = createStyles((theme) => ({
         padding: `${theme.spacing.sm} ${theme.spacing.md}`,
         border: `1px solid ${theme.colors.border}`,
         borderRadius: theme.radius.md,
-        fontSize: theme.fontSize.md,
+        fontSize: theme.fontSize.sm,
         fontFamily: 'inherit',
         backgroundColor: theme.colors.surface,
         color: theme.colors.text,
@@ -984,7 +1004,7 @@ const TEXTAREA_STYLES = createStyles((theme) => ({
         },
         '::placeholder': {
             color: theme.colors.textTertiary,
-            fontSize: theme.fontSize.md,
+            fontSize: theme.fontSize.sm,
             textOverflow: 'ellipsis',
             overflow: 'hidden',
             whiteSpace: 'nowrap',