From 8f16c18391f153fb832432b2803cec6b3463a5e7 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Fri, 13 Jun 2025 14:17:00 -0600
Subject: [PATCH 1/2] fix(material/autocomplete): define m2 token values inline

---
 .../autocomplete/_autocomplete-theme.scss     | 37 ++++++++-----------
 src/material/core/tokens/_token-utils.scss    | 11 ++++++
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
index 389b71352a8e..e4b332728edb 100644
--- a/src/material/autocomplete/_autocomplete-theme.scss
+++ b/src/material/autocomplete/_autocomplete-theme.scss
@@ -8,44 +8,39 @@
 @use 'm3-autocomplete';
 
 @mixin base($theme) {
+  $tokens: m2-autocomplete.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), base));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-autocomplete.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: m2-autocomplete.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), color));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-autocomplete.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-autocomplete.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        map.get(m3-autocomplete.get-tokens($theme), typography));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-autocomplete.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: m2-autocomplete.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-autocomplete.get-tokens($theme), density));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-autocomplete.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 0018fb5d7072..3a38b41cf090 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -69,6 +69,17 @@
   @return _create-var(--mat-#{$token}, $sys-fallback);
 }
 
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include sass-utils.current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --mat-#{$key}: #{$value};
+      }
+    }
+  }
+}
+
 // Outputs a map of tokens.
 @mixin create-token-values($tokens) {
   @include _create-token-values-internal($tokens, false);

From 7a8cc429841f4b3d45c77bc3e1793d3b7e62bee9 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@google.com>
Date: Fri, 13 Jun 2025 15:10:13 -0600
Subject: [PATCH 2/2] refactor: fix tests

---
 src/material/autocomplete/_autocomplete-theme.scss | 1 -
 src/material/core/theming/_all-theme.scss          | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
index e4b332728edb..00f0c665b0b5 100644
--- a/src/material/autocomplete/_autocomplete-theme.scss
+++ b/src/material/autocomplete/_autocomplete-theme.scss
@@ -2,7 +2,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use 'm2-autocomplete';
 @use 'm3-autocomplete';
diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss
index e3536aaf087a..bc3660c3f872 100644
--- a/src/material/core/theming/_all-theme.scss
+++ b/src/material/core/theming/_all-theme.scss
@@ -43,6 +43,8 @@
 @mixin all-component-themes($theme) {
   $dedupe-key: 'angular-material-theme';
   @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) {
+    @include autocomplete-theme.theme($theme);
+
     @include core-theme.theme($theme);
     @include card-theme.theme($theme);
     @include progress-bar-theme.theme($theme);
@@ -50,7 +52,6 @@
     @include form-field-theme.theme($theme);
     @include input-theme.theme($theme);
     @include select-theme.theme($theme);
-    @include autocomplete-theme.theme($theme);
     @include dialog-theme.theme($theme);
     @include chips-theme.theme($theme);
     @include slide-toggle-theme.theme($theme);
@@ -126,6 +127,8 @@
 }
 
 @mixin all-component-colors($theme) {
+  @include autocomplete-theme.color($theme);
+
   @include core-theme.color($theme);
   @include card-theme.color($theme);
   @include progress-bar-theme.color($theme);
@@ -133,7 +136,6 @@
   @include form-field-theme.color($theme);
   @include input-theme.color($theme);
   @include select-theme.color($theme);
-  @include autocomplete-theme.color($theme);
   @include dialog-theme.color($theme);
   @include chips-theme.color($theme);
   @include slide-toggle-theme.color($theme);