@mui/material 5.6.2 → 5.7.0

package/legacy/Divider/Divider.js

@@ -42,7 +42,7 @@ var DividerRoot = styled('div', {
     flexShrink: 0,
     borderWidth: 0,
     borderStyle: 'solid',
-    borderColor: theme.palette.divider,
+    borderColor: (theme.vars || theme).palette.divider,
     borderBottomWidth: 'thin'
   }, ownerState.absolute && {
     position: 'absolute',
@@ -50,7 +50,7 @@ var DividerRoot = styled('div', {
     left: 0,
     width: '100%'
   }, ownerState.light && {
-    borderColor: alpha(theme.palette.divider, 0.08)
+    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.dividerChannel, " / 0.08)") : alpha(theme.palette.divider, 0.08)
   }, ownerState.variant === 'inset' && {
     marginLeft: 72
   }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -78,7 +78,7 @@ var DividerRoot = styled('div', {
     '&::before, &::after': {
       position: 'relative',
       width: '100%',
-      borderTop: "thin solid ".concat(theme.palette.divider),
+      borderTop: "thin solid ".concat((theme.vars || theme).palette.divider),
       top: '50%',
       content: '""',
       transform: 'translateY(50%)'
@@ -94,7 +94,7 @@ var DividerRoot = styled('div', {
       top: '0%',
       left: '50%',
       borderTop: 0,
-      borderLeft: "thin solid ".concat(theme.palette.divider),
+      borderLeft: "thin solid ".concat((theme.vars || theme).palette.divider),
       transform: 'translateX(0%)'
     }
   });

package/legacy/Drawer/Drawer.js

@@ -40,7 +40,7 @@ var DrawerRoot = styled(Modal, {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    zIndex: theme.zIndex.drawer
+    zIndex: (theme.vars || theme).zIndex.drawer
   };
 });
 var DrawerDockedRoot = styled('div', {
@@ -68,7 +68,7 @@ var DrawerPaper = styled(Paper, {
     flexDirection: 'column',
     height: '100%',
     flex: '1 0 auto',
-    zIndex: theme.zIndex.drawer,
+    zIndex: (theme.vars || theme).zIndex.drawer,
     // Add iOS momentum scrolling for iOS < 13.0
     WebkitOverflowScrolling: 'touch',
     // temporary style
@@ -96,13 +96,13 @@ var DrawerPaper = styled(Paper, {
     height: 'auto',
     maxHeight: '100%'
   }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-    borderRight: "1px solid ".concat(theme.palette.divider)
+    borderRight: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-    borderBottom: "1px solid ".concat(theme.palette.divider)
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-    borderLeft: "1px solid ".concat(theme.palette.divider)
+    borderLeft: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-    borderTop: "1px solid ".concat(theme.palette.divider)
+    borderTop: "1px solid ".concat((theme.vars || theme).palette.divider)
   });
 });
 var oppositeDirection = {

package/legacy/Fab/Fab.js

@@ -31,7 +31,7 @@ var FabRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(function (_ref) {
-  var _extends2;
+  var _theme$palette$getCon, _theme$palette, _extends2;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -45,27 +45,27 @@ var FabRoot = styled(ButtonBase, {
     minWidth: 0,
     width: 56,
     height: 56,
-    zIndex: theme.zIndex.fab,
-    boxShadow: theme.shadows[6],
+    zIndex: (theme.vars || theme).zIndex.fab,
+    boxShadow: (theme.vars || theme).shadows[6],
     '&:active': {
-      boxShadow: theme.shadows[12]
+      boxShadow: (theme.vars || theme).shadows[12]
     },
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
+    color: theme.vars ? theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
     '&:hover': {
-      backgroundColor: theme.palette.grey.A100,
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette.grey[300]
+        backgroundColor: (theme.vars || theme).palette.grey[300]
       },
       textDecoration: 'none'
     }
   }, _defineProperty(_extends2, "&.".concat(fabClasses.focusVisible), {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   }), _defineProperty(_extends2, "&.".concat(fabClasses.disabled), {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
+    color: (theme.vars || theme).palette.action.disabled,
+    boxShadow: (theme.vars || theme).shadows[0],
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   }), _extends2), ownerState.size === 'small' && {
     width: 40,
     height: 40
@@ -97,14 +97,14 @@ var FabRoot = styled(ButtonBase, {
 }, function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
-  return _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main,
+  return _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: theme.palette[ownerState.color].dark,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }
   });

package/legacy/FilledInput/FilledInput.js

@@ -35,7 +35,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     return [].concat(_toConsumableArray(inputBaseRootOverridesResolver(props, styles)), [!ownerState.disableUnderline && styles.underline]);
   }
 })(function (_ref) {
-  var _extends2, _ref2;
+  var _extends2, _theme$palette, _ref2;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -64,7 +64,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
     backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
   }), _extends2), !ownerState.disableUnderline && (_ref2 = {
     '&:after': {
-      borderBottom: "2px solid ".concat(theme.palette[ownerState.color].main),
+      borderBottom: "2px solid ".concat((_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main),
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242

package/legacy/FormControlLabel/FormControlLabel.js

@@ -61,7 +61,7 @@ export var FormControlLabelRoot = styled('label', {
     flexDirection: 'column',
     marginLeft: 16
   }, _defineProperty({}, "& .".concat(formControlLabelClasses.label), _defineProperty({}, "&.".concat(formControlLabelClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   })));
 });
 /**

package/legacy/FormHelperText/FormHelperText.js

@@ -44,7 +44,7 @@ var FormHelperTextRoot = styled('p', {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, theme.typography.caption, (_extends2 = {
     textAlign: 'left',
     marginTop: 3,
@@ -52,9 +52,9 @@ var FormHelperTextRoot = styled('p', {
     marginBottom: 0,
     marginLeft: 0
   }, _defineProperty(_extends2, "&.".concat(formHelperTextClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _defineProperty(_extends2, "&.".concat(formHelperTextClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _extends2), ownerState.size === 'small' && {
     marginTop: 4
   }, ownerState.contained && {

package/legacy/FormLabel/FormLabel.js

@@ -41,17 +41,17 @@ export var FormLabelRoot = styled('label', {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   return _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, theme.typography.body1, (_extends2 = {
     lineHeight: '1.4375em',
     padding: 0,
     position: 'relative'
   }, _defineProperty(_extends2, "&.".concat(formLabelClasses.focused), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty(_extends2, "&.".concat(formLabelClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _defineProperty(_extends2, "&.".concat(formLabelClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _extends2));
 });
 var AsteriskComponent = styled('span', {
@@ -63,7 +63,7 @@ var AsteriskComponent = styled('span', {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return _defineProperty({}, "&.".concat(formLabelClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   });
 });
 var FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {

package/legacy/Icon/Icon.js

@@ -50,14 +50,14 @@ var IconRoot = styled('span', {
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
     color: {
-      primary: theme.palette.primary.main,
-      secondary: theme.palette.secondary.main,
-      info: theme.palette.info.main,
-      success: theme.palette.success.main,
-      warning: theme.palette.warning.main,
-      action: theme.palette.action.active,
-      error: theme.palette.error.main,
-      disabled: theme.palette.action.disabled,
+      primary: (theme.vars || theme).palette.primary.main,
+      secondary: (theme.vars || theme).palette.secondary.main,
+      info: (theme.vars || theme).palette.info.main,
+      success: (theme.vars || theme).palette.success.main,
+      warning: (theme.vars || theme).palette.warning.main,
+      action: (theme.vars || theme).palette.action.active,
+      error: (theme.vars || theme).palette.error.main,
+      disabled: (theme.vars || theme).palette.action.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/legacy/IconButton/IconButton.js

@@ -44,13 +44,13 @@ var IconButtonRoot = styled(ButtonBase, {
     borderRadius: '50%',
     overflow: 'visible',
     // Explicitly set the default value to solve a bug on IE11.
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
     })
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.active, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -67,10 +67,10 @@ var IconButtonRoot = styled(ButtonBase, {
   return _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -84,7 +84,7 @@ var IconButtonRoot = styled(ButtonBase, {
     fontSize: theme.typography.pxToRem(28)
   }, _defineProperty({}, "&.".concat(iconButtonClasses.disabled), {
     backgroundColor: 'transparent',
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }));
 });
 /**

package/legacy/ImageListItemBar/ImageListItemBar.js

@@ -67,7 +67,7 @@ var ImageListItemBarTitleWrap = styled('div', {
   return _extends({
     flexGrow: 1,
     padding: '12px 16px',
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     overflow: 'hidden'
   }, ownerState.position === 'below' && {
     padding: '6px 0 12px',

package/legacy/Input/Input.js

@@ -41,6 +41,11 @@ var InputRoot = styled(InputBaseRoot, {
       ownerState = _ref.ownerState;
   var light = theme.palette.mode === 'light';
   var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+
+  if (theme.vars) {
+    bottomLineColor = "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputTouchBottomLine, ")");
+  }
+
   return _extends({
     position: 'relative'
   }, ownerState.formControl && {
@@ -49,7 +54,7 @@ var InputRoot = styled(InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && (_ref2 = {
     '&:after': {
-      borderBottom: "2px solid ".concat(theme.palette[ownerState.color].main),
+      borderBottom: "2px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -69,7 +74,7 @@ var InputRoot = styled(InputBaseRoot, {
     // See https://github.com/mui/material-ui/issues/31766
     transform: 'scaleX(1) translateX(0)'
   }), _defineProperty(_ref2, "&.".concat(inputClasses.error, ":after"), {
-    borderBottomColor: theme.palette.error.main,
+    borderBottomColor: (theme.vars || theme).palette.error.main,
     transform: 'scaleX(1)' // error is always underlined in red
 
   }), _defineProperty(_ref2, '&:before', {
@@ -86,7 +91,7 @@ var InputRoot = styled(InputBaseRoot, {
     pointerEvents: 'none' // Transparent to the hover style.
 
   }), _defineProperty(_ref2, "&:hover:not(.".concat(inputClasses.disabled, "):before"), {
-    borderBottom: "2px solid ".concat(theme.palette.text.primary),
+    borderBottom: "2px solid ".concat((theme.vars || theme).palette.text.primary),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       borderBottom: "1px solid ".concat(bottomLineColor)

package/legacy/InputAdornment/InputAdornment.js

@@ -50,7 +50,7 @@ var InputAdornmentRoot = styled('div', {
     maxHeight: '2em',
     alignItems: 'center',
     whiteSpace: 'nowrap',
-    color: theme.palette.action.active
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.variant === 'filled' && _defineProperty({}, "&.".concat(inputAdornmentClasses.positionStart, "&:not(.").concat(inputAdornmentClasses.hiddenLabel, ")"), {
     marginTop: 16
   }), ownerState.position === 'start' && {

package/legacy/InputBase/InputBase.js

@@ -58,7 +58,7 @@ export var InputBaseRoot = styled('div', {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({}, theme.typography.body1, _defineProperty({
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     lineHeight: '1.4375em',
     // 23px
     boxSizing: 'border-box',
@@ -68,7 +68,7 @@ export var InputBaseRoot = styled('div', {
     display: 'inline-flex',
     alignItems: 'center'
   }, "&.".concat(inputBaseClasses.disabled), {
-    color: theme.palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
   }), ownerState.multiline && _extends({
     padding: '4px 0 5px'
@@ -88,17 +88,25 @@ export var InputBaseComponent = styled('input', {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
   var light = theme.palette.mode === 'light';
-  var placeholder = {
-    color: 'currentColor',
-    opacity: light ? 0.42 : 0.5,
+
+  var placeholder = _extends({
+    color: 'currentColor'
+  }, theme.vars ? {
+    opacity: theme.vars.opacity.placeholder
+  } : {
+    opacity: light ? 0.42 : 0.5
+  }, {
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter
     })
-  };
+  });
+
   var placeholderHidden = {
     opacity: '0 !important'
   };
-  var placeholderVisible = {
+  var placeholderVisible = theme.vars ? {
+    opacity: theme.vars.opacity.placeholder
+  } : {
     opacity: light ? 0.42 : 0.5
   };
   return _extends((_extends3 = {
@@ -157,7 +165,7 @@ export var InputBaseComponent = styled('input', {
   }), _defineProperty(_extends3, "&.".concat(inputBaseClasses.disabled), {
     opacity: 1,
     // Reset iOS opacity
-    WebkitTextFillColor: theme.palette.text.disabled // Fix opacity Safari bug
+    WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
 
   }), _defineProperty(_extends3, '&:-webkit-autofill', {
     animationDuration: '5000s',

package/legacy/Link/Link.js

@@ -10,7 +10,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -93,7 +92,6 @@ var LinkRoot = styled(Typography, {
   }));
 });
 var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  var theme = useTheme();
   var props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -114,8 +112,6 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
       sx = props.sx,
       other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"]);
 
-  var sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
-
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
       handleBlurVisible = _useIsFocusVisible.onBlur,
@@ -153,9 +149,7 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   var ownerState = _extends({}, props, {
-    // It is too complex to support any types of `sx`.
-    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
-    color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
+    color: color,
     component: component,
     focusVisible: focusVisible,
     underline: underline,
@@ -173,8 +167,8 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ref: handlerRef,
     ownerState: ownerState,
     variant: variant,
-    sx: [].concat(_toConsumableArray(inProps.color ? [{
-      color: colorTransformations[color] || color
+    sx: [].concat(_toConsumableArray(!Object.keys(colorTransformations).includes(color) ? [{
+      color: color
     }] : []), _toConsumableArray(Array.isArray(sx) ? sx : [sx]))
   }, other));
 });

package/legacy/ListItem/ListItem.js

@@ -76,17 +76,17 @@ export var ListItemRoot = styled('div', {
   }), !!ownerState.secondaryAction && _defineProperty({}, "& > .".concat(listItemButtonClasses.root), {
     paddingRight: 48
   }), (_extends2 = {}, _defineProperty(_extends2, "&.".concat(listItemClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends2, "&.".concat(listItemClasses.selected), _defineProperty({
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(listItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   })), _defineProperty(_extends2, "&.".concat(listItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _extends2), ownerState.alignItems === 'flex-start' && {
     alignItems: 'flex-start'
   }, ownerState.divider && {
-    borderBottom: "1px solid ".concat(theme.palette.divider),
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
     backgroundClip: 'padding-box'
   }, ownerState.button && _defineProperty({
     transition: theme.transitions.create('background-color', {
@@ -94,17 +94,17 @@ export var ListItemRoot = styled('div', {
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, "&.".concat(listItemClasses.selected, ":hover"), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }), ownerState.hasSecondaryAction && {
     // Add some space to avoid collision as `ListItemSecondaryAction`

package/legacy/ListItemButton/ListItemButton.js

@@ -63,28 +63,28 @@ var ListItemButtonRoot = styled(ButtonBase, {
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, _defineProperty(_extends2, "&.".concat(listItemButtonClasses.selected), _defineProperty({
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(listItemButtonClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   })), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.selected, ":hover"), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _extends2), ownerState.divider && {
-    borderBottom: "1px solid ".concat(theme.palette.divider),
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
     backgroundClip: 'padding-box'
   }, ownerState.alignItems === 'flex-start' && {
     alignItems: 'flex-start'

package/legacy/ListItemIcon/ListItemIcon.js

@@ -31,7 +31,7 @@ var ListItemIconRoot = styled('div', {
       ownerState = _ref.ownerState;
   return _extends({
     minWidth: 56,
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     flexShrink: 0,
     display: 'inline-flex'
   }, ownerState.alignItems === 'flex-start' && {

package/legacy/ListSubheader/ListSubheader.js

@@ -36,12 +36,12 @@ var ListSubheaderRoot = styled('li', {
     boxSizing: 'border-box',
     lineHeight: '48px',
     listStyle: 'none',
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     fontFamily: theme.typography.fontFamily,
     fontWeight: theme.typography.fontWeightMedium,
     fontSize: theme.typography.pxToRem(14)
   }, ownerState.color === 'primary' && {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, !ownerState.disableGutters && {
@@ -53,7 +53,7 @@ var ListSubheaderRoot = styled('li', {
     position: 'sticky',
     top: 0,
     zIndex: 1,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   });
 });
 var ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {

package/legacy/MenuItem/MenuItem.js

@@ -63,31 +63,31 @@ var MenuItemRoot = styled(ButtonBase, {
     paddingLeft: 16,
     paddingRight: 16
   }, ownerState.divider && {
-    borderBottom: "1px solid ".concat(theme.palette.divider),
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
     backgroundClip: 'padding-box'
   }, (_extends2 = {
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, _defineProperty(_extends2, "&.".concat(menuItemClasses.selected), _defineProperty({
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(menuItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   })), _defineProperty(_extends2, "&.".concat(menuItemClasses.selected, ":hover"), {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }), _defineProperty(_extends2, "&.".concat(menuItemClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends2, "&.".concat(menuItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _defineProperty(_extends2, "& + .".concat(dividerClasses.root), {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)