introduce overlays

mui · May 5, 2022 · 5edd194 · 5edd194
1 parent 9fa8606
commit 5edd194
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js
@@ -10,7 +10,7 @@ import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses';
 
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-const getOverlayAlpha = (elevation) => {
+export const getOverlayAlpha = (elevation) => {
   let alphaValue;
   if (elevation < 1) {
     alphaValue = 5.11916 * elevation ** 2;
@@ -49,7 +49,7 @@ const PaperRoot = styled('div', {
     ];
   },
 })(({ theme, ownerState }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
   transition: theme.transitions.create('box-shadow'),
   ...(!ownerState.square && {
@@ -60,11 +60,15 @@ const PaperRoot = styled('div', {
   }),
   ...(ownerState.variant === 'elevation' && {
     boxShadow: (theme.vars || theme).shadows[ownerState.elevation],
-    ...(theme.palette.mode === 'dark' && {
-      backgroundImage: `linear-gradient(${alpha(
-        '#fff',
-        getOverlayAlpha(ownerState.elevation),
-      )}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`,
+    ...(!theme.vars &&
+      theme.palette.mode === 'dark' && {
+        backgroundImage: `linear-gradient(${alpha(
+          '#fff',
+          getOverlayAlpha(ownerState.elevation),
+        )}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`,
+      }),
+    ...(theme.vars && {
+      backgroundImage: theme.vars.overlays[ownerState.elevation],
     }),
   }),
 }));

diff --git a/packages/mui-material/src/Paper/index.d.ts b/packages/mui-material/src/Paper/index.d.ts
@@ -1,5 +1,5 @@
 export { default } from './Paper';
-export * from './Paper';
+export type { PaperProps, PaperPropsVariantOverrides, PaperTypeMap } from './Paper';
 
 export { default as paperClasses } from './paperClasses';
 export * from './paperClasses';
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts
@@ -39,6 +39,34 @@ export interface Opacity {
   inputTouchBottomLine: number;
 }
 
+export type Overlays = [
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+];
+
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
   components?: Components<BaseTheme>;
@@ -47,6 +75,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
     {
       palette?: PaletteOptions;
       opacity?: Partial<Opacity>;
+      overlays?: Overlays;
     }
   >;
   shadows?: Shadows;
@@ -60,6 +89,7 @@ interface BaseTheme extends SystemTheme {
   mixins: Mixins;
   palette: Palette;
   opacity: Opacity;
+  overlays: Overlays;
   shadows: Shadows;
   transitions: Transitions;
   typography: Typography;

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -1,6 +1,12 @@
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
+import { getOverlayAlpha } from '../Paper/Paper';
+
+const defaultDarkOverlays = [...Array(24)].map((_, index) => {
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
 
 export default function extendTheme(options = {}, ...args) {
   const { colorSchemes: colorSchemesInput = {}, ...input } = options;
@@ -25,6 +31,7 @@ export default function extendTheme(options = {}, ...args) {
           inputTouchBottomLine: 0.42,
           ...colorSchemesInput.light?.opacity,
         },
+        overlays: colorSchemesInput.light?.overlays || [],
       },
       dark: {
         ...colorSchemesInput.dark,
@@ -34,6 +41,7 @@ export default function extendTheme(options = {}, ...args) {
           inputTouchBottomLine: 0.7,
           ...colorSchemesInput.dark?.opacity,
         },
+        overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays,
       },
     },
   };

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -231,6 +231,24 @@ describe('experimental_extendTheme', () => {
     });
   });
 
+  describe('overlays', () => {
+    it('should provide the default array', () => {
+      const theme = extendTheme();
+      expect(theme.colorSchemes.light.overlays).to.have.length(0);
+      expect(theme.colorSchemes.dark.overlays).to.have.length(24);
+
+      expect(theme.colorSchemes.dark.overlays[2]).to.equal(
+        'linear-gradient(rgba(255 255 255 / 0.07), rgba(255 255 255 / 0.07))',
+      );
+    });
+
+    it('should override the array as expected', () => {
+      const overlays = Array(24).fill('none');
+      const theme = extendTheme({ colorSchemes: { dark: { overlays } } });
+      expect(theme.colorSchemes.dark.overlays).to.equal(overlays);
+    });
+  });
+
   describe('shadows', () => {
     it('should provide the default array', () => {
       const theme = extendTheme();