fix(material-experimental/theming): Fix chip trailing icon opacity in M3

angular · Feb 5, 2024 · a1efcd8 · a1efcd8
1 parent 32f86e4
commit a1efcd8
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -206,6 +206,8 @@
         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),
+    trailing-action-opacity: _hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: _hardcode(1, $exclude-hardcoded),
   ), (
     primary: (
       selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
@@ -278,6 +280,7 @@
       selected-focus-state-layer-opacity:
         map.get($systems, md-sys-state, focus-state-layer-opacity),
       with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
+      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -23,6 +23,8 @@
   }
 
   // Add additional slots for the MDC chip tokens, needed in Angular Material.
+  $disabled-trailing-icon-opacity: 1;
+
   @include token-utils.use-tokens(tokens-mdc-chip.$prefix, $mdc-chip-token-slots) {
     .mat-mdc-chip-focus-overlay {
       @include token-utils.create-token-slot(background, focus-state-layer-color);
@@ -56,6 +58,14 @@
       @include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity);
     }
 
+    .mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
+      $disabled-trailing-icon-opacity:
+        token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity);
+
+      @include token-utils.create-token-slot(
+          opacity, with-trailing-icon-disabled-trailing-icon-opacity);
+    }
+
     .mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark {
       @include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity);
     }
@@ -81,6 +91,12 @@
     }
 
     .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);
       }
@@ -98,6 +114,24 @@
       @include token-utils.create-token-slot(
           background, selected-trailing-action-state-layer-color);
     }
+
+    // If the trailing icon is a chip-remove button, we have to factor in the trailing action
+    // opacity as well as the disabled opacity.
+    .mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing  {
+      &.mat-mdc-chip-remove {
+        opacity: calc(
+          var(#{token-utils.get-token-variable(trailing-action-opacity)}) *
+          var(#{$disabled-trailing-icon-opacity})
+        );
+
+        &:focus {
+          opacity: calc(
+            var(#{token-utils.get-token-variable(trailing-action-focus-opacity)}) *
+            var(#{$disabled-trailing-icon-opacity})
+          );
+        }
+      }
+    }
   }
 }
 
@@ -307,14 +341,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});

diff --git a/src/material/core/tokens/m2/mat/_chip.scss b/src/material/core/tokens/m2/mat/_chip.scss
@@ -12,6 +12,8 @@ $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,

diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss
@@ -55,6 +55,8 @@ $prefix: (mdc, chip);
     flat-selected-outline-width: 0,
     // The opacity of the chip's state overlay when selected and hovered.
     selected-hover-state-layer-opacity: 0.04,
+    // The opacity of the chip's trailing icon when it is disabled.
+    with-trailing-icon-disabled-trailing-icon-opacity: 1,
     // The opacity of the chip's leading icon when it is disabled.
     with-icon-disabled-icon-opacity: 1,
     // Not used by MDC.
@@ -76,8 +78,6 @@ $prefix: (mdc, chip);
     // Not used by MDC.
     with-leading-icon-leading-icon-size: null,
     // Not used by MDC.
-    with-trailing-icon-disabled-trailing-icon-opacity: null,
-    // Not used by MDC.
     with-trailing-icon-trailing-icon-size: null,
     // Elevated chips not implemented.
     container-elevation: null,