trailing icon state

angular · Jan 31, 2024 · 8abf4af · 8abf4af
1 parent 699995e
commit 8abf4af
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -195,16 +195,31 @@
     disabled-container-opacity: _hardcode(1, $exclude-hardcoded),
     selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
     selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+    trailing-action-opacity: 1,
+    trailing-action-focus-opacity: 1,
+    trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    selected-trailing-action-state-layer-color:
+        map.get($systems, md-sys-color, on-secondary-container),
+    trailing-action-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    trailing-action-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
   ), (
     primary: (
       selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-primary-container),
     ),
     secondary: (), // Default, no overrides needed.
     tertiary: (
       selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-tertiary-container),
     ),
     error: (
       selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-error-container),
     ),
   ));
 }

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -73,6 +73,30 @@
     .mat-mdc-standard-chip.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
       @include token-utils.create-token-slot(color, selected-disabled-trailing-icon-color);
     }
+
+    .mat-mdc-chip-remove {
+      @include token-utils.create-token-slot(opacity, trailing-action-opacity);
+
+      &:focus {
+        @include token-utils.create-token-slot(opacity, trailing-action-focus-opacity);
+      }
+
+      &::after {
+        @include token-utils.create-token-slot(background, trailing-action-state-layer-color);
+      }
+
+      &:hover::after {
+        @include token-utils.create-token-slot(opacity, trailing-action-hover-state-layer-opacity);
+      }
+
+      &:focus::after {
+        @include token-utils.create-token-slot(opacity, trailing-action-focus-state-layer-opacity);
+      }
+    }
+
+    .mat-mdc-chip-selected .mat-mdc-chip-remove::after {
+      @include token-utils.create-token-slot(background, selected-trailing-action-state-layer-color);
+    }
   }
 }
 
@@ -282,14 +306,6 @@
 }
 
 .mat-mdc-chip-remove {
-  // Fades out the trailing icon slightly so that it can become darker when focused.
-  // The MDC theming has variables for this, but the focus/hover states don't seem to work.
-  opacity: 0.54;
-
-  &:focus {
-    opacity: 1;
-  }
-
   &::before {
     $default-border-width: focus-indicators-private.$default-border-width;
     $offset: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width});
@@ -300,6 +316,20 @@
     right: 8px;
   }
 
+  // Used as a state overlay.
+  &::after {
+    $offset: 2px;
+    content: '';
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0 - $offset;
+    bottom: 0 - $offset;
+    left: 8px - $offset;
+    right: 8px - $offset;
+    border-radius: 50%;
+  }
+
   .mat-icon {
     width: inherit;
     height: inherit;

diff --git a/src/material/core/tokens/m2/mat/_chip.scss b/src/material/core/tokens/m2/mat/_chip.scss
@@ -12,6 +12,12 @@ $prefix: (mat, chip);
 @function get-unthemable-tokens() {
   @return (
     disabled-container-opacity: 0.4,
+    trailing-action-opacity: 0.54,
+    trailing-action-focus-opacity: 1,
+    trailing-action-state-layer-color: transparent,
+    selected-trailing-action-state-layer-color: transparent,
+    trailing-action-hover-state-layer-opacity: 0,
+    trailing-action-focus-state-layer-opacity: 0,
   );
 }