[DataGrid] Revert: CSS variables

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>

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>

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
 

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) => {

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}>

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>;

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} />;

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}
     >

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}
     >

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

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'> {

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 },

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) {

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) {

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,