refactor(material/core): use util to build token vars

src/material/badge/badge.scss

@@ -10,8 +10,8 @@ $large-size: $default-size + 6;
 @mixin _badge-size($size) {
   @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
     $prefix: if($size == 'medium', '', $size + '-size-');
-    $legacy-size-var: token-utils.get-token-variable('legacy-#{$prefix}container-size');
-    $size-var: token-utils.get-token-variable('#{$prefix}container-size');
+    $legacy-size-var-name: 'legacy-#{$prefix}container-size';
+    $size-var-name: '#{$prefix}container-size';
 
     .mat-badge-content {
       // The M2 badge is implemented incorrectly because it uses `width` and `height` for its
@@ -22,11 +22,12 @@ $large-size: $default-size + 6;
       // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy
       // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to
       // grow with the content.
-      width: var(#{$legacy-size-var}, unset);
-      height: var(#{$legacy-size-var}, unset);
-      min-width: var(#{$size-var}, unset);
-      min-height: var(#{$size-var}, unset);
-      line-height: var($legacy-size-var, var(#{$size-var}));
+      width: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
+      height: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
+      min-width: token-utils.get-token-variable($size-var-name, $fallback: unset);
+      min-height: token-utils.get-token-variable($size-var-name, $fallback: unset);
+      line-height: token-utils.get-token-variable(
+          $legacy-size-var-name, $fallback: token-utils.get-token-variable($size-var-name));
       @include token-utils.create-token-slot(padding, '#{$prefix}container-padding');
       @include token-utils.create-token-slot(font-size, '#{$prefix}text-size');
       @include token-utils.create-token-slot(margin, '#{$prefix}container-offset');

src/material/button-toggle/button-toggle.scss

@@ -52,12 +52,11 @@ $_standard-tokens: (
 .mat-button-toggle-group-appearance-standard {
   @include token-utils.use-tokens($_standard-tokens...) {
     @include token-utils.create-token-slot(border-radius, shape);
-    border: solid 1px var(#{token-utils.get-token-variable(divider-color)});
+    border: solid 1px token-utils.get-token-variable(divider-color);
 
     .mat-pseudo-checkbox {
-      --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
-        #{token-utils.get-token-variable(selected-state-text-color)}
-      );
+      --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
+          token-utils.get-token-variable(selected-state-text-color)};
     }
   }
 
@@ -92,9 +91,8 @@ $_standard-tokens: (
     @include token-utils.create-token-slot(font-weight, label-text-weight);
     @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
 
-    --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(
-      #{token-utils.get-token-variable(selected-state-text-color)}
-    );
+    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #{
+        token-utils.get-token-variable(selected-state-text-color)};
 
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
@@ -126,9 +124,8 @@ $_standard-tokens: (
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(color, disabled-state-text-color);
     @include token-utils.create-token-slot(background-color, disabled-state-background-color);
-    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
-      #{token-utils.get-token-variable(disabled-state-text-color)}
-    );
+    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
+        token-utils.get-token-variable(disabled-state-text-color)};
 
     &.mat-button-toggle-checked {
       @include token-utils.create-token-slot(background-color,
@@ -139,7 +136,7 @@ $_standard-tokens: (
 
 .mat-button-toggle-appearance-standard {
   @include token-utils.use-tokens($_standard-tokens...) {
-    $divider-color: var(#{token-utils.get-token-variable(divider-color)});
+    $divider-color: token-utils.get-token-variable(divider-color);
     @include token-utils.create-token-slot(color, text-color);
     @include token-utils.create-token-slot(background-color, background-color);
     @include token-utils.create-token-slot(font-family, label-text-font);
@@ -173,9 +170,8 @@ $_standard-tokens: (
       @include token-utils.create-token-slot(background-color, disabled-state-background-color);
 
       .mat-pseudo-checkbox {
-        --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: var(
-          #{token-utils.get-token-variable(disabled-selected-state-text-color)}
-        );
+        --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #{
+            token-utils.get-token-variable(disabled-selected-state-text-color)};
       }
 
       &.mat-button-toggle-checked {

src/material/button/_button-base.scss

@@ -112,7 +112,7 @@
 // Adds an elevation shadow to a button.
 @mixin mat-private-button-elevation($token-name) {
   // MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
-  box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
+  box-shadow: token-utils.get-token-variable($token-name + '-shadow');
 }
 
 @mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
@@ -139,14 +139,14 @@
 
 @mixin mat-private-button-horizontal-layout($prefix, $slots, $has-with-icon-padding) {
   @include token-utils.use-tokens($prefix, $slots) {
-    $icon-spacing: token-utils.get-token-variable-reference(icon-spacing, true);
-    $icon-offset: token-utils.get-token-variable-reference(icon-offset, true);
-    $horizontal-padding: token-utils.get-token-variable-reference(horizontal-padding, true);
+    $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
+    $icon-offset: token-utils.get-token-variable(icon-offset, true);
+    $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
     padding: 0 $horizontal-padding;
 
     @if ($has-with-icon-padding) {
       $with-icon-horizontal-padding:
-        token-utils.get-token-variable-reference(with-icon-horizontal-padding, true);
+        token-utils.get-token-variable(with-icon-horizontal-padding, true);
 
       // stylelint-disable-next-line selector-class-pattern
       &:has(.material-icons, mat-icon, [matButtonIcon]) {

src/material/button/icon-button.scss

@@ -33,8 +33,8 @@
 
   @include token-utils.use-tokens(
     tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) {
-    $button-size: var(#{token-utils.get-token-variable(state-layer-size)}, 48px);
-    $icon-size: var(#{token-utils.get-token-variable(icon-size)}, 24px);
+    $button-size: token-utils.get-token-variable(state-layer-size, $fallback: 48px);
+    $icon-size: token-utils.get-token-variable(icon-size, $fallback: 24px);
 
     // We emit these tokens ourselves here so we can provide a default value.
     // This avoids a lot internal breakages in apps that didn't include the icon button theme.

src/material/checkbox/_checkbox-common.scss

@@ -31,10 +31,9 @@ $_fallback-size: 40px;
     vertical-align: bottom;
 
     @include token-utils.use-tokens($prefix, $slots) {
-      $layer-size: token-utils.get-token-variable(state-layer-size);
-      padding: calc((var(#{$layer-size}, #{$_fallback-size}) - #{$_icon-size}) / 2);
-      margin: calc((var(#{$layer-size}, #{$_fallback-size}) -
-        var(#{$layer-size}, #{$_fallback-size})) / 2);
+      $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
+      padding: calc((#{$layer-size} - #{$_icon-size}) / 2);
+      margin: calc((#{$layer-size} - #{$layer-size}) / 2);
 
       @if ($include-state-layer-styles) {
         @include _state-layer-styles;
@@ -51,11 +50,10 @@ $_fallback-size: 40px;
       cursor: inherit;
 
       @include token-utils.use-tokens($prefix, $slots) {
-        $layer-size: token-utils.get-token-variable(state-layer-size);
-        $offset: calc((var(#{$layer-size}, #{$_fallback-size}) -
-          var(#{$layer-size}, #{$_fallback-size})) / 2);
-        width: var(#{$layer-size}, #{$_fallback-size});
-        height: var(#{$layer-size}, #{$_fallback-size});
+        $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
+        $offset: calc((#{$layer-size} - #{$layer-size}) / 2);
+        width: $layer-size;
+        height: $layer-size;
         top: $offset;
         right: $offset;
         left: $offset;
@@ -85,8 +83,8 @@ $_fallback-size: 40px;
                 border-color $_transition-duration $_exit-curve;
 
     @include token-utils.use-tokens($prefix, $slots) {
-      $layer-size: token-utils.get-token-variable(state-layer-size);
-      $offset: calc((var(#{$layer-size}, $_fallback-size) - #{$_icon-size}) / 2);
+      $layer-size: token-utils.get-token-variable(state-layer-size, $fallback: $_fallback-size);
+      $offset: calc((#{$layer-size} - #{$_icon-size}) / 2);
 
       @include token-utils.create-token-slot(border-color, unselected-icon-color);
       top: $offset;

src/material/chips/chip.scss

@@ -370,23 +370,19 @@ $_avatar-trailing-padding: 8px;
   $disabled-icon-opacity: null;
   @include token-utils.use-tokens(tokens-mdc-chip.$prefix, tokens-mdc-chip.get-token-slots()) {
     $disabled-icon-opacity:
-      #{token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity)};
+      token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity);
   }
 
   // If the trailing icon is a chip-remove button, we have to factor in the trailing action
   // opacity as well as the disabled opacity.
   .mdc-evolution-chip--disabled &.mat-mdc-chip-remove {
     @include token-utils.use-tokens(tokens-mat-chip.$prefix, tokens-mat-chip.get-token-slots()) {
-      opacity: calc(
-        var(#{token-utils.get-token-variable(trailing-action-opacity)}) *
-        var(#{$disabled-icon-opacity})
-      );
+      $action-opacity: token-utils.get-token-variable(trailing-action-opacity);
+      opacity: calc(#{$action-opacity} * #{$disabled-icon-opacity});
 
       &:focus {
-        opacity: calc(
-          var(#{token-utils.get-token-variable(trailing-action-focus-opacity)}) *
-          var(#{$disabled-icon-opacity})
-        );
+        $action-focus-opacity: token-utils.get-token-variable(trailing-action-focus-opacity);
+        opacity: calc(#{$action-focus-opacity} * #{$disabled-icon-opacity});
       }
     }
   }
@@ -458,7 +454,7 @@ $_avatar-trailing-padding: 8px;
     );
 
     @each $selected, $base in $highlighted-remapped-tokens {
-      #{token-utils.get-token-variable($selected)}: var(token-utils.get-token-variable($base));
+      #{token-utils.get-token-variable-name($selected)}: token-utils.get-token-variable($base);
     }
   }
 }

src/material/core/option/option.scss

@@ -185,9 +185,9 @@ $_side-padding: 16px;
   // due to `list-item-selected-container-color` being the same as `list-item-container-color`,
   // but that's no longer the case in M3. This overrides ensures that the appearance is consistent.
   @include token-utils.use-tokens(tokens-mdc-list.$prefix, tokens-mdc-list.get-token-slots()) {
-    $selected-token: token-utils.get-token-variable(list-item-selected-container-color);
-    $base-token: token-utils.get-token-variable(list-item-container-color);
-    #{$selected-token}: var(#{$base-token}, transparent);
+    $selected-token: token-utils.get-token-variable-name(list-item-selected-container-color);
+    $base-token: token-utils.get-token-variable(list-item-container-color, $fallback: transparent);
+    #{$selected-token}: $base-token;
   }
 }
 

src/material/core/ripple/_ripple.scss

@@ -40,7 +40,7 @@
     @include token-utils.use-tokens(
       tokens-mat-ripple.$prefix, tokens-mat-ripple.get-token-slots()) {
       // We have to emit a fallback value here, because some internal builds depend on it.
-      background-color: var(#{token-utils.get-token-variable(color)}, rgba(#000, 0.1));
+      background-color: token-utils.get-token-variable(color, $fallback: rgba(#000, 0.1));
     }
 
     // In high contrast mode the ripple is opaque, causing it to obstruct the content.

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

@@ -111,7 +111,7 @@ $_component-prefix: null;
 
 // Returns the name of a token including the current prefix. Intended to be used in calculations
 // involving tokens. `create-token-slot` should be used when outputting tokens.
-@function get-token-variable($token) {
+@function get-token-variable-name($token) {
   @if $_component-prefix == null or $_tokens == null {
     @error '`get-token-variable` must be used within `use-tokens`';
   }
@@ -122,19 +122,21 @@ $_component-prefix: null;
   @return _get-css-variable($_component-prefix, $token);
 }
 
-// TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
 // Returns a `var()` reference to a specific token. Intended for declarations
 // where the token has to be referenced as a part of a larger expression.
-@function get-token-variable-reference($token, $emit-fallback: false) {
+@function get-token-variable($token, $use-tokens-fallback: false, $fallback: null) {
   @if $_component-prefix == null or $_tokens == null {
     @error '`get-token-variable-reference` must be used within `use-tokens`';
   }
   @if not map.has-key($_tokens, $token) {
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  $var: get-token-variable($token);
-  $fallback: if($emit-fallback, map.get($_tokens, $token), null);
+  $var: get-token-variable-name($token);
+
+  @if ($use-tokens-fallback) {
+    $fallback: map.get($_tokens, $token);
+  }
 
   @if ($fallback != null) {
     @return var($var, $fallback);

src/material/datepicker/calendar-body.scss

@@ -303,18 +303,16 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(
 
     &.mat-calendar-body-today {
       $shadow: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
-      box-shadow: inset 0 0 0 1px var(#{$shadow});
+      box-shadow: inset 0 0 0 1px #{$shadow};
     }
   }
 }
 
 @include token-utils.use-tokens($_tokens...) {
-  $range-var-name:
+  $range-color:
     token-utils.get-token-variable(calendar-date-in-range-state-background-color);
-  $comparison-var-name:
+  $comparison-color:
     token-utils.get-token-variable(calendar-date-in-comparison-range-state-background-color);
-  $comparison-color: var(#{$comparison-var-name});
-  $range-color:  var(#{$range-var-name});
 
   .mat-calendar-body-in-range::before {
     @include token-utils.create-token-slot(background,

src/material/form-field/_mdc-text-field-density-overrides.scss

@@ -16,7 +16,7 @@
     .mat-mdc-form-field-infix {
       // We add a minimum height to the infix container to ensure that custom controls have the
       // same default vertical space as text-field inputs (with respect to the vertical padding).
-      min-height: var(#{$height});
+      min-height: #{$height};
 
       @include token-utils.create-token-slot(padding-top,
         filled-with-label-container-padding-top);
@@ -35,12 +35,12 @@
     // form-field because we do not know what type of form-field control is set up. Hence
     // we always use a fixed position for the label. This does not have any implications.
     .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-      top: calc(var(#{$height}) / 2);
+      top: calc(#{$height} / 2);
     }
 
     // We need to conditionally hide the floating label based on the height of the form field.
     .mdc-text-field--filled .mat-mdc-floating-label {
-      display: var(#{token-utils.get-token-variable(filled-label-display)}, block);
+      display: token-utils.get-token-variable(filled-label-display, $fallback: block);
     }
 
     // For the outline appearance, we re-create the active floating label transform. This is
@@ -50,7 +50,7 @@
     .mdc-floating-label--float-above {
       // Needs to be in a string form to work around an internal check that incorrectly flags this
       // interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
-      $offset: 'calc(6.75px + var(#{$height}) / 2)';
+      $offset: 'calc(6.75px + #{$height} / 2)';
       $translate: 'calc(#{$offset} * -1)';
       --mat-mdc-form-field-label-transform: translateY(#{$translate})
         scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));

src/material/form-field/_mdc-text-field-structure.scss

@@ -130,12 +130,12 @@
     @include _supports-max {
       @include token-utils.use-tokens($outlined-slots...) {
         $shape-var: token-utils.get-token-variable(container-shape);
-        padding-right: max(16px, var(#{$shape-var}));
-        padding-left: max(16px, calc(var(#{$shape-var}) + 4px));
+        padding-right: max(16px, #{$shape-var});
+        padding-left: max(16px, calc(#{$shape-var} + 4px));
 
         [dir='rtl'] & {
-          padding-right: max(16px, calc(var(#{$shape-var}) + 4px));
-          padding-left: max(16px, var(#{$shape-var}));
+          padding-right: max(16px, calc(#{$shape-var} + 4px));
+          padding-left: max(16px, #{$shape-var});
         }
       }
     }
@@ -345,7 +345,7 @@
       @include _supports-max {
         .mdc-text-field--outlined .mdc-notched-outline & {
           $shape-var: token-utils.get-token-variable(container-shape);
-          width: max(12px, var(#{$shape-var}));
+          width: max(12px, #{$shape-var});
         }
       }
     }
@@ -397,7 +397,7 @@
       @include _supports-max {
         .mdc-text-field--outlined .mdc-notched-outline & {
           $shape-var: token-utils.get-token-variable(container-shape);
-          max-width: calc(100% - max(12px, var(#{$shape-var})) * 2);
+          max-width: calc(100% - max(12px, #{$shape-var}) * 2);
         }
       }
     }

src/material/form-field/form-field.scss

@@ -59,7 +59,7 @@ $_icon-prefix-infix-padding: 4px;
     @include token-utils.create-token-slot(font-weight, container-text-weight);
 
     .mdc-text-field--outlined {
-      $token-value: var(#{token-utils.get-token-variable(outlined-label-text-populated-size)});
+      $token-value: token-utils.get-token-variable(outlined-label-text-populated-size);
 
       // For the non-upgraded notch label (i.e. when rendered on the server), also
       // use the correct typography.

src/material/grid-list/grid-list.scss

@@ -74,7 +74,7 @@ $text-padding: 16px;
   @include token-utils.use-tokens(
     tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
     $secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size);
-    @include list-common.base(var(#{$secondary-token-name}));
+    @include list-common.base(#{$secondary-token-name});
     @include token-utils.create-token-slot(font-size, tile-header-primary-text-size);
   }
 }
@@ -83,7 +83,7 @@ $text-padding: 16px;
   @include token-utils.use-tokens(
     tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
     $secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size);
-    @include list-common.base(var(#{$secondary-token-name}));
+    @include list-common.base(#{$secondary-token-name});
     @include token-utils.create-token-slot(font-size, tile-footer-primary-text-size);
   }
 }