feat(elevation): Remove transition mixin; use transition-value function

packages/mdc-button/_mixins.scss

@@ -166,7 +166,8 @@
 
 @mixin mdc-button--raised_() {
   @include mdc-elevation(2);
-  @include mdc-elevation-transition;
+
+  transition: mdc-elevation-transition-value();
 
   &:hover,
   &:focus {

packages/mdc-elevation/README.md

@@ -56,20 +56,24 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-elevation($z-value, $color, $opacity-boost)` | Sets the elevation to the z-space for that given elevation, and optionally sets the color and/or boosts the opacity of the shadow
-`mdc-elevation-transition($duration, $easing)` | Applies the correct css rules to transition an element between elevations
+
+Function | Description
+--- | ---
+`mdc-elevation-transition-value($duration, $easing)` | Returns a value for the `transition` property to transition an element between elevations
 
 Variable | Description
 --- | ---
+`mdc-elevation-property` | Default property for elevation transitions
 `mdc-elevation-transition-duration` | Default duration value for elevation transitions
 `mdc-elevation-transition-timing-function` | Default easing value for elevation transitions
 
-If you need more configurability over your transitions, use the `mdc-elevation-transition-rule` function in conjunction with the exported sass variables.
+If you need more configurability over your transitions, use the `mdc-elevation-transition-value` function in conjunction with the exported sass variables.
 
 ```scss
 .my-component-with-custom-transitions {
 
   transition:
-    mdc-elevation-transition-rule(),
+    mdc-elevation-transition-value(),
     /* Configure opacity to use same duration and easing values as elevation */
     opacity $mdc-elevation-transition-duration $mdc-elevation-transition-timing-function;
   opacity: .7;

packages/mdc-elevation/_mixins.scss

@@ -61,27 +61,13 @@
  *
  * ```scss
  * .foo {
- *   transition: mdc-elevation-transition-rule(), opacity 100ms ease;
+ *   transition: mdc-elevation-transition-value(), opacity 100ms ease;
  *   will-change: $mdc-elevation-property, opacity;
  * }
  * ```
  */
-@function mdc-elevation-transition-rule(
+@function mdc-elevation-transition-value(
   $duration: $mdc-elevation-transition-duration,
   $easing: $mdc-elevation-transition-timing-function) {
   @return #{$mdc-elevation-property} #{$duration} #{$easing};
 }
-
-/**
- * Applies the correct css rules needed to have an element transition between elevations.
- * This mixin should be applied to elements whose elevation values will change depending on their
- * context (e.g. when active or disabled).
- */
-// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
-// be used in the same way by clients.
-@mixin mdc-elevation-transition(
-  $duration: $mdc-elevation-transition-duration,
-  $easing: $mdc-elevation-transition-timing-function) {
-  transition: mdc-elevation-transition-rule($duration, $easing);
-  will-change: $mdc-elevation-property;
-}

packages/mdc-elevation/mdc-elevation.scss

@@ -23,5 +23,6 @@
 }
 
 .mdc-elevation-transition {
-  @include mdc-elevation-transition;
+  transition: mdc-elevation-transition-value();
+  will-change: $mdc-elevation-property;
 }

packages/mdc-toolbar/mdc-toolbar.scss

@@ -141,10 +141,9 @@
 }
 
 .mdc-toolbar--flexible {
-  // stylelint-disable plugin/selector-bem-pattern
   // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
+  // stylelint-disable-next-line plugin/selector-bem-pattern
   --mdc-toolbar-ratio-to-extend-flexible: #{$mdc-toolbar-ratio-to-extend-flexible};
-  // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-toolbar__row:first-child {
     height: $mdc-toolbar-row-height * $mdc-toolbar-ratio-to-extend-flexible;
@@ -192,13 +191,14 @@
       }
     }
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-toolbar--waterfall {
   &.mdc-toolbar--fixed {
     @include mdc-elevation(0);
-    @include mdc-elevation-transition;
+
+    transition: mdc-elevation-transition-value();
+    will-change: $mdc-elevation-property;
 
     &.mdc-toolbar--flexible-space-minimized {
       @include mdc-elevation(4);
@@ -216,6 +216,7 @@
   }
 }
 // postcss-bem-linter: end
+// stylelint-enable plugin/selector-bem-pattern
 
 .mdc-toolbar-fixed-adjust {
   margin-top: $mdc-toolbar-row-height;