fixed icon styles

microsoft · Feb 14, 2025 · d746f72 · d746f72
1 parent 306c796
commit d746f72
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/...ags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/...ags/library/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts
@@ -197,10 +197,16 @@ const useRootStyles = makeStyles({
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
       color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
     ':active': {
       backgroundColor: tokens.colorBrandBackgroundPressed,
       color: tokens.colorNeutralForegroundOnBrand,
+      [`& .${iconFilledClassName}`]: {
+        color: tokens.colorNeutralForegroundOnBrand,
+      },
     },
   },
   medium: {

diff --git a/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/library/src/components/Tag/useTagStyles.styles.ts
@@ -285,6 +285,14 @@ const useDismissIconStyles = makeStyles({
       color: tokens.colorCompoundBrandForeground1Pressed,
     },
   },
+  selected: {
+    ':hover': {
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+    ':active': {
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
 });
 
 export const usePrimaryTextStyles = makeStyles({
@@ -399,6 +407,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
       dismissIconStyles.base,
       dismissIconStyles[size],
       !state.disabled && dismissIconStyles[appearance],
+      selected && dismissIconStyles.selected,
       state.dismissIcon.className,
     );
   }