feat(elevation): Update mixin to accept custom theme color (#1449)

Resolves #1534 ![Screenshot of custom elevation color](https://user-images.githubusercontent.com/409245/31739584-3bdd85f2-b403-11e7-8234-80b7a279eeb7.png)
material-components · Nov 3, 2017 · e02b4c9 · e02b4c9
1 parent 97e5aa8
commit e02b4c9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 23 deletions.
diff --git a/demos/elevation.html b/demos/elevation.html
@@ -47,21 +47,21 @@
         background: white;
       }
 
+      .hero .demo-surface {
+        width: 120px;
+        height: 48px;
+        margin: 24px 24px;
+        background-color: #212121;
+        color: #f0f0f0;
+      }
+
       #hover-el {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 2rem;
         border-radius: 4px;
       }
-
-      .hero .demo-surface {
-        width: 96px;
-        height: 48px;
-        margin: 24px 24px;
-        background-color: #212121;
-        color: #f0f0f0;
-      }
     </style>
   </head>
   <body>
@@ -81,8 +81,11 @@
         <figure class="demo-surface mdc-elevation--z0">
           <figcaption>FLAT 0dp</figcaption>
         </figure>
-        <figure class="demo-surface mdc-elevation--z4">
-          <figcaption>RAISED 4dp</figcaption>
+        <figure class="demo-surface mdc-elevation--z8">
+          <figcaption>RAISED 8dp</figcaption>
+        </figure>
+        <figure class="demo-surface demo-elevation--custom-color">
+          <figcaption>CUSTOM 16dp</figcaption>
         </figure>
       </section>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"
   }
 }