From 8b7dd92d2d9754ab27a9194a3a73d5b852740ecb Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Tue, 14 Jan 2025 10:38:12 -0500
Subject: [PATCH 1/5] Revert "[DataGrid] refactor: theme to CSS variables
 (#15704)"

This reverts commit 85961a5832af9c358b67ed62e918dbbf7817e205.
---
 .../QuickFilterOutsideOfGrid.js               |  11 +-
 .../QuickFilterOutsideOfGrid.tsx              |  11 +-
 .../migration-data-grid-v7.md                 |   1 -
 .../src/components/GridAggregationHeader.tsx  |  15 +-
 .../GridDataSourceGroupingCriteriaCell.tsx    |   5 +-
 .../src/components/GridFooterCell.tsx         |   9 +-
 .../GridGroupingColumnFooterCell.tsx          |   4 +-
 .../components/GridGroupingColumnLeafCell.tsx |   7 +-
 .../components/GridGroupingCriteriaCell.tsx   |   7 +-
 .../src/components/GridColumnHeaders.tsx      |   4 +-
 .../src/components/GridDetailPanel.tsx        |   7 +-
 .../src/components/GridPagination.tsx         |   9 +-
 .../src/components/GridRowCount.tsx           |   7 +-
 .../src/components/GridSelectedRowCount.tsx   |   9 +-
 .../src/components/cell/GridEditInputCell.tsx |   8 +-
 .../GridColumnsManagement.tsx                 |  45 ++--
 .../src/components/containers/GridOverlay.tsx |   3 +-
 .../src/components/containers/GridRoot.tsx    |   4 +-
 .../components/containers/GridRootStyles.ts   | 207 ++++++++++++------
 .../containers/GridToolbarContainer.tsx       |   9 +-
 .../src/components/menu/GridMenu.tsx          |  11 +-
 .../src/components/panel/GridPanel.tsx        |  19 +-
 .../src/components/panel/GridPanelFooter.tsx  |   9 +-
 .../src/components/panel/GridPanelHeader.tsx  |   7 +-
 .../panel/filterPanel/GridFilterForm.tsx      |   9 +-
 .../toolbar/GridToolbarFilterButton.tsx       |   9 +-
 .../toolbar/GridToolbarQuickFilter.tsx        |  13 +-
 .../GridVirtualScrollerFiller.tsx             |   3 +-
 .../x-data-grid/src/constants/cssVariables.ts | 168 --------------
 packages/x-data-grid/src/internals/index.ts   |   1 -
 .../src/utils/css/stylesToString.ts           |  78 -------
 .../src/utils/css/themeManager.tsx            |  64 ------
 .../src/utils/css/transformVariables.ts       |  92 --------
 .../src/utils/css/unitLessProperties.ts       |  51 -----
 packages/x-data-grid/src/utils/index.ts       |   1 -
 scripts/x-data-grid-premium.exports.json      |   1 -
 scripts/x-data-grid-pro.exports.json          |   1 -
 scripts/x-data-grid.exports.json              |   1 -
 38 files changed, 248 insertions(+), 672 deletions(-)
 delete mode 100644 packages/x-data-grid/src/constants/cssVariables.ts
 delete mode 100644 packages/x-data-grid/src/utils/css/stylesToString.ts
 delete mode 100644 packages/x-data-grid/src/utils/css/themeManager.tsx
 delete mode 100644 packages/x-data-grid/src/utils/css/transformVariables.ts
 delete mode 100644 packages/x-data-grid/src/utils/css/unitLessProperties.ts

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
index 7d5ae0bc0b06a..5649acb1c0ea7 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -2,21 +2,14 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import {
-  DataGrid,
-  GridPortalWrapper,
-  GridToolbarQuickFilter,
-  GridToolbar,
-} from '@mui/x-data-grid';
+import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')}>
-        <GridPortalWrapper>
-          <GridToolbarQuickFilter />
-        </GridPortalWrapper>
+        <GridToolbarQuickFilter />
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
index 45e49efecb35d..71b254306e90c 100644
--- a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
+++ b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -2,21 +2,14 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import {
-  DataGrid,
-  GridPortalWrapper,
-  GridToolbarQuickFilter,
-  GridToolbar,
-} from '@mui/x-data-grid';
+import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')!}>
-        <GridPortalWrapper>
-          <GridToolbarQuickFilter />
-        </GridPortalWrapper>
+        <GridToolbarQuickFilter />
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index 37ceef86ab6b7..85b8dfa37d6c5 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -98,7 +98,6 @@ Below are described the steps you need to make to migrate from v7 to v8.
 ### Other exports
 
 - `ariaV8` experimental flag is removed. It's now the default behavior.
-- Sub-components that are in a React Portal must now be wrapped with `GridPortalWrapper`
 
 <!-- ### Editing
 
diff --git a/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx
index 5f673d0cbf381..0dd68ca313e74 100644
--- a/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx
+++ b/packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx
@@ -8,7 +8,7 @@ import {
   GridColumnHeaderParams,
   GridColumnHeaderTitle,
 } from '@mui/x-data-grid';
-import { vars, type GridBaseColDef } from '@mui/x-data-grid/internals';
+import type { GridBaseColDef } from '@mui/x-data-grid/internals';
 import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -37,11 +37,14 @@ const GridAggregationHeaderRoot = styled('div', {
 const GridAggregationFunctionLabel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'AggregationColumnHeaderLabel',
-})<{ ownerState: OwnerState }>({
-  fontSize: vars.typography.small.fontSize,
-  lineHeight: 'normal',
-  color: vars.colors.foreground.muted,
-  marginTop: -1,
+  overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel,
+})<{ ownerState: OwnerState }>(({ theme }) => {
+  return {
+    fontSize: theme.typography.caption.fontSize,
+    lineHeight: 'normal',
+    color: theme.palette.text.secondary,
+    marginTop: -1,
+  };
 });
 
 const useUtilityClasses = (ownerState: OwnerState) => {
diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
index 8bc4225e51ab2..232ef2aeeb21a 100644
--- a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
-import { vars, useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import {
   useGridSelector,
   getDataGridUtilityClass,
@@ -124,7 +124,8 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe
         ml:
           rootProps.rowGroupingColumnMode === 'multiple'
             ? 0
-            : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`,
+            : (theme) =>
+                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
       }}
     >
       <div className={classes.toggle}>
diff --git a/packages/x-data-grid-premium/src/components/GridFooterCell.tsx b/packages/x-data-grid-premium/src/components/GridFooterCell.tsx
index 9c11150db5352..d7b7c601d62cc 100644
--- a/packages/x-data-grid-premium/src/components/GridFooterCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridFooterCell.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { getDataGridUtilityClass, GridRenderCellParams } from '@mui/x-data-grid';
-import { vars } from '@mui/x-data-grid/internals';
 import { styled, Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
@@ -11,10 +10,10 @@ const GridFooterCellRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell',
   overridesResolver: (_, styles) => styles.footerCell,
-})<{ ownerState: OwnerState }>({
-  fontWeight: vars.typography.fontWeight.medium,
-  color: vars.colors.foreground.accent,
-});
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightMedium,
+  color: (theme.vars || theme).palette.primary.dark,
+}));
 
 interface GridFooterCellProps extends GridRenderCellParams {
   sx?: SxProps<Theme>;
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx
index 7e73711d27f75..d98e6947d1cdd 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { vars } from '@mui/x-data-grid/internals';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { SxProps, Theme } from '@mui/system';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -14,7 +13,8 @@ function GridGroupingColumnFooterCell(props: GridRenderCellParams) {
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
     sx.ml = 2;
   } else {
-    sx.ml = `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(props.rowNode.depth)})`;
+    sx.ml = (theme) =>
+      `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
   }
 
   return <GridFooterCell sx={sx} {...props} />;
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
index 945db9869b518..30f29b060b8ac 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { vars } from '@mui/x-data-grid/internals';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
@@ -15,9 +14,9 @@ function GridGroupingColumnLeafCell(props: GridRenderCellParams) {
           ? {
               ml: 1,
             }
-          : {
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
-            },
+          : (theme) => ({
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
+            }),
       ]}
       style={{ '--depth': rowNode.depth } as any}
     >
diff --git a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
index d99e0c909c79a..07a397c1a0b42 100644
--- a/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
+++ b/packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
-import { vars } from '@mui/x-data-grid/internals';
 import {
   useGridSelector,
   gridFilteredDescendantCountLookupSelector,
@@ -81,9 +80,9 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
           ? {
               ml: 0,
             }
-          : {
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
-            },
+          : (theme) => ({
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
+            }),
       ]}
       style={{ '--depth': rowNode.depth } as any}
     >
diff --git a/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx
index c057691a60adb..9d404a177cef1 100644
--- a/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx
+++ b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars, GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 
 const Filler = styled('div')({
   flex: 1,
-  backgroundColor: vars.colors.background.base,
+  backgroundColor: 'var(--DataGrid-containerBackground)',
 });
 
 export interface GridColumnHeadersProps
diff --git a/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx b/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx
index bc401f963fc54..a37b3e4bc8071 100644
--- a/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx
+++ b/packages/x-data-grid-pro/src/components/GridDetailPanel.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { GridRowId } from '@mui/x-data-grid';
-import { vars } from '@mui/x-data-grid/internals';
 import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -13,12 +12,12 @@ const DetailPanel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
   overridesResolver: (props, styles) => styles.detailPanel,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   width:
     'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  backgroundColor: vars.colors.background.base,
+  backgroundColor: (theme.vars || theme).palette.background.default,
   overflow: 'auto',
-});
+}));
 
 interface GridDetailPanelProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
diff --git a/packages/x-data-grid/src/components/GridPagination.tsx b/packages/x-data-grid/src/components/GridPagination.tsx
index a52d6cde53a8f..afbc3f1099f6f 100644
--- a/packages/x-data-grid/src/components/GridPagination.tsx
+++ b/packages/x-data-grid/src/components/GridPagination.tsx
@@ -7,7 +7,6 @@ import TablePagination, {
   LabelDisplayedRowsArgs,
 } from '@mui/material/TablePagination';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../constants/cssVariables';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -17,22 +16,22 @@ import {
   gridPageCountSelector,
 } from '../hooks/features/pagination/gridPaginationSelector';
 
-const GridPaginationRoot = styled(TablePagination)({
+const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({
   maxHeight: 'calc(100% + 1px)', // border width
   flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
-    [vars.breakpoints.up('sm')]: {
+    [theme.breakpoints.up('sm')]: {
       display: 'block',
     },
   },
   [`& .${tablePaginationClasses.input}`]: {
     display: 'none',
-    [vars.breakpoints.up('sm')]: {
+    [theme.breakpoints.up('sm')]: {
       display: 'inline-flex',
     },
   },
-}) as typeof TablePagination;
+})) as typeof TablePagination;
 
 export type WrappedLabelDisplayedRows = (
   args: LabelDisplayedRowsArgs & { estimated?: number },
diff --git a/packages/x-data-grid/src/components/GridRowCount.tsx b/packages/x-data-grid/src/components/GridRowCount.tsx
index ccffbc37321ff..3f148d9e2e621 100644
--- a/packages/x-data-grid/src/components/GridRowCount.tsx
+++ b/packages/x-data-grid/src/components/GridRowCount.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, SxProps, Theme } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../constants/cssVariables';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -36,11 +35,11 @@ const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'RowCount',
   overridesResolver: (props, styles) => styles.rowCount,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   alignItems: 'center',
   display: 'flex',
-  margin: vars.spacing(0, 2),
-});
+  margin: theme.spacing(0, 2),
+}));
 
 const GridRowCount = forwardRef<HTMLDivElement, GridRowCountProps>(
   function GridRowCount(props, ref) {
diff --git a/packages/x-data-grid/src/components/GridSelectedRowCount.tsx b/packages/x-data-grid/src/components/GridSelectedRowCount.tsx
index 8b23dd9a89453..010cd145e4988 100644
--- a/packages/x-data-grid/src/components/GridSelectedRowCount.tsx
+++ b/packages/x-data-grid/src/components/GridSelectedRowCount.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, SxProps, Theme } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../constants/cssVariables';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -35,19 +34,19 @@ const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'SelectedRowCount',
   overridesResolver: (props, styles) => styles.selectedRowCount,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   alignItems: 'center',
   display: 'flex',
-  margin: vars.spacing(0, 2),
+  margin: theme.spacing(0, 2),
   visibility: 'hidden',
   width: 0,
   height: 0,
-  [vars.breakpoints.up('sm')]: {
+  [theme.breakpoints.up('sm')]: {
     visibility: 'visible',
     width: 'auto',
     height: 'auto',
   },
-});
+}));
 
 const GridSelectedRowCount = forwardRef<HTMLDivElement, GridSelectedRowCountProps>(
   function GridSelectedRowCount(props, ref) {
diff --git a/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
index cb40a976c5564..73416184fade9 100644
--- a/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
@@ -7,7 +7,6 @@ import {
 import { styled } from '@mui/material/styles';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../../constants/cssVariables';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -29,14 +28,15 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 const GridEditInputCellRoot = styled(InputBase, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell',
-})<{ ownerState: OwnerState }>({
-  ...vars.typography.body,
+  overridesResolver: (props, styles) => styles.editInputCell,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  ...theme.typography.body2,
   padding: '1px 0',
   '& input': {
     padding: '0 16px',
     height: '100%',
   },
-});
+}));
 
 export interface GridEditInputCellProps
   extends GridRenderEditCellParams,
diff --git a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
index 04c98d94a46b3..914b9b7918f6e 100644
--- a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
+++ b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
@@ -6,7 +6,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { vars } from '../../constants/cssVariables';
 import {
   gridColumnDefinitionsSelector,
   gridColumnVisibilityModelSelector,
@@ -374,52 +373,56 @@ GridColumnsManagement.propTypes = {
 const GridColumnsManagementBody = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagement',
-})<{ ownerState: OwnerState }>({
-  padding: vars.spacing(0, 3, 1.5),
+  overridesResolver: (props, styles) => styles.columnsManagement,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(0, 3, 1.5),
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
   alignItems: 'flex-start',
-});
+}));
 
 const GridColumnsManagementHeader = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementHeader',
-})<{ ownerState: OwnerState }>({
-  padding: vars.spacing(1.5, 3),
-});
+  overridesResolver: (props, styles) => styles.columnsManagementHeader,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(1.5, 3),
+}));
 
 const SearchInput = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput',
-})<{ ownerState: OwnerState }>({
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   [`& .${inputBaseClasses.root}`]: {
-    padding: vars.spacing(0, 1.5, 0, 1.5),
+    padding: theme.spacing(0, 1.5, 0, 1.5),
   },
   [`& .${inputBaseClasses.input}::-webkit-search-decoration,
-      & .${inputBaseClasses.input}::-webkit-search-cancel-button,
-      & .${inputBaseClasses.input}::-webkit-search-results-button,
-      & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
+  & .${inputBaseClasses.input}::-webkit-search-cancel-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-button,
+  & .${inputBaseClasses.input}::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none',
   },
-});
+}));
 
 const GridColumnsManagementFooter = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementFooter',
-})<{ ownerState: OwnerState }>({
-  padding: vars.spacing(0.5, 1, 0.5, 3),
+  overridesResolver: (props, styles) => styles.columnsManagementFooter,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(0.5, 1, 0.5, 3),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${vars.colors.border.base}`,
-});
+  borderTop: `1px solid ${theme.palette.divider}`,
+}));
 
-const GridColumnsManagementEmptyText = styled('div')<{ ownerState: OwnerState }>({
-  padding: vars.spacing(0.5, 0),
-  color: vars.colors.foreground.muted,
-});
+const GridColumnsManagementEmptyText = styled('div')<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(0.5, 0),
+  color: theme.palette.grey[500],
+}));
 
 export { GridColumnsManagement };
diff --git a/packages/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/x-data-grid/src/components/containers/GridOverlay.tsx
index b3f0359b001d2..03437f180de05 100644
--- a/packages/x-data-grid/src/components/containers/GridOverlay.tsx
+++ b/packages/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -5,7 +5,6 @@ import composeClasses from '@mui/utils/composeClasses';
 import { Theme, SxProps, styled } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { vars } from '../../constants/cssVariables';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -36,7 +35,7 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: vars.colors.background.backdrop,
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)',
 });
 
 const GridOverlay = forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(props, ref) {
diff --git a/packages/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx
index 70989d5d5c0a3..2d5a538e6f9aa 100644
--- a/packages/x-data-grid/src/components/containers/GridRoot.tsx
+++ b/packages/x-data-grid/src/components/containers/GridRoot.tsx
@@ -11,7 +11,6 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from './GridRootStyles';
-import { useCSSVariablesClass } from '../../utils/css/themeManager';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -57,7 +56,6 @@ const GridRoot = forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(pro
   const ownerState = rootProps;
 
   const classes = useUtilityClasses(ownerState, density);
-  const variablesClass = useCSSVariablesClass();
 
   // Our implementation of <NoSsr />
   const [mountedState, setMountedState] = React.useState(false);
@@ -71,7 +69,7 @@ const GridRoot = forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(pro
 
   return (
     <GridRootStyles
-      className={clsx(classes.root, className, variablesClass)}
+      className={clsx(classes.root, className)}
       ownerState={ownerState}
       {...other}
       ref={handleRef}
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index c8c26491573d4..3e52d28189683 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -1,8 +1,15 @@
 import { CSSInterpolation } from '@mui/system';
-import { styled } from '@mui/material/styles';
+import {
+  alpha,
+  styled,
+  darken,
+  lighten,
+  decomposeColor,
+  recomposeColor,
+  Theme,
+} from '@mui/material/styles';
 import type {} from '../../themeAugmentation/overrides';
 import { gridClasses as c } from '../../constants/gridClasses';
-import { vars } from '../../constants/cssVariables';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
@@ -10,6 +17,16 @@ import { gridDimensionsSelector } from '../../hooks/features/dimensions/gridDime
 
 export type OwnerState = DataGridProcessedProps;
 
+function getBorderColor(theme: Theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+
 const columnHeaderStyles = {
   [`& .${c.iconButtonContainer}`]: {
     visibility: 'visible',
@@ -122,47 +139,68 @@ export const GridRootStyles = styled('div', {
     },
     styles.root,
   ],
-})<{ ownerState: OwnerState }>(() => {
+})<{ ownerState: OwnerState }>(({ theme: t }) => {
   const apiRef = useGridPrivateApiContext();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
 
-  const baseBackground = vars.colors.background.base;
-  const pinnedBackground = vars.cell.background.pinned;
+  const borderColor = getBorderColor(t);
+  const radius = t.shape.borderRadius;
 
-  const hoverColor = vars.colors.interactive.hover;
-  const hoverOpacity = vars.colors.interactive.hoverOpacity;
-  const selectedColor = vars.colors.interactive.selected;
-  const selectedOpacity = vars.colors.interactive.selectedOpacity;
-  const selectedHoverColor = selectedColor;
-  const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
+  const containerBackground = t.vars
+    ? t.vars.palette.background.default
+    : (t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default);
 
-  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
-  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
-  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
 
-  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
-  const pinnedSelectedHoverBackground = mix(
-    pinnedBackground,
-    selectedHoverColor,
-    selectedHoverOpacity,
-  );
+  const overlayBackground = t.vars
+    ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})`
+    : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
+
+  const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
+  const hoverColor = (t.vars || t).palette.action.hover;
+
+  const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
+  const selectedHoverOpacity = t.vars
+    ? (`calc(${hoverOpacity} + ${selectedOpacity})` as unknown as number) // TODO: Improve type
+    : hoverOpacity + selectedOpacity;
+  const selectedBackground = t.vars
+    ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})`
+    : alpha(t.palette.primary.main, selectedOpacity);
+
+  const selectedHoverBackground = t.vars
+    ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})`
+    : alpha(t.palette.primary.main, selectedHoverOpacity);
+
+  const blendFn = t.vars ? blendCssVars : blend;
 
   const getPinnedBackgroundStyles = (backgroundColor: string) => ({
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       backgroundColor,
       '&.Mui-selected': {
-        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
+        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
         '&:hover': {
-          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity),
+          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity),
         },
       },
     },
   });
 
-  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedHoverBackground);
-  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackground);
-  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackground);
+  const pinnedBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedBackgroundColor);
+
+  const pinnedSelectedBackgroundColor = blendFn(
+    pinnedBackground,
+    selectedBackground,
+    selectedOpacity,
+  );
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackgroundColor);
+
+  const pinnedSelectedHoverBackgroundColor = blendFn(
+    pinnedBackground,
+    selectedHoverBackground,
+    selectedHoverOpacity,
+  );
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackgroundColor);
 
   const selectedStyles = {
     backgroundColor: selectedBackground,
@@ -176,10 +214,13 @@ export const GridRootStyles = styled('div', {
   };
 
   const gridStyle: CSSInterpolation = {
-    '--unstable_DataGrid-radius': vars.radius.base,
-    '--unstable_DataGrid-headWeight': vars.typography.fontWeight.medium,
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': overlayBackground,
 
-    '--DataGrid-rowBorderColor': vars.colors.border.base,
+    '--DataGrid-containerBackground': containerBackground,
+    '--DataGrid-pinnedBackground': pinnedBackground,
+    '--DataGrid-rowBorderColor': borderColor,
 
     '--DataGrid-cellOffsetMultiplier': 2,
     '--DataGrid-width': '0px',
@@ -200,10 +241,10 @@ export const GridRootStyles = styled('div', {
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: vars.colors.border.base,
+    borderColor,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    color: vars.colors.foreground.base,
-    ...vars.typography.body,
+    color: (t.vars || t).palette.text.primary,
+    ...t.typography.body2,
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -252,11 +293,15 @@ export const GridRootStyles = styled('div', {
       boxSizing: 'border-box',
     },
     [`& .${c.columnHeader}:focus-within, & .${c.cell}:focus-within`]: {
-      outline: `solid ${setOpacity(vars.colors.interactive.focus, 0.5)} ${focusOutlineWidth}px`,
+      outline: `solid ${
+        t.vars
+          ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)`
+          : alpha(t.palette.primary.main, 0.5)
+      } ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1,
     },
     [`& .${c.columnHeader}:focus, & .${c.cell}:focus`]: {
-      outline: `solid ${vars.colors.interactive.focus} ${focusOutlineWidth}px`,
+      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1,
     },
     // Hide the column separator when:
@@ -313,14 +358,14 @@ export const GridRootStyles = styled('div', {
       },
     [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}) .${c.sortIcon}`]: {
       opacity: 0,
-      transition: vars.transition(['opacity'], {
-        duration: vars.transitions.duration.short,
+      transition: t.transitions.create(['opacity'], {
+        duration: t.transitions.duration.shorter,
       }),
     },
     [`& .${c.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
-      gap: vars.spacing(0.25),
+      gap: t.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
@@ -357,12 +402,12 @@ export const GridRootStyles = styled('div', {
       marginLeft: -5,
     },
     [`& .${c['columnHeader--moving']}`]: {
-      backgroundColor: hoverBackground,
+      backgroundColor: (t.vars || t).palette.action.hover,
     },
     [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 4, // Should be above the column separator
-      background: vars.cell.background.pinned,
+      background: 'var(--DataGrid-pinnedBackground)',
     },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
@@ -373,7 +418,7 @@ export const GridRootStyles = styled('div', {
       justifyContent: 'center',
       alignItems: 'center',
       maxWidth: columnSeparatorTargetSize,
-      color: vars.colors.border.base,
+      color: borderColor,
     },
     [`& .${c.columnHeaders}`]: {
       width: 'var(--DataGrid-rowWidth)',
@@ -389,7 +434,7 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeader}:focus,
         & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {
-          color: vars.colors.foreground.accent,
+          color: (t.vars || t).palette.primary.main,
         },
       },
     },
@@ -409,7 +454,7 @@ export const GridRootStyles = styled('div', {
       cursor: 'col-resize',
       touchAction: 'none',
       [`&.${c['columnSeparator--resizing']}`]: {
-        color: vars.colors.foreground.accent,
+        color: (t.vars || t).palette.primary.main,
       },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
@@ -417,7 +462,7 @@ export const GridRootStyles = styled('div', {
       },
       '@media (hover: hover)': {
         '&:hover': {
-          color: vars.colors.foreground.accent,
+          color: (t.vars || t).palette.primary.main,
           [`& .${c.iconSeparator} rect`]: separatorIconDragStyles,
         },
       },
@@ -427,8 +472,8 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.iconSeparator}`]: {
       color: 'inherit',
-      transition: vars.transition(['color', 'width'], {
-        duration: vars.transitions.duration.short,
+      transition: t.transitions.create(['color', 'width'], {
+        duration: t.transitions.duration.shortest,
       }),
     },
     [`& .${c.menuIcon}`]: {
@@ -474,7 +519,7 @@ export const GridRootStyles = styled('div', {
       },
 
       '&:hover': {
-        backgroundColor: hoverBackground,
+        backgroundColor: (t.vars || t).palette.action.hover,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent',
@@ -487,7 +532,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
       '[role=row]': {
-        background: vars.colors.background.base,
+        background: 'var(--DataGrid-containerBackground)',
       },
     },
 
@@ -532,19 +577,19 @@ export const GridRootStyles = styled('div', {
     [`& .${c.cell}.${c['cell--editing']}`]: {
       padding: 1,
       display: 'flex',
-      boxShadow: vars.shadows.base,
-      backgroundColor: vars.colors.background.overlay,
+      boxShadow: t.shadows[2],
+      backgroundColor: (t.vars || t).palette.background.paper,
       '&:focus-within': {
-        outline: `${focusOutlineWidth}px solid ${vars.colors.interactive.focus}`,
+        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
         outlineOffset: focusOutlineWidth * -1,
       },
     },
     [`& .${c['row--editing']}`]: {
-      boxShadow: vars.shadows.base,
+      boxShadow: t.shadows[2],
     },
     [`& .${c['row--editing']} .${c.cell}`]: {
-      boxShadow: 'none',
-      backgroundColor: vars.colors.background.overlay,
+      boxShadow: t.shadows[0],
+      backgroundColor: (t.vars || t).palette.background.paper,
     },
     [`& .${c.editBooleanCell}`]: {
       display: 'flex',
@@ -554,22 +599,22 @@ export const GridRootStyles = styled('div', {
       justifyContent: 'center',
     },
     [`& .${c.booleanCell}[data-value="true"]`]: {
-      color: vars.colors.foreground.muted,
+      color: (t.vars || t).palette.text.secondary,
     },
     [`& .${c.booleanCell}[data-value="false"]`]: {
-      color: vars.colors.foreground.disabled,
+      color: (t.vars || t).palette.text.disabled,
     },
     [`& .${c.actionsCell}`]: {
       display: 'inline-flex',
       alignItems: 'center',
-      gridGap: vars.spacing(1),
+      gridGap: t.spacing(1),
     },
     [`& .${c.rowReorderCell}`]: {
       display: 'inline-flex',
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      opacity: vars.colors.interactive.disabledOpacity,
+      opacity: (t.vars || t).palette.action.disabledOpacity,
     },
     [`& .${c['rowReorderCell--draggable']}`]: {
       cursor: 'move',
@@ -581,7 +626,7 @@ export const GridRootStyles = styled('div', {
       alignItems: 'stretch',
     },
     [`.${c.withBorderColor}`]: {
-      borderColor: vars.colors.border.base,
+      borderColor,
     },
     [`& .${c['cell--withLeftBorder']}, & .${c['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
@@ -613,9 +658,9 @@ export const GridRootStyles = styled('div', {
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: vars.cell.background.pinned,
+      background: 'var(--DataGrid-pinnedBackground)',
       '&.Mui-selected': {
-        backgroundColor: pinnedSelectedBackground,
+        backgroundColor: pinnedSelectedBackgroundColor,
       },
     },
     [`& .${c.virtualScrollerContent} .${c.row}`]: {
@@ -642,16 +687,16 @@ export const GridRootStyles = styled('div', {
       display: 'none',
     },
     [`& .${c['columnHeader--dragging']}, & .${c['row--dragging']}`]: {
-      background: vars.colors.background.overlay,
+      background: (t.vars || t).palette.background.paper,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: vars.colors.interactive.disabledOpacity,
+      opacity: (t.vars || t).palette.action.disabledOpacity,
     },
     [`& .${c['row--dragging']}`]: {
-      background: vars.colors.background.overlay,
+      background: (t.vars || t).palette.background.paper,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: vars.colors.interactive.disabledOpacity,
+      opacity: (t.vars || t).palette.action.disabledOpacity,
 
       [`& .${c.rowReorderCellPlaceholder}`]: {
         display: 'flex',
@@ -665,7 +710,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: vars.spacing(2),
+      marginRight: t.spacing(2),
     },
     [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
@@ -681,7 +726,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.groupingCriteriaCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: vars.spacing(2),
+      marginRight: t.spacing(2),
     },
 
     /* ScrollbarFiller styles */
@@ -695,7 +740,7 @@ export const GridRootStyles = styled('div', {
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: vars.cell.background.pinned,
+        backgroundColor: 'var(--DataGrid-pinnedBackground)',
         position: 'sticky',
         right: 0,
       },
@@ -727,10 +772,30 @@ export const GridRootStyles = styled('div', {
   return gridStyle;
 });
 
-function setOpacity(color: string, opacity: number) {
-  return `rgba(from ${color} r g b / ${opacity})`;
+/**
+ * Blend a transparent overlay color with a background color, resulting in a single
+ * RGB color.
+ */
+function blend(background: string, overlay: string, opacity: number, gamma: number = 1) {
+  const f = (b: number, o: number) =>
+    Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
+
+  const backgroundColor = decomposeColor(background);
+  const overlayColor = decomposeColor(overlay);
+
+  const rgb = [
+    f(backgroundColor.values[0], overlayColor.values[0]),
+    f(backgroundColor.values[1], overlayColor.values[1]),
+    f(backgroundColor.values[2], overlayColor.values[2]),
+  ] as const;
+
+  return recomposeColor({
+    type: 'rgb',
+    values: rgb as any,
+  });
 }
 
-function mix(background: string, overlay: string, opacity: number | string) {
-  return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
+const removeOpacity = (color: string) => `rgb(from ${color} r g b / 1)`;
+function blendCssVars(background: string, overlay: string, opacity: string | number) {
+  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
 }
diff --git a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
index 9d60c2777d2ab..e2c43605cfcf0 100644
--- a/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
+++ b/packages/x-data-grid/src/components/containers/GridToolbarContainer.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../../constants/cssVariables';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -29,13 +28,13 @@ const GridToolbarContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
   overridesResolver: (_, styles) => styles.toolbarContainer,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
-  gap: vars.spacing(1),
-  padding: vars.spacing(0.5, 0.5, 0),
-});
+  gap: theme.spacing(1),
+  padding: theme.spacing(0.5, 0.5, 0),
+}));
 
 const GridToolbarContainer = forwardRef<HTMLDivElement, GridToolbarContainerProps>(
   function GridToolbarContainer(props, ref) {
diff --git a/packages/x-data-grid/src/components/menu/GridMenu.tsx b/packages/x-data-grid/src/components/menu/GridMenu.tsx
index 39d965f26b01e..34440811f93e8 100644
--- a/packages/x-data-grid/src/components/menu/GridMenu.tsx
+++ b/packages/x-data-grid/src/components/menu/GridMenu.tsx
@@ -11,8 +11,6 @@ import Grow, { GrowProps } from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
 import Popper, { PopperProps } from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
-import { vars } from '../../constants/cssVariables';
-import { useCSSVariablesClass } from '../../utils/css/themeManager';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -49,12 +47,12 @@ const GridMenuRoot = styled(Popper, {
   name: 'MuiDataGrid',
   slot: 'Menu',
   overridesResolver: (_, styles) => styles.menu,
-})<{ ownerState: OwnerState }>({
-  zIndex: vars.zIndex.menu,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
   [`& .${gridClasses.menuList}`]: {
     outline: 0,
   },
-});
+}));
 
 export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
   open: boolean;
@@ -75,7 +73,6 @@ function GridMenu(props: GridMenuProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const variablesClass = useCSSVariablesClass();
 
   const savedFocusRef = React.useRef<HTMLElement | null>(null);
   useEnhancedEffect(() => {
@@ -114,7 +111,7 @@ function GridMenu(props: GridMenuProps) {
   return (
     <GridMenuRoot
       as={rootProps.slots.basePopper}
-      className={clsx(classes.root, className, variablesClass)}
+      className={clsx(classes.root, className)}
       ownerState={rootProps}
       open={open}
       anchorEl={target as any}
diff --git a/packages/x-data-grid/src/components/panel/GridPanel.tsx b/packages/x-data-grid/src/components/panel/GridPanel.tsx
index 66524e55505f9..eddf057831c3f 100644
--- a/packages/x-data-grid/src/components/panel/GridPanel.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanel.tsx
@@ -7,8 +7,6 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../../constants/cssVariables';
-import { useCSSVariablesClass } from '../../utils/css/themeManager';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -40,22 +38,22 @@ const GridPanelRoot = styled(Popper, {
   name: 'MuiDataGrid',
   slot: 'Panel',
   overridesResolver: (props, styles) => styles.panel,
-})<{ ownerState: OwnerState }>({
-  zIndex: vars.zIndex.panel,
-});
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
+}));
 
 const GridPaperRoot = styled(Paper, {
   name: 'MuiDataGrid',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper,
-})<{ ownerState: OwnerState }>({
-  backgroundColor: vars.colors.background.overlay,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   minWidth: 300,
   maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${vars.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
   overflow: 'auto',
-});
+}));
 
 const GridPanel = forwardRef<HTMLDivElement, GridPanelProps>((props, ref) => {
   const { children, className, classes: classesProp, ...other } = props;
@@ -63,7 +61,6 @@ const GridPanel = forwardRef<HTMLDivElement, GridPanelProps>((props, ref) => {
   const rootProps = useGridRootProps();
   const classes = gridPanelClasses;
   const [isPlaced, setIsPlaced] = React.useState(false);
-  const variablesClass = useCSSVariablesClass();
 
   const handleClickAway = React.useCallback(() => {
     apiRef.current.hidePreferences();
@@ -121,7 +118,7 @@ const GridPanel = forwardRef<HTMLDivElement, GridPanelProps>((props, ref) => {
   return (
     <GridPanelRoot
       placement="bottom-start"
-      className={clsx(classes.panel, className, variablesClass)}
+      className={clsx(classes.panel, className)}
       ownerState={rootProps}
       anchorEl={anchorEl}
       modifiers={modifiers}
diff --git a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
index 384bc9e748d90..6f3b6dfe94104 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelFooter.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { vars } from '../../constants/cssVariables';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -24,12 +23,12 @@ const GridPanelFooterRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelFooter',
   overridesResolver: (props, styles) => styles.panelFooter,
-})<{ ownerState: OwnerState }>({
-  padding: vars.spacing(1),
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(1),
   display: 'flex',
   justifyContent: 'space-between',
-  borderTop: `1px solid ${vars.colors.border.base}`,
-});
+  borderTop: `1px solid ${theme.palette.divider}`,
+}));
 
 function GridPanelFooter(props: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> }) {
   const { className, ...other } = props;
diff --git a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
index ed300257b9644..39471e04a49e5 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelHeader.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { vars } from '../../constants/cssVariables';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
@@ -24,9 +23,9 @@ const GridPanelHeaderRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelHeader',
   overridesResolver: (props, styles) => styles.panelHeader,
-})<{ ownerState: OwnerState }>({
-  padding: vars.spacing(1),
-});
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  padding: theme.spacing(1),
+}));
 
 function GridPanelHeader(props: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> }) {
   const { className, ...other } = props;
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
index 2392e89c9e4da..217d7192f65c9 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import {
   unstable_composeClasses as composeClasses,
   unstable_useId as useId,
@@ -8,8 +7,8 @@ import {
 } from '@mui/utils';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../../../constants/cssVariables';
 import {
   gridFilterableColumnDefinitionsSelector,
   gridColumnLookupSelector,
@@ -146,10 +145,10 @@ const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   display: 'flex',
-  gap: vars.spacing(1.5),
-});
+  gap: theme.spacing(1.5),
+}));
 
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 2e46095a74cc4..ba30f5ae4f4dc 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -9,7 +9,6 @@ import {
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from '../../constants/cssVariables';
 import { BadgeProps } from '../../models/gridBaseSlots';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -39,10 +38,10 @@ const GridToolbarFilterListRoot = styled('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList,
-})<{ ownerState: OwnerState }>({
-  margin: vars.spacing(1, 1, 0.5),
-  padding: vars.spacing(0, 1),
-});
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  margin: theme.spacing(1, 1, 0.5),
+  padding: theme.spacing(0, 1),
+}));
 
 // FIXME(v8:romgrk): override slotProps
 export interface GridToolbarFilterButtonProps {
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
index d073ca63e8e07..5454e3dc51f84 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -6,7 +6,6 @@ import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { vars } from '../../constants/cssVariables';
 import { getDataGridUtilityClass } from '../../constants';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -32,18 +31,18 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   [`.${outlinedInputClasses.root}`]: {
-    fontSize: vars.typography.body.fontSize,
+    fontSize: theme.typography.body2.fontSize,
   },
   [`& input[type="search"]::-webkit-search-decoration,
-    & input[type="search"]::-webkit-search-cancel-button,
-    & input[type="search"]::-webkit-search-results-button,
-    & input[type="search"]::-webkit-search-results-decoration`]: {
+  & input[type="search"]::-webkit-search-cancel-button,
+  & input[type="search"]::-webkit-search-results-button,
+  & input[type="search"]::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none',
   },
-});
+}));
 
 const defaultSearchValueParser = (searchText: string) =>
   searchText.split(' ').filter((word) => word !== '');
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
index aed3115b41526..07cdea1931422 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { vars } from '../../constants/cssVariables';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
@@ -19,7 +18,7 @@ const Pinned = styled('div')({
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
-  backgroundColor: vars.cell.background.pinned,
+  backgroundColor: 'var(--DataGrid-pinnedBackground)',
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,
diff --git a/packages/x-data-grid/src/constants/cssVariables.ts b/packages/x-data-grid/src/constants/cssVariables.ts
deleted file mode 100644
index e636828200749..0000000000000
--- a/packages/x-data-grid/src/constants/cssVariables.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-// NOTE: Breakpoints can't come from the theme because we need access to them at
-// initialization time and media-queries can't use CSS variables. For users with
-// custom breakpoints, we might want to provide a way to configure them globally
-// instead of through the theme.
-const breakpoints = {
-  values: {
-    xs: 0, // phone
-    sm: 600, // tablet
-    md: 900, // small laptop
-    lg: 1200, // desktop
-    xl: 1536, // large screen
-  },
-  up: (key: any) => {
-    const values = breakpoints.values as any;
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (min-width:${value}px)`;
-  },
-};
-
-const keys = {
-  spacingUnit: '--DataGrid-t-spacing-unit',
-
-  /* Variables */
-  colors: {
-    border: {
-      base: '--DataGrid-t-colors-border-base',
-    },
-    foreground: {
-      base: '--DataGrid-t-colors-foreground-base',
-      muted: '--DataGrid-t-colors-foreground-muted',
-      accent: '--DataGrid-t-colors-foreground-accent',
-      disabled: '--DataGrid-t-colors-foreground-disabled',
-    },
-    background: {
-      base: '--DataGrid-t-colors-background-base',
-      overlay: '--DataGrid-t-colors-background-overlay',
-      backdrop: '--DataGrid-t-colors-background-backdrop',
-    },
-    interactive: {
-      hover: '--DataGrid-t-colors-interactive-hover',
-      hoverOpacity: '--DataGrid-t-colors-interactive-hover-opacity',
-      focus: '--DataGrid-t-colors-interactive-focus',
-      focusOpacity: '--DataGrid-t-colors-interactive-focus-opacity',
-      disabled: '--DataGrid-t-colors-interactive-disabled',
-      disabledOpacity: '--DataGrid-t-colors-interactive-disabled-opacity',
-      selected: '--DataGrid-t-colors-interactive-selected',
-      selectedOpacity: '--DataGrid-t-colors-interactive-selected-opacity',
-    },
-  },
-  cell: {
-    background: {
-      pinned: '--DataGrid-t-cell-background-pinned',
-    },
-  },
-  radius: {
-    base: '--DataGrid-t-radius-base',
-  },
-  typography: {
-    fontFamily: {
-      base: '--DataGrid-t-typography-font-family-base',
-    },
-    fontWeight: {
-      light: '--DataGrid-t-typography-font-weight-light',
-      regular: '--DataGrid-t-typography-font-weight-regular',
-      medium: '--DataGrid-t-typography-font-weight-medium',
-      bold: '--DataGrid-t-typography-font-weight-bold',
-    },
-    body: {
-      fontFamily: '--DataGrid-t-typography-body-font-family',
-      fontSize: '--DataGrid-t-typography-body-font-size',
-      fontWeight: '--DataGrid-t-typography-body-font-weight',
-      letterSpacing: '--DataGrid-t-typography-body-letter-spacing',
-      lineHeight: '--DataGrid-t-typography-body-line-height',
-    },
-    small: {
-      fontFamily: '--DataGrid-t-typography-small-font-family',
-      fontSize: '--DataGrid-t-typography-small-font-size',
-      fontWeight: '--DataGrid-t-typography-small-font-weight',
-      letterSpacing: '--DataGrid-t-typography-small-letter-spacing',
-      lineHeight: '--DataGrid-t-typography-small-line-height',
-    },
-  },
-  transitions: {
-    easing: {
-      easeIn: '--DataGrid-t-transitions-easing-ease-in',
-      easeOut: '--DataGrid-t-transitions-easing-ease-out',
-      easeInOut: '--DataGrid-t-transitions-easing-ease-in-out',
-    },
-    duration: {
-      short: '--DataGrid-t-transitions-duration-short',
-      base: '--DataGrid-t-transitions-duration-base',
-      long: '--DataGrid-t-transitions-duration-long',
-    },
-  },
-  shadows: {
-    base: '--DataGrid-t-shadows-base',
-  },
-  zIndex: {
-    panel: '--DataGrid-t-z-index-panel',
-    menu: '--DataGrid-t-z-index-menu',
-  },
-};
-
-const values = wrap(keys);
-
-export const vars = {
-  breakpoints,
-  spacing,
-  transition,
-  keys,
-  ...values,
-};
-
-function spacing(a?: number, b?: number, c?: number, d?: number) {
-  /* eslint-disable prefer-template */
-  if (a === undefined) {
-    return spacingString(1);
-  }
-  if (b === undefined) {
-    return spacingString(a);
-  }
-  if (c === undefined) {
-    return spacingString(a) + ' ' + spacingString(b);
-  }
-  if (d === undefined) {
-    return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c);
-  }
-  return (
-    spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c) + ' ' + spacingString(d)
-  );
-  /* eslint-enable prefer-template */
-}
-
-function spacingString(value: number) {
-  if (value === 0) {
-    return '0';
-  }
-  return `calc(var(--DataGrid-t-spacing-unit) * ${value})`;
-}
-
-function transition(
-  props: string[],
-  options?: {
-    duration?: string;
-    easing?: string;
-    delay?: number;
-  },
-) {
-  const {
-    duration = vars.transitions.duration.base,
-    easing = vars.transitions.easing.easeInOut,
-    delay = 0,
-  } = options ?? {};
-  return props.map((prop) => `${prop} ${duration} ${easing} ${delay}ms`).join(', ');
-}
-
-function wrap<T>(input: T): T {
-  if (typeof input === 'string') {
-    return `var(${input})` as any;
-  }
-  const result = {} as any;
-  for (const key in input as any) {
-    if (Object.hasOwn(input as any, key)) {
-      result[key] = wrap((input as any)[key]);
-    }
-  }
-  return result;
-}
diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
index ad68a871e4bca..6b7457bd3c945 100644
--- a/packages/x-data-grid/src/internals/index.ts
+++ b/packages/x-data-grid/src/internals/index.ts
@@ -11,7 +11,6 @@ export type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
-export { vars } from '../constants/cssVariables';
 
 export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { getValueOptions } from '../components/panel/filterPanel/filterPanelUtils';
diff --git a/packages/x-data-grid/src/utils/css/stylesToString.ts b/packages/x-data-grid/src/utils/css/stylesToString.ts
deleted file mode 100644
index 2d5f2b05de95d..0000000000000
--- a/packages/x-data-grid/src/utils/css/stylesToString.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { CSSObject } from '@mui/system';
-import unitLessProperties from './unitLessProperties';
-
-/* eslint-disable prefer-template */
-
-const DASH_CHAR_CODE = '-'.charCodeAt(0);
-
-const SPECIAL_CHAR = /#|\.|\s|>|&|:/;
-const UPPERCASE_LETTERS = /[A-Z]/g;
-
-// TODO: By using native CSS nesting, we could make `stylesToString` more simple & performant.
-
-const stack = [] as any[];
-export function stylesToString(rootSelector: string, rootStyles: CSSObject) {
-  stack.length = 0;
-  stack.push(rootSelector, rootStyles, '');
-
-  const rules = [] as string[];
-
-  while (stack.length > 0) {
-    const parents = stack.pop();
-    const styles = stack.pop();
-    const selector = stack.pop();
-
-    let output = `${transformSelector(selector, parents)} { `;
-
-    for (const key in styles) {
-      if (isSubStyles(key)) {
-        stack.push(key, styles[key], parents + ' ' + key);
-      } else if (isVariable(key)) {
-        const cssKey = key;
-        const cssValue = styles[key];
-
-        output += cssKey + ':' + cssValue + ';';
-      } else {
-        const cssKey = key.replaceAll(UPPERCASE_LETTERS, uppercaseToDashLowercase);
-        const cssValue = transformValue(cssKey, styles[key]);
-
-        output += cssKey + ':' + cssValue + ';';
-      }
-    }
-
-    output += ' } ';
-
-    rules.push(output);
-  }
-
-  return rules;
-}
-
-function uppercaseToDashLowercase(char: string) {
-  return '-' + char.toLowerCase();
-}
-
-function transformSelector(selector: string, parents: string) {
-  if (selector.includes('&')) {
-    return selector.replaceAll('&', parents);
-  }
-  return parents + ' ' + selector;
-}
-
-function transformValue(cssKey: string, value: any) {
-  if (typeof value !== 'number') {
-    return value;
-  }
-  if (unitLessProperties.has(cssKey)) {
-    return String(value);
-  }
-  return String(value) + 'px';
-}
-
-function isSubStyles(key: string) {
-  return SPECIAL_CHAR.test(key);
-}
-
-function isVariable(cssKey: string) {
-  return cssKey.charCodeAt(0) === DASH_CHAR_CODE && cssKey.charCodeAt(1) === DASH_CHAR_CODE;
-}
diff --git a/packages/x-data-grid/src/utils/css/themeManager.tsx b/packages/x-data-grid/src/utils/css/themeManager.tsx
deleted file mode 100644
index 511e4d68d3db6..0000000000000
--- a/packages/x-data-grid/src/utils/css/themeManager.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { useTheme, type Theme } from '@mui/material/styles';
-import { stylesToString } from './stylesToString';
-import { transformMaterialUITheme } from './transformVariables';
-
-const STYLE_ID = 'mui-x-data-grid';
-const CLASSNAME_PREFIX = 'MuiDataGridVariables';
-
-let element = undefined as HTMLStyleElement | undefined;
-
-let nextClassNameId = 1;
-const classNameByTheme = new WeakMap<object, string>();
-
-export function useCSSVariablesClass() {
-  return getClassNameForTheme(useTheme());
-}
-
-export function GridPortalWrapper({ children }: { children: React.ReactNode }) {
-  const className = useCSSVariablesClass();
-  return <div className={className}>{children}</div>;
-}
-
-function getClassNameForTheme(theme: Theme) {
-  let className = classNameByTheme.get(theme);
-  if (className) {
-    return className;
-  }
-
-  className = `${CLASSNAME_PREFIX}-${nextClassNameId}`;
-  nextClassNameId += 1;
-
-  classNameByTheme.set(theme, className);
-
-  injectStyles(`.${className}`, transformMaterialUITheme(theme));
-
-  return className;
-}
-
-function injectStyles(selector: string, variables: Record<string, any>) {
-  if (typeof document === 'undefined') {
-    return;
-  }
-  const style = setup();
-  if (process.env.NODE_ENV === 'development') {
-    style.innerHTML += `${stylesToString(selector, variables).join('\n')}\n`;
-  } else {
-    const rules = stylesToString(selector, variables);
-    for (let i = 0; i < rules.length; i += 1) {
-      style.sheet!.insertRule(rules[i]);
-    }
-  }
-}
-
-function setup() {
-  if (!element) {
-    element = (document.getElementById(STYLE_ID) ??
-      document.createElement('style')) as HTMLStyleElement;
-    element.id = STYLE_ID;
-    element.innerHTML = '';
-    document.head.prepend(element);
-  }
-
-  return element;
-}
diff --git a/packages/x-data-grid/src/utils/css/transformVariables.ts b/packages/x-data-grid/src/utils/css/transformVariables.ts
deleted file mode 100644
index 2f0fca3709291..0000000000000
--- a/packages/x-data-grid/src/utils/css/transformVariables.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { alpha, darken, lighten, type Theme } from '@mui/material/styles';
-import { vars } from '../../constants/cssVariables';
-
-export function transformMaterialUITheme(t: Theme) {
-  const borderColor = getBorderColor(t);
-
-  const backgroundBase =
-    t.mixins.MuiDataGrid?.containerBackground ?? (t.vars || t).palette.background.default;
-  const backgroundPinned = t.mixins.MuiDataGrid?.pinnedBackground ?? 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 selectedColor = t.vars
-    ? `rgb(${t.vars.palette.primary.mainChannel})`
-    : t.palette.primary.main;
-
-  const k = vars.keys;
-
-  return {
-    [k.spacingUnit]: t.spacing(1),
-
-    [k.colors.border.base]: borderColor,
-    [k.colors.background.base]: backgroundBase,
-    [k.colors.background.overlay]: t.palette.background.paper,
-    [k.colors.background.backdrop]: backgroundBackdrop,
-    [k.colors.foreground.base]: t.palette.text.primary,
-    [k.colors.foreground.muted]: t.palette.text.secondary,
-    [k.colors.foreground.accent]: t.palette.primary.dark,
-    [k.colors.foreground.disabled]: t.palette.text.disabled,
-
-    [k.colors.interactive.hover]: removeOpacity(t.palette.action.hover),
-    [k.colors.interactive.hoverOpacity]: t.palette.action.hoverOpacity,
-    [k.colors.interactive.focus]: removeOpacity(t.palette.primary.main),
-    [k.colors.interactive.focusOpacity]: t.palette.action.focusOpacity,
-    [k.colors.interactive.disabled]: removeOpacity(t.palette.action.disabled),
-    [k.colors.interactive.disabledOpacity]: t.palette.action.disabledOpacity,
-    [k.colors.interactive.selected]: selectedColor,
-    [k.colors.interactive.selectedOpacity]: t.palette.action.selectedOpacity,
-
-    [k.cell.background.pinned]: backgroundPinned,
-
-    [k.radius.base]:
-      typeof t.shape.borderRadius === 'number' ? `${t.shape.borderRadius}px` : t.shape.borderRadius,
-
-    [k.typography.fontFamily.base]: t.typography.fontFamily,
-    [k.typography.fontWeight.light]: t.typography.fontWeightLight,
-    [k.typography.fontWeight.regular]: t.typography.fontWeightRegular,
-    [k.typography.fontWeight.medium]: t.typography.fontWeightMedium,
-    [k.typography.fontWeight.bold]: t.typography.fontWeightBold,
-    [k.typography.body.fontFamily]: t.typography.body2.fontFamily,
-    [k.typography.body.fontSize]: t.typography.body2.fontSize,
-    [k.typography.body.fontWeight]: t.typography.body2.fontWeight,
-    [k.typography.body.letterSpacing]: t.typography.body2.letterSpacing,
-    [k.typography.body.lineHeight]: t.typography.body2.lineHeight,
-    [k.typography.small.fontFamily]: t.typography.caption.fontFamily,
-    [k.typography.small.fontSize]: t.typography.caption.fontSize,
-    [k.typography.small.fontWeight]: t.typography.caption.fontWeight,
-    [k.typography.small.letterSpacing]: t.typography.caption.letterSpacing,
-    [k.typography.small.lineHeight]: t.typography.caption.lineHeight,
-
-    [k.transitions.easing.easeIn]: t.transitions.easing.easeIn,
-    [k.transitions.easing.easeOut]: t.transitions.easing.easeOut,
-    [k.transitions.easing.easeInOut]: t.transitions.easing.easeInOut,
-    [k.transitions.duration.short]: `${t.transitions.duration.shorter}ms`,
-    [k.transitions.duration.base]: `${t.transitions.duration.short}ms`,
-    [k.transitions.duration.long]: `${t.transitions.duration.standard}ms`,
-
-    [k.shadows.base]: t.shadows[2],
-
-    [k.zIndex.panel]: t.zIndex.modal,
-    [k.zIndex.menu]: t.zIndex.modal,
-  };
-}
-
-function getBorderColor(theme: Theme) {
-  if (theme.vars) {
-    return theme.vars.palette.TableCell.border;
-  }
-  if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
-  }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
-}
-
-function setOpacity(color: string, opacity: number) {
-  return `rgba(from ${color} r g b / ${opacity})`;
-}
-
-function removeOpacity(color: string) {
-  return setOpacity(color, 1);
-}
diff --git a/packages/x-data-grid/src/utils/css/unitLessProperties.ts b/packages/x-data-grid/src/utils/css/unitLessProperties.ts
deleted file mode 100644
index f6139b0578108..0000000000000
--- a/packages/x-data-grid/src/utils/css/unitLessProperties.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export default new Set([
-  'animationIterationCount',
-  'aspectRatio',
-  'borderImageOutset',
-  'borderImageSlice',
-  'borderImageWidth',
-  'boxFlex',
-  'boxFlexGroup',
-  'boxOrdinalGroup',
-  'columnCount',
-  'columns',
-  'flex',
-  'flexGrow',
-  'flexPositive',
-  'flexShrink',
-  'flexNegative',
-  'flexOrder',
-  'gridRow',
-  'gridRowEnd',
-  'gridRowSpan',
-  'gridRowStart',
-  'gridColumn',
-  'gridColumnEnd',
-  'gridColumnSpan',
-  'gridColumnStart',
-  'msGridRow',
-  'msGridRowSpan',
-  'msGridColumn',
-  'msGridColumnSpan',
-  'fontWeight',
-  'lineHeight',
-  'opacity',
-  'order',
-  'orphans',
-  'scale',
-  'tabSize',
-  'widows',
-  'zIndex',
-  'zoom',
-  'WebkitLineClamp',
-
-  // SVG-related properties
-  'fillOpacity',
-  'floodOpacity',
-  'stopOpacity',
-  'strokeDasharray',
-  'strokeDashoffset',
-  'strokeMiterlimit',
-  'strokeOpacity',
-  'strokeWidth',
-]);
diff --git a/packages/x-data-grid/src/utils/index.ts b/packages/x-data-grid/src/utils/index.ts
index eab74045bb02c..d9aac67504426 100644
--- a/packages/x-data-grid/src/utils/index.ts
+++ b/packages/x-data-grid/src/utils/index.ts
@@ -1,2 +1 @@
 export type { OutputSelector } from './createSelector';
-export { GridPortalWrapper } from './css/themeManager';
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index 859f3c83d9be1..e9d6c4df85d34 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -463,7 +463,6 @@
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPinnedRowsProp", "kind": "Interface" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
-  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index bc77ebd119c43..78e596e05085e 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -424,7 +424,6 @@
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPinnedRowsProp", "kind": "Interface" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
-  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index 5949b351aa98a..36c02ff61d172 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -386,7 +386,6 @@
   { "name": "gridPinnedColumnsSelector", "kind": "Variable" },
   { "name": "GridPinnedRowNode", "kind": "TypeAlias" },
   { "name": "GridPipeProcessingLookup", "kind": "Interface" },
-  { "name": "GridPortalWrapper", "kind": "Function" },
   { "name": "GridPreferencePanelInitialState", "kind": "TypeAlias" },
   { "name": "GridPreferencePanelParams", "kind": "Interface" },
   { "name": "GridPreferencePanelState", "kind": "Interface" },

From 8ce70193d1600023f825ddf527709af37276363f Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Tue, 14 Jan 2025 12:46:49 -0500
Subject: [PATCH 2/5] Revert "[DataGrid] Refactor: remove missed theme
 (#16122)"

This reverts commit e93f4d26d07fd55153c44e114c9136c5cc6db594.
---
 .../src/components/panel/GridPanelContent.tsx            | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
index 84b263d1d9a94..9416a05e7deb0 100644
--- a/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
+++ b/packages/x-data-grid/src/components/panel/GridPanelContent.tsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { vars } from '../../constants/cssVariables';
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -24,15 +23,15 @@ const GridPanelContentRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
   maxHeight: 400,
-  padding: vars.spacing(2.5, 1.5, 2, 1),
-  gap: vars.spacing(2.5),
-});
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5),
+}));
 
 function GridPanelContent(props: React.HTMLAttributes<HTMLDivElement> & { sx?: SxProps<Theme> }) {
   const { className, ...other } = props;

From 3a8ce8ebbc22b49624c7f368212e61c9c560e81b Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Wed, 15 Jan 2025 10:52:50 -0500
Subject: [PATCH 3/5] ci: run (empty commit)


From c713f3ca45e0f0548e5e681d8b84684d6335089d Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Wed, 15 Jan 2025 10:52:57 -0500
Subject: [PATCH 4/5] ci: run (empty commit)


From e98b73223d88003b967f173ae49e57acb6095c7e Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Wed, 15 Jan 2025 11:18:26 -0500
Subject: [PATCH 5/5] ci: run (empty commit)