fix(material/chips): Tokenize the hover & focus overlays (#28497)

This will give us the flexibility we need to implement M3 chips
angular · Jan 31, 2024 · 58764af · 58764af
1 parent 965ff55
commit 58764af
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
@@ -227,6 +227,9 @@
         $alpha: 0.12,
       ),
       focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      with-avatar-disabled-avatar-opacity: _hardcode(0.38, $exclude-hardcoded),
     ),
   ), (
     // Color variants:

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
@@ -26,7 +26,20 @@
   @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);
-      @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
+
+      .mat-mdc-chip:hover & {
+        @include token-utils.create-token-slot(background, hover-state-layer-color);
+        @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
+      }
+
+      .mat-mdc-chip.cdk-focused & {
+        @include token-utils.create-token-slot(background, focus-state-layer-color);
+        @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
+      }
+    }
+
+    .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);
     }
   }
 
@@ -175,14 +188,6 @@
   .mat-mdc-basic-chip & {
     display: none;
   }
-
-  .mat-mdc-chip:hover & {
-    opacity: 0.04;
-  }
-
-  .mat-mdc-chip.cdk-focused & {
-    opacity: 0.12;
-  }
 }
 
 // The ripple container should match the bounds of the entire chip.

diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss
@@ -47,6 +47,10 @@ $prefix: (mdc, chip);
     disabled-outline-color: transparent,
     // The chip's border color when focused.
     focus-outline-color: transparent,
+    // The opacity of the chip's state overlay when hovered.
+    hover-state-layer-opacity: 0.04,
+    // Not used by MDC.
+    with-avatar-disabled-avatar-opacity: 1,
     // Not used by MDC.
     disabled-label-text-opacity: null,
     // Not used by MDC.
@@ -64,8 +68,6 @@ $prefix: (mdc, chip);
     // Our chips do not have a border.
     flat-unselected-outline-width: null,
     // Not used by MDC.
-    with-avatar-disabled-avatar-opacity: null,
-    // Not used by MDC.
     with-icon-disabled-icon-opacity: null,
     // Not used by MDC.
     with-leading-icon-disabled-leading-icon-opacity: null,
@@ -142,10 +144,6 @@ $prefix: (mdc, chip);
     // Unused.
     hover-label-text-color: null,
     // Unused.
-    hover-state-layer-color: null,
-    // Unused.
-    hover-state-layer-opacity: null,
-    // Unused.
     pressed-label-text-color: null,
     // Unused.
     pressed-state-layer-color: null,
@@ -269,6 +267,8 @@ $prefix: (mdc, chip);
     elevated-disabled-container-color: $background,
     // The color of the focus state layer.
     focus-state-layer-color: $state-layer-color,
+    // The color of the hover state layer.
+    hover-state-layer-color: $state-layer-color,
     // The opacity of the focus state layer.
     focus-state-layer-opacity: $state-layer-opacity,
     // The chip text color.