fix(material/chips): Adjust trailing icon opacity based on chip state (#31828)

adolgachev · web-flow · commit 931ac3c1c7f8 · 2025-09-05T10:46:39.000-07:00
diff --git a/src/material/chips/_m3-chip.scss b/src/material/chips/_m3-chip.scss
@@ -49,11 +49,8 @@
       chip-selected-label-text-color: map.get($system, on-secondary-container),
       chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
       chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
-      // Parent chips will show focus/hover state as well so need stronger focus/hover styling here
-      chip-trailing-action-focus-state-layer-opacity:
-        calc(map.get($system, focus-state-layer-opacity) * 2),
-      chip-trailing-action-hover-state-layer-opacity:
-        calc(map.get($system, hover-state-layer-opacity) * 2),
+      chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
       chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
       chip-with-icon-disabled-icon-color: map.get($system, on-surface),
       chip-with-icon-icon-color: map.get($system, on-surface-variant),
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -520,6 +520,7 @@ $fallbacks: m3-chip.get-tokens();
 }
 
 .mat-mdc-chip-edit, .mat-mdc-chip-remove {
+  $chip-opacity: token-utils.slot(chip-hover-state-layer-opacity, $fallbacks);
   opacity: token-utils.slot(chip-trailing-action-opacity, $fallbacks);
 
   &:focus {
@@ -531,11 +532,13 @@ $fallbacks: m3-chip.get-tokens();
   }
 
   &:hover::after {
-    opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
+    $action-opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
+    opacity: calc($chip-opacity + $action-opacity);
   }
 
   &:focus::after {
-    opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
+    $action-opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
+    opacity: calc($chip-opacity + $action-opacity);
   }
 }
 
@@ -544,6 +547,22 @@ $fallbacks: m3-chip.get-tokens();
   background-color: token-utils.slot(chip-selected-trailing-action-state-layer-color, $fallbacks);
 }
 
+.mat-mdc-chip.cdk-focused {
+  $chip-opacity: token-utils.slot(chip-selected-focus-state-layer-opacity, $fallbacks);
+
+  .mat-mdc-chip-edit, .mat-mdc-chip-remove {
+    &:focus::after {
+      $action-opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
+      opacity: calc($chip-opacity + $action-opacity);
+    }
+
+    &:hover::after {
+      $action-opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
+      opacity: calc($chip-opacity + $action-opacity);
+    }
+  }
+}
+
 .mat-mdc-standard-chip {
   -webkit-tap-highlight-color: transparent;
 
