refactor(material/core): simplify token utils (#29430)

Reworks the logic for generating tokens so it doesn't have external dependencies.

(cherry picked from commit f9cc932)

Author: crisbeto

src/material/core/tokens/_token-utils.scss

@@ -1,9 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/keys' as mdc-keys;
+@use 'sass:string';
 @use '@material/tokens/v0_161' as mdc-tokens;
 @use '../style/elevation';
 @use '../style/sass-utils';
@@ -57,27 +55,33 @@ $placeholder-density-config: 0;
 $_tokens: null;
 $_component-prefix: null;
 
-@mixin _configure-token-prefix($first, $rest...) {
-  $_component-prefix: '' !global;
-  @each $item in $rest {
-    $_component-prefix:
-      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
-  }
-  @include mdc-custom-properties.configure($varname-prefix: $first) {
-    @content;
-  }
-  $_component-prefix: null !global;
-}
-
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
+  $_component-prefix: $prefix !global;
   $_tokens: $tokens !global;
-  @include _configure-token-prefix($prefix...) {
-    @content;
-  }
+
+  @content;
+
+  $_component-prefix: null !global;
   $_tokens: null !global;
 }
 
+// Combines a prefix and a string to generate a CSS variable name for a token.
+@function _get-css-variable($prefix, $name) {
+  @if $prefix == null or $name == null {
+    @error 'Must specify both prefix and name when generating token';
+  }
+
+  $string-prefix: '';
+
+  // Prefixes are lists so we need to combine them.
+  @each $part in $prefix {
+    $string-prefix: if($string-prefix == '', $part, '#{$string-prefix}-#{$part}');
+  }
+
+  @return string.unquote('--#{$string-prefix}-#{$name}');
+}
+
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
 @mixin create-token-slot($property, $token, $emit-fallback: false) {
@@ -97,8 +101,9 @@ $_component-prefix: null;
       $fallback: $emit-fallback;
     }
 
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
-    @include mdc-theme.property($property, $value);
+    $var-name: _get-css-variable($_component-prefix, $token);
+    $var-reference: if($fallback == null, var(#{$var-name}), var(#{$var-name}, #{$fallback}));
+    #{$property}: #{$var-reference};
   }
 }
 
@@ -112,7 +117,7 @@ $_component-prefix: null;
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+  @return _get-css-variable($_component-prefix, $token);
 }
 
 // TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
@@ -137,9 +142,14 @@ $_component-prefix: null;
   }
 }
 
+// Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @include _configure-token-prefix($prefix...) {
-    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  @if $tokens != null {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        #{_get-css-variable($prefix, $key)}: #{$value};
+      }
+    }
   }
 }
 

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

@@ -89,8 +89,10 @@ $prefix: (mdc, switch);
       disabled-unselected-icon-color: $icon-color,
       // Color of track when disabled.
       disabled-unselected-track-color: $on-surface,
+      // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mdc-surface-color, #fff)`
+      // which made it basically hardcoded to #fff. Should it be based on the theme?
       // Color of slide-toggle handle's surface.
-      handle-surface-color: surface,
+      handle-surface-color: #fff,
       // Color of icon (ex. checkmark) when selected
       selected-icon-color: $icon-color,
       // Color of handle when unselected and focused.