@mui/material 5.6.3 → 5.8.0

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),

package/modern/MobileStepper/MobileStepper.js

@@ -47,20 +47,20 @@ const MobileStepperRoot = styled(Paper, {
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: theme.palette.background.default,
+  background: (theme.vars || theme).palette.background.default,
   padding: 8
 }, ownerState.position === 'bottom' && {
   position: 'fixed',
   bottom: 0,
   left: 0,
   right: 0,
-  zIndex: theme.zIndex.mobileStepper
+  zIndex: (theme.vars || theme).zIndex.mobileStepper
 }, ownerState.position === 'top' && {
   position: 'fixed',
   top: 0,
   left: 0,
   right: 0,
-  zIndex: theme.zIndex.mobileStepper
+  zIndex: (theme.vars || theme).zIndex.mobileStepper
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
@@ -90,13 +90,13 @@ const MobileStepperDot = styled('div', {
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
   }),
-  backgroundColor: theme.palette.action.disabled,
+  backgroundColor: (theme.vars || theme).palette.action.disabled,
   borderRadius: '50%',
   width: 8,
   height: 8,
   margin: '0 2px'
 }, dotActive && {
-  backgroundColor: theme.palette.primary.main
+  backgroundColor: (theme.vars || theme).palette.primary.main
 })));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',

package/modern/Modal/Modal.js

@@ -30,7 +30,7 @@ const ModalRoot = styled('div', {
   ownerState
 }) => _extends({
   position: 'fixed',
-  zIndex: theme.zIndex.modal,
+  zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,

package/modern/PaginationItem/PaginationItem.js

@@ -66,10 +66,10 @@ const PaginationItemEllipsis = styled('div', {
   minWidth: 32,
   padding: '0 6px',
   margin: '0 3px',
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   height: 'auto',
   [`&.${paginationItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.size === 'small' && {
   minWidth: 26,
@@ -97,39 +97,39 @@ const PaginationItemPage = styled(ButtonBase, {
   height: 32,
   padding: '0 6px',
   margin: '0 3px',
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   [`&.${paginationItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${paginationItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
   transition: theme.transitions.create(['color', 'background-color'], {
     duration: theme.transitions.duration.short
   }),
   '&:hover': {
-    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'
     }
   },
   [`&.${paginationItemClasses.selected}`]: {
-    backgroundColor: theme.palette.action.selected,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette.action.selected
+        backgroundColor: (theme.vars || theme).palette.action.selected
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     },
     [`&.${paginationItemClasses.disabled}`]: {
       opacity: 1,
-      color: theme.palette.action.disabled,
-      backgroundColor: theme.palette.action.selected
+      color: (theme.vars || theme).palette.action.disabled,
+      backgroundColor: (theme.vars || theme).palette.action.selected
     }
   }
 }, ownerState.size === 'small' && {
@@ -145,49 +145,49 @@ const PaginationItemPage = styled(ButtonBase, {
   padding: '0 10px',
   fontSize: theme.typography.pxToRem(15)
 }, ownerState.shape === 'rounded' && {
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }), ({
   theme,
   ownerState
 }) => _extends({}, ownerState.variant === 'text' && {
   [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main,
+    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
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   }, {
     [`&.${paginationItemClasses.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   })
 }, ownerState.variant === 'outlined' && {
-  border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+  border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
   [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: theme.palette[ownerState.color].main,
-    border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`,
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
     }
   }, {
     [`&.${paginationItemClasses.disabled}`]: {
-      borderColor: theme.palette.action.disabledBackground,
-      color: theme.palette.action.disabled
+      borderColor: (theme.vars || theme).palette.action.disabledBackground,
+      color: (theme.vars || theme).palette.action.disabled
     }
   })
 }));

package/modern/Rating/Rating.js

@@ -92,7 +92,7 @@ const RatingRoot = styled('span', {
   textAlign: 'left',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   },
   [`&.${ratingClasses.focusVisible} .${ratingClasses.iconActive}`]: {
@@ -145,7 +145,7 @@ const RatingIcon = styled('span', {
 }, ownerState.iconActive && {
   transform: 'scale(1.2)'
 }, ownerState.iconEmpty && {
-  color: theme.palette.action.disabled
+  color: (theme.vars || theme).palette.action.disabled
 }));
 const RatingDecimal = styled('span', {
   name: 'MuiRating',

package/modern/Snackbar/Snackbar.js

@@ -52,7 +52,7 @@ const SnackbarRoot = styled('div', {
   });
 
   return _extends({
-    zIndex: theme.zIndex.snackbar,
+    zIndex: (theme.vars || theme).zIndex.snackbar,
     position: 'fixed',
     display: 'flex',
     left: 8,

package/modern/SpeedDial/SpeedDial.js

@@ -74,7 +74,7 @@ const SpeedDialRoot = styled('div', {
   theme,
   ownerState
 }) => _extends({
-  zIndex: theme.zIndex.speedDial,
+  zIndex: (theme.vars || theme).zIndex.speedDial,
   display: 'flex',
   alignItems: 'center',
   pointerEvents: 'none'

package/modern/StepIcon/StepIcon.js

@@ -42,15 +42,15 @@ const StepIconRoot = styled(SvgIcon, {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
   }),
-  color: theme.palette.text.disabled,
+  color: (theme.vars || theme).palette.text.disabled,
   [`&.${stepIconClasses.completed}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${stepIconClasses.active}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${stepIconClasses.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepIconText = styled('text', {
@@ -60,7 +60,7 @@ const StepIconText = styled('text', {
 })(({
   theme
 }) => ({
-  fill: theme.palette.primary.contrastText,
+  fill: (theme.vars || theme).palette.primary.contrastText,
   fontSize: theme.typography.caption.fontSize,
   fontFamily: theme.typography.fontFamily
 }));

package/modern/StepLabel/StepLabel.js

@@ -69,11 +69,11 @@ const StepLabelLabel = styled('span', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${stepLabelClasses.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${stepLabelClasses.completed}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
@@ -81,7 +81,7 @@ const StepLabelLabel = styled('span', {
     marginTop: 16
   },
   [`&.${stepLabelClasses.error}`]: {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }
 }));
 const StepLabelIconContainer = styled('span', {
@@ -105,7 +105,7 @@ const StepLabelLabelContainer = styled('span', {
   theme
 }) => ({
   width: '100%',
-  color: theme.palette.text.secondary
+  color: (theme.vars || theme).palette.text.secondary
 }));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = useThemeProps({

package/modern/Stepper/StepperContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 const StepperContext = /*#__PURE__*/React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   StepperContext.displayName = 'StepperContext';
 }
+/**
+ * Returns the current StepperContext or an empty object if no StepperContext
+ * has been defined in the component tree.
+ */
+
 
+export function useStepperContext() {
+  return React.useContext(StepperContext);
+}
 export default StepperContext;

package/modern/Stepper/index.js

@@ -1,3 +1,5 @@
 export { default } from './Stepper';
 export { default as stepperClasses } from './stepperClasses';
-export * from './stepperClasses';
+export * from './stepperClasses';
+export { default as StepperContext } from './StepperContext';
+export * from './StepperContext';

package/modern/SvgIcon/SvgIcon.js

@@ -53,9 +53,9 @@ const SvgIconRoot = styled('svg', {
     large: theme.typography?.pxToRem?.(35) || '2.1875'
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
-  color: theme.palette?.[ownerState.color]?.main ?? {
-    action: theme.palette?.action?.active,
-    disabled: theme.palette?.action?.disabled,
+  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
+    action: (theme.vars || theme).palette?.action?.active,
+    disabled: (theme.vars || theme).palette?.action?.disabled,
     inherit: undefined
   }[ownerState.color]
 }));

package/modern/Tab/Tab.js

@@ -78,23 +78,23 @@ const TabRoot = styled(ButtonBase, {
     opacity: 1
   },
   [`&.${tabClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.textColor === 'primary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   },
   [`&.${tabClasses.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.textColor === 'secondary' && {
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tabClasses.selected}`]: {
-    color: theme.palette.secondary.main
+    color: (theme.vars || theme).palette.secondary.main
   },
   [`&.${tabClasses.disabled}`]: {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }
 }, ownerState.fullWidth && {
   flexShrink: 1,

package/modern/Table/Table.js

@@ -41,7 +41,7 @@ const TableRoot = styled('table', {
   borderSpacing: 0,
   '& caption': _extends({}, theme.typography.body2, {
     padding: theme.spacing(2),
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
   })