@mui/material 5.8.4 → 5.8.7

package/node/Switch/Switch.js

@@ -126,7 +126,7 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   left: 0,
   zIndex: 1,
   // Render above the focus ripple.
-  color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300],
+  color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
   transition: theme.transitions.create(['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
@@ -134,13 +134,13 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
     transform: 'translateX(20px)'
   },
   [`&.${_switchClasses.default.disabled}`]: {
-    color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`
   },
   [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
     opacity: 0.5
   },
   [`&.${_switchClasses.default.disabled} + .${_switchClasses.default.track}`]: {
-    opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
+    opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`
   },
   [`& .${_switchClasses.default.input}`]: {
     left: '-100%',
@@ -151,7 +151,7 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   ownerState
 }) => (0, _extends2.default)({
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -159,19 +159,19 @@ const SwitchSwitchBase = (0, _styled.default)(_SwitchBase.default, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${_switchClasses.default.checked}`]: {
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${_switchClasses.default.disabled}`]: {
-      color: theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.55)
+      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.55)}`
     }
   },
   [`&.${_switchClasses.default.checked} + .${_switchClasses.default.track}`]: {
-    backgroundColor: theme.palette[ownerState.color].main
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }
 }));
 const SwitchTrack = (0, _styled.default)('span', {
@@ -188,8 +188,8 @@ const SwitchTrack = (0, _styled.default)('span', {
   transition: theme.transitions.create(['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
-  backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
-  opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
+  backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
+  opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
 }));
 const SwitchThumb = (0, _styled.default)('span', {
   name: 'MuiSwitch',
@@ -198,7 +198,7 @@ const SwitchThumb = (0, _styled.default)('span', {
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   backgroundColor: 'currentColor',
   width: 20,
   height: 20,

package/node/TableCell/TableCell.js

@@ -73,18 +73,18 @@ const TableCellRoot = (0, _styled.default)('td', {
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
   // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
-  borderBottom: `1px solid
+  borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? (0, _system.lighten)((0, _system.alpha)(theme.palette.divider, 1), 0.88) : (0, _system.darken)((0, _system.alpha)(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
   padding: 16
 }, ownerState.variant === 'head' && {
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: theme.typography.pxToRem(24),
   fontWeight: theme.typography.fontWeightMedium
 }, ownerState.variant === 'body' && {
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }, ownerState.variant === 'footer' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   lineHeight: theme.typography.pxToRem(21),
   fontSize: theme.typography.pxToRem(12)
 }, ownerState.size === 'small' && {
@@ -116,7 +116,7 @@ const TableCellRoot = (0, _styled.default)('td', {
   position: 'sticky',
   top: 0,
   zIndex: 2,
-  backgroundColor: theme.palette.background.default
+  backgroundColor: (theme.vars || theme).palette.background.default
 }));
 /**
  * The component renders a `<th>` element when the parent context is a header

package/node/Tabs/Tabs.js

@@ -446,31 +446,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scroll(scrollValue);
   };
 
-  const getFirstVisibleTab = tabs => {
-    const containerSize = tabsRef.current[clientSize];
-    const containerStartBound = Math.round(tabsRef.current[scrollStart]);
-    const containerEndBound = Math.round(containerStartBound + containerSize);
-    const offset = vertical ? 'offsetTop' : 'offsetLeft';
-    return tabs.find(tab => {
-      const centerPoint = tab[offset] + tab[clientSize] / 2;
-      return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
-    });
-  };
-
   const getScrollSize = () => {
     const containerSize = tabsRef.current[clientSize];
     let totalSize = 0;
     const children = Array.from(tabListRef.current.children);
-    const firstVisibleTab = getFirstVisibleTab(children);
-
-    if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
-      return firstVisibleTab[clientSize];
-    }
 
     for (let i = 0; i < children.length; i += 1) {
       const tab = children[i];
 
       if (totalSize + tab[clientSize] > containerSize) {
+        // If the first item is longer than the container size, then only scroll
+        // by the container size.
+        if (i === 0) {
+          totalSize = containerSize;
+        }
+
         break;
       }
 
@@ -580,8 +570,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   React.useEffect(() => {
     const handleResize = (0, _debounce.default)(() => {
-      updateIndicatorState();
-      updateScrollButtonState();
+      // If the Tabs component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/33276
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+      if (tabsRef.current) {
+        updateIndicatorState();
+        updateScrollButtonState();
+      }
     });
     const win = (0, _ownerWindow.default)(tabsRef.current);
     win.addEventListener('resize', handleResize);

package/node/Tooltip/Tooltip.js

@@ -151,7 +151,7 @@ const TooltipTooltip = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : (0, _system.alpha)(theme.palette.grey[700], 0.92),
+  backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _system.alpha)(theme.palette.grey[700], 0.92),
   borderRadius: (theme.vars || theme).shape.borderRadius,
   color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.4
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/styles/CssVarsProvider.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+exports.useColorScheme = exports.shouldSkipGeneratingVar = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,10 +15,16 @@ var _experimental_extendTheme = _interopRequireDefault(require("./experimental_e
 
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 
-/* eslint-disable @typescript-eslint/naming-convention */
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
+exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
@@ -30,15 +36,14 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
   resolveTheme: theme => {
     const newTheme = (0, _extends2.default)({}, theme, {
       typography: (0, _createTypography.default)(theme.palette, theme.typography)
     });
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar
 });
 exports.getInitColorSchemeScript = getInitColorSchemeScript;
 exports.useColorScheme = useColorScheme;
-exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+exports.Experimental_CssVarsProvider = CssVarsProvider;

package/node/styles/experimental_extendTheme.js

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createGetCssVar = void 0;
 exports.default = extendTheme;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,7 +20,7 @@ var _createTheme = _interopRequireDefault(require("./createTheme"));
 
 var _Paper = require("../Paper/Paper");
 
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -30,13 +31,31 @@ const defaultDarkOverlays = [...Array(25)].map((_, 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;
+}
+
+const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
+
+exports.createGetCssVar = createGetCssVar;
+
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+  const getCssVar = createGetCssVar(cssVarPrefix);
 
   const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -54,20 +73,26 @@ function extendTheme(options = {}, ...args) {
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
   let theme = (0, _extends2.default)({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
       light: (0, _extends2.default)({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: (0, _extends2.default)({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputUnderline: 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: (0, _extends2.default)({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: (0, _extends2.default)({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputUnderline: 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
       })
@@ -76,23 +101,142 @@ 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 {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
-    }
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
 
-    palette.common.backgroundChannel = (0, _system.colorChannel)(palette.common.background);
-    palette.common.onBackgroundChannel = (0, _system.colorChannel)(palette.common.onBackground);
-    palette.dividerChannel = (0, _system.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];
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', (0, _system.darken)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.darken)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.darken)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.darken)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+      setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+      setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+      setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+      setColor(palette.Alert, 'errorStandardBg', (0, _system.lighten)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.lighten)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.lighten)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.lighten)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('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', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.lighten)(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', (0, _system.lighten)(palette.warning.main, 0.62));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.lighten)(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.lighten)(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.lighten)(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.lighten)(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.lighten)(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.lighten)(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', (0, _system.lighten)((0, _system.alpha)(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
+    } else {
+      setColor(palette.Alert, 'errorColor', (0, _system.lighten)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.lighten)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.lighten)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.lighten)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+      setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+      setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+      setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+      setColor(palette.Alert, 'errorStandardBg', (0, _system.darken)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.darken)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.darken)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.darken)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('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', (0, _system.darken)(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.darken)(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.darken)(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.darken)(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.darken)(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.darken)(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', (0, _system.darken)(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.darken)(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', (0, _system.darken)(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', (0, _system.darken)(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', (0, _system.darken)(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', (0, _system.darken)(palette.warning.main, 0.5));
+      const snackbarContentBackground = (0, _system.emphasize)(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.emphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.darken)(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.darken)(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.darken)(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.darken)(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.darken)(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.darken)(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', (0, _system.darken)((0, _system.alpha)(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
     }
 
+    palette.common.backgroundChannel = (0, _system.colorChannel)(palette.common.background);
+    palette.common.onBackgroundChannel = (0, _system.colorChannel)(palette.common.onBackground);
+    palette.dividerChannel = (0, _system.colorChannel)(palette.divider);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -119,12 +263,16 @@ function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = (0, _system.colorChannel)(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = (0, _system.colorChannel)(colors.selected);
+      }
     });
   });
   theme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.4",
+  "version": "5.8.7",
   "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,12 +46,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.85",
-    "@mui/system": "^5.8.4",
+    "@mui/base": "5.0.0-alpha.88",
+    "@mui/system": "^5.8.7",
     "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.4",
-    "@types/react-transition-group": "^4.4.4",
-    "clsx": "^1.1.1",
+    "@mui/utils": "^5.8.6",
+    "@types/react-transition-group": "^4.4.5",
+    "clsx": "^1.2.0",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-is": "^17.0.2",

package/styles/CssVarsProvider.d.ts

@@ -1,28 +1,14 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { CreateCssVarsProviderResult } from '@mui/system';
-import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
-import { PaletteWithChannels } from './createPalette';
-
-export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
-  colorSchemes: Partial<
-    Record<
-      SupportedColorScheme,
-      {
-        palette: PaletteWithChannels;
-      }
-    >
-  >;
-}
-
-type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
-
-declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
-declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
-
-/**
- * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
- * It should preferably be used at **the root of your component tree**.
- */
-declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
-
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/CssVarsProvider.js

@@ -1,12 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable @typescript-eslint/naming-convention */
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
+
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
 const defaultTheme = experimental_extendTheme();
 const {
-  CssVarsProvider: Experimental_CssVarsProvider,
+  CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript
 } = createCssVarsProvider({
@@ -18,7 +23,6 @@ const {
     light: 'light',
     dark: 'dark'
   },
-  prefix: 'md',
   resolveTheme: theme => {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
@@ -26,6 +30,6 @@ const {
 
     return newTheme;
   },
-  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+  shouldSkipGeneratingVar
 });
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/createPalette.d.ts

@@ -105,32 +105,6 @@ export interface Channels {
   contrastTextChannel: string;
 }
 
-export interface PaletteWithChannels {
-  common: CommonColors & {
-    background: string;
-    onBackground: string;
-    backgroundChannel: string;
-    onBackgroundChannel: string;
-  };
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor & Channels;
-  secondary: PaletteColor & Channels;
-  error: PaletteColor & Channels;
-  warning: PaletteColor & Channels;
-  info: PaletteColor & Channels;
-  success: PaletteColor & Channels;
-  grey: Color & { darkChannel: string };
-  text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
-  divider: TypeDivider;
-  dividerChannel: TypeDivider;
-  action: TypeAction & { disabledChannel: string; activeChannel: string };
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-}
-
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {