refactor: simplify component styles by removing use-tokens (#31146)

* refactor: simplify component styles by removing use-tokens

* refactor: fixes found from internal changes

* refactor: fixes found from internal changes

* refactor: fixes found from internal changes

* refactor: more fixes

(cherry picked from commit 7b5d88b)

Author: andrewseguin

src/dev-app/theme/theme-demo.scss

@@ -93,11 +93,11 @@ mat-expansion-panel {
   margin-top: 24px;
   overflow: visible;
   @include mat.expansion-overrides((
-    'container-text-font': var(--mat-sys-body-medium-font),
-    'container-text-size': var(--mat-sys-body-medium-size),
-    'container-text-weight': var(--mat-sys-body-medium-weight),
-    'container-text-line-height': var(--mat-sys-body-medium-line-height),
-    'container-text-tracking': var(--mat-sys-body-medium-tracking),
+    container-text-font: var(--mat-sys-body-medium-font),
+    container-text-size: var(--mat-sys-body-medium-size),
+    container-text-weight: var(--mat-sys-body-medium-weight),
+    container-text-line-height: var(--mat-sys-body-medium-line-height),
+    container-text-tracking: var(--mat-sys-body-medium-tracking),
   ));
 }
 

src/material/autocomplete/_autocomplete-theme.scss

@@ -9,60 +9,41 @@
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-autocomplete.$prefix,
-        map.get(m3-autocomplete.get-tokens($theme), base));
+    @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.$prefix,
-        m2-autocomplete.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-autocomplete.$prefix,
-        map.get(m3-autocomplete.get-tokens($theme), color));
+    @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.$prefix,
-        m2-autocomplete.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include token-utils.create-token-values(
-        m3-autocomplete.$prefix,
         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.$prefix,
-        m2-autocomplete.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-autocomplete.$prefix,
-        map.get(m3-autocomplete.get-tokens($theme), density));
+    @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.$prefix,
-        m2-autocomplete.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-autocomplete.get-density-tokens($theme));
     }
   }
 }
@@ -71,14 +52,14 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-autocomplete.$prefix,
-      tokens: m2-autocomplete.get-token-slots(),
+      namespace: autocomplete,
+      tokens: token-utils.get-overrides(m3-autocomplete.get-tokens(), autocomplete),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {

src/material/autocomplete/_m2-autocomplete.scss

@@ -3,22 +3,19 @@
 @use '../core/style/elevation';
 @use '../core/style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, autocomplete);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    container-shape: 4px,
-    container-elevation-shadow: elevation.get-box-shadow(8),
+    autocomplete-container-shape: 4px,
+    autocomplete-container-elevation-shadow: elevation.get-box-shadow(8),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    background-color: inspection.get-theme-color($theme, background, card)
+    autocomplete-background-color: inspection.get-theme-color($theme, background, card)
   );
 }
 

src/material/autocomplete/_m3-autocomplete.scss

@@ -1,24 +1,22 @@
 @use 'sass:map';
 @use '../core/style/elevation';
 @use '../core/tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, autocomplete);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-autocomplete.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the mat-autocomplete
-@function get-tokens($theme) {
+@function get-tokens($theme: m3.$sys-theme) {
   $system: m3-utils.get-system($theme);
   $tokens: (
     base: (
-      container-shape: map.get($system, corner-extra-small),
-      container-elevation-shadow: elevation.get-box-shadow(2),
+      autocomplete-container-shape: map.get($system, corner-extra-small),
+      autocomplete-container-elevation-shadow: elevation.get-box-shadow(2),
     ),
     color: (
-      background-color: map.get($system, surface-container),
+      autocomplete-background-color: map.get($system, surface-container),
     ),
     typography: (),
     density: (),

src/material/autocomplete/autocomplete.scss

@@ -1,12 +1,8 @@
 @use '@angular/cdk';
-@use './m2-autocomplete';
 @use './m3-autocomplete';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m3-system';
 
-$token-prefix: m2-autocomplete.$prefix;
-$token-slots: m2-autocomplete.get-token-slots();
-$fallbacks: m3-autocomplete.get-tokens(m3-system.$theme-with-system-vars);
+$fallbacks: m3-autocomplete.get-tokens();
 
 // Even though we don't use the MDC styles, we need to keep the classes in the
 // DOM for the Gmat versions to work. We need to bump up the specificity here
@@ -24,11 +20,9 @@ div.mat-mdc-autocomplete-panel {
   // panel which is required for scroll calculations (see #30974).
   position: relative;
 
-  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
-    border-radius: token-utils.slot(container-shape);
-    box-shadow: token-utils.slot(container-elevation-shadow);
-    background-color: token-utils.slot(background-color);
-  }
+  border-radius: token-utils.slot(autocomplete-container-shape, $fallbacks);
+  box-shadow: token-utils.slot(autocomplete-container-elevation-shadow, $fallbacks);
+  background-color: token-utils.slot(autocomplete-background-color, $fallbacks);
 
   @include cdk.high-contrast {
     outline: solid 1px;

src/material/badge/_badge-theme.scss

@@ -13,14 +13,10 @@
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), base));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
-        m2-badge.get-unthemable-tokens()
+      @include token-utils.create-token-values-mixed(m2-badge.get-unthemable-tokens()
       );
     }
   }
@@ -34,26 +30,20 @@
 @mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
     @include token-utils.create-token-values(
-        m3-badge.$prefix,
         map.get(m3-badge.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
-        m2-badge.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-badge.get-color-tokens($theme));
     }
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.private-get-color-palette-color-tokens($theme, accent)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.private-get-color-palette-color-tokens($theme, warn)
       );
     }
@@ -64,13 +54,10 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), typography));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        m2-badge.$prefix,
         m2-badge.get-typography-tokens($theme)
       );
     }
@@ -81,9 +68,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        m3-badge.$prefix,
-        map.get(m3-badge.get-tokens($theme), density));
+    @include token-utils.create-token-values(map.get(m3-badge.get-tokens($theme), density));
   } @else {
   }
 }
@@ -92,16 +77,16 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-badge.$prefix,
-      tokens: m2-badge.get-token-slots(),
+      namespace: badge,
+      tokens: token-utils.get-overrides(m3-badge.get-tokens(), badge),
     ),
   );
 }
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-badge.

src/material/badge/_m2-badge.scss

@@ -10,9 +10,6 @@ $_default-size: 22px;
 $_small-size: $_default-size - 6px;
 $_large-size: $_default-size + 6px;
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, badge);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
@@ -21,26 +18,26 @@ $prefix: (mat, badge);
   $large-size: $_large-size;
 
   @return (
-    container-shape: 50%,
-    container-size: unset,
-    small-size-container-size: unset,
-    large-size-container-size: unset,
-
-    legacy-container-size: $default-size,
-    legacy-small-size-container-size: $small-size,
-    legacy-large-size-container-size: $large-size,
-
-    container-offset: math.div($default-size, -2) 0,
-    small-size-container-offset: math.div($small-size, -2) 0,
-    large-size-container-offset: math.div($large-size, -2) 0,
-
-    container-overlap-offset: math.div($default-size, -2),
-    small-size-container-overlap-offset: math.div($small-size, -2),
-    large-size-container-overlap-offset: math.div($large-size, -2),
-
-    container-padding: 0,
-    small-size-container-padding: 0,
-    large-size-container-padding: 0,
+    badge-container-shape: 50%,
+    badge-container-size: unset,
+    badge-small-size-container-size: unset,
+    badge-large-size-container-size: unset,
+
+    badge-legacy-container-size: $default-size,
+    badge-legacy-small-size-container-size: $small-size,
+    badge-legacy-large-size-container-size: $large-size,
+
+    badge-container-offset: math.div($default-size, -2) 0,
+    badge-small-size-container-offset: math.div($small-size, -2) 0,
+    badge-large-size-container-offset: math.div($large-size, -2) 0,
+
+    badge-container-overlap-offset: math.div($default-size, -2),
+    badge-small-size-container-overlap-offset: math.div($small-size, -2),
+    badge-large-size-container-overlap-offset: math.div($large-size, -2),
+
+    badge-container-padding: 0,
+    badge-small-size-container-padding: 0,
+    badge-large-size-container-padding: 0,
   );
 }
 
@@ -62,16 +59,16 @@ $prefix: (mat, badge);
   }
 
   @return map.merge($primary-color-tokens, (
-    disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
+    badge-disabled-state-background-color: $disabled-background,
+    badge-disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }
 
 // Generates the tokens used to theme the badge based on a palette.
 @function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
   @return (
-    background-color: inspection.get-theme-color($theme, $palette-name),
-    text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
+    badge-background-color: inspection.get-theme-color($theme, $palette-name),
+    badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
@@ -80,16 +77,16 @@ $prefix: (mat, badge);
   $base-size: 12px;
 
   @return (
-    text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    line-height: $_default-size,
-    text-size: $base-size,
-    text-weight: 600,
+    badge-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    badge-line-height: $_default-size,
+    badge-text-size: $base-size,
+    badge-text-weight: 600,
 
-    small-size-text-size: $base-size * 0.75,
-    small-size-line-height: $_small-size,
+    badge-small-size-text-size: $base-size * 0.75,
+    badge-small-size-line-height: $_small-size,
 
-    large-size-text-size: $base-size * 2,
-    large-size-line-height: $_large-size,
+    badge-large-size-text-size: $base-size * 2,
+    badge-large-size-line-height: $_large-size,
   );
 }