diff --git a/packages/x-charts-premium/package.json b/packages/x-charts-premium/package.json
index 5c24f63633775..1a3a14aa14d06 100644
--- a/packages/x-charts-premium/package.json
+++ b/packages/x-charts-premium/package.json
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-charts-pro/package.json b/packages/x-charts-pro/package.json
index 9226401033028..9897ba96350bf 100644
--- a/packages/x-charts-pro/package.json
+++ b/packages/x-charts-pro/package.json
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.tsx b/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.tsx
index 538d0f3f23a1b..746aed972bb60 100644
--- a/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.tsx
+++ b/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.tsx
@@ -46,7 +46,7 @@ const ZoomSliderActiveTrackRect = styled('rect', {
         }),
         rx: 4,
         ry: 4,
-        stroke: theme.palette.grey[500],
+        stroke: (theme.vars || theme).palette.grey[500],
       },
     },
   ],
diff --git a/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.tsx b/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.tsx
index 49f67f193c470..0c718f042c683 100644
--- a/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.tsx
+++ b/packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { type AxisId, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
-import { alpha } from '@mui/system';
 import useId from '@mui/utils/useId';
 import { selectorChartAxisZoomData } from '../../internals/plugins/useChartProZoom';
 import { ChartsAxisZoomSliderPreviewContent } from './ChartsAxisZoomSliderPreviewContent';
@@ -12,8 +11,8 @@ const PreviewBackgroundRect = styled('rect', {
 })(({ theme }) => ({
   rx: 4,
   ry: 4,
-  stroke: theme.palette.grey[700],
-  fill: alpha(theme.palette.grey[700], 0.4),
+  stroke: (theme.vars || theme).palette.grey[700],
+  fill: theme.alpha((theme.vars || theme).palette.grey[700], 0.4),
 }));
 
 interface ChartsAxisZoomSliderPreviewProps {
diff --git a/packages/x-charts/package.json b/packages/x-charts/package.json
index b5dc7d4909638..d10bf42c15fad 100644
--- a/packages/x-charts/package.json
+++ b/packages/x-charts/package.json
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-data-grid-generator/package.json b/packages/x-data-grid-generator/package.json
index c68d700e52acc..1a689791998e2 100644
--- a/packages/x-data-grid-generator/package.json
+++ b/packages/x-data-grid-generator/package.json
@@ -47,8 +47,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.4.1 || ^6.0.0 || ^7.0.0",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/icons-material": "^7.3.0",
+    "@mui/material": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx b/packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx
index e0a7ba9e9ed05..433ffb76e13a2 100644
--- a/packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx
+++ b/packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx
@@ -5,7 +5,7 @@ import { type GridRenderEditCellParams, useGridApiContext } from '@mui/x-data-gr
 import Slider, { type SliderProps, sliderClasses } from '@mui/material/Slider';
 import Tooltip from '@mui/material/Tooltip';
 import debounce from '@mui/utils/debounce';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 
 const StyledSlider = styled(Slider)(({ theme }) => ({
   display: 'flex',
@@ -39,7 +39,7 @@ const StyledSlider = styled(Slider)(({ theme }) => ({
     width: 5,
     borderRadius: 0,
     marginTop: 0,
-    backgroundColor: alpha('#000000', 0.2),
+    backgroundColor: theme.alpha('#000000', 0.2),
   },
 }));
 
diff --git a/packages/x-data-grid-generator/src/renderer/renderPnl.tsx b/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
index d00487691e1fa..45bee2b510ac9 100644
--- a/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
+++ b/packages/x-data-grid-generator/src/renderer/renderPnl.tsx
@@ -7,15 +7,15 @@ const Value = styled('div')(({ theme }) => ({
   width: '100%',
   fontVariantNumeric: 'tabular-nums',
   '&.positive': {
-    color: theme.palette.success.light,
+    color: (theme.vars || theme).palette.success.light,
     ...theme.applyStyles('light', {
-      color: theme.palette.success.dark,
+      color: (theme.vars || theme).palette.success.dark,
     }),
   },
   '&.negative': {
-    color: theme.palette.error.light,
+    color: (theme.vars || theme).palette.error.light,
     ...theme.applyStyles('light', {
-      color: theme.palette.error.dark,
+      color: (theme.vars || theme).palette.error.dark,
     }),
   },
 }));
diff --git a/packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx b/packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx
index 2d894aa9b072d..2b121d5cd1dc8 100644
--- a/packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx
+++ b/packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import type { GridRenderCellParams } from '@mui/x-data-grid-premium';
 
 const Value = styled('div')(({ theme }) => ({
@@ -13,24 +13,18 @@ const Value = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'flex-end',
   '&.good': {
-    color: theme.vars
-      ? `rgb(${theme.vars.palette.success.mainChannel})`
-      : theme.palette.success.main,
+    color: (theme.vars || theme).palette.success.main,
   },
   '&.bad': {
-    color: theme.vars ? `rgb(${theme.vars.palette.error.mainChannel})` : theme.palette.error.main,
+    color: (theme.vars || theme).palette.error.main,
   },
   '&.filled.good': {
     color: 'inherit',
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)`
-      : alpha(theme.palette.success.main, 0.3),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.success.main, 0.3),
   },
   '&.filled.bad': {
     color: 'inherit',
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)`
-      : alpha(theme.palette.error.main, 0.3),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.error.main, 0.3),
   },
 }));
 
diff --git a/packages/x-data-grid-premium/package.json b/packages/x-data-grid-premium/package.json
index c779b00480689..db8db0f26ac6b 100644
--- a/packages/x-data-grid-premium/package.json
+++ b/packages/x-data-grid-premium/package.json
@@ -52,8 +52,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-data-grid-pro/package.json b/packages/x-data-grid-pro/package.json
index 946dd22d7c697..3d896203f74fc 100644
--- a/packages/x-data-grid-pro/package.json
+++ b/packages/x-data-grid-pro/package.json
@@ -50,8 +50,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-data-grid/package.json b/packages/x-data-grid/package.json
index 08de605c62b54..a5d24657d3b8f 100644
--- a/packages/x-data-grid/package.json
+++ b/packages/x-data-grid/package.json
@@ -54,8 +54,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-data-grid/src/components/GridRowDragAndDropOverlay.tsx b/packages/x-data-grid/src/components/GridRowDragAndDropOverlay.tsx
index af69f2112835d..d7a76f079be3b 100644
--- a/packages/x-data-grid/src/components/GridRowDragAndDropOverlay.tsx
+++ b/packages/x-data-grid/src/components/GridRowDragAndDropOverlay.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
@@ -53,9 +53,7 @@ const GridRowDragAndDropOverlayRoot = styled('div', {
   }),
 
   ...(action === 'inside' && {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`
-      : alpha(theme.palette.primary.main, 0.1),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.1),
   }),
 }));
 
diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
index 61c34f5da6d6d..96eef8eac8a71 100644
--- a/packages/x-data-grid/src/material/index.tsx
+++ b/packages/x-data-grid/src/material/index.tsx
@@ -690,7 +690,7 @@ const StyledTabs = styled(MUITabs, {
   name: 'MuiDataGrid',
   slot: 'Tabs',
 })(({ theme }) => ({
-  borderBottom: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
 }));
 
 const StyledTab = styled(MUITab, {
diff --git a/packages/x-data-grid/src/material/variables.ts b/packages/x-data-grid/src/material/variables.ts
index 020287bedd950..79b70900fd321 100644
--- a/packages/x-data-grid/src/material/variables.ts
+++ b/packages/x-data-grid/src/material/variables.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { alpha, darken, lighten, type Theme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
 import { hash } from '@mui/x-internals/hash';
 import { vars, type GridCSSVariablesInterface } from '../constants/cssVariables';
@@ -27,17 +27,16 @@ function transformTheme(t: Theme): GridCSSVariablesInterface {
       : paperColor);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
-  const backgroundBackdrop = t.vars
-    ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})`
-    : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
+  const backgroundBackdrop = t.alpha(
+    (t.vars || t).palette.background.default,
+    (t.vars || t).palette.action.disabledOpacity,
+  );
   const backgroundOverlay =
     t.palette.mode === 'dark'
       ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor)
       : paperColor;
 
-  const selectedColor = t.vars
-    ? `rgb(${t.vars.palette.primary.mainChannel})`
-    : t.palette.primary.main;
+  const selectedColor = (t.vars || t).palette.primary.main;
 
   const radius = getRadius(t);
 
@@ -115,9 +114,9 @@ function getBorderColor(theme: Theme) {
     return theme.vars.palette.TableCell.border;
   }
   if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
+    return theme.lighten(theme.alpha(theme.palette.divider, 1), 0.88);
   }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
+  return theme.darken(theme.alpha(theme.palette.divider, 1), 0.68);
 }
 
 function setOpacity(color: string, opacity: number) {
diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json
index e8ab98b94d3a6..db45f6073509d 100644
--- a/packages/x-date-pickers-pro/package.json
+++ b/packages/x-date-pickers-pro/package.json
@@ -48,8 +48,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
     "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
     "dayjs": "^1.10.7",
diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
index 4bd4e3144b962..4afdae8cea783 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license/internals';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
 import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
@@ -129,9 +129,10 @@ const DateRangePickerDayRoot = styled('div', {
       style: {
         borderRadius: 0,
         color: (theme.vars || theme).palette.primary.contrastText,
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-          : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+        backgroundColor: theme.alpha(
+          (theme.vars || theme).palette.primary.main,
+          (theme.vars || theme).palette.action.focusOpacity,
+        ),
         '&:first-of-type': startBorderStyle,
         '&:last-of-type': endBorderStyle,
       },
diff --git a/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx b/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx
index 1266aaf24261b..44f69738ea447 100644
--- a/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { alpha, styled, useThemeProps, CSSInterpolation, Theme } from '@mui/material/styles';
+import { styled, useThemeProps, CSSInterpolation, Theme } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
@@ -74,9 +74,10 @@ const useUtilityClasses = (
 const highlightStyles = (theme: Theme) => ({
   content: '""' /* Creates an empty element */,
   height: '100%',
-  backgroundColor: theme.vars
-    ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-    : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+  backgroundColor: theme.alpha(
+    (theme.vars || theme).palette.primary.main,
+    (theme.vars || theme).palette.action.focusOpacity,
+  ),
   boxSizing: 'border-box',
   left: 'calc(var(--PickerDay-horizontalMargin) * (-1))',
   right: 'calc(var(--PickerDay-horizontalMargin) * (-1))',
@@ -150,15 +151,17 @@ const DateRangePickerDay2Root = styled(ButtonBase, {
   color: (theme.vars || theme).palette.text.primary,
   '@media (pointer: fine)': {
     '&:hover': {
-      backgroundColor: theme.vars
-        ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-        : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.alpha(
+        (theme.vars || theme).palette.primary.main,
+        (theme.vars || theme).palette.action.hoverOpacity,
+      ),
     },
   },
   '&:focus': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
   },
   zIndex: 1,
   isolation: 'isolate',
diff --git a/packages/x-date-pickers/package.json b/packages/x-date-pickers/package.json
index 841d2d016ed9b..22ea188a28744 100644
--- a/packages/x-date-pickers/package.json
+++ b/packages/x-date-pickers/package.json
@@ -50,8 +50,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
     "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
     "dayjs": "^1.10.7",
diff --git a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
index 2502ca330781d..35cec2bd389da 100644
--- a/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
+++ b/packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
 import MenuItem from '@mui/material/MenuItem';
@@ -76,9 +76,10 @@ export const DigitalClockItem = styled(MenuItem, {
     marginTop: 4,
   },
   '&:hover': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.hoverOpacity,
+    ),
   },
   '&.Mui-selected': {
     backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -88,9 +89,10 @@ export const DigitalClockItem = styled(MenuItem, {
     },
   },
   '&.Mui-focusVisible': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
   },
 }));
 
diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx
index a057467b18a94..a2f18294bd914 100644
--- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendarButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -70,14 +70,16 @@ const DefaultMonthButton = styled('button', {
   borderRadius: 18,
   cursor: 'pointer',
   '&:focus': {
-    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,
+    ),
   },
   '&: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,
+    ),
   },
   '&:disabled': {
     cursor: 'auto',
diff --git a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
index ec7944c55d6c7..8cad6adb2d024 100644
--- a/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
+++ b/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -107,9 +107,10 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
     marginTop: 4,
   },
   '&:hover': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.hoverOpacity,
+    ),
   },
   '&.Mui-selected': {
     backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -119,9 +120,10 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
     },
   },
   '&.Mui-focusVisible': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
   },
 }));
 
diff --git a/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx b/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx
index cea794e865cc4..ebe80f762f1ed 100644
--- a/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx
+++ b/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { alpha, styled, useThemeProps, CSSInterpolation } from '@mui/material/styles';
+import { styled, useThemeProps, CSSInterpolation } from '@mui/material/styles';
 import ButtonBase from '@mui/material/ButtonBase';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
@@ -77,15 +77,17 @@ const PickerDay2Root = styled(ButtonBase, {
   color: (theme.vars || theme).palette.text.primary,
   '@media (pointer: fine)': {
     '&:hover': {
-      backgroundColor: theme.vars
-        ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-        : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.alpha(
+        (theme.vars || theme).palette.primary.main,
+        (theme.vars || theme).palette.action.hoverOpacity,
+      ),
     },
   },
   '&:focus': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
   },
   marginLeft: 'var(--PickerDay-horizontalMargin)',
   marginRight: 'var(--PickerDay-horizontalMargin)',
diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
index 33a9a956e6ae7..0cbfdce1e55e9 100644
--- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
+++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
@@ -7,7 +7,7 @@ import ButtonBase from '@mui/material/ButtonBase';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
-import { alpha, styled, useThemeProps, Theme } from '@mui/material/styles';
+import { styled, useThemeProps, Theme } from '@mui/material/styles';
 import { MuiEvent } from '@mui/x-internals/types';
 import { usePickerAdapter } from '../hooks/usePickerAdapter';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
@@ -65,15 +65,17 @@ const styleArg = ({ theme }: { theme: Theme }) => ({
   color: (theme.vars || theme).palette.text.primary,
   '@media (pointer: fine)': {
     '&:hover': {
-      backgroundColor: theme.vars
-        ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-        : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.alpha(
+        (theme.vars || theme).palette.primary.main,
+        (theme.vars || theme).palette.action.hoverOpacity,
+      ),
     },
   },
   '&:focus': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.primary.main,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
     [`&.${pickersDayClasses.selected}`]: {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark,
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
index 4dc24cc668de7..f68428dea4c26 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersFilledInput/PickersFilledInput.tsx
@@ -106,7 +106,10 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
           '&::before': {
             borderBottom: `1px solid ${
               theme.vars
-                ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`
+                ? theme.alpha(
+                    theme.vars.palette.common.onBackground,
+                    theme.vars.opacity.inputUnderline,
+                  )
                 : bottomLineColor
             }`,
             left: 0,
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
index b57baa93ab336..3bbc00a9f1a08 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInput/PickersInput.tsx
@@ -34,7 +34,10 @@ const PickersInputRoot = styled(PickersInputBaseRoot, {
   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 {
     'label + &': {
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
index 4251cb3cccaf1..bd611956074c4 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/Outline.tsx
@@ -32,7 +32,7 @@ const OutlineRoot = styled('fieldset', {
     overflow: 'hidden',
     minWidth: '0%',
     borderColor: theme.vars
-      ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+      ? theme.alpha(theme.vars.palette.common.onBackground, 0.23)
       : borderColor,
   };
 });
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
index 1f45832920307..be7afd7808392 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx
@@ -38,7 +38,7 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
     '@media (hover: none)': {
       [`&:hover .${pickersOutlinedInputClasses.notchedOutline}`]: {
         borderColor: theme.vars
-          ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+          ? theme.alpha(theme.vars.palette.common.onBackground, 0.23)
           : borderColor,
       },
     },
diff --git a/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx b/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx
index ecb701fd06310..2fd8cbd013399 100644
--- a/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx
+++ b/packages/x-date-pickers/src/YearCalendar/YearCalendarButton.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -68,14 +68,16 @@ const DefaultYearButton = styled('button', {
   borderRadius: 18,
   cursor: 'pointer',
   '&:focus': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.focusOpacity})`
-      : alpha(theme.palette.action.active, theme.palette.action.focusOpacity),
+    backgroundColor: theme.alpha(
+      (theme.vars || theme).palette.action.active,
+      (theme.vars || theme).palette.action.focusOpacity,
+    ),
   },
   '&: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,
+    ),
   },
   '&:disabled': {
     cursor: 'auto',
diff --git a/packages/x-scheduler-premium/package.json b/packages/x-scheduler-premium/package.json
index 51d0bcaf90703..860d131ec0012 100644
--- a/packages/x-scheduler-premium/package.json
+++ b/packages/x-scheduler-premium/package.json
@@ -61,8 +61,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumContent.tsx b/packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumContent.tsx
index 6d8ea61652706..2b6bc0d8bdbcb 100644
--- a/packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumContent.tsx
+++ b/packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumContent.tsx
@@ -166,7 +166,7 @@ const EventTimelinePremiumCurrentTimeIndicator = styled(TimelineGrid.CurrentTime
   marginLeft: 'calc(var(--unit-count) * var(--unit-width) * var(--x-position))',
   width: 0,
   zIndex: 2,
-  borderLeft: `2px solid ${theme.palette.primary.main}`,
+  borderLeft: `2px solid ${(theme.vars || theme).palette.primary.main}`,
   pointerEvents: 'none',
 }));
 
@@ -181,7 +181,7 @@ const EventTimelinePremiumCurrentTimeIndicatorCircle = styled(TimelineGrid.Curre
   width: 8,
   height: 8,
   borderRadius: '50%',
-  backgroundColor: theme.palette.primary.main,
+  backgroundColor: (theme.vars || theme).palette.primary.main,
   zIndex: 1,
 }));
 
diff --git a/packages/x-scheduler-premium/src/event-timeline-premium/content/view-header/DaysHeader.tsx b/packages/x-scheduler-premium/src/event-timeline-premium/content/view-header/DaysHeader.tsx
index d0014971b4eb7..7c9d887717857 100644
--- a/packages/x-scheduler-premium/src/event-timeline-premium/content/view-header/DaysHeader.tsx
+++ b/packages/x-scheduler-premium/src/event-timeline-premium/content/view-header/DaysHeader.tsx
@@ -79,7 +79,7 @@ const MonthStart = styled('div', {
   bottom: 0,
   left: 0,
   ...theme.applyStyles('dark', {
-    background: theme.palette.grey[800],
+    background: (theme.vars || theme).palette.grey[800],
   }),
 }));
 
diff --git a/packages/x-scheduler/package.json b/packages/x-scheduler/package.json
index 682e91db370f0..c93b43af22af9 100644
--- a/packages/x-scheduler/package.json
+++ b/packages/x-scheduler/package.json
@@ -67,8 +67,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-scheduler/src/agenda-view/AgendaView.tsx b/packages/x-scheduler/src/agenda-view/AgendaView.tsx
index cec1d54911277..d645f2ffff875 100644
--- a/packages/x-scheduler/src/agenda-view/AgendaView.tsx
+++ b/packages/x-scheduler/src/agenda-view/AgendaView.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { EventCalendarViewConfig } from '@mui/x-scheduler-headless/models';
 import { useAdapterContext } from '@mui/x-scheduler-headless/use-adapter-context';
@@ -57,9 +57,7 @@ const DayHeaderCell = styled('header', {
   padding: theme.spacing(2),
   gap: theme.spacing(0.5),
   '&[data-current]': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.lightChannel} / 0.05)`
-      : alpha(theme.palette.primary.light, 0.05),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.light, 0.05),
     color: (theme.vars || theme).palette.primary.main,
   },
 }));
diff --git a/packages/x-scheduler/src/event-calendar/mini-calendar/MiniCalendar.tsx b/packages/x-scheduler/src/event-calendar/mini-calendar/MiniCalendar.tsx
index 32daf5f532d97..9f0695bb67452 100644
--- a/packages/x-scheduler/src/event-calendar/mini-calendar/MiniCalendar.tsx
+++ b/packages/x-scheduler/src/event-calendar/mini-calendar/MiniCalendar.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { useStore } from '@base-ui/utils/store';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -120,9 +120,7 @@ const MiniCalendarDayButton = styled('button', {
   color: (theme.vars || theme).palette.text.primary,
   padding: 0,
   '&:hover': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`
-      : alpha(theme.palette.primary.main, 0.08),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.08),
   },
   '&:focus-visible': {
     outline: `2px solid ${(theme.vars || theme).palette.primary.main}`,
@@ -134,9 +132,7 @@ const MiniCalendarDayButton = styled('button', {
   '&[data-today]:not([data-active])': {
     fontWeight: theme.typography.fontWeightBold,
     color: (theme.vars || theme).palette.primary.main,
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.15)`
-      : alpha(theme.palette.primary.main, 0.15),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.15),
   },
   '&[data-active]': {
     backgroundColor: (theme.vars || theme).palette.primary.main,
diff --git a/packages/x-scheduler/src/internals/components/event-dialog/RecurrenceTab.tsx b/packages/x-scheduler/src/internals/components/event-dialog/RecurrenceTab.tsx
index 28b08ebc2fd53..2ed42dde8b390 100644
--- a/packages/x-scheduler/src/internals/components/event-dialog/RecurrenceTab.tsx
+++ b/packages/x-scheduler/src/internals/components/event-dialog/RecurrenceTab.tsx
@@ -46,7 +46,7 @@ const RecurrenceSelectorContainer = styled('div', {
   slot: 'RecurrenceSelectorContainer',
 })(({ theme }) => ({
   display: 'inline-flex',
-  border: `1px solid ${theme.palette.divider}`,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: theme.shape.borderRadius,
   width: 'fit-content',
   maxWidth: '100%',
@@ -140,10 +140,10 @@ const WeekDaySelectorCheckbox = styled(Checkbox, {
   padding: theme.spacing(0.75),
   margin: theme.spacing(0.5),
   borderRadius: theme.shape.borderRadius,
-  color: theme.palette.action.active,
+  color: (theme.vars || theme).palette.action.active,
   [`&.${checkboxClasses.checked}`]: {
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.action.selected,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
   },
 }));
 
diff --git a/packages/x-scheduler/src/month-view/month-view-row/MonthViewCell.tsx b/packages/x-scheduler/src/month-view/month-view-row/MonthViewCell.tsx
index dcb38253e1f7c..c1a1a0e2c2189 100644
--- a/packages/x-scheduler/src/month-view/month-view-row/MonthViewCell.tsx
+++ b/packages/x-scheduler/src/month-view/month-view-row/MonthViewCell.tsx
@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useStore } from '@base-ui/utils/store';
 import Button from '@mui/material/Button';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
@@ -45,9 +45,7 @@ const MonthViewCellRoot = styled(CalendarGrid.DayCell, {
     color: (theme.vars || theme).palette.text.primary,
   },
   '&[data-current]': {
-    backgroundColor: theme.vars
-      ? `rgba(${theme.vars.palette.primary.lightChannel} / 0.05)`
-      : alpha(theme.palette.primary.light, 0.05),
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.light, 0.05),
   },
   [`&[data-current] .${eventCalendarClasses.monthViewCellNumber}`]: {
     backgroundColor: (theme.vars || theme).palette.primary.main,
diff --git a/packages/x-tree-view-pro/package.json b/packages/x-tree-view-pro/package.json
index 69ea48f2e9cb6..f730691759527 100644
--- a/packages/x-tree-view-pro/package.json
+++ b/packages/x-tree-view-pro/package.json
@@ -54,8 +54,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-tree-view/package.json b/packages/x-tree-view/package.json
index 5b2ddc27e0d8a..7d08587a4a53e 100644
--- a/packages/x-tree-view/package.json
+++ b/packages/x-tree-view/package.json
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0",
+    "@mui/system": "^7.3.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
index ddb3b0cdb360a..52d47da202e61 100644
--- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx
+++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import CircularProgress from '@mui/material/CircularProgress';
 import unsupportedProp from '@mui/utils/unsupportedProp';
-import { alpha } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox, { CheckboxProps } from '@mui/material/Checkbox';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -65,31 +64,29 @@ export const TreeItemContent = styled('div', {
     backgroundColor: (theme.vars || theme).palette.action.focus,
   },
   '&[data-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,
+    ),
     '&: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,
+        ),
       },
     },
   },
   '&[data-selected][data-focused]': {
-    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}`,
+    ),
   },
 }));
 
diff --git a/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx
index 8027a13940a8d..005507ddd57d1 100644
--- a/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx
+++ b/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx
@@ -1,6 +1,5 @@
 'use client';
 import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { TreeItemDragAndDropOverlayProps } from './TreeItemDragAndDropOverlay.types';
 import { TreeViewItemsReorderingAction } from '../models';
@@ -24,9 +23,10 @@ const TreeItemDragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
         borderRadius: theme.shape.borderRadius,
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})`
-          : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity),
+        backgroundColor: theme.alpha(
+          (theme.vars || theme).palette.primary.dark,
+          (theme.vars || theme).palette.action.focusOpacity,
+        ),
       },
     },
     {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index deae47204038a..7d384b03440ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4307,7 +4307,6 @@ packages:
   '@lerna/create@9.0.4':
     resolution: {integrity: sha512-WxedGD98G8/a6HztCXNWquaM0x17oSvfvuqDsLxNNX1qXGyrzmMUmd1mQikF/47uy80X6qyWdaRtaAHlwkvEUA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
-    deprecated: This package is an implementation detail of Lerna and is no longer published separately.
 
   '@mdn/browser-compat-data@5.7.6':
     resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==}
@@ -4318,7 +4317,7 @@ packages:
   '@mui/base@5.0.0-beta.40-1':
     resolution: {integrity: sha512-agKXuNNy0bHUmeU7pNmoZwNFr7Hiyhojkb9+2PVyDG5+6RafYuyMgbrav8CndsB7KUc/U51JAw9vKNDLYBzaUA==}
     engines: {node: '>=12.0.0'}
-    deprecated: This package has been replaced by @base-ui-components/react
+    deprecated: This package has been replaced by @base-ui/react
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -11641,6 +11640,7 @@ packages:
   tar@7.5.7:
     resolution: {integrity: sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==}
     engines: {node: '>=18'}
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   temp-dir@1.0.0:
     resolution: {integrity: sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==}