fix some disabled states

angular · Feb 1, 2024 · a7866b6 · a7866b6
1 parent 2890655
commit a7866b6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -250,16 +250,10 @@
       ),
       with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
       with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-icon-disabled-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
       with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
       with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
+      with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
       focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
       focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
       outline-width: _hardcode(1px, $exclude-hardcoded),
@@ -285,6 +279,8 @@
       selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
       selected-focus-state-layer-opacity:
         map.get($systems, md-sys-state, focus-state-layer-opacity),
+      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
+      with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -55,30 +55,43 @@
     .mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) .mat-mdc-chip-avatar {
       @include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity);
     }
+
+    .mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) {
+      .mdc-evolution-chip__icon--trailing {
+        @include token-utils.create-token-slot(
+            opacity, with-trailing-icon-disabled-trailing-icon-opacity);
+      }
+    }
+
+    .mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark {
+      @include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity);
+    }
   }
 
   @include token-utils.use-tokens(tokens-mat-chip.$prefix, $mat-chip-token-slots) {
     // Historically, MDC did not support disabled chips, so we needed our own disabled styles.
     // Now that MDC supports disabled styles, we should switch to using theirs.
-    .mat-mdc-standard-chip.mat-mdc-chip-selected.mdc-evolution-chip--disabled {
-      @include token-utils.create-token-slot(opacity, disabled-container-opacity);
-    }
-
-    .mat-mdc-standard-chip.mat-mdc-chip-selected:not(.mdc-evolution-chip--disabled) {
-      .mdc-evolution-chip__icon--trailing {
-        @include token-utils.create-token-slot(color, selected-trailing-icon-color);
+    .mat-mdc-standard-chip {
+      &.mdc-evolution-chip--disabled {
+        @include token-utils.create-token-slot(opacity, disabled-container-opacity);
       }
-    }
 
-    .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);
+      &.mdc-evolution-chip--selected {
+        .mdc-evolution-chip__icon--trailing {
+          @include token-utils.create-token-slot(color, selected-trailing-icon-color);
+        }
+
+        &.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);
+      filter: opacity(var(#{token-utils.get-token-variable(trailing-action-opacity)}));
 
       &:focus {
-        @include token-utils.create-token-slot(opacity, trailing-action-focus-opacity);
+        filter: opacity(var(#{token-utils.get-token-variable(trailing-action-focus-opacity)}));
       }
 
       &::after {

diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss
@@ -55,6 +55,10 @@ $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.
     disabled-label-text-opacity: null,
     // Not used by MDC.
@@ -70,14 +74,10 @@ $prefix: (mdc, chip);
     // Our chips do not have a border.
     flat-unselected-outline-width: null,
     // Not used by MDC.
-    with-icon-disabled-icon-opacity: null,
-    // Not used by MDC.
     with-leading-icon-disabled-leading-icon-opacity: null,
     // 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,