@mui/material 5.8.2 → 5.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.2",
+  "version": "5.8.5",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/material-ui/getting-started/installation/",
+  "homepage": "https://mui.com/material-ui/getting-started/overview/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui"
@@ -46,14 +46,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.83",
-    "@mui/system": "^5.8.2",
-    "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.8.0",
+    "@mui/base": "5.0.0-alpha.86",
+    "@mui/system": "^5.8.5",
+    "@mui/types": "^7.1.4",
+    "@mui/utils": "^5.8.4",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.1.0",
-    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1",
     "react-is": "^17.0.2",
     "react-transition-group": "^4.4.2"

package/styles/CssVarsProvider.js

@@ -11,11 +11,14 @@ const {
   getInitColorSchemeScript
 } = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
+  prefix: 'mui',
   resolveTheme: theme => {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)

package/styles/createPalette.d.ts

@@ -122,13 +122,76 @@ export interface PaletteWithChannels {
   info: PaletteColor & Channels;
   success: PaletteColor & Channels;
   grey: Color & { darkChannel: string };
-  text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
+  text: TypeText & { primaryChannel: string; secondaryChannel: string };
   divider: TypeDivider;
   dividerChannel: TypeDivider;
-  action: TypeAction & { disabledChannel: string; activeChannel: string };
+  action: TypeAction & { activeChannel: string; selectedChannel: string };
   background: TypeBackground;
   getContrastText: (background: string) => string;
   augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+  // component tokens
+  AppBar: {
+    defaultBg: string;
+    darkBg: string;
+    darkColor: string;
+  };
+  Avatar: {
+    defaultBg: string;
+  };
+  Chip: {
+    defaultBorder: string;
+    defaultAvatarColor: string;
+    defaultIconColor: string;
+  };
+  FilledInput: {
+    bg: string;
+    hoverBg: string;
+    disabledBg: string;
+  };
+  LinearProgress: {
+    primaryBg: string;
+    secondaryBg: string;
+    errorBg: string;
+    infoBg: string;
+    successBg: string;
+    warningBg: string;
+  };
+  Slider: {
+    primaryTrack: string;
+    secondaryTrack: string;
+    errorTrack: string;
+    infoTrack: string;
+    successTrack: string;
+    warningTrack: string;
+  };
+  SnackbarContent: {
+    bg: string;
+  };
+  SpeedDialAction: {
+    fabHoverBg: string;
+  };
+  StepConnector: {
+    border: string;
+  };
+  StepContent: {
+    border: string;
+  };
+  Switch: {
+    defaultColor: string;
+    defaultDisabledColor: string;
+    primaryDisabledColor: string;
+    secondaryDisabledColor: string;
+    errorDisabledColor: string;
+    infoDisabledColor: string;
+    successDisabledColor: string;
+    warningDisabledColor: string;
+  };
+  TableCell: {
+    border: string;
+  };
+  Tooltip: {
+    bg: string;
+  };
 }
 
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };

package/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colorSchemes"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -14,6 +14,19 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
+
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  obj[key] = obj[key] || defaultValue;
+}
+
 export default function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
@@ -43,16 +56,20 @@ export default function extendTheme(options = {}, ...args) {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputTouchBottomLine: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputTouchBottomLine: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
@@ -62,23 +79,98 @@ export default function extendTheme(options = {}, ...args) {
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
 
-    if (key === 'dark') {
-      palette.common.background = palette.common.background || '#000';
-      palette.common.onBackground = palette.common.onBackground || '#fff';
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
+
+
+    assignNode(palette, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
+      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     }
 
     palette.common.backgroundChannel = colorChannel(palette.common.background);
     palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
-    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
-
-    if (!palette.grey.dark) {
-      palette.grey.dark = palette.grey[700];
-    }
-
+    palette.dividerChannel = colorChannel(palette.divider);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -105,12 +197,16 @@ export default function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = colorChannel(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = colorChannel(colors.selected);
+      }
     });
   });
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);