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

We were mentioning the `mat-elevation-transition` mixin, but the new API wasn't exposing it. Also updates the imports to the new API and hides a function that was exposed by accident.

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/core/style/_elevation.import.scss

@@ -7,11 +7,9 @@ $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;
 @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 _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: _transition-property-value($duration, $easing);
 }

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',