From a806e6147e471c03e727994f2eb38ae02eb7afc7 Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Tue, 6 Jun 2023 02:09:33 +0000
Subject: [PATCH] refactor(material/chips): Use tokens for state layer

Refactors how the state layer for chips components is styled. Use the
`focus-state-layer-color` and `focus-state-layer-opacity` to style the
focus state layer.

Does not make visual changes.
---
 src/material/chips/_chips-theme.scss       |  4 ----
 src/material/chips/chip.scss               |  9 +++++++++
 src/material/core/tokens/m2/mdc/_chip.scss | 12 ++++++++----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index f727dc6c7d3e..40cababb87a7 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -58,10 +58,6 @@
       }
     }
   }
-
-  .mat-mdc-chip-focus-overlay {
-    background: map.get(map.get($config, foreground), base);
-  }
 }
 
 @mixin typography($config-or-theme) {
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 19d65c1fdf57..1253c1e5c960 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -5,6 +5,7 @@
 @use '../core/style/layout-common';
 @use '../core/focus-indicators/private' as focus-indicators-private;
 @use '../core/tokens/m2/mdc/chip' as m2-mdc-chip;
+@use '../core/tokens/token-utils';
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 
 // The slots for tokens that will be configured in the theme can be emitted with no fallback.
@@ -21,6 +22,14 @@
     // Add default values for tokens that aren't outputted by the theming API.
     @include mdc-chip-theme.theme(m2-mdc-chip.get-unthemable-tokens());
   }
+
+  // Add additional slots for the MDC chip tokens, needed in Angular Material.
+  @include token-utils.use-tokens(m2-mdc-chip.$prefix, $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);
+    }
+  }
 }
 
 // We *should* be able to include these styles through MDC's
diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss
index db18f9fa7acd..b1d562df7203 100644
--- a/src/material/core/tokens/m2/mdc/_chip.scss
+++ b/src/material/core/tokens/m2/mdc/_chip.scss
@@ -135,10 +135,6 @@ $prefix: (mdc, chip);
     // Unused.
     focus-outline-color: null,
     // Unused.
-    focus-state-layer-color: null,
-    // Unused.
-    focus-state-layer-opacity: null,
-    // Unused.
     hover-label-text-color: null,
     // Unused.
     hover-state-layer-color: null,
@@ -234,9 +230,13 @@ $prefix: (mdc, chip);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
   $palette: map.get($config, primary);
+
   $background: theming.get-color-from-palette($palette);
   $foreground: theming.get-color-from-palette($palette, default-contrast);
 
+  $state-layer-color: theming.get-color-from-palette(map.get($config, foreground), base);
+  $state-layer-opacity: 0.12; // 0.12 is a common value in Material Design for opacity.
+
   @return (
     // The text color of a disabled chip.
     disabled-label-text-color: $foreground,
@@ -244,6 +244,10 @@ $prefix: (mdc, chip);
     elevated-container-color: $background,
     // The background-color of a disabled chip.
     elevated-disabled-container-color: $background,
+    // The color of the focus state layer.
+    focus-state-layer-color: $state-layer-color,
+    // The opacity of the focus state layer.
+    focus-state-layer-opacity: $state-layer-opacity,
     // The chip text color.
     label-text-color: $foreground,
     // The icon color of a chip.