From 411e3bee599837dcfc6666483791ec755b4a68a4 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Tue, 3 Jun 2025 09:24:33 -0600
Subject: [PATCH 1/2] fix(material/chips): update tokens to system colors

---
 src/material/chips/_m2-chip.scss | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index e4a31c582d33..7c7372bf3554 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -40,38 +40,24 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $color-variant: null) {
   $system: m2-utils.get-system($theme);
-  $foreground: null;
-  $background: null;
-  $state-layer-color: inspection.get-theme-color($theme, foreground, base);
+  $background: m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+  $foreground: map.get($system, on-surface);
 
-  @if $color-variant == null {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(m2-palette.$grey-palette, 50);
-    $grey-900: map.get(m2-palette.$grey-palette, 900);
-    $foreground: if($is-dark, $grey-50, $grey-900);
-
-    $surface: map.get($system, surface);
-    $background: if(
-        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
-        color.mix($state-layer-color, $surface, 12%),
-        $state-layer-color
-    );
-  }
-  @else {
+  @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
     $background: map.get($system, primary);
     $foreground: map.get($system, on-primary);
   }
+
   @return (
     chip-disabled-label-text-color: $foreground,
     chip-elevated-container-color: $background,
     chip-elevated-disabled-container-color: $background,
     chip-elevated-selected-container-color: $background,
     chip-flat-disabled-selected-container-color: $background,
-    chip-focus-state-layer-color: $state-layer-color,
+    chip-focus-state-layer-color: map.get($system, on-surface),
     chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    chip-hover-state-layer-color: $state-layer-color,
+    chip-hover-state-layer-color: map.get($system, on-surface),
     chip-label-text-color: $foreground,
     chip-selected-disabled-trailing-icon-color: $foreground,
     chip-selected-focus-state-layer-color: map.get($system, focus-state-layer-opacity),

From c1ba3322917cd880fa2cbb84ed8ce208327de31e Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Tue, 3 Jun 2025 09:27:58 -0600
Subject: [PATCH 2/2] fix(material/chips): fix lint

---
 src/material/chips/_m2-chip.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index 7c7372bf3554..3339040198c5 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -1,8 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
 @use '../core/theming/inspection';
-@use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';