@mui/material 5.6.4 → 5.7.0

package/Input/inputClasses.d.ts

@@ -1,34 +1,34 @@
-export interface InputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
-    formControl: string;
-    /** Styles applied to the root element if the component is focused. */
-    focused: string;
-    /** Styles applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if color secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element unless `disableUnderline={true}`. */
-    underline: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `type="search"`. */
-    inputTypeSearch: string;
-}
-export declare type InputClassKey = keyof InputClasses;
-export declare function getInputUtilityClass(slot: string): string;
-declare const inputClasses: InputClasses;
-export default inputClasses;
+export interface InputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+    formControl: string;
+    /** Styles applied to the root element if the component is focused. */
+    focused: string;
+    /** Styles applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if color secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element unless `disableUnderline={true}`. */
+    underline: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `type="search"`. */
+    inputTypeSearch: string;
+}
+export declare type InputClassKey = keyof InputClasses;
+export declare function getInputUtilityClass(slot: string): string;
+declare const inputClasses: InputClasses;
+export default inputClasses;

package/InputAdornment/InputAdornment.js

@@ -54,7 +54,7 @@ const InputAdornmentRoot = styled('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.positionStart}&:not(.${inputAdornmentClasses.hiddenLabel})`]: {

package/InputAdornment/inputAdornmentClasses.d.ts

@@ -1,24 +1,24 @@
-export interface InputAdornmentClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `position="start"`. */
-    positionStart: string;
-    /** Styles applied to the root element if `position="end"`. */
-    positionEnd: string;
-    /** Styles applied to the root element if `disablePointerEvents={true}`. */
-    disablePointerEvents: string;
-    /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
-    hiddenLabel: string;
-    /** Styles applied if the adornment is used inside <FormControl size="small" />. */
-    sizeSmall: string;
-}
-export declare type InputAdornmentClassKey = keyof InputAdornmentClasses;
-export declare function getInputAdornmentUtilityClass(slot: string): string;
-declare const inputAdornmentClasses: InputAdornmentClasses;
-export default inputAdornmentClasses;
+export interface InputAdornmentClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `position="start"`. */
+    positionStart: string;
+    /** Styles applied to the root element if `position="end"`. */
+    positionEnd: string;
+    /** Styles applied to the root element if `disablePointerEvents={true}`. */
+    disablePointerEvents: string;
+    /** Styles applied if the adornment is used inside <FormControl hiddenLabel />. */
+    hiddenLabel: string;
+    /** Styles applied if the adornment is used inside <FormControl size="small" />. */
+    sizeSmall: string;
+}
+export declare type InputAdornmentClassKey = keyof InputAdornmentClasses;
+export declare function getInputAdornmentUtilityClass(slot: string): string;
+declare const inputAdornmentClasses: InputAdornmentClasses;
+export default inputAdornmentClasses;

package/InputBase/InputBase.js

@@ -64,7 +64,7 @@ export const InputBaseRoot = styled('div', {
   theme,
   ownerState
 }) => _extends({}, theme.typography.body1, {
-  color: theme.palette.text.primary,
+  color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
   // 23px
   boxSizing: 'border-box',
@@ -74,7 +74,7 @@ export const InputBaseRoot = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
   [`&.${inputBaseClasses.disabled}`]: {
-    color: theme.palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
   }
 }, ownerState.multiline && _extends({
@@ -93,17 +93,25 @@ export const InputBaseComponent = styled('input', {
   ownerState
 }) => {
   const light = theme.palette.mode === 'light';
-  const placeholder = {
-    color: 'currentColor',
-    opacity: light ? 0.42 : 0.5,
+
+  const placeholder = _extends({
+    color: 'currentColor'
+  }, theme.vars ? {
+    opacity: theme.vars.opacity.placeholder
+  } : {
+    opacity: light ? 0.42 : 0.5
+  }, {
     transition: theme.transitions.create('opacity', {
       duration: theme.transitions.duration.shorter
     })
-  };
+  });
+
   const placeholderHidden = {
     opacity: '0 !important'
   };
-  const placeholderVisible = {
+  const placeholderVisible = theme.vars ? {
+    opacity: theme.vars.opacity.placeholder
+  } : {
     opacity: light ? 0.42 : 0.5
   };
   return _extends({
@@ -164,7 +172,7 @@ export const InputBaseComponent = styled('input', {
     [`&.${inputBaseClasses.disabled}`]: {
       opacity: 1,
       // Reset iOS opacity
-      WebkitTextFillColor: theme.palette.text.disabled // Fix opacity Safari bug
+      WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
 
     },
     '&:-webkit-autofill': {

package/InputBase/inputBaseClasses.d.ts

@@ -1,44 +1,44 @@
-export interface InputBaseClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
-    formControl: string;
-    /** Styles applied to the root element if the component is focused. */
-    focused: string;
-    /** Styles applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: string;
-    /** Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the root element if the color is secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** Styles applied to the root element if `hiddenLabel={true}`. */
-    hiddenLabel: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `type="search"`. */
-    inputTypeSearch: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: string;
-    /** Styles applied to the input element if `hiddenLabel={true}`. */
-    inputHiddenLabel: string;
-}
-export declare type InputBaseClassKey = keyof InputBaseClasses;
-export declare function getInputBaseUtilityClass(slot: string): string;
-declare const inputBaseClasses: InputBaseClasses;
-export default inputBaseClasses;
+export interface InputBaseClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+    formControl: string;
+    /** Styles applied to the root element if the component is focused. */
+    focused: string;
+    /** Styles applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `startAdornment` is provided. */
+    adornedStart: string;
+    /** Styles applied to the root element if `endAdornment` is provided. */
+    adornedEnd: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the root element if the color is secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** Styles applied to the root element if `hiddenLabel={true}`. */
+    hiddenLabel: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `type="search"`. */
+    inputTypeSearch: string;
+    /** Styles applied to the input element if `startAdornment` is provided. */
+    inputAdornedStart: string;
+    /** Styles applied to the input element if `endAdornment` is provided. */
+    inputAdornedEnd: string;
+    /** Styles applied to the input element if `hiddenLabel={true}`. */
+    inputHiddenLabel: string;
+}
+export declare type InputBaseClassKey = keyof InputBaseClasses;
+export declare function getInputBaseUtilityClass(slot: string): string;
+declare const inputBaseClasses: InputBaseClasses;
+export default inputBaseClasses;

package/InputLabel/inputLabelClasses.d.ts

@@ -1,32 +1,32 @@
-export interface InputLabelClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** State class applied to the root element if `focused={true}`. */
-    focused: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** State class applied to the root element if `required={true}`. */
-    required: string;
-    /** State class applied to the asterisk element. */
-    asterisk: string;
-    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
-    formControl: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the input element if `shrink={true}`. */
-    shrink: string;
-    /** Styles applied to the input element unless `disableAnimation={true}`. */
-    animated: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-}
-export declare type InputLabelClassKey = keyof InputLabelClasses;
-export declare function getInputLabelUtilityClasses(slot: string): string;
-declare const inputLabelClasses: InputLabelClasses;
-export default inputLabelClasses;
+export interface InputLabelClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** State class applied to the root element if `focused={true}`. */
+    focused: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+    /** State class applied to the asterisk element. */
+    asterisk: string;
+    /** Styles applied to the root element if the component is a descendant of `FormControl`. */
+    formControl: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the input element if `shrink={true}`. */
+    shrink: string;
+    /** Styles applied to the input element unless `disableAnimation={true}`. */
+    animated: string;
+    /** Styles applied to the root element if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+}
+export declare type InputLabelClassKey = keyof InputLabelClasses;
+export declare function getInputLabelUtilityClasses(slot: string): string;
+declare const inputLabelClasses: InputLabelClasses;
+export default inputLabelClasses;

package/LinearProgress/linearProgressClasses.d.ts

@@ -1,42 +1,42 @@
-export interface LinearProgressClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant="buffer"`. */
-    colorPrimary: string;
-    /** Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `variant="determinate"`. */
-    determinate: string;
-    /** Styles applied to the root element if `variant="indeterminate"`. */
-    indeterminate: string;
-    /** Styles applied to the root element if `variant="buffer"`. */
-    buffer: string;
-    /** Styles applied to the root element if `variant="query"`. */
-    query: string;
-    /** Styles applied to the additional bar element if `variant="buffer"`. */
-    dashed: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
-    dashedColorPrimary: string;
-    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
-    dashedColorSecondary: string;
-    /** Styles applied to the layered bar1 and bar2 elements. */
-    bar: string;
-    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
-    barColorPrimary: string;
-    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
-    barColorSecondary: string;
-    /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */
-    bar1Indeterminate: string;
-    /** Styles applied to the bar1 element if `variant="determinate"`. */
-    bar1Determinate: string;
-    /** Styles applied to the bar1 element if `variant="buffer"`. */
-    bar1Buffer: string;
-    /** Styles applied to the bar2 element if `variant="indeterminate or query"`. */
-    bar2Indeterminate: string;
-    /** Styles applied to the bar2 element if `variant="buffer"`. */
-    bar2Buffer: string;
-}
-export declare type LinearProgressClassKey = keyof LinearProgressClasses;
-export declare function getLinearProgressUtilityClass(slot: string): string;
-declare const linearProgressClasses: LinearProgressClasses;
-export default linearProgressClasses;
+export interface LinearProgressClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant="buffer"`. */
+    colorPrimary: string;
+    /** Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `variant="determinate"`. */
+    determinate: string;
+    /** Styles applied to the root element if `variant="indeterminate"`. */
+    indeterminate: string;
+    /** Styles applied to the root element if `variant="buffer"`. */
+    buffer: string;
+    /** Styles applied to the root element if `variant="query"`. */
+    query: string;
+    /** Styles applied to the additional bar element if `variant="buffer"`. */
+    dashed: string;
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
+    dashedColorPrimary: string;
+    /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
+    dashedColorSecondary: string;
+    /** Styles applied to the layered bar1 and bar2 elements. */
+    bar: string;
+    /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
+    barColorPrimary: string;
+    /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
+    barColorSecondary: string;
+    /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */
+    bar1Indeterminate: string;
+    /** Styles applied to the bar1 element if `variant="determinate"`. */
+    bar1Determinate: string;
+    /** Styles applied to the bar1 element if `variant="buffer"`. */
+    bar1Buffer: string;
+    /** Styles applied to the bar2 element if `variant="indeterminate or query"`. */
+    bar2Indeterminate: string;
+    /** Styles applied to the bar2 element if `variant="buffer"`. */
+    bar2Buffer: string;
+}
+export declare type LinearProgressClassKey = keyof LinearProgressClasses;
+export declare function getLinearProgressUtilityClass(slot: string): string;
+declare const linearProgressClasses: LinearProgressClasses;
+export default linearProgressClasses;

package/Link/Link.js

@@ -9,7 +9,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
-import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -98,7 +97,6 @@ const LinkRoot = styled(Typography, {
   });
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
-  const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -117,7 +115,6 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
   const {
     isFocusVisibleRef,
     onBlur: handleBlurVisible,
@@ -152,9 +149,7 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   const ownerState = _extends({}, props, {
-    // It is too complex to support any types of `sx`.
-    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
-    color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
+    color,
     component,
     focusVisible,
     underline,
@@ -172,8 +167,8 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     ref: handlerRef,
     ownerState: ownerState,
     variant: variant,
-    sx: [...(inProps.color ? [{
-      color: colorTransformations[color] || color
+    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+      color
     }] : []), ...(Array.isArray(sx) ? sx : [sx])]
   }, other));
 });

package/Link/linkClasses.d.ts

@@ -1,18 +1,18 @@
-export interface LinkClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `underline="none"`. */
-    underlineNone: string;
-    /** Styles applied to the root element if `underline="hover"`. */
-    underlineHover: string;
-    /** Styles applied to the root element if `underline="always"`. */
-    underlineAlways: string;
-    /** Styles applied to the root element if `component="button"`. */
-    button: string;
-    /** State class applied to the root element if the link is keyboard focused. */
-    focusVisible: string;
-}
-export declare type LinkClassKey = keyof LinkClasses;
-export declare function getLinkUtilityClass(slot: string): string;
-declare const linkClasses: LinkClasses;
-export default linkClasses;
+export interface LinkClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `underline="none"`. */
+    underlineNone: string;
+    /** Styles applied to the root element if `underline="hover"`. */
+    underlineHover: string;
+    /** Styles applied to the root element if `underline="always"`. */
+    underlineAlways: string;
+    /** Styles applied to the root element if `component="button"`. */
+    button: string;
+    /** State class applied to the root element if the link is keyboard focused. */
+    focusVisible: string;
+}
+export declare type LinkClassKey = keyof LinkClasses;
+export declare function getLinkUtilityClass(slot: string): string;
+declare const linkClasses: LinkClasses;
+export default linkClasses;

package/List/listClasses.d.ts

@@ -1,14 +1,14 @@
-export interface ListClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `disablePadding={true}`. */
-    padding: string;
-    /** Styles applied to the root element if dense. */
-    dense: string;
-    /** Styles applied to the root element if a `subheader` is provided. */
-    subheader: string;
-}
-export declare type ListClassKey = keyof ListClasses;
-export declare function getListUtilityClass(slot: string): string;
-declare const listClasses: ListClasses;
-export default listClasses;
+export interface ListClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `disablePadding={true}`. */
+    padding: string;
+    /** Styles applied to the root element if dense. */
+    dense: string;
+    /** Styles applied to the root element if a `subheader` is provided. */
+    subheader: string;
+}
+export declare type ListClassKey = keyof ListClasses;
+export declare function getListUtilityClass(slot: string): string;
+declare const listClasses: ListClasses;
+export default listClasses;

package/ListItem/ListItem.js

@@ -82,21 +82,21 @@ export const ListItemRoot = styled('div', {
   }
 }, {
   [`&.${listItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`&.${listItemClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     [`&.${listItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   },
   [`&.${listItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
   }
 }, ownerState.alignItems === 'flex-start' && {
   alignItems: 'flex-start'
 }, ownerState.divider && {
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
   backgroundClip: 'padding-box'
 }, ownerState.button && {
   transition: theme.transitions.create('background-color', {
@@ -104,17 +104,17 @@ export const ListItemRoot = styled('div', {
   }),
   '&:hover': {
     textDecoration: 'none',
-    backgroundColor: theme.palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
   },
   [`&.${listItemClasses.selected}:hover`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
   }
 }, ownerState.hasSecondaryAction && {