feat(material/core): move MDC-based elevation styles out of experimental (#25486)

* feat(material/core): move MDC-based elevation styles out of experimental

* handle CSS var elevation colors

* undo rearranging core theme mixins, since it broke some things

* undo forwarding mdc-core-color to core-color

* fix lint issues

Author: mmalerba

src/material-experimental/_index.scss

@@ -1,6 +1,3 @@
-// Structural
-@forward './mdc-core/elevation' as mdc-* show mdc-elevation, mdc-overridable-elevation;
-
 // Theme bundles
 @forward './mdc-core/theming/all-theme' show all-mdc-component-themes;
 @forward './mdc-core/color/all-color' show all-mdc-component-colors;

src/material-experimental/mdc-core/_core-theme.scss

@@ -1,9 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@use './elevation';
-
-
 @mixin color($config-or-theme) {
   $config: mat.get-color-config($config-or-theme);
 
@@ -15,11 +12,11 @@
     // `mat-mdc-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;
+      $selector: 'mat-mdc-elevation-z' + $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 elevation.private-theme-elevation($zValue, $config);
+        @include mat.private-theme-elevation($zValue, $config);
       }
     }
 
@@ -38,7 +35,7 @@
 
 @mixin typography($config-or-theme) {
   $config: mat.private-typography-to-2018-config(
-    mat.get-typography-config($config-or-theme));
+          mat.get-typography-config($config-or-theme));
 
   @include mat.option-typography($config-or-theme);
   @include mat.optgroup-typography($config-or-theme);

src/material-experimental/mdc-core/_elevation.scss

@@ -7,9 +7,9 @@
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
 @use './style/elevation';
 
-
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
+
   // Wrapper element that provides the theme background when the user's content isn't
   // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
   // selector in case the mixin is included at the top level.
@@ -25,7 +25,10 @@
   // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
   // elevated.
   @for $zValue from 0 through 24 {
-    .#{elevation.$prefix}#{$zValue} {
+    $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, $config);
     }
   }
@@ -51,6 +54,7 @@
     @include pseudo-checkbox-theme.theme($theme);
 
     $color: theming.get-color-config($theme);
+
     @if $color != null {
       @include color($color);
     }

src/material/core/_core-theme.scss

@@ -1,8 +1,7 @@
 @use 'sass:map';
-@use 'sass:math';
 @use 'sass:meta';
 @use 'variables';
-
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // A collection of mixins and CSS classes that can be used to apply elevation to a material
 // element.
@@ -23,113 +22,6 @@
 // For an explanation of the design behind how elevation is implemented, see the design doc at
 // https://goo.gl/Kq0k9Z.
 
-// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
-// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
-// space completely obscured by an object relative to its light source), one for penumbra (the
-// space partially obscured by an object), and one for ambient (the space which contains the object
-// itself). For a further explanation of these terms and their meanings, see
-// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
-
-// Maps for the different shadow sets and their values within each z-space. These values were
-// created by taking a few reference shadow sets created by Google's Designers and interpolating
-// all of the values between them.
-
-@function _get-umbra-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.2), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 2px 1px -1px #{$shadow-color}',
-    2: '0px 3px 1px -2px #{$shadow-color}',
-    3: '0px 3px 3px -2px #{$shadow-color}',
-    4: '0px 2px 4px -1px #{$shadow-color}',
-    5: '0px 3px 5px -1px #{$shadow-color}',
-    6: '0px 3px 5px -1px #{$shadow-color}',
-    7: '0px 4px 5px -2px #{$shadow-color}',
-    8: '0px 5px 5px -3px #{$shadow-color}',
-    9: '0px 5px 6px -3px #{$shadow-color}',
-    10: '0px 6px 6px -3px #{$shadow-color}',
-    11: '0px 6px 7px -4px #{$shadow-color}',
-    12: '0px 7px 8px -4px #{$shadow-color}',
-    13: '0px 7px 8px -4px #{$shadow-color}',
-    14: '0px 7px 9px -4px #{$shadow-color}',
-    15: '0px 8px 9px -5px #{$shadow-color}',
-    16: '0px 8px 10px -5px #{$shadow-color}',
-    17: '0px 8px 11px -5px #{$shadow-color}',
-    18: '0px 9px 11px -5px #{$shadow-color}',
-    19: '0px 9px 12px -6px #{$shadow-color}',
-    20: '0px 10px 13px -6px #{$shadow-color}',
-    21: '0px 10px 13px -6px #{$shadow-color}',
-    22: '0px 10px 14px -6px #{$shadow-color}',
-    23: '0px 11px 14px -7px #{$shadow-color}',
-    24: '0px 11px 15px -7px #{$shadow-color}'
-  );
-}
-
-@function _get-penumbra-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.14), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 1px 1px 0px #{$shadow-color}',
-    2: '0px 2px 2px 0px #{$shadow-color}',
-    3: '0px 3px 4px 0px #{$shadow-color}',
-    4: '0px 4px 5px 0px #{$shadow-color}',
-    5: '0px 5px 8px 0px #{$shadow-color}',
-    6: '0px 6px 10px 0px #{$shadow-color}',
-    7: '0px 7px 10px 1px #{$shadow-color}',
-    8: '0px 8px 10px 1px #{$shadow-color}',
-    9: '0px 9px 12px 1px #{$shadow-color}',
-    10: '0px 10px 14px 1px #{$shadow-color}',
-    11: '0px 11px 15px 1px #{$shadow-color}',
-    12: '0px 12px 17px 2px #{$shadow-color}',
-    13: '0px 13px 19px 2px #{$shadow-color}',
-    14: '0px 14px 21px 2px #{$shadow-color}',
-    15: '0px 15px 22px 2px #{$shadow-color}',
-    16: '0px 16px 24px 2px #{$shadow-color}',
-    17: '0px 17px 26px 2px #{$shadow-color}',
-    18: '0px 18px 28px 2px #{$shadow-color}',
-    19: '0px 19px 29px 2px #{$shadow-color}',
-    20: '0px 20px 31px 3px #{$shadow-color}',
-    21: '0px 21px 33px 3px #{$shadow-color}',
-    22: '0px 22px 35px 3px #{$shadow-color}',
-    23: '0px 23px 36px 3px #{$shadow-color}',
-    24: '0px 24px 38px 3px #{$shadow-color}'
-  );
-}
-
-@function _get-ambient-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * 0.12), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 1px 3px 0px #{$shadow-color}',
-    2: '0px 1px 5px 0px #{$shadow-color}',
-    3: '0px 1px 8px 0px #{$shadow-color}',
-    4: '0px 1px 10px 0px #{$shadow-color}',
-    5: '0px 1px 14px 0px #{$shadow-color}',
-    6: '0px 1px 18px 0px #{$shadow-color}',
-    7: '0px 2px 16px 1px #{$shadow-color}',
-    8: '0px 3px 14px 2px #{$shadow-color}',
-    9: '0px 3px 16px 2px #{$shadow-color}',
-    10: '0px 4px 18px 3px #{$shadow-color}',
-    11: '0px 4px 20px 3px #{$shadow-color}',
-    12: '0px 5px 22px 4px #{$shadow-color}',
-    13: '0px 5px 24px 4px #{$shadow-color}',
-    14: '0px 5px 26px 4px #{$shadow-color}',
-    15: '0px 6px 28px 5px #{$shadow-color}',
-    16: '0px 6px 30px 5px #{$shadow-color}',
-    17: '0px 6px 32px 5px #{$shadow-color}',
-    18: '0px 7px 34px 6px #{$shadow-color}',
-    19: '0px 7px 36px 6px #{$shadow-color}',
-    20: '0px 8px 38px 7px #{$shadow-color}',
-    21: '0px 8px 40px 7px #{$shadow-color}',
-    22: '0px 8px 42px 7px #{$shadow-color}',
-    23: '0px 9px 44px 8px #{$shadow-color}',
-    24: '0px 9px 46px 8px #{$shadow-color}'
-  );
-}
-
 // The default duration value for elevation transitions.
 $transition-duration: 280ms !default;
 
@@ -139,35 +31,35 @@ $transition-timing-function: variables.$fast-out-slow-in-timing-function;
 // The default color for elevation shadows.
 $color: black !default;
 
-// The default opacity scaling value for elevation shadows.
-$opacity: 1 !default;
-
 // Prefix for elevation-related selectors.
 $prefix: 'mat-elevation-z';
 
 // Applies the correct css rules to an element to give it the elevation specified by $zValue.
 // The $zValue must be between 0 and 24.
-@mixin elevation($zValue, $color: $color, $opacity: $opacity) {
-  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
-    @error '$zValue must be a unitless number';
+@mixin elevation($zValue, $color: $color) {
+  @if meta.type-of($color) == color {
+    @include mdc-elevation.elevation($zValue, $color);
   }
-  @if $zValue < 0 or $zValue > 24 {
-    @error '$zValue must be between 0 and 24';
+  @else {
+    // Copied from @material/elevation/_elevation-theme.scss#_box-shadow
+    // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.
+    $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);
+    $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);
+    $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);
+    $box-shadow: (
+      #{'#{$umbra-z-value} #{$color}'},
+      #{'#{$penumbra-z-value} #{$color}'},
+      #{$ambient-z-value} $color
+    );
+    @include mdc-elevation.shadow($box-shadow);
   }
-
-  box-shadow: #{map.get(_get-umbra-map($color, $opacity), $zValue)},
-              #{map.get(_get-penumbra-map($color, $opacity), $zValue)},
-              #{map.get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
-@mixin overridable-elevation(
-    $zValue,
-    $color: $color,
-    $opacity: $opacity) {
+@mixin overridable-elevation($zValue, $color: $color) {
   &:not([class*='#{$prefix}']) {
-    @include elevation($zValue, $color, $opacity);
+    @include elevation($zValue, $color);
   }
 }
 

src/material/core/style/_elevation.scss

@@ -1,20 +1,20 @@
 @use 'sass:map';
 @use './elevation';
 
-@mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.elevation($zValue, $elevation-color-or-default);
 }
 
-@mixin private-theme-overridable-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-overridable-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.overridable-elevation($zValue, $elevation-color-or-default);
 }
 
 // If the mat-animation-noop class is present on the components root element,

src/material/core/style/_private.scss

@@ -5,7 +5,6 @@
 @use './option/option-theme';
 @use './option/optgroup-theme';
 
-
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   @include core-theme.color($config-or-theme);