refactor(material/chips): implement state layer color using tokens

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,13 @@
     // 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);
+    }
+  }
 }
 
 // We *should* be able to include these styles through MDC's
@@ -294,4 +302,4 @@
 // a separate element, rather than on the focusable element itself.
 .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before {
   content: '';
-}
+}

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

@@ -135,8 +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,
@@ -237,13 +235,17 @@ $prefix: (mdc, chip);
   $background: theming.get-color-from-palette($palette);
   $foreground: theming.get-color-from-palette($palette, default-contrast);
 
+  $state-layer: theming.get-color-from-palette(map.get($config, foreground), base);
+
   @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 chip's state layer color.
+    focus-state-layer-color: $state-layer,
     // The chip text color.
     label-text-color: $foreground,
     // The icon color of a chip.