feat(elevation): add feature targeting for styles

packages/mdc-button/_mixins.scss

@@ -303,21 +303,19 @@
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-color: mdc-feature-create-target($query, color);
 
-  @include mdc-feature-targets($feat-color) {
-    @include mdc-elevation(2);
+  @include mdc-elevation(2, $query: $query);
 
-    &:hover,
-    &:focus {
-      @include mdc-elevation(4);
-    }
+  &:hover,
+  &:focus {
+    @include mdc-elevation(4, $query: $query);
+  }
 
-    &:active {
-      @include mdc-elevation(8);
-    }
+  &:active {
+    @include mdc-elevation(8, $query: $query);
+  }
 
-    &:disabled {
-      @include mdc-elevation(0);
-    }
+  &:disabled {
+    @include mdc-elevation(0, $query: $query);
   }
 
   @include mdc-feature-targets($feat-animation) {

packages/mdc-elevation/_mixins.scss

@@ -20,14 +20,16 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/theme/variables";
 @import "./variables";
 
 // Applies the correct CSS rules to an element to give it the elevation specified by $z-value.
 // The $z-value must be between 0 and 24.
 // If $color has an alpha channel, it will be ignored and overridden. To increase the opacity of the shadow, use
 // $opacity-boost.
-@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
+@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0, $query: mdc-feature-all()) {
   @if type-of($z-value) != number or not unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
   }
@@ -36,6 +38,8 @@
     @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
   }
 
+  $feat-color: mdc-feature-create-target($query, color);
+
   $color: mdc-theme-prop-value($color);
 
   $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);
@@ -46,10 +50,12 @@
   $penumbra-color: rgba($color, $mdc-elevation-penumbra-opacity + $opacity-boost);
   $ambient-color: rgba($color, $mdc-elevation-ambient-opacity + $opacity-boost);
 
-  box-shadow:
-    #{"#{$umbra-z-value} #{$umbra-color}"},
-    #{"#{$penumbra-z-value} #{$penumbra-color}"},
-    #{$ambient-z-value} $ambient-color;
+  @include mdc-feature-targets($feat-color) {
+    box-shadow:
+      #{"#{$umbra-z-value} #{$umbra-color}"},
+      #{"#{$penumbra-z-value} #{$penumbra-color}"},
+      #{$ambient-z-value} $ambient-color;
+  }
 }
 
 // Returns a string that can be used as the value for a `transition` property for elevation.
@@ -64,6 +70,7 @@
 // ```
 @function mdc-elevation-transition-value(
   $duration: $mdc-elevation-transition-duration,
-  $easing: $mdc-elevation-transition-timing-function) {
+  $easing: $mdc-elevation-transition-timing-function
+) {
   @return #{$mdc-elevation-property} #{$duration} #{$easing};
 }

test/scss/feature-targeting.scss

@@ -1,5 +1,6 @@
 @import "@material/button/mixins";
 @import "@material/checkbox/mixins";
+@import "@material/elevation/mixins";
 @import "@material/feature-targeting/functions";
 @import "@material/menu/mixins";
 @import "@material/radio/mixins";
@@ -13,6 +14,10 @@
 
 @include mdc-checkbox($query: mdc-feature-any());
 
+// Elevation
+
+@include mdc-elevation(0, $query: mdc-feature-any());
+
 // Menu
 
 @include mdc-menu($query: mdc-feature-any());