fix(material/chips): adjust focus state layer color

Adjust the color of the focus state layer in light mode. Set the focus
state color in light mode to the 700 hue of the primary color palette.
Use tokens to adjust the color.

Does not affect dark mode.

Author: zarend

src/material/chips/_chips-theme.scss

@@ -11,6 +11,8 @@
 @function _get-default-palette($config) {
   $is-dark: map.get($config, is-dark);
   $grey-50: map.get(palette.$grey-palette, 50);
+  $grey-200: map.get(palette.$grey-palette, 200);
+  $grey-800: map.get(palette.$grey-palette, 800);
   $grey-900: map.get(palette.$grey-palette, 900);
   $default-foreground: if($is-dark, $grey-50, $grey-900);
 
@@ -26,7 +28,17 @@
     $on-surface
   );
 
-  @return (default: $default-background, default-contrast: $default-foreground);
+  $default-darker: if(
+    mdc-helpers.variable-safe-contrast-tone($surface, $is-dark) == 'dark',
+    $grey-800,
+    $grey-200,
+  );
+
+  @return (
+    default: $default-background,
+    default-contrast: $default-foreground,
+    darker: $default-darker,
+  );
 }
 
 @mixin color($config-or-theme) {
@@ -58,10 +70,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
@@ -294,4 +303,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,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,
@@ -233,9 +229,19 @@ $prefix: (mdc, chip);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
   $palette: map.get($config, primary);
+
   $background: theming.get-color-from-palette($palette);
   $foreground: theming.get-color-from-palette($palette, default-contrast);
+  $darker: theming.get-color-from-palette($palette, darker);
+
+  $state-layer-color: if(
+    $is-dark,
+    theming.get-color-from-palette(map.get($config, foreground), base),
+    $darker,
+  );
+  $state-layer-opacity: 0.12; // 0.12 is a common Material Design value for opacity.
 
   @return (
     // The text color of a disabled chip.
@@ -244,6 +250,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.