Skip to content

[deps] bump minimum core packages to 7.3.0 to adopt theme color manipulator #21892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siriwatknp merged 6 commits into from
Mar 31, 2026
Merged

[deps] bump minimum core packages to 7.3.0 to adopt theme color manipulator #21892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9cd6a5c
[core] update @mui/* peer dependencies to ^7.3.0
siriwatknp Mar 30, 2026
25f3eb8
[core] migrate to native color theme functions
siriwatknp Mar 30, 2026
9b6487d
pnpm install
siriwatknp Mar 30, 2026
3411506
prettier
siriwatknp Mar 30, 2026
1fde0bd
trigger ci
siriwatknp Mar 30, 2026
6102f2d
trigger ci
siriwatknp Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/x-charts-premium/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/x-charts-pro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Comment thread
siriwatknp marked this conversation as resolved.
"@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"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ZoomSliderActiveTrackRect = styled('rect', {
}),
rx: 4,
ry: 4,
stroke: theme.palette.grey[500],
stroke: (theme.vars || theme).palette.grey[500],
},
},
],
Expand Down
5 changes: 2 additions & 3 deletions packages/x-charts-pro/src/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/x-charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid-generator/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid-generator/src/renderer/renderEditProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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),
},
}));

Expand Down
8 changes: 4 additions & 4 deletions packages/x-data-grid-generator/src/renderer/renderPnl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
},
}));
Expand Down
16 changes: 5 additions & 11 deletions packages/x-data-grid-generator/src/renderer/renderTotalPrice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => ({
Expand All @@ -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),
},
}));

Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid-premium/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid-pro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
6 changes: 2 additions & 4 deletions packages/x-data-grid/src/components/GridRowDragAndDropOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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),
}),
}));

Expand Down
2 changes: 1 addition & 1 deletion packages/x-data-grid/src/material/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
17 changes: 8 additions & 9 deletions packages/x-data-grid/src/material/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions packages/x-date-pickers-pro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 5 additions & 4 deletions packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
},
Expand Down
23 changes: 13 additions & 10 deletions packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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))',
Expand Down Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions packages/x-date-pickers/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 9 additions & 7 deletions packages/x-date-pickers/src/DigitalClock/DigitalClock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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,
),
},
}));

Expand Down
Loading
Loading