refactor(material/autocomplete): switch to tokens API (#27288)

Reworks the autocomplete to use the new tokens API.

Author: crisbeto

src/material/autocomplete/BUILD.bazel

@@ -38,6 +38,7 @@ sass_binary(
     deps = [
         "//:mdc_sass_lib",
         "//src/cdk:sass_lib",
+        "//src/material/core:core_scss_lib",
     ],
 )
 

src/material/autocomplete/_autocomplete-theme.scss

@@ -1,31 +1,20 @@
-@use '@material/menu-surface/mixins' as mdc-menu-surface;
-@use '@material/list/evolution-mixins' as mdc-list;
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  @include mdc-helpers.using-mdc-theme($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-theme-styles-query);
-    @include mdc-list.without-ripple(mdc-helpers.$mdc-theme-styles-query);
-  }
-}
-
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-menu-surface.core-styles(mdc-helpers.$mdc-typography-styles-query);
 
-    .mat-mdc-autocomplete-panel {
-      // Note that we include this private mixin, because the public one adds
-      // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list.list-base(mdc-helpers.$mdc-typography-styles-query);
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+      tokens-mat-autocomplete.get-color-tokens($config));
   }
 }
 
+@mixin typography($config-or-theme) {}
+
 @mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {

src/material/autocomplete/autocomplete.scss

@@ -1,21 +1,30 @@
 @use '@angular/cdk';
-@use '@material/menu-surface/mixins' as mdc-menu-surface;
-@use '@material/list/evolution-mixins' as mdc-list;
-
-@include mdc-menu-surface.core-styles($query: structure);
-
-// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
-// and avoid interference with `mat-menu` which uses the same mixins from MDC.
-.mdc-menu-surface.mat-mdc-autocomplete-panel {
+@use '../core/style/elevation';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
+
+// 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
+// so that it's higher than MDC's styles.
+div.mat-mdc-autocomplete-panel {
+  @include elevation.elevation(8);
   width: 100%; // Ensures that the panel matches the overlay width.
   max-height: 256px; // Prevents lists with a lot of option from growing too high.
-  position: static; // MDC uses `absolute` by default which will throw off our positioning.
   visibility: hidden;
-  // MDC sets the transform-origin programmatically based on whether the dropdown is above or
-  // below the input. We use our own positioning logic, so we need to set this ourselves.
   transform-origin: center top;
+  overflow: auto;
+  padding: 8px 0;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  // Workaround in case other MDC menu surface styles bleed in.
+  position: static;
+
+  @include token-utils.use-tokens(
+    tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, background-color);
+  }
 
-  @include mdc-list.list-base($query: structure);
   @include cdk.high-contrast(active, off) {
     outline: solid 1px;
   }
@@ -28,8 +37,6 @@
   .mat-mdc-autocomplete-panel-above & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    // MDC sets the transform-origin programmatically based on whether the dropdown is above or
-    // below the input. We use our own positioning logic, so we need to set this ourselves.
     transform-origin: center bottom;
   }
 

src/material/core/tokens/m2/mat/_autocomplete.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $background: map.get($config, background);
+
+  @return (
+    background-color: theming.get-color-from-palette($background, card)
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}