[DataGrid] Support `theme.vars` #6784

alexfauquette · 2022-11-08T14:52:59Z

Similar to #6778 but more difficult, because we have some customization such as

const borderColor =
    theme.palette.mode === 'light'
      ? lighten(alpha(theme.palette.divider, 1), 0.88)
      : darken(alpha(theme.palette.divider, 1), 0.68);

I do not see how to manage it because lighten and darken are not CSS functions

mui-bot · 2022-11-08T14:57:52Z

	Messages
📖	Netlify deploy preview: https://deploy-preview-6784--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	640.7	1,219.3	656.5	843.44	211.011
Sort 100k rows	ms	641.2	1,071.2	773.1	880.1	155.032
Select 100k rows	ms	200.8	311.7	230.6	249.88	44.781
Deselect 100k rows	ms	136.4	288.2	187.8	196.98	51.332

Generated by 🚫 dangerJS against b7c3643

packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx

siriwatknp · 2022-11-09T03:36:30Z

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.common.backgroundChannel} / ${theme.vars.palette.action.disabledOpacity})`


This will yield a different result in dark mode. I think we can add another token for theme.vars.palette.background.defaultChannel in Material UI.

packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts

siriwatknp · 2022-11-09T03:39:19Z

const borderColor =
    theme.palette.mode === 'light'
      ? lighten(alpha(theme.palette.divider, 1), 0.88)
      : darken(alpha(theme.palette.divider, 1), 0.68);

I do not see how to manage it because lighten and darken are not CSS functions

I think we can add extra tokens in Material UI for these cases. The downside is the bundle size of the generated HTML (with inline CSS). Ideally, the DataGrid and Pickers should use the existing tokens with the least JS color manipulation.

alexfauquette · 2022-11-09T09:16:51Z

For the following part of the code, I realised it comes from the Table component, so I use theme.vars.palette.TableCell.border

const borderColor =
    theme.palette.mode === 'light'
      ? lighten(alpha(theme.palette.divider, 1), 0.88)
      : darken(alpha(theme.palette.divider, 1), 0.68);

I also did the following modification

-theme.vars.palette.common.backgroundChannel
+theme.vars.palette.background.defaultChannel

@siriwatknp do you take care of creating the background.defaultChannel in core?

siriwatknp · 2022-11-09T09:16:52Z

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx

+  // 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);


siriwatknp · 2022-11-09T09:17:48Z

@siriwatknp do you take care of creating the background.defaultChannel in core?

Sure!

github-actions · 2022-11-10T12:00:09Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-11-10T12:00:09Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-11-17T09:32:06Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

package.json

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

siriwatknp · 2022-11-24T08:59:42Z

packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx

@@ -81,7 +81,7 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
  display: 'flex',
  flexDirection: 'column',
  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: (theme.vars || theme).palette.background.default,
  ...(theme.palette.mode === 'dark' && {


Opps! this would not work.

If it can help, getOverlayAlpha(elevation) is defined as a function, but used with only elevation=2

getOverlayAlpha(2) = 0.07

Found the solution, it can be fixed this way:

There is a variable for the dark mode overlay theme.vars.overlays[2]. https://github.com/siriwatknp/material-ui/blob/system/use-css-theme-vars/packages/mui-material/src/styles/experimental_extendTheme.js#L75

You can use it like this:

...theme.vars ? { backgroundImage: theme.vars.overlays[2], } : { ...theme.palette.mode === 'dark' && { backgroundImage: ... } }

When CSS variables are detected, the styles will be:

... background-image: var(--mui-overlays-2);

This works fine on both light & dark modes.

siriwatknp · 2022-11-24T09:00:11Z

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx

@@ -128,7 +128,7 @@ const VirtualScrollerPinnedColumns = styled('div', {
    position: 'sticky',
    overflow: 'hidden',
    zIndex: 1,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: (theme.vars || theme).palette.background.default,
    ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }),


siriwatknp · 2022-11-24T09:00:23Z

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx

@@ -157,7 +157,7 @@ const VirtualScrollerPinnedRows = styled('div', {
    position: 'sticky',
    // should be above the detail panel
    zIndex: 3,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: (theme.vars || theme).palette.background.default,
    ...(theme.palette.mode === 'dark' && { backgroundImage: darkModeBackgroundImage }),


siriwatknp · 2022-11-24T10:27:16Z

packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx

@@ -81,7 +81,7 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
  display: 'flex',
  flexDirection: 'column',
  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: (theme.vars || theme).palette.background.default,
  ...(theme.palette.mode === 'dark' && {
    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha(


It is the same function as https://github.com/siriwatknp/material-ui/blob/system/use-css-theme-vars/packages/mui-material/src/styles/experimental_extendTheme.js#L13, so using theme.vars.overlays[2] should work the same.

Yes, sounds to already be the case for Paper component

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Paper/Paper.js#L53-L62

siriwatknp

🤩 Awesomeee!

alexfauquette · 2022-11-24T11:56:03Z

Thanks for all the feedbacks :)

alexfauquette added 3 commits November 8, 2022 15:19

import types

60c4927

easy modifications

5351f78

simpler alpha

0057d82

siriwatknp reviewed Nov 9, 2022

View reviewed changes

packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx Outdated Show resolved Hide resolved

siriwatknp reviewed Nov 9, 2022

View reviewed changes

packages/grid/x-data-grid-generator/src/renderer/renderTotalPrice.tsx Outdated Show resolved Hide resolved

siriwatknp reviewed Nov 9, 2022

View reviewed changes

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx Outdated Show resolved Hide resolved

siriwatknp reviewed Nov 9, 2022

View reviewed changes

packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts Outdated Show resolved Hide resolved

siriwatknp reviewed Nov 9, 2022

View reviewed changes

packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts Outdated Show resolved Hide resolved

zannager added the component: data grid This is the name of the generic UI component, not the React module! label Nov 9, 2022

alexfauquette added 4 commits November 9, 2022 09:48

main to mainChannel

f9b17bd

avoid lighten

3935d9f

forgotten background

9c574bb

use background.defaultChannel

f23d2aa

siriwatknp reviewed Nov 9, 2022

View reviewed changes

siriwatknp mentioned this pull request Nov 9, 2022

[Material UI] Add palette.background.defaultChannel token mui/material-ui#35061

Merged

1 task

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged labels Nov 10, 2022

cherniavskii mentioned this pull request Nov 10, 2022

[website] Fix design kits showcase throwing an error mui/material-ui#35093

Merged

1 task

alexfauquette added 4 commits November 16, 2022 11:03

remove ts imports

a9fe43e

Merge remote-tracking branch 'upstream/next' into css-var-datagrid

cd13cb5

import ts from node_modules

b3945eb

prettify

04c5f43

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 16, 2022

alexfauquette mentioned this pull request Nov 16, 2022

[typescript] Add background.defaultChannel to CssVarsPalette mui/material-ui#35174

Merged

force gettign fix

134f1d8

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 17, 2022

alexfauquette commented Nov 17, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

alexfauquette and others added 3 commits November 17, 2022 10:47

Apply suggestions from code review

6325659

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

update material to v5.10.15

9377ffa

Merge remote-tracking branch 'upstream/next' into css-var-datagrid

dd29c68

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 22, 2022

alexfauquette added 5 commits November 22, 2022 13:33

prettier

2e9a297

eslint

fe5cac4

Merge remote-tracking branch 'upstream/next' into css-var-datagrid

33966e0

Merge remote-tracking branch 'upstream/next' into css-var-datagrid

9305183

updates

badf748

siriwatknp reviewed Nov 24, 2022

View reviewed changes

alexfauquette added 2 commits November 24, 2022 11:42

fix

28dbde0

fix

b7c3643

siriwatknp approved these changes Nov 24, 2022

View reviewed changes

alexfauquette merged commit 043522f into mui:next Nov 24, 2022

alexfauquette deleted the css-var-datagrid branch November 24, 2022 11:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Support `theme.vars` #6784

[DataGrid] Support `theme.vars` #6784

alexfauquette commented Nov 8, 2022

mui-bot commented Nov 8, 2022 •

edited

Loading

siriwatknp Nov 9, 2022

siriwatknp commented Nov 9, 2022 •

edited

Loading

alexfauquette commented Nov 9, 2022

siriwatknp Nov 9, 2022

siriwatknp commented Nov 9, 2022

github-actions bot commented Nov 10, 2022

github-actions bot commented Nov 10, 2022

github-actions bot commented Nov 17, 2022

siriwatknp Nov 24, 2022

alexfauquette Nov 24, 2022

siriwatknp Nov 24, 2022 •

edited

Loading

siriwatknp Nov 24, 2022

siriwatknp Nov 24, 2022

siriwatknp Nov 24, 2022

alexfauquette Nov 24, 2022

siriwatknp left a comment

alexfauquette commented Nov 24, 2022

[DataGrid] Support theme.vars #6784

[DataGrid] Support theme.vars #6784

Conversation

alexfauquette commented Nov 8, 2022

mui-bot commented Nov 8, 2022 • edited Loading

Choose a reason for hiding this comment

siriwatknp commented Nov 9, 2022 • edited Loading

alexfauquette commented Nov 9, 2022

Choose a reason for hiding this comment

siriwatknp commented Nov 9, 2022

github-actions bot commented Nov 10, 2022

github-actions bot commented Nov 10, 2022

github-actions bot commented Nov 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp Nov 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

alexfauquette commented Nov 24, 2022

[DataGrid] Support `theme.vars` #6784

[DataGrid] Support `theme.vars` #6784

mui-bot commented Nov 8, 2022 •

edited

Loading

siriwatknp commented Nov 9, 2022 •

edited

Loading

siriwatknp Nov 24, 2022 •

edited

Loading