From a2bdf93fb772e4507b6371b2dce3f3352df9e662 Mon Sep 17 00:00:00 2001
From: Thibault Derousseaux <tde@quartetfs.com>
Date: Mon, 25 Jan 2016 11:05:59 +0100
Subject: [PATCH] Add shadowColor to lightBaseTheme to allow changing paper's
 shadow color

---
 src/paper.jsx                           | 15 +--------------
 src/styles/baseThemes/lightBaseTheme.js |  1 +
 src/styles/getMuiTheme.js               | 10 ++++++++++
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/paper.jsx b/src/paper.jsx
index 86031024393790..e05648c0f57439 100644
--- a/src/paper.jsx
+++ b/src/paper.jsx
@@ -83,19 +83,6 @@ const Paper = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
-  _getZDepthShadows(zDepth) {
-    const shadows = [
-      null,
-      '0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)',
-      '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)',
-      '0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23)',
-      '0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22)',
-      '0 19px 60px rgba(0, 0, 0, 0.30), 0 15px 20px rgba(0, 0, 0, 0.22)',
-    ];
-
-    return shadows[zDepth];
-  },
-
   render() {
     const {
       children,
@@ -113,7 +100,7 @@ const Paper = React.createClass({
       boxSizing: 'border-box',
       fontFamily: this.state.muiTheme.rawTheme.fontFamily,
       WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-      boxShadow: this._getZDepthShadows(zDepth),
+      boxShadow: this.state.muiTheme.paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
       borderRadius: circle ? '50%' : rounded ? '2px' : '0px',
     };
 
diff --git a/src/styles/baseThemes/lightBaseTheme.js b/src/styles/baseThemes/lightBaseTheme.js
index aa739f5b9218ea..3d4e4f2a51e3c4 100644
--- a/src/styles/baseThemes/lightBaseTheme.js
+++ b/src/styles/baseThemes/lightBaseTheme.js
@@ -25,5 +25,6 @@ export default {
     disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
     pickerHeaderColor: Colors.cyan500,
     clockCircleColor: ColorManipulator.fade(Colors.darkBlack, 0.07),
+    shadowColor: Colors.fullBlack,
   },
 };
diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js
index bc2464543476bc..e32af09288e7ce 100644
--- a/src/styles/getMuiTheme.js
+++ b/src/styles/getMuiTheme.js
@@ -114,6 +114,16 @@ export default function getMuiTheme(baseTheme, muiTheme) {
     },
     paper: {
       backgroundColor: palette.canvasColor,
+      zDepthShadows: [
+        [1, 6, 0.12, 1, 4, 0.12],
+        [3, 10, 0.16, 3, 10, 0.23],
+        [10, 30, 0.19, 6, 10, 0.23],
+        [14, 45, 0.25, 10, 18, 0.22],
+        [19, 60, 0.30, 15, 20, 0.22],
+      ].map(d => (
+        `0 ${d[0]}px ${d[1]}px ${ColorManipulator.fade(palette.shadowColor, d[2])},
+         0 ${d[3]}px ${d[4]}px ${ColorManipulator.fade(palette.shadowColor, d[5])}`
+      )),
     },
     radioButton: {
       borderColor: palette.textColor,