@aurora-ds/components 0.24.0 → 0.24.2

package/dist/cjs/utils/ui/components/data-display/status/getStatusColorStyles.utils.d.ts

@@ -1,7 +1,7 @@
-import { ThemeContract } from '@/interfaces';
+import { StatusColor, ThemeContract } from '@/interfaces';
 import { StatusStyleParams } from '@components/data-display/status/Status.props.ts';
 export declare const getStatusColorStyles: (theme: ThemeContract, color: StatusStyleParams["color"], variant: StatusStyleParams["variant"], disabled: StatusStyleParams["disabled"]) => {
     backgroundColor: string;
-    color: string;
     borderColor: string;
 };
+export declare const getStatusTextColor: (color: StatusColor, disabled: boolean) => keyof ThemeContract["colors"];

package/dist/esm/index.js

@@ -250,12 +250,10 @@ const getStatusColorStyles = (theme, color, variant, disabled) => {
         return {
             filled: {
                 backgroundColor: theme.colors.disabled,
-                color: theme.colors.disabledText,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: 'transparent',
-                color: theme.colors.disabledText,
                 borderColor: theme.colors.disabled,
             },
         }[variant];
@@ -264,138 +262,123 @@ const getStatusColorStyles = (theme, color, variant, disabled) => {
         default: {
             filled: {
                 backgroundColor: theme.colors.defaultSubtle,
-                color: theme.colors.default,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.defaultSubtle,
-                color: theme.colors.default,
                 borderColor: theme.colors.default,
             },
         },
         primary: {
             filled: {
                 backgroundColor: theme.colors.primarySubtle,
-                color: theme.colors.primary,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.primarySubtle,
-                color: theme.colors.primary,
                 borderColor: theme.colors.primary,
             },
         },
         success: {
             filled: {
                 backgroundColor: theme.colors.successSubtle,
-                color: theme.colors.success,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.successSubtle,
-                color: theme.colors.success,
                 borderColor: theme.colors.success,
             },
         },
         warning: {
             filled: {
                 backgroundColor: theme.colors.warningSubtle,
-                color: theme.colors.warning,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.warningSubtle,
-                color: theme.colors.warning,
                 borderColor: theme.colors.warning,
             },
         },
         error: {
             filled: {
                 backgroundColor: theme.colors.errorSubtle,
-                color: theme.colors.error,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.errorSubtle,
-                color: theme.colors.error,
                 borderColor: theme.colors.error,
             },
         },
         info: {
             filled: {
                 backgroundColor: theme.colors.infoSubtle,
-                color: theme.colors.info,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.infoSubtle,
-                color: theme.colors.info,
                 borderColor: theme.colors.info,
             },
         },
         highlight: {
             filled: {
                 backgroundColor: theme.colors.highlightSubtle,
-                color: theme.colors.highlight,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.highlightSubtle,
-                color: theme.colors.highlight,
                 borderColor: theme.colors.highlight,
             },
         },
         accent: {
             filled: {
                 backgroundColor: theme.colors.accentSubtle,
-                color: theme.colors.accent,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.accentSubtle,
-                color: theme.colors.accent,
                 borderColor: theme.colors.accent,
             },
         },
         new: {
             filled: {
                 backgroundColor: theme.colors.newSubtle,
-                color: theme.colors.new,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.newSubtle,
-                color: theme.colors.new,
                 borderColor: theme.colors.new,
             },
         },
         rose: {
             filled: {
                 backgroundColor: theme.colors.roseSubtle,
-                color: theme.colors.rose,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.roseSubtle,
-                color: theme.colors.rose,
                 borderColor: theme.colors.rose,
             },
         },
         yellow: {
             filled: {
                 backgroundColor: theme.colors.yellowSubtle,
-                color: theme.colors.yellow,
                 borderColor: 'transparent',
             },
             outlined: {
                 backgroundColor: theme.colors.yellowSubtle,
-                color: theme.colors.yellow,
                 borderColor: theme.colors.yellow,
             },
         },
     };
     return colorMap[color][variant];
 };
+const getStatusTextColor = (color, disabled) => {
+    if (disabled) {
+        return 'disabledText';
+    }
+    // Retourne directement la clé de couleur du thème
+    return color;
+};
 
 /**
  * Get status size styles based on the theme, size and icon-only state
@@ -483,6 +466,7 @@ const getStatusContentSize = (size) => {
  */
 const Status = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const isIconOnly = Boolean(icon) && !label;
+    const textColor = getStatusTextColor(color, disabled);
     return (jsxs("span", { className: STATUS_STYLES.root({
             variant,
             color,
@@ -491,7 +475,7 @@ const Status = ({ label, icon, variant = 'filled', color = 'default', size = 'md
             disabled,
             gap,
             radius,
-        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsx(Icon, { size: getStatusContentSize(size), children: icon })), label && (jsx(Text, { variant: 'label', fontSize: getStatusContentSize(size), children: label }))] }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsx(Icon, { size: getStatusContentSize(size), color: textColor, children: icon })), label && (jsx(Text, { variant: 'label', fontSize: getStatusContentSize(size), color: textColor, children: label }))] }));
 };
 Status.displayName = 'Status';
 
@@ -2904,7 +2888,7 @@ const DRAWER_ITEM_STYLES = createStyles((theme) => ({
  * Similar to a text button with selected state support.
  */
 const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
-    return (jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxs(Stack, { children: [startIcon && (jsx(Icon, { children: startIcon })), jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsx(Status, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
+    return (jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxs(Stack, { children: [startIcon && (jsx(Icon, { color: selected ? 'surface' : 'textSecondary', children: startIcon })), jsx(Text, { variant: 'label', maxLines: 1, color: selected ? 'surface' : 'textSecondary', children: label }), endIcon && (jsx(Icon, { color: selected ? 'surface' : 'textSecondary', children: endIcon }))] }), chip && !selected && (jsx(Status, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
 };
 DrawerItem.displayName = 'DrawerItem';