fix(material/core): implement elevation classes in M3

Fixes that we didn't support elevation classes in M3 which was breaking some users.

Fixes #28618.

Author: crisbeto

src/material/core/_core-theme.scss

@@ -1,12 +1,10 @@
 @use './theming/theming';
 @use './theming/inspection';
 @use './theming/validation';
-@use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@use './style/elevation';
 @use './style/sass-utils';
 @use './typography/typography';
 @use './tokens/token-utils';
@@ -41,6 +39,10 @@ $_has-inserted-loaded-marker: false;
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens());
+    }
   }
 
   // The marker is a concrete style no matter which Material version we're targeting.
@@ -60,18 +62,6 @@ $_has-inserted-loaded-marker: false;
       @include token-utils.create-token-values(tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme));
     }
-
-    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-    // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-    // elevated.
-    @for $zValue from 0 through 24 {
-      $selector: elevation.$prefix + $zValue;
-      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-      // come with elevation baked in and we don't have a way of removing it.
-      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-        @include private.private-theme-elevation($zValue, $theme);
-      }
-    }
   }
 }
 

src/material/core/_core.scss

@@ -2,6 +2,7 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './ripple/ripple';
+@use './style/elevation';
 @use './focus-indicators/private';
 @use './mdc-helpers/mdc-helpers';
 
@@ -18,13 +19,26 @@
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
-    .mat-app-background {
-      @include mdc-helpers.disable-mdc-fallback-declarations {
-        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
-          // Note: we need to emit fallback values here to avoid errors in internal builds.
+    // Note: we need to emit fallback values here to avoid errors in internal builds.
+    @include mdc-helpers.disable-mdc-fallback-declarations {
+      @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+        .mat-app-background {
           @include token-utils.create-token-slot(background-color, background-color, transparent);
           @include token-utils.create-token-slot(color, text-color, inherit);
         }
+
+        // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+        // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element
+        // is elevated.
+        @for $zValue from 0 through 24 {
+          $selector: elevation.$prefix + $zValue;
+          // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+          // come with elevation baked in and we don't have a way of removing it.
+          .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+            @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}',
+              none);
+          }
+        }
       }
     }
   }

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

@@ -1,3 +1,5 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -13,10 +15,19 @@ $prefix: (mat, app);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
+  $tokens: (
     background-color: inspection.get-theme-color($theme, background, background),
     text-color: inspection.get-theme-color($theme, foreground, text),
   );
+
+  @for $zValue from 0 through 24 {
+    $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
+    $shadow: mdc-elevation.elevation-box-shadow($zValue,
+      if($elevation-color == null, elevation.$color, $elevation-color));
+    $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

src/material/core/tokens/m3/mat/_app.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -10,10 +11,18 @@ $prefix: (mat, app);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the app
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $shadow-color: map.get($systems, md-sys-color, shadow);
   $tokens: (
     background-color: map.get($systems, md-sys-color, background),
     text-color: map.get($systems, md-sys-color, on-background),
   );
 
+  @if ($shadow-color) {
+    @for $zValue from 0 through 24 {
+      $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
+      $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+    }
+  }
+
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,4 +1,4 @@
-<div class="mat-elevation-z8">
+<div class="mat-elevation-z2">
   <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">

src/material/tabs/tab-header.html

@@ -1,4 +1,3 @@
-<!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
 <button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
      #previousPaginator
      aria-hidden="true"
@@ -30,7 +29,6 @@
   </div>
 </div>
 
-<!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
 <button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
      #nextPaginator
      aria-hidden="true"

src/material/tabs/tab-nav-bar/tab-nav-bar.html

@@ -1,4 +1,3 @@
-<!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
 <button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before"
      #previousPaginator
      aria-hidden="true"
@@ -22,7 +21,6 @@
   </div>
 </div>
 
-<!-- TODO: this also had `mat-elevation-z4`. Figure out what we should do with it. -->
 <button class="mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after"
      #nextPaginator
      aria-hidden="true"