@mui/material 5.6.2 → 5.7.0

package/node/Fab/Fab.js

@@ -62,77 +62,81 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.button, {
-  minHeight: 36,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  borderRadius: '50%',
-  padding: 0,
-  minWidth: 0,
-  width: 56,
-  height: 56,
-  zIndex: theme.zIndex.fab,
-  boxShadow: theme.shadows[6],
-  '&:active': {
-    boxShadow: theme.shadows[12]
-  },
-  color: theme.palette.getContrastText(theme.palette.grey[300]),
-  backgroundColor: theme.palette.grey[300],
-  '&:hover': {
-    backgroundColor: theme.palette.grey.A100,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette.grey[300]
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+
+  return (0, _extends2.default)({}, theme.typography.button, {
+    minHeight: 36,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+      duration: theme.transitions.duration.short
+    }),
+    borderRadius: '50%',
+    padding: 0,
+    minWidth: 0,
+    width: 56,
+    height: 56,
+    zIndex: (theme.vars || theme).zIndex.fab,
+    boxShadow: (theme.vars || theme).shadows[6],
+    '&:active': {
+      boxShadow: (theme.vars || theme).shadows[12]
     },
-    textDecoration: 'none'
-  },
-  [`&.${_fabClasses.default.focusVisible}`]: {
-    boxShadow: theme.shadows[6]
-  },
-  [`&.${_fabClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
-  }
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 40
-}, ownerState.size === 'medium' && {
-  width: 48,
-  height: 48
-}, ownerState.variant === 'extended' && {
-  borderRadius: 48 / 2,
-  padding: '0 16px',
-  width: 'auto',
-  minHeight: 'auto',
-  minWidth: 48,
-  height: 48
-}, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-  width: 'auto',
-  padding: '0 8px',
-  borderRadius: 34 / 2,
-  minWidth: 34,
-  height: 34
-}, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-  width: 'auto',
-  padding: '0 16px',
-  borderRadius: 40 / 2,
-  minWidth: 40,
-  height: 40
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
-}), ({
+    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.vars || theme).palette.grey.A100,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      },
+      textDecoration: 'none'
+    },
+    [`&.${_fabClasses.default.focusVisible}`]: {
+      boxShadow: (theme.vars || theme).shadows[6]
+    },
+    [`&.${_fabClasses.default.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    }
+  }, ownerState.size === 'small' && {
+    width: 40,
+    height: 40
+  }, ownerState.size === 'medium' && {
+    width: 48,
+    height: 48
+  }, ownerState.variant === 'extended' && {
+    borderRadius: 48 / 2,
+    padding: '0 16px',
+    width: 'auto',
+    minHeight: 'auto',
+    minWidth: 48,
+    height: 48
+  }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
+    width: 'auto',
+    padding: '0 8px',
+    borderRadius: 34 / 2,
+    minWidth: 34,
+    height: 34
+  }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
+    width: 'auto',
+    padding: '0 16px',
+    borderRadius: 40 / 2,
+    minWidth: 40,
+    height: 40
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit'
+  });
+}, ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main,
+}) => (0, _extends2.default)({}, 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/node/FilledInput/FilledInput.js

@@ -64,6 +64,8 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   theme,
   ownerState
 }) => {
+  var _theme$palette;
+
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -91,7 +93,7 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${(_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/node/FormControlLabel/FormControlLabel.js

@@ -98,7 +98,7 @@ const FormControlLabelRoot = (0, _styled.default)('label', {
 }, {
   [`& .${_formControlLabelClasses.default.label}`]: {
     [`&.${_formControlLabelClasses.default.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     }
   }
 }));

package/node/FormHelperText/FormHelperText.js

@@ -71,7 +71,7 @@ const FormHelperTextRoot = (0, _styled.default)('p', {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.caption, {
   textAlign: 'left',
   marginTop: 3,
@@ -79,10 +79,10 @@ const FormHelperTextRoot = (0, _styled.default)('p', {
   marginBottom: 0,
   marginLeft: 0,
   [`&.${_formHelperTextClasses.default.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   },
   [`&.${_formHelperTextClasses.default.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }, ownerState.size === 'small' && {
   marginTop: 4

package/node/FormLabel/FormLabel.js

@@ -68,19 +68,19 @@ const FormLabelRoot = (0, _styled.default)('label', {
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.body1, {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
   [`&.${_formLabelClasses.default.focused}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   },
   [`&.${_formLabelClasses.default.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   },
   [`&.${_formLabelClasses.default.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 exports.FormLabelRoot = FormLabelRoot;
@@ -92,7 +92,7 @@ const AsteriskComponent = (0, _styled.default)('span', {
   theme
 }) => ({
   [`&.${_formLabelClasses.default.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {

package/node/Icon/Icon.js

@@ -79,14 +79,14 @@ const IconRoot = (0, _styled.default)('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/node/IconButton/IconButton.js

@@ -75,13 +75,13 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   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: (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.active} / ${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'
@@ -97,10 +97,10 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 }) => (0, _extends2.default)({}, ownerState.color === 'inherit' && {
   color: 'inherit'
 }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }, !ownerState.disableRipple && {
   '&: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),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -115,7 +115,7 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 }, {
   [`&.${_iconButtonClasses.default.disabled}`]: {
     backgroundColor: 'transparent',
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 /**

package/node/ImageListItemBar/ImageListItemBar.js

@@ -99,7 +99,7 @@ const ImageListItemBarTitleWrap = (0, _styled.default)('div', {
   return (0, _extends2.default)({
     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/node/Input/Input.js

@@ -65,7 +65,12 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+  let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+
+  if (theme.vars) {
+    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+  }
+
   return (0, _extends2.default)({
     position: 'relative'
   }, ownerState.formControl && {
@@ -74,7 +79,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${(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
@@ -95,7 +100,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
       transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_inputClasses.default.error}:after`]: {
-      borderBottomColor: theme.palette.error.main,
+      borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
 
     },
@@ -114,7 +119,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&:hover:not(.${_inputClasses.default.disabled}):before`]: {
-      borderBottom: `2px solid ${theme.palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/node/InputAdornment/InputAdornment.js

@@ -79,7 +79,7 @@ const InputAdornmentRoot = (0, _styled.default)('div', {
   maxHeight: '2em',
   alignItems: 'center',
   whiteSpace: 'nowrap',
-  color: theme.palette.action.active
+  color: (theme.vars || theme).palette.action.active
 }, ownerState.variant === 'filled' && {
   // Styles applied to the root element if `variant="filled"`.
   [`&.${_inputAdornmentClasses.default.positionStart}&:not(.${_inputAdornmentClasses.default.hiddenLabel})`]: {

package/node/InputBase/InputBase.js

@@ -100,7 +100,7 @@ const InputBaseRoot = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => (0, _extends2.default)({}, theme.typography.body1, {
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
   // 23px
   boxSizing: 'border-box',
@@ -110,7 +110,7 @@ const InputBaseRoot = (0, _styled.default)('div', {
   display: 'inline-flex',
   alignItems: 'center',
   [`&.${_inputBaseClasses.default.disabled}`]: {
-    color: theme.palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
   }
 }, ownerState.multiline && (0, _extends2.default)({
@@ -130,17 +130,23 @@ const InputBaseComponent = (0, _styled.default)('input', {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-  const placeholder = {
-    color: 'currentColor',
-    opacity: light ? 0.42 : 0.5,
+  const placeholder = (0, _extends2.default)({
+    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
     })
-  };
+  });
   const placeholderHidden = {
     opacity: '0 !important'
   };
-  const placeholderVisible = {
+  const placeholderVisible = theme.vars ? {
+    opacity: theme.vars.opacity.placeholder
+  } : {
     opacity: light ? 0.42 : 0.5
   };
   return (0, _extends2.default)({
@@ -201,7 +207,7 @@ const InputBaseComponent = (0, _styled.default)('input', {
     [`&.${_inputBaseClasses.default.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
 
     },
     '&:-webkit-autofill': {

package/node/Link/Link.js

@@ -27,8 +27,6 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _styled = _interopRequireDefault(require("../styles/styled"));
 
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
@@ -129,7 +127,6 @@ const LinkRoot = (0, _styled.default)(_Typography.default, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const theme = (0, _useTheme.default)();
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiLink'
@@ -146,7 +143,6 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     sx
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -181,9 +177,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = (0, _extends2.default)({}, 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,
     component,
     focusVisible,
     underline,
@@ -200,8 +194,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ref: handlerRef,
     ownerState: ownerState,
     variant: variant,
-    sx: [...(inProps.color ? [{
-      color: colorTransformations[color] || color
+    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+      color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });

package/node/ListItem/ListItem.js

@@ -116,21 +116,21 @@ const ListItemRoot = (0, _styled.default)('div', {
   }
 }, {
   [`&.${_listItemClasses.default.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${_listItemClasses.default.selected}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${_listItemClasses.default.focusVisible}`]: {
-      backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${_listItemClasses.default.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.alignItems === 'flex-start' && {
   alignItems: 'flex-start'
 }, ownerState.divider && {
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
   backgroundClip: 'padding-box'
 }, ownerState.button && {
   transition: theme.transitions.create('background-color', {
@@ -138,17 +138,17 @@ const ListItemRoot = (0, _styled.default)('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'
     }
   },
   [`&.${_listItemClasses.default.selected}:hover`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.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: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }
 }, ownerState.hasSecondaryAction && {

package/node/ListItemButton/ListItemButton.js

@@ -94,33 +94,33 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   }),
   '&: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'
     }
   },
   [`&.${_listItemButtonClasses.default.selected}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${_listItemButtonClasses.default.focusVisible}`]: {
-      backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${_listItemButtonClasses.default.selected}:hover`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.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: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   },
   [`&.${_listItemButtonClasses.default.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${_listItemButtonClasses.default.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.divider && {
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
   backgroundClip: 'padding-box'
 }, ownerState.alignItems === 'flex-start' && {
   alignItems: 'flex-start'

package/node/ListItemIcon/ListItemIcon.js

@@ -60,7 +60,7 @@ const ListItemIconRoot = (0, _styled.default)('div', {
   ownerState
 }) => (0, _extends2.default)({
   minWidth: 56,
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
   display: 'inline-flex'
 }, ownerState.alignItems === 'flex-start' && {

package/node/ListSubheader/ListSubheader.js

@@ -65,12 +65,12 @@ const ListSubheaderRoot = (0, _styled.default)('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 && {
@@ -82,7 +82,7 @@ const ListSubheaderRoot = (0, _styled.default)('li', {
   position: 'sticky',
   top: 0,
   zIndex: 1,
-  backgroundColor: theme.palette.background.paper
+  backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/MenuItem/MenuItem.js

@@ -97,35 +97,35 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
   paddingLeft: 16,
   paddingRight: 16
 }, ownerState.divider && {
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
   backgroundClip: 'padding-box'
 }, {
   '&: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'
     }
   },
   [`&.${_menuItemClasses.default.selected}`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${_menuItemClasses.default.focusVisible}`]: {
-      backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${_menuItemClasses.default.selected}:hover`]: {
-    backgroundColor: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _system.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: (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _system.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   },
   [`&.${_menuItemClasses.default.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${_menuItemClasses.default.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   [`& + .${_Divider.dividerClasses.root}`]: {
     marginTop: theme.spacing(1),