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.

Author: zarend

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) {

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

src/material/core/tokens/m2/mdc/_chip.scss

@@ -92,6 +92,8 @@ $prefix: (mdc, chip);
     elevated-selected-container-elevation: null,
     // Elevated chips not implemented.
     elevated-unselected-container-color: null,
+    // Unused.
+    focus-label-text-color: null,
     // Elevated chips not implemented.
     flat-container-elevation: null,
     // Our chips do not have a border.
@@ -131,14 +133,8 @@ $prefix: (mdc, chip);
     // Unused.
     flat-unselected-pressed-container-elevation: null,
     // Unused.
-    focus-label-text-color: null,
-    // 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,16 +230,24 @@ $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,
     // The background-color of the 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.