chore: remove redundant svg color overrides

lumada-design · Feb 26, 2025 · eca2862 · eca2862
1 parent 3ec907c
commit eca2862
Show file tree

Hide file tree

Showing 13 changed files with 8 additions and 47 deletions.
diff --git a/packages/core/src/ActionsGeneric/ActionsGeneric.tsx b/packages/core/src/ActionsGeneric/ActionsGeneric.tsx
@@ -150,9 +150,7 @@ export const HvActionsGeneric = forwardRef<
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
 
-    const semantic = variant === "semantic";
-    const iconColor =
-      (disabled && "secondary_60") || (semantic && "base_dark") || undefined;
+    const iconColor = (variant === "semantic" && "base_dark") || undefined;
 
     return (
       <>

diff --git a/packages/core/src/AppSwitcher/Action/Action.styles.tsx b/packages/core/src/AppSwitcher/Action/Action.styles.tsx
@@ -44,6 +44,7 @@ export const { staticClasses, useClasses } = createClasses(
       margin: `0 ${theme.space.xs}`,
       textWrap: "balance",
       ...theme.typography.label,
+      color: "inherit",
     },
     titleAnchor: {
       WebkitLineClamp: 2,

diff --git a/packages/core/src/Button/Button.styles.ts b/packages/core/src/Button/Button.styles.ts
@@ -140,9 +140,3 @@ export const getIconSizeStyles = (size: HvSize) => {
     width: height,
   };
 };
-
-export const getOverrideColors = () => ({
-  "& svg .color0": {
-    fill: "currentcolor",
-  },
-});
diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
@@ -19,7 +19,6 @@ import {
 } from "../types/generic";
 import {
   getIconSizeStyles,
-  getOverrideColors,
   getSizeStyles,
   staticClasses,
   useClasses,
@@ -54,7 +53,7 @@ export type HvButtonProps<C extends React.ElementType = "button"> =
       size?: HvSize;
       /** Button border radius. */
       radius?: HvRadius;
-      /** Defines the default colors of the button are forced into the icon. */
+      /** Defines the default colors of the button are forced into the icon. @deprecated unused */
       overrideIconColors?: boolean;
       /** A Jss Object used to override or extend the styles applied. */
       classes?: HvButtonClasses;
@@ -113,7 +112,7 @@ export const HvButton = fixedForwardRef(function HvButton<
     endIcon,
     size,
     radius,
-    overrideIconColors = true,
+    overrideIconColors,
     component: Component = "button",
     focusableWhenDisabled,
     onClick: onClickProp,
@@ -153,7 +152,6 @@ export const HvButton = fixedForwardRef(function HvButton<
         classes.root,
         classes[variant],
         classes[variantProp as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override
-        overrideIconColors && css(getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled,

diff --git a/packages/core/src/DotPagination/DotPagination.styles.tsx b/packages/core/src/DotPagination/DotPagination.styles.tsx
@@ -17,6 +17,7 @@ export const { useClasses, staticClasses } = createClasses("HvDotPagination", {
     height: 16,
     width: 16,
     minWidth: 16,
+    color: "inherit",
 
     "&:hover": {
       backgroundColor: theme.colors.neutral_20,
@@ -28,7 +29,9 @@ export const { useClasses, staticClasses } = createClasses("HvDotPagination", {
     minWidth: 0,
     width: 16,
     height: 16,
+    color: "inherit",
     "&& svg": {
+      color: "inherit",
       border: "none",
       width: "unset",
       height: "unset",

diff --git a/packages/core/src/FormElement/Adornment/Adornment.styles.tsx b/packages/core/src/FormElement/Adornment/Adornment.styles.tsx
@@ -1,5 +1,4 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvAdornment", {
   root: {
@@ -15,7 +14,5 @@ export const { staticClasses, useClasses } = createClasses("HvAdornment", {
   hideIcon: { display: "none" },
   /** @deprecated use `classes.root` */
   adornmentButton: {},
-  disabled: {
-    "& svg *.color0": { fill: theme.colors.secondary_60 },
-  },
+  disabled: {},
 });
diff --git a/packages/core/src/ListContainer/ListItem/ListItem.styles.tsx b/packages/core/src/ListContainer/ListItem/ListItem.styles.tsx
@@ -68,9 +68,6 @@ export const { staticClasses, useClasses } = createClasses("HvListItem", {
       boxShadow: "none !important",
       outline: "none !important",
     },
-    "$disabled > svg *.color0": {
-      fill: theme.colors.secondary_60,
-    },
   },
   withEndAdornment: {
     "& > div": { float: "right" },
@@ -79,8 +76,5 @@ export const { staticClasses, useClasses } = createClasses("HvListItem", {
       boxShadow: "none !important",
       outline: "none !important",
     },
-    "$disabled > svg *.color0": {
-      fill: theme.colors.secondary_60,
-    },
   },
 });
diff --git a/packages/core/src/Tabs/Tab/Tab.styles.tsx b/packages/core/src/Tabs/Tab/Tab.styles.tsx
@@ -45,9 +45,6 @@ export const { staticClasses, useClasses } = createClasses("HvTab", {
     "& .MuiTab-iconWrapper": {
       margin: 0,
     },
-    "& svg .color0": {
-      fill: "currentcolor",
-    },
   },
   focusVisible: {
     ...outlineStyles,

diff --git a/packages/core/src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx b/packages/core/src/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx
@@ -14,10 +14,6 @@ export const { staticClasses, useClasses } = createClasses(
       "& > button": {
         marginLeft: "auto",
       },
-
-      "& .HvListItem-startAdornment .color0": {
-        fill: "currentColor",
-      },
     },
     listItemSelected: {
       background: theme.colors.atmo3,

diff --git a/packages/core/src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx b/packages/core/src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx
@@ -139,9 +139,6 @@ export const { staticClasses, useClasses } = createClasses(
     },
     icon: {
       display: "flex",
-      "& .color0": {
-        fill: "currentColor",
-      },
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)",
       },

diff --git a/packages/core/src/VerticalNavigation/stories/Custom.tsx b/packages/core/src/VerticalNavigation/stories/Custom.tsx
@@ -27,7 +27,6 @@ const classes = {
     flexDirection: "column",
     gap: theme.space.md,
     "& span": { color: "inherit" },
-    "& svg *.color0": { fill: "inherit" },
   }),
   appName: css({
     display: "flex",

diff --git a/packages/pentaho/src/Canvas/PanelTab/PanelTab.styles.tsx b/packages/pentaho/src/Canvas/PanelTab/PanelTab.styles.tsx
@@ -20,9 +20,6 @@ export const { staticClasses, useClasses } = createClasses("HvCanvasPanelTab", {
     boxShadow: "0px -2px 8px 0px #4141410F",
     paddingInlineEnd: 0,
     paddingInlineStart: 0,
-    "& svg .color0": {
-      fill: "currentcolor",
-    },
     "&:hover": {
       cursor: "pointer",
     },

diff --git a/templates/Canvas/StatusEdge.tsx b/templates/Canvas/StatusEdge.tsx
@@ -1,4 +1,3 @@
-import { css } from "@emotion/css";
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -13,14 +12,6 @@ import { useFlowInstance } from "@hitachivantara/uikit-react-lab";
 
 import { FlowStatus, flowStatusesSpecs } from "./utils";
 
-const classes = {
-  dropdownMenu: css({
-    "& svg .color0": {
-      fill: "var(--color-0)",
-    },
-  }),
-};
-
 export type StatusEdgeData =
   | undefined
   | {
@@ -72,7 +63,6 @@ export const StatusEdge = (props: EdgeProps<StatusEdgeData>) => {
             className="nodrag nopan nowheel" // ReactFlow specific classes to prevent drag on icon
           >
             <HvDropDownMenu
-              className={classes.dropdownMenu}
               icon={status.icon}
               dataList={[{ id: "remove", label: "Remove connection" }]}
               onClick={handleClick}