[DataGrid] Support theme.vars (#6784)

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com> Fix #6702
mui · Nov 24, 2022 · 043522f · 043522f
1 parent eb63ef7
commit 043522f
Show file tree

Hide file tree

Showing 27 changed files with 230 additions and 108 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -28,11 +28,11 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.10.14",
-    "@mui/joy": "^5.0.0-alpha.54",
-    "@mui/material": "^5.10.14",
-    "@mui/styles": "^5.10.10",
-    "@mui/utils": "^5.10.14",
+    "@mui/icons-material": "^5.10.15",
+    "@mui/joy": "^5.0.0-alpha.55",
+    "@mui/material": "^5.10.15",
+    "@mui/styles": "^5.10.15",
+    "@mui/utils": "^5.10.15",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/lodash": "^4.14.188",
     "@types/react-dom": "^18.0.8",

diff --git a/package.json b/package.json
@@ -83,10 +83,10 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/icons-material": "^5.10.14",
-    "@mui/material": "^5.10.14",
+    "@mui/icons-material": "^5.10.15",
+    "@mui/material": "^5.10.15",
     "@mui/monorepo": "https://github.com/mui/material-ui.git#master",
-    "@mui/utils": "^5.10.14",
+    "@mui/utils": "^5.10.15",
     "@octokit/plugin-retry": "^4.0.3",
     "@octokit/rest": "^19.0.5",
     "@playwright/test": "1.27.1",

diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderProgress.tsx
@@ -8,7 +8,7 @@ interface ProgressBarProps {
 }
 
 const Root = styled('div')(({ theme }) => ({
-  border: `1px solid ${theme.palette.divider}`,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
   position: 'relative',
   overflow: 'hidden',
   width: '100%',

diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx
@@ -13,20 +13,20 @@ const StyledChip = styled(Chip)(({ theme }) => ({
     color: 'inherit',
   },
   '&.Open': {
-    color: theme.palette.info.dark,
-    border: `1px solid ${theme.palette.info.main}`,
+    color: (theme.vars || theme).palette.info.dark,
+    border: `1px solid ${(theme.vars || theme).palette.info.main}`,
   },
   '&.Filled': {
-    color: theme.palette.success.dark,
-    border: `1px solid ${theme.palette.success.main}`,
+    color: (theme.vars || theme).palette.success.dark,
+    border: `1px solid ${(theme.vars || theme).palette.success.main}`,
   },
   '&.PartiallyFilled': {
-    color: theme.palette.warning.dark,
-    border: `1px solid ${theme.palette.warning.main}`,
+    color: (theme.vars || theme).palette.warning.dark,
+    border: `1px solid ${(theme.vars || theme).palette.warning.main}`,
   },
   '&.Rejected': {
-    color: theme.palette.error.dark,
-    border: `1px solid ${theme.palette.error.main}`,
+    color: (theme.vars || theme).palette.error.dark,
+    border: `1px solid ${(theme.vars || theme).palette.error.main}`,
   },
 }));
 

diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx
@@ -13,10 +13,14 @@ const Value = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'flex-end',
   '&.good': {
-    backgroundColor: alpha(theme.palette.success.main, 0.3),
+    backgroundColor: theme.vars
+      ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)`
+      : alpha(theme.palette.success.main, 0.3),
   },
   '&.bad': {
-    backgroundColor: alpha(theme.palette.error.main, 0.3),
+    backgroundColor: theme.vars
+      ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)`
+      : alpha(theme.palette.error.main, 0.3),
   },
 }));
 

diff --git a/packages/grid/x-data-grid-generator/tsconfig.build.json b/packages/grid/x-data-grid-generator/tsconfig.build.json
@@ -11,6 +11,6 @@
     "rootDir": "./src"
   },
   "references": [{ "path": "../x-data-grid-premium/tsconfig.build.json" }],
-  "include": ["src/**/*.ts*"],
+  "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
 }
diff --git a/packages/grid/x-data-grid-generator/tsconfig.json b/packages/grid/x-data-grid-generator/tsconfig.json
@@ -4,5 +4,5 @@
     "types": ["react", "mocha", "node"],
     "noImplicitAny": true
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"]
 }
diff --git a/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx b/packages/grid/x-data-grid-premium/src/components/GridAggregationHeader.tsx
@@ -47,7 +47,7 @@ const GridAggregationFunctionLabel = styled('div', {
     lineHeight: theme.typography.caption.fontSize,
     marginTop: `calc(-2px - ${theme.typography.caption.fontSize})`,
     fontWeight: theme.typography.fontWeightMedium,
-    color: theme.palette.primary.dark,
+    color: (theme.vars || theme).palette.primary.dark,
     textTransform: 'uppercase',
   };
 });

diff --git a/packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx b/packages/grid/x-data-grid-premium/src/components/GridFooterCell.tsx
@@ -13,7 +13,7 @@ const GridFooterCellRoot = styled(Box, {
   overridesResolver: (_, styles) => styles.footerCell,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
   fontWeight: theme.typography.fontWeightMedium,
-  color: theme.palette.primary.dark,
+  color: (theme.vars || theme).palette.primary.dark,
 }));
 
 interface GridFooterCellProps extends GridRenderCellParams {

diff --git a/packages/grid/x-data-grid-premium/tsconfig.build.json b/packages/grid/x-data-grid-premium/tsconfig.build.json
@@ -15,6 +15,6 @@
     { "path": "../x-data-grid-pro/tsconfig.build.json" },
     { "path": "../../x-license-pro/tsconfig.build.json" }
   ],
-  "include": ["src/**/*.ts*"],
+  "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
 }
diff --git a/packages/grid/x-data-grid-premium/tsconfig.json b/packages/grid/x-data-grid-premium/tsconfig.json
@@ -4,5 +4,9 @@
     "types": ["react", "mocha", "node"],
     "noImplicitAny": true
   },
-  "include": ["src/**/*", "../../../node_modules/@mui/monorepo/test/utils/initMatchers.ts"]
+  "include": [
+    "src/**/*",
+    "../../../node_modules/@mui/monorepo/test/utils/initMatchers.ts",
+    "../../../node_modules/@mui/material/themeCssVarsAugmentation"
+  ]
 }
diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
@@ -81,13 +81,19 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default,
-  ...(theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha(
-      '#fff',
-      getOverlayAlpha(2),
-    )})`,
-  }),
+  backgroundColor: (theme.vars || theme).palette.background.default,
+  ...(theme.vars
+    ? {
+        backgroundImage: theme.vars.overlays?.[2],
+      }
+    : {
+        ...(theme.palette.mode === 'dark' && {
+          backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha(
+            '#fff',
+            getOverlayAlpha(2),
+          )})`,
+        }),
+      }),
   ...(ownerState.side === GridPinnedPosition.left && { left: 0 }),
   ...(ownerState.side === GridPinnedPosition.right && { right: 0 }),
 }));

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -98,7 +98,7 @@ const getOverlayAlpha = (elevation: number) => {
 };
 
 const getBoxShadowColor = (theme: Theme) => {
-  return alpha(theme.palette.common.black, 0.21);
+  return theme.vars ? `rgba(0 0 0 /  0.21)` : alpha(theme.palette.common.black, 0.21);
 };
 
 const VirtualScrollerDetailPanels = styled('div', {
@@ -128,8 +128,10 @@ const VirtualScrollerPinnedColumns = styled('div', {
     position: 'sticky',
     overflow: 'hidden',
     zIndex: 1,
-    backgroundColor: theme.palette.background.default,
-    ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }),
+    backgroundColor: (theme.vars || theme).palette.background.default,
+    ...(theme.vars
+      ? { backgroundImage: theme.vars.overlays?.[2] }
+      : { ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }) }),
     ...(ownerState.side === GridPinnedPosition.left && {
       left: 0,
       float: 'left',
@@ -157,8 +159,10 @@ const VirtualScrollerPinnedRows = styled('div', {
     position: 'sticky',
     // should be above the detail panel
     zIndex: 3,
-    backgroundColor: theme.palette.background.default,
-    ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }),
+    backgroundColor: (theme.vars || theme).palette.background.default,
+    ...(theme.vars
+      ? { backgroundImage: theme.vars.overlays?.[2] }
+      : { ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }) }),
     ...(ownerState.position === 'top' && {
       top: 0,
       boxShadow: `0px 3px 4px -2px ${boxShadowColor}`,

diff --git a/packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx b/packages/grid/x-data-grid-pro/src/components/GridDetailPanel.tsx
@@ -12,7 +12,7 @@ const DetailPanel = styled(Box, {
   zIndex: 2,
   width: '100%',
   position: 'absolute',
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: (theme.vars || theme).palette.background.default,
   overflow: 'auto',
 }));
 

diff --git a/packages/grid/x-data-grid-pro/tsconfig.build.json b/packages/grid/x-data-grid-pro/tsconfig.build.json
@@ -14,6 +14,6 @@
     { "path": "../x-data-grid/tsconfig.build.json" },
     { "path": "../../x-license-pro/tsconfig.build.json" }
   ],
-  "include": ["src/**/*.ts*"],
+  "include": ["src/**/*.ts*", "../../../node_modules/@mui/material/themeCssVarsAugmentation"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
 }
diff --git a/packages/grid/x-data-grid-pro/tsconfig.json b/packages/grid/x-data-grid-pro/tsconfig.json
@@ -4,5 +4,9 @@
     "types": ["react", "mocha", "node"],
     "noImplicitAny": true
   },
-  "include": ["src/**/*", "../../../node_modules/@mui/monorepo/test/utils/initMatchers.ts"]
+  "include": [
+    "src/**/*",
+    "../../../node_modules/@mui/monorepo/test/utils/initMatchers.ts",
+    "../../../node_modules/@mui/material/themeCssVarsAugmentation"
+  ]
 }
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx
@@ -25,10 +25,12 @@ const GridColumnHeadersRoot = styled('div', {
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders,
 })(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  // eslint-disable-next-line no-nested-ternary
+  const borderColor = theme.vars
+    ? theme.vars.palette.TableCell.border
+    : theme.palette.mode === 'light'
+    ? lighten(alpha(theme.palette.divider, 1), 0.88)
+    : darken(alpha(theme.palette.divider, 1), 0.68);
 
   return {
     position: 'absolute',

diff --git a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx
@@ -28,10 +28,12 @@ const GridFooterContainerRoot = styled('div', {
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer,
 })(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  // eslint-disable-next-line no-nested-ternary
+  const borderColor = theme.vars
+    ? theme.vars.palette.TableCell.border
+    : theme.palette.mode === 'light'
+    ? lighten(alpha(theme.palette.divider, 1), 0.88)
+    : darken(alpha(theme.palette.divider, 1), 0.68);
 
   return {
     display: 'flex',

diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -35,7 +35,9 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})`
+    : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
 }));
 
 const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(