diff --git a/demos/elevation.html b/demos/elevation.html
index 4191308adee..50684e5230b 100644
--- a/demos/elevation.html
+++ b/demos/elevation.html
@@ -47,6 +47,14 @@
background: white;
}
+ .hero .demo-surface {
+ width: 120px;
+ height: 48px;
+ margin: 24px 24px;
+ background-color: #212121;
+ color: #f0f0f0;
+ }
+
#hover-el {
display: flex;
align-items: center;
@@ -54,14 +62,6 @@
padding: 2rem;
border-radius: 4px;
}
-
- .hero .demo-surface {
- width: 96px;
- height: 48px;
- margin: 24px 24px;
- background-color: #212121;
- color: #f0f0f0;
- }
@@ -81,8 +81,11 @@
FLAT 0dp
-
- RAISED 4dp
+
+ RAISED 8dp
+
+
+ CUSTOM 16dp
diff --git a/demos/elevation.scss b/demos/elevation.scss
index 5d108822ae2..1cab9a70253 100644
--- a/demos/elevation.scss
+++ b/demos/elevation.scss
@@ -18,3 +18,7 @@
@import "../packages/mdc-elevation/mdc-elevation";
@import "../packages/mdc-typography/mdc-typography";
+
+.demo-elevation--custom-color {
+ @include mdc-elevation(16, secondary-dark, $opacity-boost: .1);
+}
diff --git a/packages/mdc-elevation/README.md b/packages/mdc-elevation/README.md
index 5e88b545b73..5687c50b5c3 100644
--- a/packages/mdc-elevation/README.md
+++ b/packages/mdc-elevation/README.md
@@ -55,7 +55,7 @@ CSS Class | Description
Mixin | Description
--- | ---
-`mdc-elevation($z-value)` | Sets the elevation to the z-space for that given elevation
+`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
Variable | Description
diff --git a/packages/mdc-elevation/_mixins.scss b/packages/mdc-elevation/_mixins.scss
index dedee2ca285..4f5465d0bab 100644
--- a/packages/mdc-elevation/_mixins.scss
+++ b/packages/mdc-elevation/_mixins.scss
@@ -14,25 +14,44 @@
// limitations under the License.
//
+@import "@material/theme/variables";
@import "./variables";
/**
- * Applies the correct css rules to an element to give it the elevation specified by $z-value.
+ * 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) {
+@mixin mdc-elevation($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
@if type-of($z-value) != number or not unitless($z-value) {
- @error "$z-value must be a unitless number";
+ @error "$z-value must be a unitless number, but received '#{$z-value}'";
}
@if $z-value < 0 or $z-value > 24 {
- @error "$z-value must be between 0 and 24";
+ @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
}
- #{$mdc-elevation-property}:
- #{"#{map-get($mdc-elevation-umbra-map, $z-value)} #{$mdc-elevation-umbra-color}"},
- #{"#{map-get($mdc-elevation-penumbra-map, $z-value)} #{$mdc-elevation-penumbra-color}"},
- #{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color;
+ @if map-has-key($mdc-theme-property-values, $color) {
+ $color: map-get($mdc-theme-property-values, $color);
+ }
+
+ @if type-of($color) != color {
+ @error "$color must be a valid color, but '#{$color}' is of type #{type-of($color)}";
+ }
+
+ $umbra-z-value: map-get($mdc-elevation-umbra-map, $z-value);
+ $penumbra-z-value: map-get($mdc-elevation-penumbra-map, $z-value);
+ $ambient-z-value: map-get($mdc-elevation-ambient-map, $z-value);
+
+ $umbra-color: rgba($color, $mdc-elevation-umbra-opacity + $opacity-boost);
+ $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;
}
/**
diff --git a/packages/mdc-elevation/_variables.scss b/packages/mdc-elevation/_variables.scss
index 2fd17f7ed09..938d8637f01 100644
--- a/packages/mdc-elevation/_variables.scss
+++ b/packages/mdc-elevation/_variables.scss
@@ -16,9 +16,10 @@
@import "@material/animation/variables";
-$mdc-elevation-umbra-color: rgba(black, .2);
-$mdc-elevation-penumbra-color: rgba(black, .14);
-$mdc-elevation-ambient-color: rgba(black, .12);
+$mdc-elevation-baseline-color: black;
+$mdc-elevation-umbra-opacity: .2;
+$mdc-elevation-penumbra-opacity: .14;
+$mdc-elevation-ambient-opacity: .12;
$mdc-elevation-umbra-map: (
0: "0px 0px 0px 0px",
diff --git a/packages/mdc-elevation/package.json b/packages/mdc-elevation/package.json
index 3075b1065be..54db60877f2 100644
--- a/packages/mdc-elevation/package.json
+++ b/packages/mdc-elevation/package.json
@@ -13,6 +13,7 @@
"url": "https://github.com/material-components/material-components-web.git"
},
"dependencies": {
- "@material/animation": "^0.4.1"
+ "@material/animation": "^0.4.1",
+ "@material/theme": "^0.4.0"
}
}