fix(material/core): expose mixin mentioned in the elevation guide (#22426)

We were mentioning the `mat-elevation-transition` mixin, but the new API wasn't exposing it. Also updates the imports to the new API.

Author: crisbeto

guides/elevation.md

@@ -23,42 +23,42 @@ achieved by switching elevation classes:
 
 ## Mixins
 
-Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24
+Elevations can also be added in CSS via the `elevation` mixin, which takes a number 0-24
 indicating the elevation of the element as well as optional arguments for the elevation shadow's
 color tone and opacity.
 
 Since an elevation shadow consists of multiple shadow components of varying opacities, the
 `$opacity` argument of the mixin is considered a factor by which to scale these initial values
 rather than an absolute value.
 
-In order to use the mixin, you must import `~@angular/material/theming`:
+In order to use the mixin, you must import `~@angular/material`:
 
 ```scss
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .my-class-with-default-shadow {
   // Adds a shadow for elevation level 2 with default color and full opacity:
-  @include mat-elevation(2);
+  @include mat.elevation(2);
 }
 
 .my-class-with-custom-shadow {
   // Adds a shadow for elevation level 2 with color #e91e63 and 80% of the default opacity:
-  @include mat-elevation(2, #e91e63, 0.8);
+  @include mat.elevation(2, #e91e63, 0.8);
 }
 ```
 
-For convenience, you can use the `mat-elevation-transition` mixin to add a transition when the
+For convenience, you can use the `elevation-transition` mixin to add a transition when the
 elevation changes:
 
 ```scss
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .my-class {
-  @include mat-elevation-transition;
-  @include mat-elevation(2);
+  @include mat.elevation-transition;
+  @include mat.elevation(2);
 
   &:active {
-    @include mat-elevation(8);
+    @include mat.elevation(8);
   }
 }
 ```

src/material/_index.scss

@@ -16,7 +16,7 @@
 @forward './core/core' show core;
 @forward './core/ripple/ripple' show ripple;
 @forward './core/focus-indicators/focus-indicators' show strong-focus-indicators;
-@forward './core/style/elevation' show elevation, overridable-elevation;
+@forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
 @forward './core/theming/all-theme' show all-component-themes;

src/material/button/_button-base.scss

@@ -83,7 +83,7 @@ $mini-fab-padding: 8px !default;
 
   // Animation.
   transition: background variables.$swift-ease-out-duration
-    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
+    variables.$swift-ease-out-timing-function, elevation.private-transition-property-value();
 }
 
 // Applies styles to fab and mini-fab button types only

src/material/card/card.scss

@@ -9,7 +9,7 @@ $border-radius: 4px !default;
 $header-size: 40px !default;
 
 .mat-card {
-  @include elevation.transition;
+  @include elevation.elevation-transition;
   @include private.private-animation-noop();
   display: block;
   position: relative;

src/material/checkbox/checkbox.scss

@@ -183,7 +183,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
 
   // Animation
   transition: background variables.$swift-ease-out-duration
-    variables.$swift-ease-out-timing-function, elevation.transition-property-value();
+    variables.$swift-ease-out-timing-function, elevation.private-transition-property-value();
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;

src/material/chips/chips.scss

@@ -40,7 +40,7 @@ $chip-remove-size: 18px;
 }
 
 .mat-standard-chip {
-  @include elevation.transition;
+  @include elevation.elevation-transition;
   @include private.private-animation-noop;
   display: inline-flex;
   padding: $chip-vertical-padding $chip-horizontal-padding;

src/material/core/style/_elevation.import.scss

@@ -7,11 +7,10 @@ $mat-swift-ease-out-duration, $mat-swift-ease-out-timing-function, $mat-swift-li
 $mat-swift-linear-duration, $mat-swift-linear-timing-function, $mat-z-index-drawer,
 $mat-z-index-fab;
 @forward 'elevation' hide $color, $opacity, $prefix, $transition-duration,
-$transition-timing-function, elevation, overridable-elevation, transition,
-transition-property-value;
+$transition-timing-function, elevation, overridable-elevation, elevation-transition,
+private-transition-property-value;
 @forward 'elevation' as mat-* hide $mat-color, $mat-opacity, $mat-prefix, $mat-transition-duration,
-$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map,
-mat-transition, mat-transition-property-value;
+$mat-transition-timing-function, mat-get-ambient-map, mat-get-penumbra-map, mat-get-umbra-map;
 @forward 'elevation' as mat-elevation-* hide mat-elevation-elevation, mat-elevation-get-ambient-map,
 mat-elevation-get-penumbra-map, mat-elevation-get-umbra-map, mat-elevation-overridable-elevation;
 

src/material/core/style/_elevation.scss

@@ -178,7 +178,7 @@ $prefix: 'mat-elevation-z';
 // .foo {
 //   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
 // }
-@function transition-property-value(
+@function private-transition-property-value(
     $duration: $transition-duration,
     $easing: $transition-timing-function) {
   @return box-shadow #{$duration} #{$easing};
@@ -190,8 +190,8 @@ $prefix: 'mat-elevation-z';
 //
 // NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
 // be used in the same way by clients.
-@mixin transition(
+@mixin elevation-transition(
     $duration: $transition-duration,
     $easing: $transition-timing-function) {
-  transition: transition-property-value($duration, $easing);
+  transition: private-transition-property-value($duration, $easing);
 }

src/material/expansion/expansion-panel.scss

@@ -11,7 +11,7 @@
   border-radius: $border-radius;
   overflow: hidden;
   transition: margin 225ms variables.$fast-out-slow-in-timing-function,
-      elevation.transition-property-value();
+      elevation.private-transition-property-value();
 
   // Required so that the `box-shadow` works after the focus indicator relatively positions the
   // header.

src/material/schematics/ng-generate/theming-api/migration.ts

@@ -18,6 +18,7 @@ const materialMixins: Record<string, string> = {
   'mat-typography-level-to-styles': 'typography-level',
   'mat-elevation': 'elevation',
   'mat-overridable-elevation': 'overridable-elevation',
+  'mat-elevation-transition': 'elevation-transition',
   'mat-ripple': 'ripple',
   'mat-ripple-color': 'ripple-color',
   'mat-ripple-theme': 'ripple-theme',