fix(menu): use new elevation component

PiperOrigin-RevId: 499297369

Author: asyncliz

autocomplete/lib/_filled-autocomplete.scss

@@ -186,7 +186,7 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
   .md3-autocomplete__menu-surface {
     @include menu-surface.theme(
       (
-        container-elevation-shadow: var(--_menu-container-elevation-shadow),
+        container-elevation: var(--_menu-container-elevation),
         container-shape: var(--_menu-container-shape),
       )
     );

autocomplete/lib/_outlined-autocomplete.scss

@@ -174,7 +174,7 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
   .md3-autocomplete__menu-surface {
     @include menu-surface.theme(
       (
-        container-elevation-shadow: var(--_menu-container-elevation-shadow),
+        container-elevation: var(--_menu-container-elevation),
         container-shape: var(--_menu-container-shape),
       )
     );

menu/lib/_menu.scss

@@ -8,7 +8,7 @@
 
 @use 'sass:map';
 
-@use '../../elevationold/lib/elevation-theme';
+@use '../../elevation/lib/elevation';
 @use '../../list/list';
 @use '../../list/list-item';
 @use '../../menusurface/menu-surface';
@@ -40,8 +40,11 @@ $_custom-property-prefix: 'menu';
   .md3-menu {
     @include menu-surface.theme(
       (
-        container-elevation-shadow: var(--_container-elevation-shadow),
+        container-elevation: var(--_container-elevation),
         container-shape: var(--_container-shape),
+        container-shadow-color: var(--_container-shadow-color),
+        container-surface-tint-layer-color:
+          var(--_container-surface-tint-layer-color),
       )
     );
 
@@ -101,11 +104,6 @@ $_custom-property-prefix: 'menu';
 }
 
 @function _resolve-tokens($tokens) {
-  $tokens: elevation-theme.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'elevation'),
-    $shadow-color-token: 'container-shadow-color',
-    $elevation-tokens: (container-elevation)
-  );
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
   @return $tokens;
 }

menusurface/lib/_md-comp-menu-surface.scss

@@ -4,8 +4,7 @@
 //
 
 @use 'sass:map';
-@use '../../elevationold/lib/elevation-theme';
-@use '../../sass/resolvers';
+@use '../../elevation/lib/elevation';
 @use '../../tokens';
 
 $_default-deps: (
@@ -17,19 +16,12 @@ $_default-deps: (
 @function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
   // Use menu tokens for default menu surface values.
   $menu-values: tokens.md-comp-menu-values($deps, $exclude-hardcoded-values);
-  // Note that we don't use "real" elevation tokens here because menu surface
-  // does not have defined tokens. Components that use menu surface are expected
-  // to pass through their own resolved tokens.
-  $menu-values: elevation-theme.resolve-theme(
-    $menu-values,
-    map.get(resolvers.$material, 'elevation'),
-    $shadow-color-token: 'container-shadow-color',
-    $elevation-tokens: (container-elevation)
-  );
 
   @return (
-    container-elevation-shadow:
-      map.get($menu-values, container-elevation-shadow),
-    container-shape: map.get($menu-values, container-shape)
+    container-elevation: map.get($menu-values, container-elevation),
+    container-shadow-color: map.get($menu-values, container-shadow-color),
+    container-shape: map.get($menu-values, container-shape),
+    container-surface-tint-layer-color:
+      map.get($menu-values, container-surface-tint-layer-color)
   );
 }

menusurface/lib/_menu-surface.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevationold/lib/elevation-theme';
+@use '../../elevation/lib/elevation';
 @use '../../sass/theme';
 @use './md-comp-menu-surface';
 
@@ -23,13 +23,15 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(md-comp-menu-surface.values(), $tokens);
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
   $tokens: md-comp-menu-surface.values();
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
@@ -57,13 +59,15 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
     will-change: transform, opacity;
     z-index: $_z-index;
 
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_container-elevation-shadow),
+        level: var(--_container-elevation),
+        shadow-color: var(--_container-shadow-color),
+        surface-tint-color: var(--_container-surface-tint-layer-color),
       )
     );
 
-    .md3-elevation-overlay {
+    md-elevation {
       z-index: 0;
     }
 

menusurface/lib/menu-surface.ts

@@ -7,6 +7,8 @@
 // Style preference for leading underscores.
 // tslint:disable:strip-private-property-underscore
 
+import '../../elevation/elevation.js';
+
 import {html, LitElement, PropertyValues} from 'lit';
 import {property, query, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
@@ -105,6 +107,7 @@ export abstract class MenuSurface extends LitElement {
           @keydown=${this.onKeydown}
           @opened=${this.registerBodyClick}
           @closed=${this.deregisterBodyClick}>
+        <md-elevation shadow></md-elevation>
         <slot></slot>
       </div>`;
   }