From 995957cf8a4e8a2af0666424021d58cd9eeb7bbc Mon Sep 17 00:00:00 2001
From: Ben Elliott <4996462+benelliott@users.noreply.github.com>
Date: Tue, 15 May 2018 18:30:43 +0100
Subject: [PATCH] feat(elevation): move elevation rules into theme stylesheets

Move all usages of elevation mixins out of component stylesheets and into their respective themes.
This allows the elevation color to be changed based on the theme. Add new `mat-theme-elevation`
and `mat-theme-overridable-elevation` shorthand mixins to apply the current theme's elevation
color. Replace all usages of `mat-elevation` mixins with themed equivalents. Add `elevation`
property to the default `foreground` theme palettes.

Closes #11343

BREAKING CHANGE:

Because `mat-elevation` usages have been moved out of component stylesheets, users who have
not invoked a theme mixin will not see any elevation shadows on Material components.
However, users that have created a custom theme which lacks the `elevation` property will
still see the default black shadows.

Additionally, users who want to use themed elevations in their custom components can create
their own shorthand mixin:

```
@import '~angular/material/theming';

$myTheme: ...

@mixin my-elevation($zValue) {
  @include mat-theme-elevation($zValue, $myTheme);
}

```

and then invoke `angular-material-theme` with the `$myTheme` variable.
---
 src/lib/autocomplete/_autocomplete-theme.scss |  2 ++
 src/lib/autocomplete/autocomplete.scss        |  2 +-
 src/lib/bottom-sheet/_bottom-sheet-theme.scss |  2 ++
 .../bottom-sheet/bottom-sheet-container.scss  |  3 --
 .../button-toggle/_button-toggle-theme.scss   |  5 ++++
 src/lib/button-toggle/button-toggle.scss      |  2 --
 src/lib/button/_button-base.scss              | 14 ---------
 src/lib/button/_button-theme.scss             | 29 +++++++++++++++++++
 src/lib/button/button.scss                    |  8 +----
 src/lib/card/_card-theme.scss                 |  7 +++++
 src/lib/card/card.scss                        |  6 ----
 src/lib/chips/_chips-theme.scss               |  5 ++++
 src/lib/chips/chips.scss                      |  1 -
 src/lib/core/_core.scss                       | 18 ++++++------
 src/lib/core/style/_elevation.scss            | 16 ++++++++++
 src/lib/core/style/_menu-common.scss          |  5 +---
 src/lib/core/theming/_palette.scss            |  2 ++
 src/lib/datepicker/_datepicker-theme.scss     |  6 ++++
 src/lib/datepicker/datepicker-content.scss    |  7 -----
 src/lib/dialog/_dialog-theme.scss             |  2 ++
 src/lib/dialog/dialog.scss                    |  3 --
 src/lib/expansion/_expansion-theme.scss       |  2 ++
 src/lib/expansion/expansion-panel.scss        |  1 -
 src/lib/menu/_menu-theme.scss                 |  2 ++
 src/lib/menu/menu.scss                        |  2 +-
 src/lib/select/_select-theme.scss             |  2 ++
 src/lib/select/select.scss                    |  2 +-
 src/lib/sidenav/_sidenav-theme.scss           |  7 +++++
 src/lib/sidenav/drawer.scss                   |  7 -----
 src/lib/slide-toggle/_slide-toggle-theme.scss |  2 ++
 src/lib/slide-toggle/slide-toggle.scss        |  3 --
 31 files changed, 105 insertions(+), 70 deletions(-)

diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
index 0572a6600ed5..b9615f5ba7fc 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/theming';
 
 @mixin mat-autocomplete-theme($theme) {
@@ -5,6 +6,7 @@
   $background: map-get($theme, background);
 
   .mat-autocomplete-panel {
+    @include _mat-theme-overridable-elevation(4, $theme);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
 
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
index d9ca2f69bd20..8a80d634f540 100644
--- a/src/lib/autocomplete/autocomplete.scss
+++ b/src/lib/autocomplete/autocomplete.scss
@@ -8,7 +8,7 @@ $mat-autocomplete-panel-max-height: 256px !default;
 $mat-autocomplete-panel-border-radius: 4px !default;
 
 .mat-autocomplete-panel {
-  @include mat-menu-base(4);
+  @include mat-menu-base();
 
   visibility: hidden;
   max-width: none;
diff --git a/src/lib/bottom-sheet/_bottom-sheet-theme.scss b/src/lib/bottom-sheet/_bottom-sheet-theme.scss
index 15416e535378..046e11d0b5f7 100644
--- a/src/lib/bottom-sheet/_bottom-sheet-theme.scss
+++ b/src/lib/bottom-sheet/_bottom-sheet-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/typography/typography-utils';
 @import '../core/theming/palette';
 
@@ -6,6 +7,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-bottom-sheet-container {
+    @include _mat-theme-elevation(16, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
diff --git a/src/lib/bottom-sheet/bottom-sheet-container.scss b/src/lib/bottom-sheet/bottom-sheet-container.scss
index 6ea596659e6f..7467b4a938bb 100644
--- a/src/lib/bottom-sheet/bottom-sheet-container.scss
+++ b/src/lib/bottom-sheet/bottom-sheet-container.scss
@@ -1,4 +1,3 @@
-@import '../core/style/elevation';
 @import '../../cdk/a11y/a11y';
 
 // The bottom sheet minimum width on larger screen sizes is based
@@ -9,8 +8,6 @@ $mat-bottom-sheet-container-vertical-padding: 8px !default;
 $mat-bottom-sheet-container-horizontal-padding: 16px !default;
 
 .mat-bottom-sheet-container {
-  @include mat-elevation(16);
-
   padding: $mat-bottom-sheet-container-vertical-padding
            $mat-bottom-sheet-container-horizontal-padding;
   min-width: 100vw;
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index 42a32a36e79c..1890b46d444f 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -6,6 +7,10 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  .mat-button-toggle-standalone, .mat-button-toggle-group {
+    @include _mat-theme-elevation(2, $theme);
+  }
+
   .mat-button-toggle {
     color: mat-color($foreground, hint-text);
 
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 92725079af9b..3a20bbb642fc 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -1,4 +1,3 @@
-@import '../core/style/elevation';
 @import '../core/style/vendor-prefixes';
 @import '../core/style/layout-common';
 @import '../../cdk/a11y/a11y';
@@ -9,7 +8,6 @@ $mat-button-toggle-border-radius: 2px !default;
 
 .mat-button-toggle-standalone,
 .mat-button-toggle-group {
-  @include mat-elevation(2);
   position: relative;
   display: inline-flex;
   flex-direction: row;
diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index f542a4fcc944..d14bb436d61a 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -76,7 +76,6 @@ $mat-mini-fab-padding: 8px !default;
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
 @mixin mat-raised-button {
   @include mat-button-base;
-  @include mat-overridable-elevation(2);
   @include _noop-animation();
 
   // Force hardware acceleration.
@@ -85,20 +84,11 @@ $mat-mini-fab-padding: 8px !default;
   // Animation.
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
-
-  &:not([disabled]):active {
-    @include mat-overridable-elevation(8);
-  }
-
-  &[disabled] {
-    box-shadow: none;
-  }
 }
 
 // Applies styles to fab and mini-fab button types only
 @mixin mat-fab($size, $padding) {
   @include mat-raised-button;
-  @include mat-overridable-elevation(6);
 
   // Reset the min-width from the button base.
   min-width: 0;
@@ -110,10 +100,6 @@ $mat-mini-fab-padding: 8px !default;
 
   flex-shrink: 0;
 
-  &:not([disabled]):active {
-    @include mat-overridable-elevation(12);
-  }
-
   .mat-button-wrapper {
     padding: $padding 0;
     display: inline-block;
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index bc21f0c91f33..27266c3524ba 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/style/elevation';
 @import '../core/typography/typography-utils';
 
 // Applies a focus style to an mat-button element for each of the supported palettes.
@@ -106,6 +107,34 @@
   .mat-icon-button {
     @include _mat-button-ripple-color($theme, default, 0.2);
   }
+
+  .mat-stroked-button, .mat-flat-button {
+    @include _mat-theme-overridable-elevation(0, $theme);
+  }
+
+  .mat-raised-button {
+    @include _mat-theme-overridable-elevation(2, $theme);
+
+    &:not([disabled]):active {
+      @include _mat-theme-overridable-elevation(8, $theme);
+    }
+
+    &[disabled] {
+      @include _mat-theme-overridable-elevation(0, $theme);
+    }
+  }
+
+  .mat-fab, .mat-mini-fab {
+    @include _mat-theme-overridable-elevation(6, $theme);
+
+    &:not([disabled]):active {
+      @include _mat-theme-overridable-elevation(12, $theme);
+    }
+
+    &[disabled] {
+      @include _mat-theme-overridable-elevation(0, $theme);
+    }
+  }
 }
 
 @mixin mat-button-typography($config) {
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index c06e44920551..00011df81f82 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -37,17 +37,11 @@
 }
 
 .mat-stroked-button {
-  @include mat-overridable-elevation(0);
-
-  border: 1px solid currentColor;
+  border:  1px solid currentColor;
   padding: $mat-stroked-button-padding;
   line-height: $mat-stroked-button-line-height;
 }
 
-.mat-flat-button {
-  @include mat-overridable-elevation(0);
-}
-
 .mat-fab {
   @include mat-fab($mat-fab-size, $mat-fab-padding);
 }
diff --git a/src/lib/card/_card-theme.scss b/src/lib/card/_card-theme.scss
index bcec7add4bea..e259c7c970b9 100644
--- a/src/lib/card/_card-theme.scss
+++ b/src/lib/card/_card-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/elevation';
 @import '../core/typography/typography-utils';
 
 
@@ -8,8 +9,14 @@
   $foreground: map-get($theme, foreground);
 
   .mat-card {
+    @include _mat-theme-overridable-elevation(2, $theme);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
+
+    // Needs extra specificity to be able to override the elevation selectors.
+    &.mat-card-flat {
+      @include _mat-theme-overridable-elevation(0, $theme);
+    }
   }
 
   .mat-card-subtitle {
diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index ebbb3e475f5a..12b29ade8036 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -10,7 +10,6 @@ $mat-card-header-size: 40px !default;
 
 .mat-card {
   @include mat-elevation-transition;
-  @include mat-overridable-elevation(2);
   display: block;
   position: relative;
   padding: $mat-card-default-padding;
@@ -37,11 +36,6 @@ $mat-card-header-size: 40px !default;
     }
   }
 
-  // Needs extra specificity to be able to override the elevation selectors.
-  &.mat-card-flat {
-    box-shadow: none;
-  }
-
   @include cdk-high-contrast {
     outline: solid 1px;
   }
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index 26110c83d688..218b1ea1433c 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -39,6 +40,10 @@ $mat-chip-remove-font-size: 18px;
 
   .mat-chip.mat-standard-chip {
     @include mat-chips-color($unselected-foreground, $unselected-background);
+
+    &:focus {
+      @include _mat-theme-elevation(3, $theme);
+    }
   }
 
   .mat-chip.mat-standard-chip.mat-chip-selected {
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index a6e1c5ae8d0c..f20dd9fa8766 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -41,7 +41,6 @@ $mat-chip-remove-size: 18px;
   }
 
   &:focus {
-    @include mat-elevation(3);
     outline: none;
   }
 
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index 3dbb84d448bc..4812f7c46250 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -14,15 +14,6 @@
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mat-core($typography-config: null) {
-  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-  // elevated.
-  @for $zValue from 0 through 24 {
-    .#{$_mat-elevation-prefix}#{$zValue} {
-      @include mat-elevation($zValue);
-    }
-  }
-
   @include angular-material-typography($typography-config);
   @include mat-ripple();
   @include cdk-a11y();
@@ -37,6 +28,15 @@
   @include mat-optgroup-theme($theme);
   @include mat-pseudo-checkbox-theme($theme);
 
+  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
+  // elevated.
+  @for $zValue from 0 through 24 {
+    .#{$_mat-elevation-prefix}#{$zValue} {
+      @include _mat-theme-elevation($zValue, $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.
diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss
index f017b4ba0c42..420ab7a76ba2 100644
--- a/src/lib/core/style/_elevation.scss
+++ b/src/lib/core/style/_elevation.scss
@@ -151,6 +151,14 @@ $_mat-elevation-prefix: 'mat-elevation-z';
               #{map-get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
+@mixin _mat-theme-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {
+  $foreground: map-get($theme, foreground);
+  $elevation-color: map-get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+
+  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
 // Applies the elevation to an element in a manner that allows
 // consumers to override it via the Material elevation classes.
 @mixin mat-overridable-elevation(
@@ -162,6 +170,14 @@ $_mat-elevation-prefix: 'mat-elevation-z';
   }
 }
 
+@mixin _mat-theme-overridable-elevation($zValue, $theme, $opacity: $mat-elevation-opacity) {
+  $foreground: map-get($theme, foreground);
+  $elevation-color: map-get($foreground, elevation);
+  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);
+
+  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+}
+
 // Returns a string that can be used as the value for a transition property for elevation.
 // Calling this function directly is useful in situations where a component needs to transition
 // more than one property.
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index 759968beb8f3..a7159051fbc0 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -1,5 +1,4 @@
 @import './variables';
-@import './elevation';
 @import './list-common';
 @import './vendor-prefixes';
 
@@ -14,9 +13,7 @@ $mat-menu-side-padding: 16px !default;
 $mat-menu-icon-margin: 16px !default;
 
 
-@mixin mat-menu-base($default-elevation) {
-  @include mat-overridable-elevation($default-elevation);
-
+@mixin mat-menu-base() {
   min-width: $mat-menu-overlay-min-width;
   max-width: $mat-menu-overlay-max-width;
   overflow: auto;
diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
index 9eb1e040945a..c6dda4f1fd07 100644
--- a/src/lib/core/theming/_palette.scss
+++ b/src/lib/core/theming/_palette.scss
@@ -714,6 +714,7 @@ $mat-light-theme-foreground: (
   disabled:          $dark-disabled-text,
   disabled-button:   rgba(black, 0.26),
   disabled-text:     $dark-disabled-text,
+  elevation:         black,
   hint-text:         $dark-disabled-text,
   secondary-text:    $dark-secondary-text,
   icon:              rgba(black, 0.54),
@@ -732,6 +733,7 @@ $mat-dark-theme-foreground: (
   disabled:          $light-disabled-text,
   disabled-button:   rgba(white, 0.3),
   disabled-text:     $light-disabled-text,
+  elevation:         black,
   hint-text:         $light-disabled-text,
   secondary-text:    $light-secondary-text,
   icon:              white,
diff --git a/src/lib/datepicker/_datepicker-theme.scss b/src/lib/datepicker/_datepicker-theme.scss
index b8f518ccf655..d338be532aa6 100644
--- a/src/lib/datepicker/_datepicker-theme.scss
+++ b/src/lib/datepicker/_datepicker-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -83,6 +84,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   @include _mat-datepicker-color(map-get($theme, primary));
 
   .mat-datepicker-content {
+    @include _mat-theme-elevation(4, $theme);
     background-color: mat-color($background, card);
     color: mat-color($foreground, text);
 
@@ -95,6 +97,10 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     }
   }
 
+  .mat-datepicker-content-touch {
+    @include _mat-theme-elevation(0, $theme);
+  }
+
   .mat-datepicker-toggle-active {
     color: mat-color(map-get($theme, primary));
 
diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss
index c3c4b03aafce..6a5326adb6e4 100644
--- a/src/lib/datepicker/datepicker-content.scss
+++ b/src/lib/datepicker/datepicker-content.scss
@@ -1,6 +1,3 @@
-@import '../core/style/elevation';
-
-
 $mat-datepicker-calendar-padding: 8px;
 $mat-datepicker-non-touch-calendar-cell-size: 40px;
 $mat-datepicker-non-touch-calendar-width:
@@ -25,8 +22,6 @@ $mat-datepicker-touch-max-height: 788px;
 
 
 .mat-datepicker-content {
-  @include mat-elevation(4);
-
   display: block;
   border-radius: 4px;
 
@@ -37,8 +32,6 @@ $mat-datepicker-touch-max-height: 788px;
 }
 
 .mat-datepicker-content-touch {
-  @include mat-elevation(0);
-
   display: block;
   // make sure the dialog scrolls rather than being cropped on ludicrously small screens
   max-height: 80vh;
diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss
index eb0e74aeb166..c073788a4c48 100644
--- a/src/lib/dialog/_dialog-theme.scss
+++ b/src/lib/dialog/_dialog-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -8,6 +9,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-dialog-container {
+    @include _mat-theme-elevation(24, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index 8e7f2f20f13f..a96fda6021fc 100644
--- a/src/lib/dialog/dialog.scss
+++ b/src/lib/dialog/dialog.scss
@@ -1,4 +1,3 @@
-@import '../core/style/elevation';
 @import '../core/style/vendor-prefixes';
 @import '../../cdk/a11y/a11y';
 
@@ -9,8 +8,6 @@ $mat-dialog-max-height: 65vh !default;
 $mat-dialog-button-margin: 8px !default;
 
 .mat-dialog-container {
-  @include mat-elevation(24);
-
   display: block;
   padding: $mat-dialog-padding;
   border-radius: $mat-dialog-border-radius;
diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss
index 512f36cac6a0..2212561c66c4 100644
--- a/src/lib/expansion/_expansion-theme.scss
+++ b/src/lib/expansion/_expansion-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/elevation';
 @import '../core/typography/typography-utils';
 
 @mixin mat-expansion-panel-theme($theme) {
@@ -7,6 +8,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-expansion-panel {
+    @include _mat-theme-overridable-elevation(2, $theme);
     background: mat-color($background, card);
     color: mat-color($foreground, text);
   }
diff --git a/src/lib/expansion/expansion-panel.scss b/src/lib/expansion/expansion-panel.scss
index 08cce61bf1ea..633e95b90e72 100644
--- a/src/lib/expansion/expansion-panel.scss
+++ b/src/lib/expansion/expansion-panel.scss
@@ -5,7 +5,6 @@
 .mat-expansion-panel {
   $border-radius: 4px;
 
-  @include mat-overridable-elevation(2);
   box-sizing: content-box;
   display: block;
   margin: 0;
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
index 50b2f5376294..eb49b1aa7696 100644
--- a/src/lib/menu/_menu-theme.scss
+++ b/src/lib/menu/_menu-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -8,6 +9,7 @@
   $foreground: map-get($theme, foreground);
 
   .mat-menu-panel {
+    @include _mat-theme-overridable-elevation(4, $theme);
     background: mat-color($background, 'card');
   }
 
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index 255c5fa47148..162407665f75 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -9,7 +9,7 @@ $mat-menu-border-radius: 4px !default;
 $mat-menu-submenu-indicator-size: 10px !default;
 
 .mat-menu-panel {
-  @include mat-menu-base(4);
+  @include mat-menu-base();
   max-height: calc(100vh - #{$mat-menu-item-height});
   border-radius: $mat-menu-border-radius;
   outline: 0;
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index d0094a2e2e71..bdaa4536803d 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/elevation';
 @import '../core/style/form-common';
 @import '../core/typography/typography-utils';
 
@@ -29,6 +30,7 @@
 
   .mat-select-panel {
     background: mat-color($background, card);
+    @include _mat-theme-overridable-elevation(4, $theme);
 
     .mat-option.mat-selected:not(.mat-option-multiple) {
       background: mat-color($background, hover, 0.12);
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 64ba2d772222..22365e7f64d5 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -83,7 +83,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-panel {
-  @include mat-menu-base(4);
+  @include mat-menu-base();
   padding-top: 0;
   padding-bottom: 0;
   max-height: $mat-select-panel-max-height;
diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss
index f005c4609da9..de794c38796f 100644
--- a/src/lib/sidenav/_sidenav-theme.scss
+++ b/src/lib/sidenav/_sidenav-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
@@ -30,6 +31,12 @@
     &.mat-drawer-push {
       background-color: $drawer-push-background-color;
     }
+
+    &:not(.mat-drawer-side) {
+      // The elevation of z-16 is noted in the design specifications.
+      // See https://material.io/design/components/navigation-drawer.html
+      @include _mat-theme-elevation(16, $theme);
+    }
   }
 
   .mat-drawer-side {
diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss
index 25f248c053bc..740458c3ecea 100644
--- a/src/lib/sidenav/drawer.scss
+++ b/src/lib/sidenav/drawer.scss
@@ -1,5 +1,4 @@
 @import '../core/style/variables';
-@import '../core/style/elevation';
 @import '../core/style/layout-common';
 @import '../core/style/vendor-prefixes';
 @import '../../cdk/a11y/a11y';
@@ -147,12 +146,6 @@ $mat-drawer-over-drawer-z-index: 4;
       transform: translate3d(-100%, 0, 0);
     }
   }
-
-  &:not(.mat-drawer-side) {
-    // The elevation of z-16 is noted in the design specifications.
-    // See https://material.io/design/components/navigation-drawer.html
-    @include mat-elevation(16);
-  }
 }
 
 .mat-sidenav-fixed {
diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss
index 73191fbb5432..8e4dfba8b5fe 100644
--- a/src/lib/slide-toggle/_slide-toggle-theme.scss
+++ b/src/lib/slide-toggle/_slide-toggle-theme.scss
@@ -1,3 +1,4 @@
+@import '../core/style/elevation';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
@@ -76,6 +77,7 @@
   }
 
   .mat-slide-toggle-thumb {
+    @include _mat-theme-elevation(1, $theme);
     background-color: mat-color($mat-grey, $thumb-unchecked-hue);
   }
 
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 94865f17667a..f0d79610a518 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.scss
@@ -1,6 +1,5 @@
 @import '../core/style/variables';
 @import '../core/ripple/ripple';
-@import '../core/style/elevation';
 @import '../core/style/vendor-prefixes';
 @import '../core/style/list-common';
 @import '../../cdk/a11y/a11y';
@@ -132,8 +131,6 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   height: $mat-slide-toggle-thumb-size;
   width: $mat-slide-toggle-thumb-size;
   border-radius: 50%;
-
-  @include mat-elevation(1);
 }
 
 // Horizontal bar for the slide-toggle.