@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/components/containers/GridRootStyles.js

@@ -1,24 +1,20 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '@mui/material/styles';
-import { gridClasses as c } from "../../constants/gridClasses.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
-function getBorderColor(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);
-}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridRootStyles = void 0;
+var _styles = require("@mui/material/styles");
+var _gridClasses = require("../../constants/gridClasses");
+var _cssVariables = require("../../constants/cssVariables");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 const columnHeaderStyles = {
-  [`& .${c.iconButtonContainer}`]: {
+  [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
     visibility: 'visible',
     width: 'auto'
   },
-  [`& .${c.menuIcon}`]: {
+  [`& .${_gridClasses.gridClasses.menuIcon}`]: {
     width: 'auto',
     visibility: 'visible'
   }
@@ -35,165 +31,265 @@ const separatorIconDragStyles = {
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
 const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-export const GridRootStyles = styled('div', {
+const shouldShowBorderTopRightRadiusSelector = apiRef => apiRef.current.state.dimensions.hasScrollX && (!apiRef.current.state.dimensions.hasScrollY || apiRef.current.state.dimensions.scrollbarSize === 0);
+const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${c.autoHeight}`]: styles.autoHeight
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
+    [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
+  }, {
+    [`&.${_gridClasses.gridClasses['root--densityStandard']}`]: styles['root--densityStandard']
+  }, {
+    [`&.${_gridClasses.gridClasses['root--densityComfortable']}`]: styles['root--densityComfortable']
+  }, {
+    [`&.${_gridClasses.gridClasses['root--densityCompact']}`]: styles['root--densityCompact']
+  }, {
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: styles['root--disableUserSelection']
+  }, {
+    [`&.${_gridClasses.gridClasses['root--noToolbar']}`]: styles['root--noToolbar']
+  }, {
+    [`&.${_gridClasses.gridClasses.withVerticalBorder}`]: styles.withVerticalBorder
+  },
+  // Child element overrides
+  // - Only declare overrides here for class names that are not applied to `styled` components.
+  // - For `styled` components, declare overrides in the component itself.
+  {
+    [`& .${_gridClasses.gridClasses.actionsCell}`]: styles.actionsCell
+  }, {
+    [`& .${_gridClasses.gridClasses.booleanCell}`]: styles.booleanCell
+  }, {
+    [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--editable']}`]: styles['cell--editable']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: styles['cell--flex']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--pinnedRight']}`]: styles['cell--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
+  }, {
+    [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
-    [`&.${c.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`& .${_gridClasses.gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
-    [`&.${c['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`& .${_gridClasses.gridClasses.checkboxInput}`]: styles.checkboxInput
   }, {
-    [`&.${c['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
   }, {
-    [`&.${c['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
-    [`&.${c.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`& .${_gridClasses.gridClasses['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft']
   }, {
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: styles['root--disableUserSelection']
+    [`& .${_gridClasses.gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
-    [`&.${c.autosizing}`]: styles.autosizing
+    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging']
   }, {
-    [`& .${c.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${_gridClasses.gridClasses['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
   }, {
-    [`& .${c.cell}`]: styles.cell
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
   }, {
-    [`& .${c['cell--editing']}`]: styles['cell--editing']
+    [`& .${_gridClasses.gridClasses['columnHeader--filtered']}`]: styles['columnHeader--filtered']
   }, {
-    [`& .${c['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: styles['columnHeader--last']
   }, {
-    [`& .${c['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${_gridClasses.gridClasses['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
-    [`& .${c['cell--textRight']}`]: styles['cell--textRight']
+    [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
-    [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${_gridClasses.gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric']
   }, {
-    [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom']
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
   }, {
-    [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft']
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
   }, {
-    [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight']
+    [`& .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
-    [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder']
+    [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
-    [`& .${c.cellCheckbox}`]: styles.cellCheckbox
+    [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${c.cellSkeleton}`]: styles.cellSkeleton
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${c.checkboxInput}`]: styles.checkboxInput
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
-    [`& .${c['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
+    [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
-    [`& .${c['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft']
+    [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
-    [`& .${c['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
   }, {
-    [`& .${c['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
   }, {
-    [`& .${c['columnHeader--moving']}`]: styles['columnHeader--moving']
+    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
   }, {
-    [`& .${c['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+    [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
-    [`& .${c['columnHeader--sortable']}`]: styles['columnHeader--sortable']
+    [`& .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${c['columnHeader--sorted']}`]: styles['columnHeader--sorted']
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
   }, {
-    [`& .${c['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
   }, {
-    [`& .${c.columnHeader}`]: styles.columnHeader
+    [`& .${_gridClasses.gridClasses['container--bottom']}`]: styles['container--bottom']
   }, {
-    [`& .${c.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${_gridClasses.gridClasses['container--top']}`]: styles['container--top']
   }, {
-    [`& .${c.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
+    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
-    [`& .${c.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
+    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
   }, {
-    [`& .${c.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {
-    [`& .${c['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
+    [`& .${_gridClasses.gridClasses.filterIcon}`]: styles.filterIcon
   }, {
-    [`& .${c['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: styles['filler--borderBottom']
   }, {
-    [`& .${c.columnSeparator}`]: styles.columnSeparator
+    [`& .${_gridClasses.gridClasses['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
   }, {
-    [`& .${c.filterIcon}`]: styles.filterIcon
+    [`& .${_gridClasses.gridClasses['filler--pinnedRight']}`]: styles['filler--pinnedRight']
   }, {
-    [`& .${c.iconSeparator}`]: styles.iconSeparator
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: styles.groupingCriteriaCell
   }, {
-    [`& .${c.menuIcon}`]: styles.menuIcon
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
   }, {
-    [`& .${c.menuIconButton}`]: styles.menuIconButton
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
   }, {
-    [`& .${c.menuOpen}`]: styles.menuOpen
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
   }, {
-    [`& .${c.menuList}`]: styles.menuList
+    [`& .${_gridClasses.gridClasses.iconSeparator}`]: styles.iconSeparator
   }, {
-    [`& .${c['row--editable']}`]: styles['row--editable']
+    [`& .${_gridClasses.gridClasses.menuIcon}`]: styles.menuIcon
   }, {
-    [`& .${c['row--editing']}`]: styles['row--editing']
+    [`& .${_gridClasses.gridClasses.menuIconButton}`]: styles.menuIconButton
   }, {
-    [`& .${c['row--dragging']}`]: styles['row--dragging']
+    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
   }, {
-    [`& .${c.row}`]: styles.row
+    [`& .${_gridClasses.gridClasses.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${c.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${_gridClasses.gridClasses.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${c.rowReorderCell}`]: styles.rowReorderCell
+    [`& .${_gridClasses.gridClasses.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${c['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
+    [`& .${_gridClasses.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${c.sortIcon}`]: styles.sortIcon
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
-    [`& .${c.withBorderColor}`]: styles.withBorderColor
+    [`& .${_gridClasses.gridClasses.row}`]: styles.row
   }, {
-    [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${_gridClasses.gridClasses['row--borderBottom']}`]: styles['row--borderBottom']
   }, {
-    [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${_gridClasses.gridClasses['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
   }, {
-    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
   }, {
-    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: styles['row--dynamicHeight']
   }, {
-    [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
   }, {
-    [`& .${c['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
-})(({
-  theme: t
-}) => {
-  const apiRef = useGridPrivateApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const borderColor = getBorderColor(t);
-  const radius = t.shape.borderRadius;
-  const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
-  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
-  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})` // 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;
+    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--lastVisible']}`]: styles['row--lastVisible']
+  }, {
+    [`& .${_gridClasses.gridClasses.rowReorderCell}`]: styles.rowReorderCell
+  }, {
+    [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
+  }, {
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: styles.rowReorderCellContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+  }, {
+    [`& .${_gridClasses.gridClasses.rowSkeleton}`]: styles.rowSkeleton
+  }, {
+    [`& .${_gridClasses.gridClasses.scrollbar}`]: styles.scrollbar
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
+  }, {
+    [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+  }]
+})(() => {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const shouldShowBorderTopRightRadius = (0, _useGridSelector.useGridSelector)(apiRef, shouldShowBorderTopRightRadiusSelector);
+  const baseBackground = _cssVariables.vars.colors.background.base;
+  const headerBackground = _cssVariables.vars.header.background.base;
+  const pinnedBackground = _cssVariables.vars.cell.background.pinned;
+  const hoverColor = _cssVariables.vars.colors.interactive.hover;
+  const hoverOpacity = _cssVariables.vars.colors.interactive.hoverOpacity;
+  const selectedColor = _cssVariables.vars.colors.interactive.selected;
+  const selectedOpacity = _cssVariables.vars.colors.interactive.selectedOpacity;
+  const selectedHoverColor = selectedColor;
+  const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
+  const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
+  const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
+  const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
+  const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
+  const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
   const getPinnedBackgroundStyles = backgroundColor => ({
-    [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       backgroundColor,
       '&.Mui-selected': {
-        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
+        backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
         '&:hover': {
-          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity)
+          backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
         }
       }
     }
   });
-  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 pinnedHoverStyles = getPinnedBackgroundStyles(pinnedHoverBackground);
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackground);
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackground);
   const selectedStyles = {
     backgroundColor: selectedBackground,
     '&:hover': {
@@ -204,13 +300,10 @@ export const GridRootStyles = styled('div', {
       }
     }
   };
-  const gridStyle = _extends({
-    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
-    '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium,
-    '--unstable_DataGrid-overlayBackground': overlayBackground,
-    '--DataGrid-containerBackground': containerBackground,
-    '--DataGrid-pinnedBackground': pinnedBackground,
-    '--DataGrid-rowBorderColor': borderColor,
+  const gridStyle = {
+    '--unstable_DataGrid-radius': _cssVariables.vars.radius.base,
+    '--unstable_DataGrid-headWeight': _cssVariables.vars.typography.fontWeight.medium,
+    '--DataGrid-rowBorderColor': _cssVariables.vars.colors.border.base,
     '--DataGrid-cellOffsetMultiplier': 2,
     '--DataGrid-width': '0px',
     '--DataGrid-hasScrollX': '0',
@@ -229,10 +322,11 @@ export const GridRootStyles = styled('div', {
     position: 'relative',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor,
+    borderColor: _cssVariables.vars.colors.border.base,
     borderRadius: 'var(--unstable_DataGrid-radius)',
-    color: (t.vars || t).palette.text.primary
-  }, t.typography.body2, {
+    backgroundColor: _cssVariables.vars.colors.background.base,
+    color: _cssVariables.vars.colors.foreground.base,
+    font: _cssVariables.vars.typography.font.body,
     outline: 'none',
     height: '100%',
     display: 'flex',
@@ -243,51 +337,47 @@ export const GridRootStyles = styled('div', {
     overflow: 'hidden',
     overflowAnchor: 'none',
     // Keep the same scrolling position
-    [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
+    [`.${_gridClasses.gridClasses.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
     },
-    [`&.${c.autoHeight}`]: {
+    [`&.${_gridClasses.gridClasses.autoHeight}`]: {
       height: 'auto'
     },
-    [`&.${c.autosizing}`]: {
-      [`& .${c.columnHeaderTitleContainerContent} > *`]: {
+    [`&.${_gridClasses.gridClasses.autosizing}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${c.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
-        [`& .${c.menuIcon}`]: {
+        [`& .${_gridClasses.gridClasses.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'
         }
       },
-      [`& .${c.cell}`]: {
+      [`& .${_gridClasses.gridClasses.cell}`]: {
         overflow: 'visible !important',
         whiteSpace: 'nowrap',
         minWidth: 'max-content !important',
         maxWidth: 'max-content !important'
       },
-      [`& .${c.groupingCriteriaCell}`]: {
+      [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
         width: 'unset'
       },
-      [`& .${c.treeDataGroupingCell}`]: {
+      [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
         width: 'unset'
       }
     },
-    [`& .${c.columnHeader}, & .${c.cell}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
       padding: '0 10px',
       boxSizing: 'border-box'
     },
-    [`& .${c.columnHeader}:focus-within, & .${c.cell}:focus-within`]: {
-      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : alpha(t.palette.primary.main, 0.5)} ${focusOutlineWidth}px`,
+    [`& .${_gridClasses.gridClasses.columnHeader}:focus-within, & .${_gridClasses.gridClasses.cell}:focus-within`]: {
+      outline: `solid ${setOpacity(_cssVariables.vars.colors.interactive.focus, 0.5)} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
-    [`& .${c.columnHeader}:focus, & .${c.cell}:focus`]: {
-      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
+    [`& .${_gridClasses.gridClasses.columnHeader}:focus, & .${_gridClasses.gridClasses.cell}:focus`]: {
+      outline: `solid ${_cssVariables.vars.colors.interactive.focus} ${focusOutlineWidth}px`,
       outlineOffset: focusOutlineWidth * -1
     },
     // Hide the column separator when:
@@ -295,177 +385,179 @@ export const GridRootStyles = styled('div', {
     // - the next column is focused and has an outline
     // - the column has a left or right border
     // - the next column is pinned right and has a left border
-    [`& .${c.columnHeader}:focus,
-      & .${c['columnHeader--withLeftBorder']},
-      & .${c['columnHeader--withRightBorder']},
-      & .${c['columnHeader--siblingFocused']},
-      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--lastUnpinned']},
-      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}
+    [`& .${_gridClasses.gridClasses.columnHeader}:focus,
+      & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']},
+      & .${_gridClasses.gridClasses['columnHeader--withRightBorder']},
+      & .${_gridClasses.gridClasses['columnHeader--siblingFocused']},
+      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--lastUnpinned']},
+      & .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}
       `]: {
-      [`& .${c.columnSeparator}`]: {
+      [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
         opacity: 0
       },
       // Show resizable separators at all times on touch devices
       '@media (hover: none)': {
-        [`& .${c['columnSeparator--resizable']}`]: {
+        [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
           opacity: 1
         }
       },
-      [`& .${c['columnSeparator--resizable']}:hover`]: {
+      [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}:hover`]: {
         opacity: 1
       }
     },
-    [`&.${c['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
+    [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
-    [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+    [`&.${_gridClasses.gridClasses['root--noToolbar']} [aria-rowindex="1"] .${_gridClasses.gridClasses['columnHeader--last']}`]: {
+      borderTopRightRadius: shouldShowBorderTopRightRadius ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
-    [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}, & .${_gridClasses.gridClasses.cellCheckbox}`]: {
       padding: 0,
       justifyContent: 'center',
       alignItems: 'center'
     },
-    [`& .${c.columnHeader}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      backgroundColor: headerBackground
     },
-    [`& .${c['columnHeader--filter']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
       paddingRight: 5,
       minHeight: 'min-content',
       overflow: 'hidden'
     },
-    [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
+    [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
-    [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer}, & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
       visibility: 'visible',
       width: 'auto'
     },
-    [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}) .${c.sortIcon}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}) .${_gridClasses.gridClasses.sortIcon}`]: {
       opacity: 0,
-      transition: t.transitions.create(['opacity'], {
-        duration: t.transitions.duration.shorter
+      transition: _cssVariables.vars.transition(['opacity'], {
+        duration: _cssVariables.vars.transitions.duration.short
       })
     },
-    [`& .${c.columnHeaderTitleContainer}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
-      gap: t.spacing(0.25),
+      gap: _cssVariables.vars.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
       overflow: 'hidden'
     },
-    [`& .${c.columnHeaderTitleContainerContent}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${c['columnHeader--filledGroup']} .${c.columnHeaderTitleContainer}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       borderBottomWidth: '1px',
       borderBottomStyle: 'solid',
       boxSizing: 'border-box'
     },
-    [`& .${c.sortIcon}, & .${c.filterIcon}`]: {
+    [`& .${_gridClasses.gridClasses.sortIcon}, & .${_gridClasses.gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },
-    [`& .${c['columnHeader--sortable']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: {
       cursor: 'pointer'
     },
-    [`& .${c['columnHeader--alignCenter']} .${c.columnHeaderTitleContainer}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       justifyContent: 'center'
     },
-    [`& .${c['columnHeader--alignRight']} .${c.columnHeaderDraggableContainer}, & .${c['columnHeader--alignRight']} .${c.columnHeaderTitleContainer}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.columnHeaderDraggableContainer}, & .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
       flexDirection: 'row-reverse'
     },
-    [`& .${c['columnHeader--alignCenter']} .${c.menuIcon}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']} .${_gridClasses.gridClasses.menuIcon}`]: {
       marginLeft: 'auto'
     },
-    [`& .${c['columnHeader--alignRight']} .${c.menuIcon}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--alignRight']} .${_gridClasses.gridClasses.menuIcon}`]: {
       marginRight: 'auto',
       marginLeft: -5
     },
-    [`& .${c['columnHeader--moving']}`]: {
-      backgroundColor: (t.vars || t).palette.action.hover
+    [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: {
+      backgroundColor: hoverBackground
     },
-    [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}, & .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 4,
+      zIndex: 40,
       // Should be above the column separator
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: _cssVariables.vars.header.background.base
     },
-    [`& .${c.columnSeparator}`]: {
+    [`& .${_gridClasses.gridClasses.columnSeparator}`]: {
       position: 'absolute',
       overflow: 'hidden',
-      zIndex: 3,
+      zIndex: 30,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
       maxWidth: columnSeparatorTargetSize,
-      color: borderColor
+      color: _cssVariables.vars.colors.border.base
     },
-    [`& .${c.columnHeaders}`]: {
-      width: 'var(--DataGrid-rowWidth)'
+    [`& .${_gridClasses.gridClasses.columnHeaders}`]: {
+      width: 'var(--DataGrid-rowWidth)',
+      backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
-      [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
-      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortIcon}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
+      [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortIcon}`]: {
         opacity: 0.5
       }
     },
     '@media (hover: none)': {
-      [`& .${c.columnHeader}`]: columnHeaderStyles,
-      [`& .${c.columnHeader}:focus,
-        & .${c['columnHeader--siblingFocused']}`]: {
-        [`.${c['columnSeparator--resizable']}`]: {
-          color: (t.vars || t).palette.primary.main
+      [`& .${_gridClasses.gridClasses.columnHeader}`]: columnHeaderStyles,
+      [`& .${_gridClasses.gridClasses.columnHeader}:focus,
+        & .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: {
+        [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
+          color: _cssVariables.vars.colors.foreground.accent
         }
       }
     },
-    [`& .${c['columnSeparator--sideLeft']}`]: {
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset
     },
-    [`& .${c['columnSeparator--sideRight']}`]: {
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: {
       right: columnSeparatorOffset
     },
-    [`& .${c['columnHeader--withRightBorder']} .${c['columnSeparator--sideLeft']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset - 0.5
     },
-    [`& .${c['columnHeader--withRightBorder']} .${c['columnSeparator--sideRight']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: {
       right: columnSeparatorOffset - 0.5
     },
-    [`& .${c['columnSeparator--resizable']}`]: {
+    [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
-      [`&.${c['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.primary.main
+      [`&.${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
+        color: _cssVariables.vars.colors.foreground.accent
       },
       // Always appear as draggable on touch devices
       '@media (hover: none)': {
-        [`& .${c.iconSeparator} rect`]: separatorIconDragStyles
+        [`& .${_gridClasses.gridClasses.iconSeparator} rect`]: separatorIconDragStyles
       },
       '@media (hover: hover)': {
         '&:hover': {
-          color: (t.vars || t).palette.primary.main,
-          [`& .${c.iconSeparator} rect`]: separatorIconDragStyles
+          color: _cssVariables.vars.colors.foreground.accent,
+          [`& .${_gridClasses.gridClasses.iconSeparator} rect`]: separatorIconDragStyles
         }
       },
       '& svg': {
         pointerEvents: 'none'
       }
     },
-    [`& .${c.iconSeparator}`]: {
+    [`& .${_gridClasses.gridClasses.iconSeparator}`]: {
       color: 'inherit',
-      transition: t.transitions.create(['color', 'width'], {
-        duration: t.transitions.duration.shortest
+      transition: _cssVariables.vars.transition(['color', 'width'], {
+        duration: _cssVariables.vars.transitions.duration.short
       })
     },
-    [`& .${c.menuIcon}`]: {
+    [`& .${_gridClasses.gridClasses.menuIcon}`]: {
       width: 0,
       visibility: 'hidden',
       fontSize: 20,
@@ -473,55 +565,55 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`.${c.menuOpen}`]: {
+    [`.${_gridClasses.gridClasses.menuOpen}`]: {
       visibility: 'visible',
       width: 'auto'
     },
-    [`& .${c.headerFilterRow}`]: {
-      [`& .${c.columnHeader}`]: {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeader}`]: {
         boxSizing: 'border-box',
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       }
     },
     /* Bottom border of the top-container */
-    [`& .${c['row--borderBottom']} .${c.columnHeader},
-      & .${c['row--borderBottom']} .${c.filler},
-      & .${c['row--borderBottom']} .${c.scrollbarFiller}`]: {
+    [`& .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.columnHeader},
+      & .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.filler},
+      & .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.scrollbarFiller}`]: {
       borderBottom: `1px solid var(--DataGrid-rowBorderColor)`
     },
-    [`& .${c['row--borderBottom']} .${c.cell}`]: {
+    [`& .${_gridClasses.gridClasses['row--borderBottom']} .${_gridClasses.gridClasses.cell}`]: {
       borderBottom: `1px solid var(--rowBorderColor)`
     },
     /* Row styles */
-    [`.${c.row}`]: {
+    [`.${_gridClasses.gridClasses.row}`]: {
       display: 'flex',
       width: 'var(--DataGrid-rowWidth)',
       breakInside: 'avoid',
       // Avoid the row to be broken in two different print pages.
 
       '--rowBorderColor': 'var(--DataGrid-rowBorderColor)',
-      [`&.${c['row--firstVisible']}`]: {
+      [`&.${_gridClasses.gridClasses['row--firstVisible']}`]: {
         '--rowBorderColor': 'transparent'
       },
       '&:hover': {
-        backgroundColor: (t.vars || t).palette.action.hover,
+        backgroundColor: hoverBackground,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
-      [`&.${c.rowSkeleton}:hover`]: {
+      [`&.${_gridClasses.gridClasses.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
       '&.Mui-selected': selectedStyles
     },
-    [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
+    [`& .${_gridClasses.gridClasses['container--top']}, & .${_gridClasses.gridClasses['container--bottom']}`]: {
       '[role=row]': {
-        background: 'var(--DataGrid-containerBackground)'
+        background: _cssVariables.vars.colors.background.base
       }
     },
     /* Cell styles */
-    [`& .${c.cell}`]: {
+    [`& .${_gridClasses.gridClasses.cell}`]: {
       flex: '0 0 auto',
       height: 'var(--height)',
       width: 'var(--width)',
@@ -535,236 +627,229 @@ export const GridRootStyles = styled('div', {
       textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
-    [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
+    [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
       borderTopColor: 'transparent'
     },
-    [`& .${c['pinnedRows--top']} :first-of-type`]: {
-      [`& .${c.cell}, .${c.scrollbarFiller}`]: {
+    [`& .${_gridClasses.gridClasses.pinnedRows} .${_gridClasses.gridClasses.row}, .${_gridClasses.gridClasses.aggregationRowOverlayWrapper} .${_gridClasses.gridClasses.row}`]: {
+      backgroundColor: pinnedBackground,
+      '&:hover': {
+        backgroundColor: pinnedHoverBackground
+      }
+    },
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']} :first-of-type`]: {
+      [`& .${_gridClasses.gridClasses.cell}, .${_gridClasses.gridClasses.scrollbarFiller}`]: {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
       userSelect: 'none'
     },
-    [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
-    [`& .${c.cellEmpty}`]: {
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
       flex: 1,
       padding: 0,
       height: 'unset'
     },
-    [`& .${c.cell}.${c['cell--selectionMode']}`]: {
+    [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--selectionMode']}`]: {
       cursor: 'default'
     },
-    [`& .${c.cell}.${c['cell--editing']}`]: {
+    [`& .${_gridClasses.gridClasses.cell}.${_gridClasses.gridClasses['cell--editing']}`]: {
       padding: 1,
       display: 'flex',
-      boxShadow: t.shadows[2],
-      backgroundColor: (t.vars || t).palette.background.paper,
+      boxShadow: _cssVariables.vars.shadows.base,
+      backgroundColor: _cssVariables.vars.colors.background.overlay,
       '&:focus-within': {
-        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
+        outline: `${focusOutlineWidth}px solid ${_cssVariables.vars.colors.interactive.focus}`,
         outlineOffset: focusOutlineWidth * -1
       }
     },
-    [`& .${c['row--editing']}`]: {
-      boxShadow: t.shadows[2]
+    [`& .${_gridClasses.gridClasses['row--editing']}`]: {
+      boxShadow: _cssVariables.vars.shadows.base
     },
-    [`& .${c['row--editing']} .${c.cell}`]: {
-      boxShadow: t.shadows[0],
-      backgroundColor: (t.vars || t).palette.background.paper
+    [`& .${_gridClasses.gridClasses['row--editing']} .${_gridClasses.gridClasses.cell}`]: {
+      boxShadow: 'none',
+      backgroundColor: _cssVariables.vars.colors.background.overlay
     },
-    [`& .${c.editBooleanCell}`]: {
+    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: {
       display: 'flex',
       height: '100%',
       width: '100%',
       alignItems: 'center',
       justifyContent: 'center'
     },
-    [`& .${c.booleanCell}[data-value="true"]`]: {
-      color: (t.vars || t).palette.text.secondary
+    [`& .${_gridClasses.gridClasses.booleanCell}[data-value="true"]`]: {
+      color: _cssVariables.vars.colors.foreground.muted
     },
-    [`& .${c.booleanCell}[data-value="false"]`]: {
-      color: (t.vars || t).palette.text.disabled
+    [`& .${_gridClasses.gridClasses.booleanCell}[data-value="false"]`]: {
+      color: _cssVariables.vars.colors.foreground.disabled
     },
-    [`& .${c.actionsCell}`]: {
+    [`& .${_gridClasses.gridClasses.actionsCell}`]: {
       display: 'inline-flex',
       alignItems: 'center',
-      gridGap: t.spacing(1)
+      gridGap: _cssVariables.vars.spacing(1)
     },
-    [`& .${c.rowReorderCell}`]: {
+    [`& .${_gridClasses.gridClasses.rowReorderCell}`]: {
       display: 'inline-flex',
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
-    [`& .${c['rowReorderCell--draggable']}`]: {
+    [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
       cursor: 'move',
       opacity: 1
     },
-    [`& .${c.rowReorderCellContainer}`]: {
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {
       padding: 0,
       display: 'flex',
       alignItems: 'stretch'
     },
-    [`.${c.withBorderColor}`]: {
-      borderColor
+    [`.${_gridClasses.gridClasses.withBorderColor}`]: {
+      borderColor: _cssVariables.vars.colors.border.base
     },
-    [`& .${c['cell--withLeftBorder']}, & .${c['columnHeader--withLeftBorder']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}, & .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: {
       borderLeftColor: 'var(--DataGrid-rowBorderColor)',
       borderLeftWidth: '1px',
       borderLeftStyle: 'solid'
     },
-    [`& .${c['cell--withRightBorder']}, & .${c['columnHeader--withRightBorder']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--withRightBorder']}, & .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: {
       borderRightColor: 'var(--DataGrid-rowBorderColor)',
       borderRightWidth: '1px',
       borderRightStyle: 'solid'
     },
-    [`& .${c['cell--flex']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: {
       display: 'flex',
       alignItems: 'center',
       lineHeight: 'inherit'
     },
-    [`& .${c['cell--textLeft']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: {
       textAlign: 'left',
       justifyContent: 'flex-start'
     },
-    [`& .${c['cell--textRight']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: {
       textAlign: 'right',
       justifyContent: 'flex-end'
     },
-    [`& .${c['cell--textCenter']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: {
       textAlign: 'center',
       justifyContent: 'center'
     },
-    [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)',
+      zIndex: 30,
+      background: _cssVariables.vars.cell.background.pinned,
       '&.Mui-selected': {
-        backgroundColor: pinnedSelectedBackgroundColor
+        backgroundColor: pinnedSelectedBackground
       }
     },
-    [`& .${c.virtualScrollerContent} .${c.row}`]: {
+    [`& .${_gridClasses.gridClasses.row}`]: {
       '&:hover': pinnedHoverStyles,
       '&.Mui-selected': pinnedSelectedStyles,
       '&.Mui-selected:hover': pinnedSelectedHoverStyles
     },
-    [`& .${c.cellOffsetLeft}`]: {
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
       flex: '0 0 auto',
       display: 'inline-block'
     },
-    [`& .${c.cellSkeleton}`]: {
+    [`& .${_gridClasses.gridClasses.cellSkeleton}`]: {
       flex: '0 0 auto',
       height: '100%',
       display: 'inline-flex',
       alignItems: 'center'
     },
-    [`& .${c.columnHeaderDraggableContainer}`]: {
+    [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
       width: '100%',
       height: '100%'
     },
-    [`& .${c.rowReorderCellPlaceholder}`]: {
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
       display: 'none'
     },
-    [`& .${c['columnHeader--dragging']}, & .${c['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
+      background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
-    [`& .${c['row--dragging']}`]: {
-      background: (t.vars || t).palette.background.paper,
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: {
+      background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: (t.vars || t).palette.action.disabledOpacity,
-      [`& .${c.rowReorderCellPlaceholder}`]: {
+      opacity: _cssVariables.vars.colors.interactive.disabledOpacity,
+      [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
         display: 'flex'
       }
     },
-    [`& .${c.treeDataGroupingCell}`]: {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: {
       display: 'flex',
       alignItems: 'center',
       width: '100%'
     },
-    [`& .${c.treeDataGroupingCellToggle}`]: {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: _cssVariables.vars.spacing(2)
     },
-    [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}, .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       height: '100%'
     },
-    [`& .${c.groupingCriteriaCell}`]: {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: {
       display: 'flex',
       alignItems: 'center',
       width: '100%'
     },
-    [`& .${c.groupingCriteriaCellToggle}`]: {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: {
       flex: '0 0 28px',
       alignSelf: 'stretch',
-      marginRight: t.spacing(2)
+      marginRight: _cssVariables.vars.spacing(2)
     },
     /* ScrollbarFiller styles */
-    [`.${c.scrollbarFiller}`]: {
+    [`.${_gridClasses.gridClasses.scrollbarFiller}`]: {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
-      [`&.${c['scrollbarFiller--borderTop']}`]: {
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: {
         borderTop: '1px solid var(--DataGrid-rowBorderColor)'
       },
-      [`&.${c['scrollbarFiller--borderBottom']}`]: {
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: {
         borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       },
-      [`&.${c['scrollbarFiller--pinnedRight']}`]: {
-        backgroundColor: 'var(--DataGrid-pinnedBackground)',
+      [`&.${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: _cssVariables.vars.cell.background.pinned,
         position: 'sticky',
         right: 0
       }
     },
-    [`& .${c.filler}`]: {
+    [`& .${_gridClasses.gridClasses.filler}`]: {
       flex: '1 0 auto'
     },
-    [`& .${c['filler--borderBottom']}`]: {
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
-    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
-    [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
-      [`& .${c.virtualScrollerContent}`]: {
+    /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */
+    [`& .${_gridClasses.gridClasses['main--hiddenContent']}`]: {
+      [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
         // Position fixed is used to remove the virtual scroller content from the flow.
         // https://github.com/mui/mui-x/issues/14061
         position: 'fixed',
         visibility: 'hidden'
       },
-      [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]: {
+      [`& .${_gridClasses.gridClasses['scrollbar--vertical']}, & .${_gridClasses.gridClasses.pinnedRows}, & .${_gridClasses.gridClasses.virtualScroller} > .${_gridClasses.gridClasses.filler}`]: {
         display: 'none'
       }
     }
-  });
+  };
   return gridStyle;
 });
-
-/**
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- */
-function blend(background, overlay, opacity, gamma = 1) {
-  const f = (b, o) => 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])];
-  return recomposeColor({
-    type: 'rgb',
-    values: rgb
-  });
+function setOpacity(color, opacity) {
+  return `rgba(from ${color} r g b / ${opacity})`;
 }
-const removeOpacity = color => `rgb(from ${color} r g b / 1)`;
-function blendCssVars(background, overlay, opacity) {
-  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
+function mix(background, overlay, opacity) {
+  return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
 }