refactor: remove component m3 tokens from theme config (#31111)

* refactor: remove component m3 tokens from theme config

* refactor: fixes found during internal testing

* refactor: more fixes

---------

Co-authored-by: Andrew Seguin <andrewseguin@google.com>

Author: andrewseguin

src/material/autocomplete/BUILD.bazel

@@ -56,6 +56,7 @@ sass_binary(
     src = "autocomplete.scss",
     deps = [
         ":m2",
+        ":m3",
         "//src/cdk:sass_lib",
         "//src/material/core/tokens:token_utils",
     ],

src/material/autocomplete/_autocomplete-theme.scss

@@ -1,15 +1,17 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use 'm2-autocomplete';
+@use 'm3-autocomplete';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(
+        m3-autocomplete.$prefix,
+        map.get(m3-autocomplete.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -22,7 +24,9 @@
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(
+        m3-autocomplete.$prefix,
+        map.get(m3-autocomplete.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -35,7 +39,9 @@
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @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(
@@ -48,7 +54,9 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(
+        m3-autocomplete.$prefix,
+        map.get(m3-autocomplete.get-tokens($theme), density));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -76,7 +84,10 @@
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -91,15 +102,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-autocomplete.$prefix,
-      map.get($tokens, m2-autocomplete.$prefix)
-    );
-  }
-}

src/material/autocomplete/_m3-autocomplete.scss

@@ -10,12 +10,19 @@ $prefix: (mat, autocomplete);
 /// @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($systems, $exclude-hardcoded, $token-slots) {
+@function get-tokens($theme) {
+  $system: m3-utils.get-system($theme);
   $tokens: (
-    background-color: map.get($systems, md-sys-color, surface-container),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    container-elevation-shadow:
-      m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
+    base: (
+      container-shape: map.get($system, corner-extra-small),
+      container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      background-color: map.get($system, surface-container),
+    ),
+    typography: (),
+    density: (),
   );
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+
+  @return $tokens;
 }

src/material/autocomplete/autocomplete.scss

@@ -1,9 +1,12 @@
 @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);
 
 // 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
@@ -21,7 +24,7 @@ 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) {
+  @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);

src/material/badge/_badge-theme.scss

@@ -1,7 +1,6 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/theming';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-badge';
@@ -107,9 +106,7 @@
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
-///      or error (If not specified, default error color will be used).
+/// @param {String} $color-variant The color variant to use for the component
 @mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
@@ -131,11 +128,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  $mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...);
-  @include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
-}

src/material/badge/_m3-badge.scss

@@ -13,38 +13,38 @@ $prefix: (mat, badge);
 
   $tokens: (
     base: (
-      container-shape: map.get($system, corner-full),
-      container-size: 16px,
-      legacy-container-size: unset,
-      legacy-small-size-container-size: unset,
-      small-size-container-size: 6px,
-      container-padding: 0 4px,
-      small-size-container-padding: 0,
       container-offset: -12px 0,
-      small-size-container-offset: -6px 0,
       container-overlap-offset: -12px,
-      small-size-container-overlap-offset: -6px,
-      large-size-container-size: 16px,
+      container-padding: 0 4px,
+      container-shape: map.get($system, corner-full),
+      container-size: 16px,
       large-size-container-offset: -12px 0,
       large-size-container-overlap-offset: -12px,
       large-size-container-padding: 0 4px,
+      large-size-container-size: 16px,
+      legacy-container-size: unset,
       legacy-large-size-container-size: unset,
+      legacy-small-size-container-size: unset,
+      small-size-container-offset: -6px 0,
+      small-size-container-overlap-offset: -6px,
+      small-size-container-padding: 0,
+      small-size-container-size: 6px,
     ),
     color: (
       background-color: map.get($system, error),
-      text-color: map.get($system, on-error),
       disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
       disabled-state-text-color: map.get($system, on-error),
+      text-color: map.get($system, on-error),
     ),
     typography: (
-      text-font: map.get($system, label-small-font),
-      text-size: map.get($system, label-small-size),
-      text-weight: map.get($system, label-small-weight),
+      large-size-line-height: 16px,
       large-size-text-size: map.get($system, label-small-size),
-      small-size-text-size: 0,
       line-height: 16px,
       small-size-line-height: 6px,
-      large-size-line-height: 16px,
+      small-size-text-size: 0,
+      text-font: map.get($system, label-small-font),
+      text-size: map.get($system, label-small-size),
+      text-weight: map.get($system, label-small-weight),
     ),
     density: (),
   );

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -2,14 +2,16 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use './m2-bottom-sheet';
+@use './m3-bottom-sheet';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(
+        m3-bottom-sheet.$prefix,
+        map.get(m3-bottom-sheet.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -22,7 +24,9 @@
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(
+        m3-bottom-sheet.$prefix,
+        map.get(m3-bottom-sheet.get-tokens($theme), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -35,7 +39,9 @@
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(
+        m3-bottom-sheet.$prefix,
+        map.get(m3-bottom-sheet.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -48,7 +54,9 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(
+        m3-bottom-sheet.$prefix,
+        map.get(m3-bottom-sheet.get-tokens($theme), density));
   } @else {
   }
 }
@@ -70,7 +78,10 @@
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -85,15 +96,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-bottom-sheet.$prefix,
-      map.get($tokens, m2-bottom-sheet.$prefix)
-    );
-  }
-}

src/material/bottom-sheet/_m3-bottom-sheet.scss

@@ -1,24 +1,27 @@
 @use 'sass:map';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, bottom-sheet);
 
 /// Generates custom tokens for the mat-bottom-sheet.
-/// @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-bottom-sheet
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: sass-utils.merge-all(
-    m3-utils.generate-typography-tokens($systems, container-text, body-large),
-    (
-      container-shape: m3-utils.hardcode(28px, $exclude-hardcoded),
-      container-text-color: map.get($systems, md-sys-color, on-surface),
-      container-background-color: map.get($systems, md-sys-color, surface-container-low),
+@function get-tokens($theme) {
+  $system: m3-utils.get-system($theme);
+  @return (
+    base: (
+      container-shape: 28px,
     ),
+    color: (
+      container-text-color: map.get($system, on-surface),
+      container-background-color: map.get($system, surface-container-low),
+    ),
+    typography: (
+      container-text-font: map.get($system, body-large-font),
+      container-text-line-height: map.get($system, body-large-line-height),
+      container-text-size: map.get($system, body-large-size),
+      container-text-tracking: map.get($system, body-large-tracking),
+      container-text-weight: map.get($system, body-large-weight),
+    ),
+    density: (),
   );
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }

src/material/bottom-sheet/bottom-sheet-container.scss

@@ -1,7 +1,9 @@
 @use '@angular/cdk';
 @use '../core/style/elevation';
 @use './m2-bottom-sheet';
+@use './m3-bottom-sheet';
 @use '../core/tokens/token-utils';
+@use '../core/tokens/m3-system';
 
 // The bottom sheet minimum width on larger screen sizes is based
 // on increments of the toolbar, according to the spec. See:
@@ -12,6 +14,7 @@ $container-horizontal-padding: 16px !default;
 
 $token-prefix: m2-bottom-sheet.$prefix;
 $token-slots: m2-bottom-sheet.get-token-slots();
+$fallbacks: m3-bottom-sheet.get-tokens(m3-system.$theme-with-system-vars);
 
 @keyframes _mat-bottom-sheet-enter {
   from {
@@ -48,7 +51,7 @@ $token-slots: m2-bottom-sheet.get-token-slots();
   // elements (e.g. close buttons) inside the bottom sheet.
   position: relative;
 
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
+  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
     background: token-utils.slot(container-background-color);
     color: token-utils.slot(container-text-color);
     font-family: token-utils.slot(container-text-font);
@@ -77,7 +80,7 @@ $token-slots: m2-bottom-sheet.get-token-slots();
 
 // Applies a border radius to the bottom sheet. Should only be applied when it's not full-screen.
 %_mat-bottom-sheet-container-border-radius {
-  @include token-utils.use-tokens($token-prefix, $token-slots) {
+  @include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
     border-top-left-radius: token-utils.slot(container-shape);
     border-top-right-radius: token-utils.slot(container-shape);
   }