@mui/material 5.6.4 → 5.7.0

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)

package/legacy/MobileStepper/MobileStepper.js

@@ -43,20 +43,20 @@ var 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
   });
 });
 var MobileStepperDots = styled('div', {
@@ -90,13 +90,13 @@ var 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
   }));
 });
 var MobileStepperProgress = styled(LinearProgress, {

package/legacy/Modal/Modal.js

@@ -27,7 +27,7 @@ var ModalRoot = styled('div', {
       ownerState = _ref.ownerState;
   return _extends({
     position: 'fixed',
-    zIndex: theme.zIndex.modal,
+    zIndex: (theme.vars || theme).zIndex.modal,
     right: 0,
     bottom: 0,
     top: 0,

package/legacy/PaginationItem/PaginationItem.js

@@ -62,10 +62,10 @@ var 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'
   }, "&.".concat(paginationItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), ownerState.size === 'small' && {
     minWidth: 26,
     borderRadius: 26 / 2,
@@ -95,34 +95,34 @@ var PaginationItemPage = styled(ButtonBase, {
     height: 32,
     padding: '0 6px',
     margin: '0 3px',
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, _defineProperty(_extends3, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   }), _defineProperty(_extends3, "&.".concat(paginationItemClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _defineProperty(_extends3, "transition", theme.transitions.create(['color', 'background-color'], {
     duration: theme.transitions.duration.short
   })), _defineProperty(_extends3, '&: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'
     }
   }), _defineProperty(_extends3, "&.".concat(paginationItemClasses.selected), (_$concat = {
-    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(".concat(theme.vars.palette.action.selected, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(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
       }
     }
   }, _defineProperty(_$concat, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selected, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty(_$concat, "&.".concat(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
   }), _$concat)), _extends3), ownerState.size === 'small' && {
     minWidth: 26,
     height: 26,
@@ -136,43 +136,43 @@ var PaginationItemPage = styled(ButtonBase, {
     padding: '0 10px',
     fontSize: theme.typography.pxToRem(15)
   }, ownerState.shape === 'rounded' && {
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   });
 }, function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
   return _extends({}, ownerState.variant === 'text' && _defineProperty({}, "&.".concat(paginationItemClasses.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-    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
       }
     }
   }, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }), _defineProperty({}, "&.".concat(paginationItemClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }))), ownerState.variant === 'outlined' && _defineProperty({
-    border: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+    border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
   }, "&.".concat(paginationItemClasses.selected), _extends({}, ownerState.color !== 'standard' && _defineProperty({
-    color: theme.palette[ownerState.color].main,
-    border: "1px solid ".concat(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 ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(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(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(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'
       }
     }
   }, "&.".concat(paginationItemClasses.focusVisible), {
-    backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / calc(").concat(theme.vars.palette.action.activatedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty({}, "&.".concat(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
   }))));
 });
 var PaginationItemPageIcon = styled('div', {

package/legacy/Rating/Rating.js

@@ -88,7 +88,7 @@ var RatingRoot = styled('span', {
     textAlign: 'left',
     WebkitTapHighlightColor: 'transparent'
   }, _defineProperty(_extends2, "&.".concat(ratingClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
   }), _defineProperty(_extends2, "&.".concat(ratingClasses.focusVisible, " .").concat(ratingClasses.iconActive), {
     outline: '1px solid #999'
@@ -140,7 +140,7 @@ var RatingIcon = styled('span', {
   }, ownerState.iconActive && {
     transform: 'scale(1.2)'
   }, ownerState.iconEmpty && {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   });
 });
 var RatingDecimal = styled('span', {

package/legacy/Snackbar/Snackbar.js

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

package/legacy/SpeedDial/SpeedDial.js

@@ -69,7 +69,7 @@ var SpeedDialRoot = styled('div', {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    zIndex: theme.zIndex.speedDial,
+    zIndex: (theme.vars || theme).zIndex.speedDial,
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none'

package/legacy/StepIcon/StepIcon.js

@@ -44,13 +44,13 @@ var 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
   }, _defineProperty(_ref2, "&.".concat(stepIconClasses.completed), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref2, "&.".concat(stepIconClasses.active), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref2, "&.".concat(stepIconClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _ref2;
 });
 var StepIconText = styled('text', {
@@ -62,7 +62,7 @@ var StepIconText = styled('text', {
 })(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    fill: theme.palette.primary.contrastText,
+    fill: (theme.vars || theme).palette.primary.contrastText,
     fontSize: theme.typography.caption.fontSize,
     fontFamily: theme.typography.fontFamily
   };

package/legacy/StepLabel/StepLabel.js

@@ -70,16 +70,16 @@ var StepLabelLabel = styled('span', {
       duration: theme.transitions.duration.shortest
     })
   }, _defineProperty(_extends3, "&.".concat(stepLabelClasses.active), {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.completed), {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.alternativeLabel), {
     textAlign: 'center',
     marginTop: 16
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.error), {
-    color: theme.palette.error.main
+    color: (theme.vars || theme).palette.error.main
   }), _extends3));
 });
 var StepLabelIconContainer = styled('span', {
@@ -108,7 +108,7 @@ var StepLabelLabelContainer = styled('span', {
   var theme = _ref4.theme;
   return {
     width: '100%',
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   };
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {