@mui/material 5.8.4 → 5.8.7

package/modern/styles/experimental_extendTheme.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -14,12 +14,29 @@ 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 const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = _objectWithoutPropertiesLoose(options, _excluded);
 
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: colorSchemesInput.light?.palette
   })),
@@ -37,20 +54,26 @@ export default function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, colorSchemesInput.light?.opacity),
         overlays: colorSchemesInput.light?.overlays || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, colorSchemesInput.dark?.opacity),
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
@@ -60,23 +83,142 @@ 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 {
-      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 = 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];
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', 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', lighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', 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', 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(${getCssVar('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));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', 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', 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 {
+      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', 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', darken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', 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', 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(${getCssVar('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));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', 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', 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);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -103,12 +245,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);

package/node/Alert/Alert.js

@@ -90,22 +90,30 @@ const AlertRoot = (0, _styled.default)(_Paper.default, {
     display: 'flex',
     padding: '6px 16px'
   }, color && ownerState.variant === 'standard' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${_alertClasses.default.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
   }, color && ownerState.variant === 'outlined' && {
-    color: getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${theme.palette[color].light}`,
-    [`& .${_alertClasses.default.icon}`]: {
+    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+    [`& .${_alertClasses.default.icon}`]: theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}IconColor`]
+    } : {
       color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
     }
-  }, color && ownerState.variant === 'filled' && {
-    color: '#fff',
-    fontWeight: theme.typography.fontWeightMedium,
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-  });
+  }, color && ownerState.variant === 'filled' && (0, _extends2.default)({
+    fontWeight: theme.typography.fontWeightMedium
+  }, theme.vars ? {
+    color: theme.vars.palette.Alert[`${color}FilledColor`],
+    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+  } : {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+    color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+  }));
 });
 const AlertIcon = (0, _styled.default)('div', {
   name: 'MuiAlert',

package/node/AppBar/AppBar.js

@@ -47,7 +47,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', `color${(0, _capitalize.default)(color)}`, `position${(0, _capitalize.default)(position)}`]
   };
   return (0, _base.unstable_composeClasses)(slots, _appBarClasses.getAppBarUtilityClass, classes);
-};
+}; // var2 is the fallback.
+// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
+
+
+const joinVars = (var1, var2) => `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})`;
 
 const AppBarRoot = (0, _styled.default)(_Paper.default, {
   name: 'MuiAppBar',
@@ -72,7 +76,7 @@ const AppBarRoot = (0, _styled.default)(_Paper.default, {
     flexShrink: 0
   }, ownerState.position === 'fixed' && {
     position: 'fixed',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0,
@@ -82,14 +86,14 @@ const AppBarRoot = (0, _styled.default)(_Paper.default, {
     }
   }, ownerState.position === 'absolute' && {
     position: 'absolute',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
   }, ownerState.position === 'sticky' && {
     // ⚠️ sticky is not supported by IE11.
     position: 'sticky',
-    zIndex: theme.zIndex.appBar,
+    zIndex: (theme.vars || theme).zIndex.appBar,
     top: 0,
     left: 'auto',
     right: 0
@@ -97,7 +101,7 @@ const AppBarRoot = (0, _styled.default)(_Paper.default, {
     position: 'static'
   }, ownerState.position === 'relative' && {
     position: 'relative'
-  }, ownerState.color === 'default' && {
+  }, !theme.vars && (0, _extends2.default)({}, ownerState.color === 'default' && {
     backgroundColor: backgroundColorDefault,
     color: theme.palette.getContrastText(backgroundColorDefault)
   }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
@@ -113,6 +117,19 @@ const AppBarRoot = (0, _styled.default)(_Paper.default, {
     color: 'inherit'
   }, theme.palette.mode === 'dark' && {
     backgroundImage: 'none'
+  })), theme.vars && (0, _extends2.default)({}, ownerState.color === 'default' && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
+  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
+    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
+    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, {
+    backgroundColor: 'var(--AppBar-background)',
+    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
+  }, ownerState.color === 'transparent' && {
+    backgroundImage: 'none',
+    backgroundColor: 'transparent',
+    color: 'inherit'
   }));
 });
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {

package/node/Autocomplete/Autocomplete.js

@@ -389,7 +389,7 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$pape;
+  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -588,8 +588,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
-              className: (0, _clsx.default)(classes.popupIndicator),
-              ownerState: ownerState,
+              ownerState: ownerState
+            }, componentsProps.popupIndicator, {
+              className: (0, _clsx.default)(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
               children: popupIcon
             })) : null]
           })
@@ -600,9 +601,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
       as: PopperComponent,
-      className: (0, _clsx.default)(classes.popper),
       disablePortal: disablePortal,
       style: {
         width: anchorEl ? anchorEl.clientWidth : null
@@ -610,7 +610,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: true,
+      open: true
+    }, componentsProps.popper, {
+      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
         as: PaperComponent
@@ -647,7 +649,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           })
         })) : null]
       }))
-    }) : null]
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
@@ -749,7 +751,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   componentsProps: _propTypes.default.shape({
     clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object
+    paper: _propTypes.default.object,
+    popper: _propTypes.default.object,
+    popupIndicator: _propTypes.default.object
   }),
 
   /**

package/node/Avatar/Avatar.js

@@ -76,13 +76,16 @@ const AvatarRoot = (0, _styled.default)('div', {
   overflow: 'hidden',
   userSelect: 'none'
 }, ownerState.variant === 'rounded' && {
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.variant === 'square' && {
   borderRadius: 0
-}, ownerState.colorDefault && {
-  color: theme.palette.background.default,
+}, ownerState.colorDefault && (0, _extends2.default)({
+  color: (theme.vars || theme).palette.background.default
+}, theme.vars ? {
+  backgroundColor: theme.vars.palette.Avatar.defaultBg
+} : {
   backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-}));
+})));
 const AvatarImg = (0, _styled.default)('img', {
   name: 'MuiAvatar',
   slot: 'Img',

package/node/Badge/Badge.js

@@ -347,8 +347,8 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * @default {}
    */
   componentsProps: _propTypes.default.shape({
-    badge: _propTypes.default.object,
-    root: _propTypes.default.object
+    badge: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
 
   /**

package/node/Chip/Chip.js

@@ -106,6 +106,7 @@ const ChipRoot = (0, _styled.default)('div', {
   ownerState
 }) => {
   const deleteIconColor = (0, _system.alpha)(theme.palette.text.primary, 0.26);
+  const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return (0, _extends2.default)({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
@@ -114,8 +115,8 @@ const ChipRoot = (0, _styled.default)('div', {
     alignItems: 'center',
     justifyContent: 'center',
     height: 32,
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.action.selected,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
@@ -131,7 +132,7 @@ const ChipRoot = (0, _styled.default)('div', {
     verticalAlign: 'middle',
     boxSizing: 'border-box',
     [`&.${_chipClasses.default.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`& .${_chipClasses.default.avatar}`]: {
@@ -139,16 +140,16 @@ const ChipRoot = (0, _styled.default)('div', {
       marginRight: -6,
       width: 24,
       height: 24,
-      color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
       fontSize: theme.typography.pxToRem(12)
     },
     [`& .${_chipClasses.default.avatarColorPrimary}`]: {
-      color: theme.palette.primary.contrastText,
-      backgroundColor: theme.palette.primary.dark
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark
     },
     [`& .${_chipClasses.default.avatarColorSecondary}`]: {
-      color: theme.palette.secondary.contrastText,
-      backgroundColor: theme.palette.secondary.dark
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark
     },
     [`& .${_chipClasses.default.avatarSmall}`]: {
       marginLeft: 4,
@@ -158,7 +159,7 @@ const ChipRoot = (0, _styled.default)('div', {
       fontSize: theme.typography.pxToRem(10)
     },
     [`& .${_chipClasses.default.icon}`]: (0, _extends2.default)({
-      color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
       marginLeft: 5,
       marginRight: -6
     }, ownerState.size === 'small' && {
@@ -170,35 +171,35 @@ const ChipRoot = (0, _styled.default)('div', {
     }),
     [`& .${_chipClasses.default.deleteIcon}`]: (0, _extends2.default)({
       WebkitTapHighlightColor: 'transparent',
-      color: deleteIconColor,
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: (0, _system.alpha)(deleteIconColor, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _system.alpha)(deleteIconColor, 0.4)
       }
     }, ownerState.size === 'small' && {
       fontSize: 16,
       marginRight: 4,
       marginLeft: -4
     }, ownerState.color !== 'default' && {
-      color: (0, _system.alpha)(theme.palette[ownerState.color].contrastText, 0.7),
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].contrastText, 0.7),
       '&:hover, &:active': {
-        color: theme.palette[ownerState.color].contrastText
+        color: (theme.vars || theme).palette[ownerState.color].contrastText
       }
     })
   }, ownerState.size === 'small' && {
     height: 24
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${_chipClasses.default.focusVisible}`]: {
-      backgroundColor: (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   }, ownerState.onDelete && ownerState.color !== 'default' && {
     [`&.${_chipClasses.default.focusVisible}`]: {
-      backgroundColor: theme.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   });
 }, ({
@@ -209,29 +210,29 @@ const ChipRoot = (0, _styled.default)('div', {
   WebkitTapHighlightColor: 'transparent',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
   },
   [`&.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   },
   '&:active': {
-    boxShadow: theme.shadows[1]
+    boxShadow: (theme.vars || theme).shadows[1]
   }
 }, ownerState.clickable && ownerState.color !== 'default' && {
   [`&:hover, &.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }
 }), ({
   theme,
   ownerState
 }) => (0, _extends2.default)({}, ownerState.variant === 'outlined' && {
   backgroundColor: 'transparent',
-  border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
   [`&.${_chipClasses.default.clickable}:hover`]: {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`& .${_chipClasses.default.avatar}`]: {
     marginLeft: 4
@@ -252,18 +253,18 @@ const ChipRoot = (0, _styled.default)('div', {
     marginRight: 3
   }
 }, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${(0, _system.alpha)(theme.palette[ownerState.color].main, 0.7)}`,
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7)}`,
   [`&.${_chipClasses.default.clickable}: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)
   },
   [`&.${_chipClasses.default.focusVisible}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
   },
   [`& .${_chipClasses.default.deleteIcon}`]: {
-    color: (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.7),
     '&:hover, &:active': {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
   }
 }));