From 9a1af1a6f0015e2e33edd3c0169a50495e07f01e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 2 Mar 2023 15:02:58 +0700
Subject: [PATCH] add unstable_ prefix to CSS variables

---
 .../columnHeaders/GridBaseColumnHeaders.tsx          |  4 ++--
 .../columnHeaders/GridColumnHeaderTitle.tsx          |  2 +-
 .../src/components/containers/GridOverlay.tsx        |  2 +-
 .../src/components/containers/GridRootStyles.ts      | 12 ++++++------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
index caedd3eea8e9b..4184ab99a6e0a 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridBaseColumnHeaders.tsx
@@ -29,8 +29,8 @@ const GridColumnHeadersRoot = styled('div', {
   alignItems: 'center',
   boxSizing: 'border-box',
   borderBottom: '1px solid',
-  borderTopLeftRadius: 'var(--DataGrid-radius)',
-  borderTopRightRadius: 'var(--DataGrid-radius)',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)',
 });
 
 interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
index e3132e83959fd..3f87a40002d1f 100644
--- a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
+++ b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderTitle.tsx
@@ -28,7 +28,7 @@ const GridColumnHeaderTitleRoot = styled('div', {
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: 'var(--DataGrid-headWeight)',
+  fontWeight: 'var(--unstable_DataGrid-headWeight)',
 });
 
 const ColumnHeaderInnerTitle = React.forwardRef<
diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
index d5e40eaa56f15..fd7167275ac41 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
+++ b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -34,7 +34,7 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'var(--DataGrid-overlayBackground)',
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)',
 });
 
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(
diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
index 53e6d3c90ed3a..87b16bf4654ec 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -98,9 +98,9 @@ export const GridRootStyles = styled('div', {
   const radius = theme.shape.borderRadius;
 
   const gridStyle: CSSInterpolation = {
-    '--DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
-    '--DataGrid-headWeight': theme.typography.fontWeightMedium,
-    '--DataGrid-overlayBackground': theme.vars
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars
       ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
       : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
     flex: 1,
@@ -109,7 +109,7 @@ export const GridRootStyles = styled('div', {
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor,
-    borderRadius: 'var(--DataGrid-radius)',
+    borderRadius: 'var(--unstable_DataGrid-radius)',
     color: (theme.vars || theme).palette.text.primary,
     ...theme.typography.body2,
     outline: 'none',
@@ -438,13 +438,13 @@ export const GridRootStyles = styled('div', {
     [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: 'var(--DataGrid-radius)',
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
     },
     [`& .${gridClasses['row--dragging']}`]: {
       background: (theme.vars || theme).palette.background.paper,
       padding: '0 12px',
-      borderRadius: 'var(--DataGrid-radius)',
+      borderRadius: 'var(--unstable_DataGrid-radius)',
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
 
       [`& .${gridClasses.rowReorderCellPlaceholder}`]: {