@mui/material 5.6.4 → 5.8.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/Paper/Paper.js

@@ -12,8 +12,7 @@ import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses'; // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
 
 import { jsx as _jsx } from "react/jsx-runtime";
-
-var getOverlayAlpha = function getOverlayAlpha(elevation) {
+export var getOverlayAlpha = function getOverlayAlpha(elevation) {
   var alphaValue;
 
   if (elevation < 1) {
@@ -44,20 +43,24 @@ var PaperRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles["elevation".concat(ownerState.elevation)]];
   }
 })(function (_ref) {
+  var _theme$vars$overlays;
+
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    color: (theme.vars || theme).palette.text.primary,
     transition: theme.transitions.create('box-shadow')
   }, !ownerState.square && {
     borderRadius: theme.shape.borderRadius
   }, ownerState.variant === 'outlined' && {
-    border: "1px solid ".concat(theme.palette.divider)
+    border: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: theme.shadows[ownerState.elevation]
-  }, theme.palette.mode === 'dark' && {
+    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+  }, !theme.vars && theme.palette.mode === 'dark' && {
     backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ", ").concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ")")
+  }, theme.vars && {
+    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
   }));
 });
 var Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {

package/legacy/Radio/Radio.js

@@ -40,18 +40,18 @@ var RadioRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   }, ownerState.color !== 'default' && _defineProperty({}, "&.".concat(radioClasses.checked), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty({}, "&.".concat(radioClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }));
 });
 

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/Select/SelectInput.js

@@ -325,8 +325,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
 
   var handleKeyDown = function handleKeyDown(event) {
     if (!readOnly) {
-      var validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
-      // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+      var validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+      // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
       'Enter'];
 
       if (validKeys.indexOf(event.key) !== -1) {

package/legacy/Slider/Slider.js

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -21,15 +20,7 @@ var SliderRoot = styled('span', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    var marks = ownerState.marksProp === true && ownerState.step !== null ? _toConsumableArray(Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)).map(function (_, index) {
-      return {
-        value: ownerState.min + ownerState.step * index
-      };
-    }) : ownerState.marksProp || [];
-    var marked = marks.length > 0 && marks.some(function (mark) {
-      return mark.label;
-    });
-    return [styles.root, styles["color".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+    return [styles.root, styles["color".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
 })(function (_ref) {
   var _extends2;

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

package/legacy/Stepper/StepperContext.js

@@ -1,12 +1,20 @@
 import * as React from 'react';
+
 /**
- * @ignore - internal component.
+ * Provides information about the current step in Stepper.
  */
-
 var 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/legacy/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/legacy/SvgIcon/SvgIcon.js

@@ -29,7 +29,7 @@ var SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
   }
 })(function (_ref) {
-  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -50,9 +50,9 @@ var SvgIconRoot = styled('svg', {
       large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
-      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
+    color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+      action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+      disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/legacy/Tab/Tab.js

@@ -73,19 +73,19 @@ var TabRoot = styled(ButtonBase, {
   }, _defineProperty(_ref3, "&.".concat(tabClasses.selected), {
     opacity: 1
   }), _defineProperty(_ref3, "&.".concat(tabClasses.disabled), {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }), _ref3), ownerState.textColor === 'primary' && (_ref4 = {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, _defineProperty(_ref4, "&.".concat(tabClasses.selected), {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }), _defineProperty(_ref4, "&.".concat(tabClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _ref4), ownerState.textColor === 'secondary' && (_ref5 = {
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, _defineProperty(_ref5, "&.".concat(tabClasses.selected), {
-    color: theme.palette.secondary.main
+    color: (theme.vars || theme).palette.secondary.main
   }), _defineProperty(_ref5, "&.".concat(tabClasses.disabled), {
-    color: theme.palette.text.disabled
+    color: (theme.vars || theme).palette.text.disabled
   }), _ref5), ownerState.fullWidth && {
     flexShrink: 1,
     flexGrow: 1,

package/legacy/Table/Table.js

@@ -36,7 +36,7 @@ var 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'
     })

package/legacy/TablePagination/TablePagination.js

@@ -32,7 +32,7 @@ var TablePaginationRoot = styled(TableCell, {
   var theme = _ref.theme;
   return {
     overflow: 'auto',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontSize: theme.typography.pxToRem(14),
     // Increase the specificity to override TableCell.
     '&:last-child': {

package/legacy/TableRow/TableRow.js

@@ -42,11 +42,11 @@ var TableRowRoot = styled('tr', {
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0
   }, _defineProperty(_ref2, "&.".concat(tableRowClasses.hover, ":hover"), {
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   }), _defineProperty(_ref2, "&.".concat(tableRowClasses.selected), {
-    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),
     '&: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)
     }
   }), _ref2;
 });

package/legacy/TableSortLabel/TableSortLabel.js

@@ -41,18 +41,18 @@ var TableSortLabelRoot = styled(ButtonBase, {
     flexDirection: 'inherit',
     alignItems: 'center',
     '&:focus': {
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     },
     '&:hover': _defineProperty({
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     }, "& .".concat(tableSortLabelClasses.icon), {
       opacity: 0.5
     })
   }, "&.".concat(tableSortLabelClasses.active), _defineProperty({
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, "& .".concat(tableSortLabelClasses.icon), {
     opacity: 1,
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }));
 });
 var TableSortLabelIcon = styled('span', {

package/legacy/Tabs/Tabs.js

@@ -134,7 +134,7 @@ var TabsScroller = styled('div', {
     overflowX: 'hidden',
     width: '100%'
   }, ownerState.hideScrollbar && {
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {
@@ -182,9 +182,9 @@ var TabsIndicator = styled('span', {
     width: '100%',
     transition: theme.transitions.create()
   }, ownerState.indicatorColor === 'primary' && {
-    backgroundColor: theme.palette.primary.main
+    backgroundColor: (theme.vars || theme).palette.primary.main
   }, ownerState.indicatorColor === 'secondary' && {
-    backgroundColor: theme.palette.secondary.main
+    backgroundColor: (theme.vars || theme).palette.secondary.main
   }, ownerState.vertical && {
     height: '100%',
     width: 2,
@@ -197,7 +197,7 @@ var TabsScrollbarSize = styled(ScrollbarSize, {
 })({
   overflowX: 'auto',
   overflowY: 'hidden',
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {

package/legacy/ToggleButton/ToggleButton.js

@@ -40,31 +40,38 @@ var ToggleButtonRoot = styled(ButtonBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   var selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+  var selectedColorChannel;
+
+  if (theme.vars) {
+    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
+    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
+  }
+
   return _extends({}, theme.typography.button, {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 11,
-    border: "1px solid ".concat(theme.palette.divider),
-    color: theme.palette.action.active
+    border: "1px solid ".concat((theme.vars || theme).palette.divider),
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
   }, (_extends2 = {}, _defineProperty(_extends2, "&.".concat(toggleButtonClasses.disabled), {
-    color: theme.palette.action.disabled,
-    border: "1px solid ".concat(theme.palette.action.disabledBackground)
+    color: (theme.vars || theme).palette.action.disabled,
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
   }), _defineProperty(_extends2, '&:hover', {
     textDecoration: 'none',
     // Reset on mouse devices
-    backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   }), _defineProperty(_extends2, "&.".concat(toggleButtonClasses.selected), {
     color: selectedColor,
-    backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity)
       }
     }
   }), _extends2), ownerState.size === 'small' && {

package/legacy/ToggleButtonGroup/ToggleButtonGroup.js

@@ -37,7 +37,7 @@ var ToggleButtonGroupRoot = styled('div', {
       theme = _ref3.theme;
   return _extends({
     display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.orientation === 'vertical' && {
     flexDirection: 'column'
   }, ownerState.fullWidth && {