refactor(material-experimental/theming): align autocomplete with M3 spec

Aligns the autocomplete with the M3 spec by tokenizing the elevation and container shape.

Author: crisbeto

src/dev-app/autocomplete/autocomplete-demo.html

@@ -3,7 +3,7 @@
 <div class="demo-autocomplete">
   <mat-card>
     Reactive length: {{ reactiveStates.length }}
-    <div>Reactive value: {{ stateCtrl.value | json }}</div>
+    <div class="demo-truncate-text">Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
     <mat-form-field [color]="reactiveStatesTheme">

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

@@ -19,3 +19,9 @@
   color: rgba(0, 0, 0, 0.54);
   margin-left: 8px;
 }
+
+.demo-truncate-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/material-experimental/theming/_custom-tokens.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 /// Hardcode the given value, or null if hardcoded values are excluded.
 @function _hardcode($value, $exclude-hardcoded) {
@@ -28,6 +29,9 @@
 @function autocomplete($systems, $exclude-hardcoded) {
   @return (
     background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
   );
 }
 

src/material/autocomplete/_autocomplete-theme.scss

@@ -10,7 +10,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-unthemable-tokens());
+    }
+  }
 }
 
 @mixin color($theme) {
@@ -29,14 +34,24 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-typography-tokens($theme));
+    }
+  }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-density-tokens($theme));
+    }
+  }
 }
 
 @mixin theme($theme) {

src/material/autocomplete/autocomplete.scss

@@ -1,27 +1,26 @@
 @use '@angular/cdk';
-@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.
   visibility: hidden;
   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(border-radius, container-shape);
+    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
     @include token-utils.create-token-slot(background-color, background-color);
   }
 

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

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -8,7 +9,10 @@ $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 ();
+  @return (
+    container-shape: 4px,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.