@mui/material 7.2.0 → 7.3.1

package/esm/Button/Button.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { unstable_useId as useId } from "../utils/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
@@ -159,15 +158,15 @@ const ButtonRoot = styled(ButtonBase, {
       style: {
         '--variant-textColor': (theme.vars || theme).palette[color].main,
         '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5),
+        '--variant-outlinedBorder': theme.alpha((theme.vars || theme).palette[color].main, 0.5),
         '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
         '--variant-containedBg': (theme.vars || theme).palette[color].main,
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': (theme.vars || theme).palette[color].dark,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity),
             '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }
@@ -182,8 +181,8 @@ const ButtonRoot = styled(ButtonBase, {
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }

package/esm/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
@@ -122,7 +121,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        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)'}`,
+        borderRight: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${buttonGroupClasses.disabled}`]: {
           borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -135,7 +134,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        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)'}`,
+        borderBottom: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${buttonGroupClasses.disabled}`]: {
           borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -148,7 +147,7 @@ const ButtonGroupRoot = styled('div', {
     },
     style: {
       [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)
+        borderColor: theme.alpha((theme.vars || theme).palette[color].main, 0.5)
       }
     }
   }]), {

package/esm/Checkbox/Checkbox.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from "../internal/SwitchBase.js";
 import CheckBoxOutlineBlankIcon from "../internal/svg-icons/CheckBoxOutlineBlank.js";
 import CheckBoxIcon from "../internal/svg-icons/CheckBox.js";
@@ -57,7 +56,7 @@ const CheckboxRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
@@ -67,7 +66,7 @@ const CheckboxRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({

package/esm/Chip/Chip.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import CancelIcon from "../internal/svg-icons/Cancel.js";
 import useForkRef from "../utils/useForkRef.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
@@ -136,12 +135,12 @@ const ChipRoot = styled('div', {
     },
     [`& .${chipClasses.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
+      color: theme.alpha((theme.vars || theme).palette.text.primary, 0.26),
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+        color: theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     },
     variants: [{
@@ -170,7 +169,7 @@ const ChipRoot = styled('div', {
           backgroundColor: (theme.vars || theme).palette[color].main,
           color: (theme.vars || theme).palette[color].contrastText,
           [`& .${chipClasses.deleteIcon}`]: {
-            color: theme.vars ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` : alpha(theme.palette[color].contrastText, 0.7),
+            color: theme.alpha((theme.vars || theme).palette[color].contrastText, 0.7),
             '&:hover, &:active': {
               color: (theme.vars || theme).palette[color].contrastText
             }
@@ -197,7 +196,7 @@ const ChipRoot = styled('div', {
       },
       style: {
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         }
       }
     }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => {
@@ -221,10 +220,10 @@ const ChipRoot = styled('div', {
         WebkitTapHighlightColor: 'transparent',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)
         },
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         },
         '&:active': {
           boxShadow: (theme.vars || theme).shadows[1]
@@ -280,15 +279,15 @@ const ChipRoot = styled('div', {
       },
       style: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7)}`,
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.7)}`,
         [`&.${chipClasses.clickable}:hover`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
         },
         [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[color].main, theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.focusOpacity)
         },
         [`& .${chipClasses.deleteIcon}`]: {
-          color: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : alpha(theme.palette[color].main, 0.7),
+          color: theme.alpha((theme.vars || theme).palette[color].main, 0.7),
           '&:hover, &:active': {
             color: (theme.vars || theme).palette[color].main
           }

package/esm/Divider/Divider.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -61,7 +60,7 @@ const DividerRoot = styled('div', {
       light: true
     },
     style: {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+      borderColor: theme.alpha((theme.vars || theme).palette.divider, 0.08)
     }
   }, {
     props: {

package/esm/FilledInput/FilledInput.js

@@ -105,7 +105,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
           }
         },
         '&::before': {
-          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           content: '"\\00a0"',

package/esm/IconButton/IconButton.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { unstable_useId as useId } from "../utils/index.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -56,7 +55,7 @@ const IconButtonRoot = styled(ButtonBase, {
   variants: [{
     props: props => !props.disableRipple,
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity),
       '&:hover': {
         backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
@@ -120,7 +119,7 @@ const IconButtonRoot = styled(ButtonBase, {
       color
     },
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {
     props: {

package/esm/Input/Input.js

@@ -46,7 +46,7 @@ const InputRoot = styled(InputBaseRoot, {
   const light = theme.palette.mode === 'light';
   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.inputUnderline})`;
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     position: 'relative',

package/esm/LinearProgress/LinearProgress.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -93,7 +92,7 @@ const getColorShade = (theme, color) => {
   if (theme.vars) {
     return theme.vars.palette.LinearProgress[`${color}Bg`];
   }
-  return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
+  return theme.palette.mode === 'light' ? theme.lighten(theme.palette[color].main, 0.62) : theme.darken(theme.palette[color].main, 0.5);
 };
 const LinearProgressRoot = styled('span', {
   name: 'MuiLinearProgress',

package/esm/Link/Link.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { alpha } from '@mui/system/colorManipulator';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
 import isFocusVisible from '@mui/utils/isFocusVisible';
@@ -87,13 +86,21 @@ const LinkRoot = styled(Typography, {
       style: {
         textDecorationColor: 'var(--Link-underlineColor)'
       }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color === 'inherit',
+      style: theme.colorSpace ? {
+        textDecorationColor: theme.alpha('currentColor', 0.4)
+      } : null
     }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         underline: 'always',
         color
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : alpha(theme.palette[color].main, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette[color].main, 0.4)
       }
     })), {
       props: {
@@ -101,7 +108,7 @@ const LinkRoot = styled(Typography, {
         color: 'textPrimary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     }, {
       props: {
@@ -109,7 +116,7 @@ const LinkRoot = styled(Typography, {
         color: 'textSecondary'
       },
       style: {
-        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : alpha(theme.palette.text.secondary, 0.4)
+        '--Link-underlineColor': theme.alpha((theme.vars || theme).palette.text.secondary, 0.4)
       }
     }, {
       props: {

package/esm/Link/getTextDecoration.js

@@ -5,6 +5,11 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
+  if ('colorSpace' in theme && theme.colorSpace) {
+    const color = getPath(theme, `palette.${transformedColor}.main`) || getPath(theme, `palette.${transformedColor}`) || ownerState.color;
+    return theme.alpha(color, 0.4);
+  }
+
   // check the `main` color first for a custom palette, then fallback to the color itself
   const color = getPath(theme, `palette.${transformedColor}.main`, false) || getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = getPath(theme, `palette.${transformedColor}.mainChannel`) || getPath(theme, `palette.${transformedColor}Channel`);

package/esm/ListItemButton/ListItemButton.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -71,16 +70,16 @@ const ListItemButtonRoot = styled(ButtonBase, {
     }
   },
   [`&.${listItemButtonClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${listItemButtonClasses.focusVisible}`]: {
-      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)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${listItemButtonClasses.selected}:hover`]: {
-    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),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${listItemButtonClasses.focusVisible}`]: {

package/esm/MenuItem/MenuItem.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -70,16 +69,16 @@ const MenuItemRoot = styled(ButtonBase, {
     }
   },
   [`&.${menuItemClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
     [`&.${menuItemClasses.focusVisible}`]: {
-      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)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     }
   },
   [`&.${menuItemClasses.selected}:hover`]: {
-    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),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
     }
   },
   [`&.${menuItemClasses.focusVisible}`]: {

package/esm/OutlinedInput/OutlinedInput.js

@@ -50,7 +50,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+        borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
       }
     },
     [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
@@ -116,7 +116,7 @@ const NotchedOutlineRoot = styled(NotchedOutline, {
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
   return {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+    borderColor: theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, 0.23) : borderColor
   };
 }));
 const OutlinedInputInput = styled(InputBaseInput, {

package/esm/PaginationItem/PaginationItem.d.ts

@@ -102,6 +102,7 @@ export interface PaginationItemTypeMap<AdditionalProps = {}, RootComponent exten
  * API:
  *
  * - [PaginationItem API](https://mui.com/material-ui/api/pagination-item/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const PaginationItem: OverridableComponent<PaginationItemTypeMap>;
 export type PaginationItemProps<RootComponent extends React.ElementType = PaginationItemTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PaginationItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/esm/PaginationItem/PaginationItem.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import paginationItemClasses, { getPaginationItemUtilityClass } from "./paginationItemClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
@@ -126,14 +125,14 @@ const PaginationItemPage = styled(ButtonBase, {
   [`&.${paginationItemClasses.selected}`]: {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: (theme.vars || theme).palette.action.selected
       }
     },
     [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
     },
     [`&.${paginationItemClasses.disabled}`]: {
       opacity: 1,
@@ -175,7 +174,7 @@ const PaginationItemPage = styled(ButtonBase, {
       variant: 'outlined'
     },
     style: {
-      border: 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)'}`,
+      border: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
       [`&.${paginationItemClasses.selected}`]: {
         [`&.${paginationItemClasses.disabled}`]: {
           borderColor: (theme.vars || theme).palette.action.disabledBackground,
@@ -226,17 +225,17 @@ const PaginationItemPage = styled(ButtonBase, {
     style: {
       [`&.${paginationItemClasses.selected}`]: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)}`,
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity),
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.5)}`,
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.activatedOpacity),
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
           }
         },
         [`&.${paginationItemClasses.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, `${(theme.vars || theme).palette.action.activatedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         }
       }
     }

package/esm/Radio/Radio.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from "../internal/SwitchBase.js";
 import RadioButtonIcon from "./RadioButtonIcon.js";
 import capitalize from "../utils/capitalize.js";
@@ -59,7 +58,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
@@ -70,7 +69,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({

package/esm/Select/SelectInput.js

@@ -433,11 +433,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const classes = useUtilityClasses(ownerState);
   const paperProps = {
     ...MenuProps.PaperProps,
-    ...MenuProps.slotProps?.paper
+    ...(typeof MenuProps.slotProps?.paper === 'function' ? MenuProps.slotProps.paper(ownerState) : MenuProps.slotProps?.paper)
   };
   const listProps = {
     ...MenuProps.MenuListProps,
-    ...MenuProps.slotProps?.list
+    ...(typeof MenuProps.slotProps?.list === 'function' ? MenuProps.slotProps.list(ownerState) : MenuProps.slotProps?.list)
   };
   const listboxId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/esm/Skeleton/Skeleton.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from "../styles/index.js";
+import { unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from "../styles/index.js";
 import { keyframes, css, styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
@@ -80,7 +80,7 @@ const SkeletonRoot = styled('span', {
   return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : theme.alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
     height: '1.2em',
     variants: [{
       props: {

package/esm/Slider/Slider.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useSlider, valueToPercent } from "./useSlider.js";
@@ -219,13 +218,13 @@ export const SliderTrack = styled('span', {
           backgroundColor: theme.vars.palette.Slider[`${color}Track`],
           borderColor: theme.vars.palette.Slider[`${color}Track`]
         } : {
-          backgroundColor: lighten(theme.palette[color].main, 0.62),
-          borderColor: lighten(theme.palette[color].main, 0.62),
+          backgroundColor: theme.lighten(theme.palette[color].main, 0.62),
+          borderColor: theme.lighten(theme.palette[color].main, 0.62),
           ...theme.applyStyles('dark', {
-            backgroundColor: darken(theme.palette[color].main, 0.5)
+            backgroundColor: theme.darken(theme.palette[color].main, 0.5)
           }),
           ...theme.applyStyles('dark', {
-            borderColor: darken(theme.palette[color].main, 0.5)
+            borderColor: theme.darken(theme.palette[color].main, 0.5)
           })
         })
       }
@@ -314,21 +313,13 @@ export const SliderThumb = styled('span', {
     },
     style: {
       [`&:hover, &.${sliderClasses.focusVisible}`]: {
-        ...(theme.vars ? {
-          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
-        }),
+        boxShadow: `0px 0px 0px 8px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`,
         '@media (hover: none)': {
           boxShadow: 'none'
         }
       },
       [`&.${sliderClasses.active}`]: {
-        ...(theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
-        })
+        boxShadow: `0px 0px 0px 14px ${theme.alpha((theme.vars || theme).palette[color].main, 0.16)}`
       }
     }
   }))]

package/esm/Snackbar/Snackbar.js

@@ -373,14 +373,8 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.shape({
-    clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      children: PropTypes.element.isRequired,
-      disableReactTree: PropTypes.bool,
-      mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
-      onClickAway: PropTypes.func,
-      touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
-    })]),
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])