use overlay

mui · Jul 29, 2020 · 80d12c5 · 80d12c5
1 parent e7d9e26
commit 80d12c5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -198,9 +198,6 @@ export function ThemeProvider(props) {
             main: paletteType === 'light' ? darken(pink.A400, 0.1) : pink[200],
           },
           type: paletteType,
-          background: {
-            default: paletteType === 'light' ? '#fff' : '#121212',
-          },
           ...paletteColors,
         },
         spacing,

diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
@@ -28,7 +28,15 @@ export const styles = (theme) => {
   const overlays = {};
   theme.shadows.forEach((_, index) => {
     overlays[`overlay${index}`] = {
-      backgroundColor: fade(theme.palette.background.paper, calculateAlpha(index)),
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        background: fade('#fff', calculateAlpha(index)),
+      },
     };
   });
 
@@ -38,6 +46,7 @@ export const styles = (theme) => {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
       transition: theme.transitions.create('box-shadow'),
+      position: 'relative',
     },
     /* Styles applied to the root element if `square={false}`. */
     rounded: {

diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js
@@ -28,7 +28,7 @@ export const light = {
   // Consistency between these values is important.
   background: {
     paper: common.white,
-    default: grey[50],
+    default: common.white,
   },
   // The colors used to style the action elements.
   action: {
@@ -61,8 +61,8 @@ export const dark = {
   },
   divider: 'rgba(255, 255, 255, 0.12)',
   background: {
-    paper: grey[800],
-    default: '#303030',
+    paper: '#121212',
+    default: '#121212',
   },
   action: {
     active: common.white,