fix(material): use material elevation variable to control shadows

telerik · Dec 7, 2018 · cc9cc73 · cc9cc73
1 parent 34f5a1d
commit cc9cc73
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
@@ -540,10 +540,19 @@ The default value of `null` embeds the package font with a `data:` URL
 <th>Description</th>
 </tr>
 <tr>
+<td>$elevation</td>
+<td>
+
+    map-get( $theme, elevation )
+</td>
+<td>Color of shadows
+</td>
+</tr>
+<tr>
 <td>$box-shadow-depth-1</td>
 <td>
 
-    0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
+    0 2px 1px -1px rgba($elevation, .2), 0 1px 1px 0 rgba($elevation, .14), 0 1px 3px 0 rgba($elevation, .12)
 </td>
 <td>Shadow for switch.<br/>
 Equivalent to material elevation 1.
@@ -553,7 +562,7 @@ Equivalent to material elevation 1.
 <td>$box-shadow-depth-2</td>
 <td>
 
-    0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
+    0 3px 1px -2px rgba($elevation, .2), 0 2px 2px 0 rgba($elevation, .14), 0 1px 5px 0 rgba($elevation, .12)
 </td>
 <td>Shadow for resting state of button, card and other widgets.<br/>
 Equivalent to material elevation 2.
@@ -563,7 +572,7 @@ Equivalent to material elevation 2.
 <td>$box-shadow-depth-3</td>
 <td>
 
-    0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
+    0 5px 5px -3px rgba($elevation, .2), 0 8px 10px 1px rgba($elevation, .14), 0 3px 14px 2px rgba($elevation, .12)
 </td>
 <td>Shadow for menu, popups and raised state of button and card.<br/>
 Equivalent to material elevation 8.
@@ -573,7 +582,7 @@ Equivalent to material elevation 8.
 <td>$box-shadow-depth-4</td>
 <td>
 
-    0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
+    0 8px 10px -5px rgba($elevation, .2), 0 16px 24px 2px rgba($elevation, .14), 0 6px 30px 5px rgba($elevation, .12)
 </td>
 <td>Shadow for drawers and other overlaying elements.<br/>
 Equivalent to material elevation 16.
@@ -583,7 +592,7 @@ Equivalent to material elevation 16.
 <td>$box-shadow-depth-5</td>
 <td>
 
-    0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)
+    0 11px 15px -7px rgba($elevation, .2), 0 24px 38px 3px rgba($elevation, .14), 0 9px 46px 8px rgba($elevation, .12)
 </td>
 <td>Shadow for window and dialog.<br/>
 Equivalent to material elevation 24.

diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -39,26 +39,29 @@ $color-level-step: 8% !default;
 
 // Shadows
 
+/// Color of shadows
+/// @group shadows
+$elevation: map-get( $theme, elevation );
 /// Shadow for switch.
 /// Equivalent to material elevation 1.
 /// @group shadows
-$box-shadow-depth-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12) !default;
+$box-shadow-depth-1: 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) !default;
 /// Shadow for resting state of button, card and other widgets.
 /// Equivalent to material elevation 2.
 /// @group shadows
-$box-shadow-depth-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+$box-shadow-depth-2: 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) !default;
 /// Shadow for menu, popups and raised state of button and card.
 /// Equivalent to material elevation 8.
 /// @group shadows
-$box-shadow-depth-3: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
+$box-shadow-depth-3: 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) !default;
 /// Shadow for drawers and other overlaying elements.
 /// Equivalent to material elevation 16.
 /// @group shadows
-$box-shadow-depth-4: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12) !default;
+$box-shadow-depth-4: 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) !default;
 /// Shadow for window and dialog.
 /// Equivalent to material elevation 24.
 /// @group shadows
-$box-shadow-depth-5: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;
+$box-shadow-depth-5: 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) !default;
 
 
 // Fonts