@mui/material 5.6.2 → 5.7.0

package/modern/DialogContent/DialogContent.js

@@ -42,8 +42,8 @@ const DialogContentRoot = styled('div', {
   padding: '20px 24px'
 }, ownerState.dividers ? {
   padding: '16px 24px',
-  borderTop: `1px solid ${theme.palette.divider}`,
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 } : {
   [`.${dialogTitleClasses.root} + &`]: {
     paddingTop: 0

package/modern/Divider/Divider.js

@@ -47,7 +47,7 @@ const 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',
@@ -55,7 +55,7 @@ const DividerRoot = styled('div', {
   left: 0,
   width: '100%'
 }, ownerState.light && {
-  borderColor: alpha(theme.palette.divider, 0.08)
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
 }, ownerState.variant === 'inset' && {
   marginLeft: 72
 }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -82,7 +82,7 @@ const DividerRoot = styled('div', {
   '&::before, &::after': {
     position: 'relative',
     width: '100%',
-    borderTop: `thin solid ${theme.palette.divider}`,
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
     top: '50%',
     content: '""',
     transform: 'translateY(50%)'
@@ -97,7 +97,7 @@ const DividerRoot = styled('div', {
     top: '0%',
     left: '50%',
     borderTop: 0,
-    borderLeft: `thin solid ${theme.palette.divider}`,
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
     transform: 'translateX(0%)'
   }
 }), ({

package/modern/Drawer/Drawer.js

@@ -46,7 +46,7 @@ const DrawerRoot = styled(Modal, {
 })(({
   theme
 }) => ({
-  zIndex: theme.zIndex.drawer
+  zIndex: (theme.vars || theme).zIndex.drawer
 }));
 const DrawerDockedRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp,
@@ -75,7 +75,7 @@ const 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
@@ -103,13 +103,13 @@ const DrawerPaper = styled(Paper, {
   height: 'auto',
   maxHeight: '100%'
 }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${theme.palette.divider}`
+  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${theme.palette.divider}`
+  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${theme.palette.divider}`
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const oppositeDirection = {
   left: 'right',

package/modern/Fab/Fab.js

@@ -47,28 +47,28 @@ const 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.getContrastText?.(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'
   },
   [`&.${fabClasses.focusVisible}`]: {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   },
   [`&.${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
   }
 }, ownerState.size === 'small' && {
   width: 40,
@@ -100,14 +100,14 @@ const FabRoot = styled(ButtonBase, {
 }), ({
   theme,
   ownerState
-}) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main,
+}) => _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/modern/FilledInput/FilledInput.js

@@ -66,7 +66,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${theme.palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242

package/modern/FormControlLabel/FormControlLabel.js

@@ -71,7 +71,7 @@ export const FormControlLabelRoot = styled('label', {
 }, {
   [`& .${formControlLabelClasses.label}`]: {
     [`&.${formControlLabelClasses.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     }
   }
 }));

package/modern/FormHelperText/FormHelperText.js

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

package/modern/FormLabel/FormLabel.js

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

package/modern/Icon/Icon.js

@@ -55,14 +55,14 @@ const 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/modern/IconButton/IconButton.js

@@ -48,13 +48,13 @@ const 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(${theme.vars.palette.action.active} / ${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'
@@ -70,10 +70,10 @@ const IconButtonRoot = styled(ButtonBase, {
 }) => _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(${theme.vars.palette[ownerState.color].mainChannel} / ${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'
@@ -88,7 +88,7 @@ const IconButtonRoot = styled(ButtonBase, {
 }, {
   [`&.${iconButtonClasses.disabled}`]: {
     backgroundColor: 'transparent',
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 /**

package/modern/ImageListItemBar/ImageListItemBar.js

@@ -76,7 +76,7 @@ const 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/modern/Input/Input.js

@@ -40,7 +40,12 @@ const InputRoot = styled(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 _extends({
     position: 'relative'
   }, ownerState.formControl && {
@@ -49,7 +54,7 @@ const InputRoot = styled(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
@@ -70,7 +75,7 @@ const InputRoot = styled(InputBaseRoot, {
       transform: 'scaleX(1) translateX(0)'
     },
     [`&.${inputClasses.error}:after`]: {
-      borderBottomColor: theme.palette.error.main,
+      borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
 
     },
@@ -89,7 +94,7 @@ const InputRoot = styled(InputBaseRoot, {
 
     },
     [`&:hover:not(.${inputClasses.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/modern/InputAdornment/InputAdornment.js

@@ -54,7 +54,7 @@ const InputAdornmentRoot = styled('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.positionStart}&:not(.${inputAdornmentClasses.hiddenLabel})`]: {

package/modern/InputBase/InputBase.js

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

package/modern/Link/Link.js

@@ -9,7 +9,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';
@@ -98,7 +97,6 @@ const LinkRoot = styled(Typography, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -117,7 +115,6 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const sxColor = typeof sx === 'function' ? sx(theme).color : sx?.color;
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -152,9 +149,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const 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,
     component,
     focusVisible,
     underline,
@@ -172,8 +167,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/modern/ListItem/ListItem.js

@@ -82,21 +82,21 @@ export const ListItemRoot = styled('div', {
   }
 }, {
   [`&.${listItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${listItemClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${listItemClasses.focusVisible}`]: {
-      backgroundColor: 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}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${listItemClasses.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', {
@@ -104,17 +104,17 @@ export const 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'
     }
   },
   [`&.${listItemClasses.selected}:hover`]: {
-    backgroundColor: 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}))` : 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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }
 }, ownerState.hasSecondaryAction && {

package/modern/ListItemButton/ListItemButton.js

@@ -63,33 +63,33 @@ const 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'
     }
   },
   [`&.${listItemButtonClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${listItemButtonClasses.focusVisible}`]: {
-      backgroundColor: 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}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${listItemButtonClasses.selected}:hover`]: {
-    backgroundColor: 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}))` : 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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   },
   [`&.${listItemButtonClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${listItemButtonClasses.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/modern/ListItemIcon/ListItemIcon.js

@@ -36,7 +36,7 @@ const ListItemIconRoot = styled('div', {
   ownerState
 }) => _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/modern/ListSubheader/ListSubheader.js

@@ -41,12 +41,12 @@ const 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 && {
@@ -58,7 +58,7 @@ const ListSubheaderRoot = styled('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 = useThemeProps({

package/modern/MenuItem/MenuItem.js

@@ -63,35 +63,35 @@ const MenuItemRoot = styled(ButtonBase, {
   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.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: 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}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${menuItemClasses.selected}:hover`]: {
-    backgroundColor: 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}))` : 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(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   },
   [`&.${menuItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${menuItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   [`& + .${dividerClasses.root}`]: {
     marginTop: theme.spacing(1),