@mui/material 5.6.2 → 5.7.0

package/legacy/styles/experimental_extendTheme.js

@@ -3,26 +3,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
-import createPalette from './createPalette';
-export var defaultOpacity = {
-  active: 0.54,
-  hover: 0.04,
-  selected: 0.08,
-  disabled: 0.26,
-  focus: 0.12
-};
-
-function createTheme() {
-  var _colorSchemesInput$li, _colorSchemesInput$da;
+export default function extendTheme() {
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
 
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _options$colorSchemes = options.colorSchemes,
       colorSchemesInput = _options$colorSchemes === void 0 ? {} : _options$colorSchemes,
-      _options$opacity = options.opacity,
-      opacityInput = _options$opacity === void 0 ? {} : _options$opacity,
-      input = _objectWithoutProperties(options, ["colorSchemes", "opacity"]); // eslint-disable-next-line prefer-const
-
+      input = _objectWithoutProperties(options, ["colorSchemes"]);
 
   var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -37,17 +25,47 @@ function createTheme() {
   }),
       darkPalette = _createThemeWithoutVa2.palette;
 
-  colorSchemesInput.light = {
-    palette: lightPalette
-  };
-  colorSchemesInput.dark = {
-    palette: darkPalette
-  };
-  var colorSchemes = {};
-  Object.keys(colorSchemesInput).forEach(function (key) {
-    var palette = createPalette(colorSchemesInput[key].palette);
+  var theme = _extends({}, muiTheme, {
+    colorSchemes: _extends({}, colorSchemesInput, {
+      light: _extends({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: _extends({
+          placeholder: 0.42,
+          inputTouchBottomLine: 0.42
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+      }),
+      dark: _extends({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: _extends({
+          placeholder: 0.5,
+          inputTouchBottomLine: 0.7
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+      })
+    })
+  });
+
+  Object.keys(theme.colorSchemes).forEach(function (key) {
+    var palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+
+    if (key === 'dark') {
+      palette.common.background = palette.common.background || '#000';
+      palette.common.onBackground = palette.common.onBackground || '#fff';
+    } else {
+      palette.common.background = palette.common.background || '#fff';
+      palette.common.onBackground = palette.common.onBackground || '#000';
+    }
+
+    palette.common.backgroundChannel = colorChannel(palette.common.background);
+    palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
+    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
+    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
+
+    if (!palette.grey.dark) {
+      palette.grey.dark = palette.grey[700];
+    }
+
     Object.keys(palette).forEach(function (color) {
-      var colors = palette[color];
+      var colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
       if (colors.main) {
         palette[color].mainChannel = colorChannel(colors.main);
@@ -61,6 +79,11 @@ function createTheme() {
         palette[color].darkChannel = colorChannel(colors.dark);
       }
 
+      if (colors.contrastText) {
+        palette[color].contrastTextChannel = colorChannel(colors.contrastText);
+      } // Text colors: text.primary, text.secondary
+
+
       if (colors.primary) {
         palette[color].primaryChannel = colorChannel(colors.primary);
       }
@@ -68,29 +91,15 @@ function createTheme() {
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
       }
-
-      if (colors.disabled) {
-        palette[color].disabledChannel = colorChannel(colors.disabled);
-      }
     });
-    colorSchemes[key] = {
-      palette: palette
-    };
   });
 
-  var opacity = _extends({}, defaultOpacity, opacityInput);
-
-  muiTheme.colorSchemes = colorSchemes;
-  muiTheme.opacity = opacity;
-
   for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     args[_key - 1] = arguments[_key];
   }
 
-  muiTheme = args.reduce(function (acc, argument) {
+  theme = args.reduce(function (acc, argument) {
     return deepmerge(acc, argument);
-  }, muiTheme);
-  return muiTheme;
-}
-
-export default createTheme;
+  }, theme);
+  return theme;
+}

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/locale/index.js

@@ -619,7 +619,7 @@ export const csCZ = {
         'aria-label': 'Navigace stránkováním',
         getItemAriaLabel: (type, page, selected) => {
           if (type === 'page') {
-            return `${selected ? '' : 'Jít na '}${page} stránku`;
+            return `${selected ? '' : 'Jít na '}${page}. stránku`;
           }
 
           if (type === 'first') {

package/modern/Accordion/Accordion.js

@@ -62,7 +62,7 @@ const AccordionRoot = styled(Paper, {
       height: 1,
       content: '""',
       opacity: 1,
-      backgroundColor: theme.palette.divider,
+      backgroundColor: (theme.vars || theme).palette.divider,
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
@@ -87,7 +87,7 @@ const AccordionRoot = styled(Paper, {
       }
     },
     [`&.${accordionClasses.disabled}`]: {
-      backgroundColor: theme.palette.action.disabledBackground
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
     }
   };
 }, ({
@@ -96,12 +96,12 @@ const AccordionRoot = styled(Paper, {
 }) => _extends({}, !ownerState.square && {
   borderRadius: 0,
   '&:first-of-type': {
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius
   },
   '&:last-of-type': {
-    borderBottomLeftRadius: theme.shape.borderRadius,
-    borderBottomRightRadius: theme.shape.borderRadius,
+    borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
     // Fix a rendering issue on Edge
     '@supports (-ms-ime-align: auto)': {
       borderBottomLeftRadius: 0,

package/modern/AccordionSummary/AccordionSummary.js

@@ -46,10 +46,10 @@ const AccordionSummaryRoot = styled(ButtonBase, {
     padding: theme.spacing(0, 2),
     transition: theme.transitions.create(['min-height', 'background-color'], transition),
     [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
       cursor: 'pointer'
@@ -87,7 +87,7 @@ const AccordionSummaryExpandIconWrapper = styled('div', {
   theme
 }) => ({
   display: 'flex',
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest

package/modern/Autocomplete/Autocomplete.js

@@ -236,7 +236,7 @@ const AutocompletePopper = styled(Popper, {
   theme,
   ownerState
 }) => _extends({
-  zIndex: theme.zIndex.modal
+  zIndex: (theme.vars || theme).zIndex.modal
 }, ownerState.disablePortal && {
   position: 'absolute'
 }));
@@ -256,7 +256,7 @@ const AutocompleteLoading = styled('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteNoOptions = styled('div', {
@@ -266,7 +266,7 @@ const AutocompleteNoOptions = styled('div', {
 })(({
   theme
 }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
 }));
 const AutocompleteListbox = styled('div', {
@@ -299,30 +299,30 @@ const AutocompleteListbox = styled('div', {
       minHeight: 'auto'
     },
     [`&.${autocompleteClasses.focused}`]: {
-      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'
       }
     },
     '&[aria-disabled="true"]': {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`&.${autocompleteClasses.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      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),
       [`&.${autocompleteClasses.focused}`]: {
-        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: theme.palette.action.selected
+          backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${autocompleteClasses.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)
       }
     }
   }
@@ -334,7 +334,7 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
 })(({
   theme
 }) => ({
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
 }));
 const AutocompleteGroupUl = styled('ul', {
@@ -525,10 +525,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: {
+        InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment,
+          startAdornment
+        }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,
             ownerState: ownerState,
@@ -548,7 +549,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               children: popupIcon
             })) : null]
           })
-        },
+        }),
         inputProps: _extends({
           className: clsx(classes.input),
           disabled,

package/modern/AvatarGroup/AvatarGroup.js

@@ -38,7 +38,7 @@ const AvatarGroupRoot = styled('div', {
   theme
 }) => ({
   [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -55,7 +55,7 @@ const AvatarGroupAvatar = styled(Avatar, {
 })(({
   theme
 }) => ({
-  border: `2px solid ${theme.palette.background.default}`,
+  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
   boxSizing: 'content-box',
   marginLeft: -8,
   '&:last-child': {

package/modern/Badge/Badge.js

@@ -79,8 +79,8 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen
   })
 }, ownerState.color !== 'default' && {
-  backgroundColor: theme.palette[ownerState.color].main,
-  color: theme.palette[ownerState.color].contrastText
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+  color: (theme.vars || theme).palette[ownerState.color].contrastText
 }, ownerState.variant === 'dot' && {
   borderRadius: RADIUS_DOT,
   height: RADIUS_DOT * 2,

package/modern/BottomNavigation/BottomNavigation.js

@@ -31,7 +31,7 @@ const BottomNavigationRoot = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   height: 56,
-  backgroundColor: theme.palette.background.paper
+  backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
   const props = useThemeProps({

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -42,18 +42,19 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
-  padding: '6px 12px 8px',
+  padding: '0px 12px',
   minWidth: 80,
   maxWidth: 168,
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1'
 }, !ownerState.showLabel && !ownerState.selected && {
-  paddingTop: 16
+  paddingTop: 14
+}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+  paddingTop: 0
 }, {
   [`&.${bottomNavigationActionClasses.selected}`]: {
-    paddingTop: 6,
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }
 }));
 const BottomNavigationActionLabel = styled('span', {

package/modern/Box/Box.js

@@ -1,14 +1,35 @@
+import PropTypes from 'prop-types';
 import { createBox } from '@mui/system';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 const defaultTheme = createTheme();
-/**
- * @ignore - do not document.
- */
-
 const Box = createBox({
   defaultTheme,
   defaultClassName: 'MuiBox-root',
   generateClassName: ClassNameGenerator.generate
 });
+process.env.NODE_ENV !== "production" ? Box.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 export default Box;

package/modern/ButtonGroup/ButtonGroup.js

@@ -56,9 +56,9 @@ const ButtonGroupRoot = styled('div', {
   ownerState
 }) => _extends({
   display: 'inline-flex',
-  borderRadius: theme.shape.borderRadius
+  borderRadius: (theme.vars || theme).shape.borderRadius
 }, ownerState.variant === 'contained' && {
-  boxShadow: theme.shadows[2]
+  boxShadow: (theme.vars || theme).shadows[2]
 }, ownerState.disableElevation && {
   boxShadow: 'none'
 }, ownerState.fullWidth && {
@@ -86,27 +86,27 @@ const ButtonGroupRoot = styled('div', {
       borderBottomRightRadius: 0,
       borderBottomLeftRadius: 0
     }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      borderRight: 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)'}`
     }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+      borderBottom: 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)'}`
     }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: alpha(theme.palette[ownerState.color].main, 0.5)
+      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
       borderRightColor: 'transparent'
     }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
       borderBottomColor: 'transparent'
     }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${theme.palette.grey[400]}`,
+      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${theme.palette.action.disabled}`
+        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${theme.palette.grey[400]}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
       [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${theme.palette.action.disabled}`
+        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: theme.palette[ownerState.color].dark
+      borderColor: (theme.vars || theme).palette[ownerState.color].dark
     }, {
       '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'currentColor'

package/modern/CardActionArea/CardActionArea.js

@@ -34,13 +34,13 @@ const CardActionAreaRoot = styled(ButtonBase, {
   textAlign: 'inherit',
   width: '100%',
   [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
-    opacity: theme.palette.action.hoverOpacity,
+    opacity: (theme.vars || theme).palette.action.hoverOpacity,
     '@media (hover: none)': {
       opacity: 0
     }
   },
   [`&.${cardActionAreaClasses.focusVisible} .${cardActionAreaClasses.focusHighlight}`]: {
-    opacity: theme.palette.action.focusOpacity
+    opacity: (theme.vars || theme).palette.action.focusOpacity
   }
 }));
 const CardActionAreaFocusHighlight = styled('span', {

package/modern/CircularProgress/CircularProgress.js

@@ -71,7 +71,7 @@ const CircularProgressRoot = styled('span', {
 }, ownerState.variant === 'determinate' && {
   transition: theme.transitions.create('transform')
 }, ownerState.color !== 'inherit' && {
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && css`

package/modern/CssBaseline/CssBaseline.js

@@ -19,12 +19,12 @@ export const html = (theme, enableColorScheme) => _extends({
   colorScheme: theme.palette.mode
 });
 export const body = theme => _extends({
-  color: theme.palette.text.primary
+  color: (theme.vars || theme).palette.text.primary
 }, theme.typography.body1, {
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: (theme.vars || theme).palette.background.default,
   '@media print': {
     // Save printer ink.
-    backgroundColor: theme.palette.common.white
+    backgroundColor: (theme.vars || theme).palette.common.white
   }
 });
 export const styles = (theme, enableColorScheme = false) => {
@@ -42,7 +42,7 @@ export const styles = (theme, enableColorScheme = false) => {
       // Add support for document.body.requestFullScreen().
       // Other elements, if background transparent, are not supported.
       '&::backdrop': {
-        backgroundColor: theme.palette.background.default
+        backgroundColor: (theme.vars || theme).palette.background.default
       }
     })
   };