@mui/material 5.6.4 → 5.8.1

package/node/Container/Container.js

@@ -7,123 +7,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _base = require("@mui/base");
-
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-
-var _styled = _interopRequireDefault(require("../styles/styled"));
-
-var _containerClasses = require("./containerClasses");
+var _system = require("@mui/system");
 
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
-const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    fixed,
-    disableGutters,
-    maxWidth
-  } = ownerState;
-  const slots = {
-    root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
-  };
-  return (0, _base.unstable_composeClasses)(slots, _containerClasses.getContainerUtilityClass, classes);
-};
-
-const ContainerRoot = (0, _styled.default)('div', {
-  name: 'MuiContainer',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-  }
-})(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  width: '100%',
-  marginLeft: 'auto',
-  boxSizing: 'border-box',
-  marginRight: 'auto',
-  display: 'block'
-}, !ownerState.disableGutters && {
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }
-}), ({
-  theme,
-  ownerState
-}) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-  const value = theme.breakpoints.values[breakpoint];
+var _styled = _interopRequireDefault(require("../styles/styled"));
 
-  if (value !== 0) {
-    acc[theme.breakpoints.up(breakpoint)] = {
-      maxWidth: `${value}${theme.breakpoints.unit}`
-    };
-  }
+var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
-  return acc;
-}, {}), ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, ownerState.maxWidth === 'xs' && {
-  [theme.breakpoints.up('xs')]: {
-    maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-  }
-}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-  [theme.breakpoints.up(ownerState.maxWidth)]: {
-    maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-  }
-}));
-const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+/* eslint-disable material-ui/mui-name-matches-component-name */
+const Container = (0, _system.createContainer)({
+  createStyledComponent: (0, _styled.default)('div', {
+    name: 'MuiContainer',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`maxWidth${(0, _capitalize.default)(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+    }
+  }),
+  useThemeProps: inProps => (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiContainer'
-  });
-  const {
-    className,
-    component = 'div',
-    disableGutters = false,
-    fixed = false,
-    maxWidth = 'lg'
-  } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
-    component,
-    disableGutters,
-    fixed,
-    maxWidth
-  });
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContainerRoot, (0, _extends2.default)({
-    as: component,
-    ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other));
+  })
 });
 process.env.NODE_ENV !== "production" ? Container.propTypes
 /* remove-proptypes */
@@ -143,11 +52,6 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
    */
   classes: _propTypes.default.object,
 
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/node/CssBaseline/CssBaseline.js

@@ -40,12 +40,12 @@ const html = (theme, enableColorScheme) => (0, _extends2.default)({
 exports.html = html;
 
 const body = theme => (0, _extends2.default)({
-  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
   }
 });
 
@@ -68,7 +68,7 @@ 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
       }
     })
   };

package/node/DialogContent/DialogContent.js

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

package/node/Divider/Divider.js

@@ -71,7 +71,7 @@ const DividerRoot = (0, _styled.default)('div', {
   flexShrink: 0,
   borderWidth: 0,
   borderStyle: 'solid',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   borderBottomWidth: 'thin'
 }, ownerState.absolute && {
   position: 'absolute',
@@ -79,7 +79,7 @@ const DividerRoot = (0, _styled.default)('div', {
   left: 0,
   width: '100%'
 }, ownerState.light && {
-  borderColor: (0, _system.alpha)(theme.palette.divider, 0.08)
+  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : (0, _system.alpha)(theme.palette.divider, 0.08)
 }, ownerState.variant === 'inset' && {
   marginLeft: 72
 }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -106,7 +106,7 @@ const DividerRoot = (0, _styled.default)('div', {
   '&::before, &::after': {
     position: 'relative',
     width: '100%',
-    borderTop: `thin solid ${theme.palette.divider}`,
+    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
     top: '50%',
     content: '""',
     transform: 'translateY(50%)'
@@ -121,7 +121,7 @@ const DividerRoot = (0, _styled.default)('div', {
     top: '0%',
     left: '50%',
     borderTop: 0,
-    borderLeft: `thin solid ${theme.palette.divider}`,
+    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
     transform: 'translateX(0%)'
   }
 }), ({

package/node/Drawer/Drawer.js

@@ -77,7 +77,7 @@ const DrawerRoot = (0, _styled.default)(_Modal.default, {
 })(({
   theme
 }) => ({
-  zIndex: theme.zIndex.drawer
+  zIndex: (theme.vars || theme).zIndex.drawer
 }));
 const DrawerDockedRoot = (0, _styled.default)('div', {
   shouldForwardProp: _styled.rootShouldForwardProp,
@@ -106,7 +106,7 @@ const DrawerPaper = (0, _styled.default)(_Paper.default, {
   flexDirection: 'column',
   height: '100%',
   flex: '1 0 auto',
-  zIndex: theme.zIndex.drawer,
+  zIndex: (theme.vars || theme).zIndex.drawer,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
   // temporary style
@@ -134,13 +134,13 @@ const DrawerPaper = (0, _styled.default)(_Paper.default, {
   height: 'auto',
   maxHeight: '100%'
 }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${theme.palette.divider}`
+  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${theme.palette.divider}`
+  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
 }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${theme.palette.divider}`
+  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const oppositeDirection = {
   left: 'right',

package/node/Fab/Fab.js

@@ -62,77 +62,81 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.button, {
-  minHeight: 36,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  borderRadius: '50%',
-  padding: 0,
-  minWidth: 0,
-  width: 56,
-  height: 56,
-  zIndex: theme.zIndex.fab,
-  boxShadow: theme.shadows[6],
-  '&:active': {
-    boxShadow: theme.shadows[12]
-  },
-  color: theme.palette.getContrastText(theme.palette.grey[300]),
-  backgroundColor: theme.palette.grey[300],
-  '&:hover': {
-    backgroundColor: theme.palette.grey.A100,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette.grey[300]
+}) => {
+  var _theme$palette$getCon, _theme$palette;
+
+  return (0, _extends2.default)({}, theme.typography.button, {
+    minHeight: 36,
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+      duration: theme.transitions.duration.short
+    }),
+    borderRadius: '50%',
+    padding: 0,
+    minWidth: 0,
+    width: 56,
+    height: 56,
+    zIndex: (theme.vars || theme).zIndex.fab,
+    boxShadow: (theme.vars || theme).shadows[6],
+    '&:active': {
+      boxShadow: (theme.vars || theme).shadows[12]
     },
-    textDecoration: 'none'
-  },
-  [`&.${_fabClasses.default.focusVisible}`]: {
-    boxShadow: theme.shadows[6]
-  },
-  [`&.${_fabClasses.default.disabled}`]: {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
-  }
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 40
-}, ownerState.size === 'medium' && {
-  width: 48,
-  height: 48
-}, ownerState.variant === 'extended' && {
-  borderRadius: 48 / 2,
-  padding: '0 16px',
-  width: 'auto',
-  minHeight: 'auto',
-  minWidth: 48,
-  height: 48
-}, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-  width: 'auto',
-  padding: '0 8px',
-  borderRadius: 34 / 2,
-  minWidth: 34,
-  height: 34
-}, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-  width: 'auto',
-  padding: '0 16px',
-  borderRadius: 40 / 2,
-  minWidth: 40,
-  height: 40
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
-}), ({
+    color: theme.vars ? theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
+    '&:hover': {
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: (theme.vars || theme).palette.grey[300]
+      },
+      textDecoration: 'none'
+    },
+    [`&.${_fabClasses.default.focusVisible}`]: {
+      boxShadow: (theme.vars || theme).shadows[6]
+    },
+    [`&.${_fabClasses.default.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    }
+  }, ownerState.size === 'small' && {
+    width: 40,
+    height: 40
+  }, ownerState.size === 'medium' && {
+    width: 48,
+    height: 48
+  }, ownerState.variant === 'extended' && {
+    borderRadius: 48 / 2,
+    padding: '0 16px',
+    width: 'auto',
+    minHeight: 'auto',
+    minWidth: 48,
+    height: 48
+  }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
+    width: 'auto',
+    padding: '0 8px',
+    borderRadius: 34 / 2,
+    minWidth: 34,
+    height: 34
+  }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
+    width: 'auto',
+    padding: '0 16px',
+    borderRadius: 40 / 2,
+    minWidth: 40,
+    height: 40
+  }, ownerState.color === 'inherit' && {
+    color: 'inherit'
+  });
+}, ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
-  color: theme.palette[ownerState.color].contrastText,
-  backgroundColor: theme.palette[ownerState.color].main,
+}) => (0, _extends2.default)({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
+  color: (theme.vars || theme).palette[ownerState.color].contrastText,
+  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
   '&:hover': {
-    backgroundColor: theme.palette[ownerState.color].dark,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.palette[ownerState.color].main
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }
 }));
@@ -203,7 +207,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
-  color: _propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  color: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), _propTypes.default.string]),
 
   /**
    * The component used for the root node.

package/node/FormControlLabel/FormControlLabel.js

@@ -98,7 +98,7 @@ const FormControlLabelRoot = (0, _styled.default)('label', {
 }, {
   [`& .${_formControlLabelClasses.default.label}`]: {
     [`&.${_formControlLabelClasses.default.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     }
   }
 }));

package/node/FormHelperText/FormHelperText.js

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

package/node/FormLabel/FormLabel.js

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

package/node/Icon/Icon.js

@@ -79,14 +79,14 @@ const IconRoot = (0, _styled.default)('span', {
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
   color: {
-    primary: theme.palette.primary.main,
-    secondary: theme.palette.secondary.main,
-    info: theme.palette.info.main,
-    success: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    action: theme.palette.action.active,
-    error: theme.palette.error.main,
-    disabled: theme.palette.action.disabled,
+    primary: (theme.vars || theme).palette.primary.main,
+    secondary: (theme.vars || theme).palette.secondary.main,
+    info: (theme.vars || theme).palette.info.main,
+    success: (theme.vars || theme).palette.success.main,
+    warning: (theme.vars || theme).palette.warning.main,
+    action: (theme.vars || theme).palette.action.active,
+    error: (theme.vars || theme).palette.error.main,
+    disabled: (theme.vars || theme).palette.action.disabled,
     inherit: undefined
   }[ownerState.color]
 }));

package/node/IconButton/IconButton.js

@@ -75,13 +75,13 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   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: (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.active} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -97,10 +97,10 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 }) => (0, _extends2.default)({}, ownerState.color === 'inherit' && {
   color: 'inherit'
 }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
-  color: theme.palette[ownerState.color].main
+  color: (theme.vars || theme).palette[ownerState.color].main
 }, !ownerState.disableRipple && {
   '&:hover': {
-    backgroundColor: (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _system.alpha)(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
@@ -115,7 +115,7 @@ const IconButtonRoot = (0, _styled.default)(_ButtonBase.default, {
 }, {
   [`&.${_iconButtonClasses.default.disabled}`]: {
     backgroundColor: 'transparent',
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 /**

package/node/ImageListItemBar/ImageListItemBar.js

@@ -99,7 +99,7 @@ const ImageListItemBarTitleWrap = (0, _styled.default)('div', {
   return (0, _extends2.default)({
     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/node/Input/Input.js

@@ -65,7 +65,12 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+  let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+
+  if (theme.vars) {
+    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+  }
+
   return (0, _extends2.default)({
     position: 'relative'
   }, ownerState.formControl && {
@@ -74,7 +79,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -95,7 +100,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
       transform: 'scaleX(1) translateX(0)'
     },
     [`&.${_inputClasses.default.error}:after`]: {
-      borderBottomColor: theme.palette.error.main,
+      borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
 
     },
@@ -114,7 +119,7 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
 
     },
     [`&:hover:not(.${_inputClasses.default.disabled}):before`]: {
-      borderBottom: `2px solid ${theme.palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/node/InputAdornment/InputAdornment.js

@@ -79,7 +79,7 @@ const InputAdornmentRoot = (0, _styled.default)('div', {
   maxHeight: '2em',
   alignItems: 'center',
   whiteSpace: 'nowrap',
-  color: theme.palette.action.active
+  color: (theme.vars || theme).palette.action.active
 }, ownerState.variant === 'filled' && {
   // Styles applied to the root element if `variant="filled"`.
   [`&.${_inputAdornmentClasses.default.positionStart}&:not(.${_inputAdornmentClasses.default.hiddenLabel})`]: {