From 864fc23eb9e75b923b2793f40bcff61f66f50836 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Mon, 16 Jun 2025 13:23:05 -0600
Subject: [PATCH] refactor: use values API for creating tokens

---
 src/material/button/_icon-button-theme.scss   | 10 -----
 src/material/checkbox/_checkbox-theme.scss    | 10 ++---
 src/material/chips/_chips-theme.scss          | 40 ++++++++-----------
 src/material/core/tokens/_token-utils.scss    | 33 +--------------
 src/material/icon/_icon-theme.scss            | 18 ++++-----
 .../snack-bar/snack-bar-container.scss        |  2 +-
 src/material/stepper/_stepper-theme.scss      |  8 ++--
 7 files changed, 35 insertions(+), 86 deletions(-)

diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 61b3466c8d2f..b864a57871fb 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/src/material/button/_icon-button-theme.scss
@@ -16,16 +16,6 @@
   @include token-utils.values($tokens);
 }
 
-@mixin _m2-icon-button-variant($theme, $palette) {
-  $mat-tokens: if(
-    $palette,
-    m2-icon-button.private-get-color-palette-color-tokens($theme, $palette),
-    m2-icon-button.get-color-tokens($theme)
-  );
-
-  @include token-utils.create-token-values-mixed($mat-tokens);
-}
-
 /// Outputs color theme styles for the mat-icon-button.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {String} $color-variant: The color variant to use for the
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 8c19a16fb3c6..9c1e0198e959 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/src/material/checkbox/_checkbox-theme.scss
@@ -32,16 +32,14 @@
   @if inspection.get-theme-version($theme) != 1 {
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include token-utils.create-token-values-mixed(
-            m2-checkbox.get-color-tokens($theme, primary,
-                $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
+        @include token-utils.values(m2-checkbox.get-color-tokens($theme, primary,
+          $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values-mixed(
-          m2-checkbox.get-color-tokens($theme, error,
-              $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
+        @include token-utils.values(m2-checkbox.get-color-tokens($theme, error,
+          $exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
         );
       }
     }
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
index b5e9ddcb8562..b2903ed67078 100644
--- a/src/material/chips/_chips-theme.scss
+++ b/src/material/chips/_chips-theme.scss
@@ -11,13 +11,12 @@
 /// for the mat-chips.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
+  $tokens: m2-chip.get-unthemable-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), base));
-  } @else {
-    .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-unthemable-tokens($theme));
-    }
+    $tokens: map.get(m3-chip.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs color theme styles for the mat-chips.
@@ -25,27 +24,24 @@
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
+    @include token-utils.values(
         map.get(m3-chip.get-tokens($theme, $color-variant), color));
   } @else {
     .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme));
+      @include token-utils.values(m2-chip.get-color-tokens($theme));
 
       &.mat-mdc-chip-selected,
       &.mat-mdc-chip-highlighted {
         &.mat-primary {
-          @include token-utils.create-token-values-mixed(
-              m2-chip.get-color-tokens($theme, primary));
+          @include token-utils.values(m2-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
-          @include token-utils.create-token-values-mixed(
-              m2-chip.get-color-tokens($theme, secondary));
+          @include token-utils.values(m2-chip.get-color-tokens($theme, secondary));
         }
 
         &.mat-warn {
-          @include token-utils.create-token-values-mixed(
-              m2-chip.get-color-tokens($theme, error));
+          @include token-utils.values(m2-chip.get-color-tokens($theme, error));
         }
       }
     }
@@ -55,25 +51,23 @@
 /// Outputs typography theme styles for the mat-chips.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: m2-chip.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), typography));
-  } @else {
-    .mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-chip.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs density theme styles for the mat-chips.
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: m2-chip.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-chip.get-tokens($theme), density));
-  } @else {
-    .mat-mdc-chip.mat-mdc-standard-chip {
-      @include token-utils.create-token-values-mixed(m2-chip.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-chip.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 3a38b41cf090..fdc07754e4d9 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -80,37 +80,6 @@
   }
 }
 
-// Outputs a map of tokens.
-@mixin create-token-values($tokens) {
-  @include _create-token-values-internal($tokens, false);
-}
-
-// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
-// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
-@mixin create-token-values-mixed($tokens) {
-  @include _create-token-values-internal($tokens, true);
-}
-
-@mixin _create-token-values-internal($tokens, $in-place) {
-  @if ($tokens != null) {
-    @if ($in-place) {
-      & {
-        @each $key, $value in $tokens {
-          @if $value != null {
-            --mat-#{$key}: #{$value};
-          }
-        }
-      }
-    } @else {
-      @each $key, $value in $tokens {
-        @if $value != null {
-          --mat-#{$key}: #{$value};
-        }
-      }
-    }
-  }
-}
-
 /// Emits new token values for the given token overrides.
 /// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
@@ -136,7 +105,7 @@
         $namespace: list.nth($data, 1);
         $name: list.nth($data, 2);
         $prefixed-name: $namespace + '-' + $name;
-        @include create-token-values(($prefixed-name: $value));
+        @include values(($prefixed-name: $value));
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }
diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss
index 75f5621b3216..6d93a9a1108e 100644
--- a/src/material/icon/_icon-theme.scss
+++ b/src/material/icon/_icon-theme.scss
@@ -5,12 +5,6 @@
 @use './m3-icon';
 @use 'sass:map';
 
-@mixin _palette-colors($theme, $palette-name) {
-  $color: inspection.get-theme-color($theme, $palette-name, text);
-  $tokens: m2-icon.private-get-icon-color-tokens($color);
-  @include token-utils.create-token-values-mixed($tokens);
-}
-
 @mixin base($theme) {
   $tokens: m2-icon.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
@@ -57,19 +51,23 @@
 /// Outputs typography theme styles for the mat-icon.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: m2-icon.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), typography));
-  } @else {
+    $tokens: map.get(m3-icon.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs density theme styles for the mat-icon.
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: m2-icon.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-icon.get-tokens($theme), density));
-  } @else {
+    $tokens: map.get(m3-icon.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/snack-bar/snack-bar-container.scss b/src/material/snack-bar/snack-bar-container.scss
index 965436cfde2e..f2ffe71c8a0b 100644
--- a/src/material/snack-bar/snack-bar-container.scss
+++ b/src/material/snack-bar/snack-bar-container.scss
@@ -142,7 +142,7 @@ $fallbacks: m3-snack-bar.get-tokens();
   }
 
   // Darken the ripples in the button so they're visible against the dark background.
-  @include token-utils.create-token-values-mixed((
+  @include token-utils.values((
     button-text-state-layer-color: currentColor,
     button-text-ripple-color: currentColor,
   ));
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index f98a3bb66126..81d45172c643 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -31,13 +31,13 @@
 
   @if inspection.get-theme-version($theme) != 1 {
     .mat-step-header.mat-accent {
-      @include token-utils.create-token-values-mixed(
-        m2-stepper.private-get-color-palette-color-tokens($theme, secondary));
+      $tokens: m2-stepper.private-get-color-palette-color-tokens($theme, secondary);
+      @include token-utils.values($tokens);
     }
 
     .mat-step-header.mat-warn {
-      @include token-utils.create-token-values-mixed(
-        m2-stepper.private-get-color-palette-color-tokens($theme, error));
+      $tokens: m2-stepper.private-get-color-palette-color-tokens($theme, error);
+      @include token-utils.values($tokens);
     }
   }
 }