From 9c03ded82a9732d2607e40d9811997ba4a9412e9 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 4 May 2022 09:11:32 -0400
Subject: [PATCH 1/3] Add support CSS variables

---
 docs/pages/experiments/material-ui/table.tsx  | 94 +++++++++++++++++++
 packages/mui-material/src/Table/Table.js      |  2 +-
 .../mui-material/src/TableRow/TableRow.js     | 16 ++--
 3 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 docs/pages/experiments/material-ui/table.tsx

diff --git a/docs/pages/experiments/material-ui/table.tsx b/docs/pages/experiments/material-ui/table.tsx
new file mode 100644
index 00000000000000..f6952f702cbc72
--- /dev/null
+++ b/docs/pages/experiments/material-ui/table.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+import Table from '@mui/material/Table';
+import { TableBody, TableHead, TableRow } from '@mui/material';
+
+const ColorSchemePicker = () => {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+    >
+      {mode === 'light' ? <Moon /> : <Sun />}
+    </Button>
+  );
+};
+
+export default function CssVarsTemplate() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <Box sx={{ width: '100%' }}>
+            <Table aria-label="simple table">
+              <TableHead>
+                <TableRow>Hi, I'm a row</TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow>Hi, I'm a row</TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+          <Box sx={{ width: '100%' }}>
+            <Table aria-label="simple table">
+              <TableHead>
+                <TableRow>Hello, I'am row</TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow selected>Hello, I am a selected row</TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+          <Box sx={{ width: '100%' }}>
+            <Table aria-label="simple table">
+              <TableHead>
+                <TableRow>Hello, I'am a row</TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow selected hover>Hello, I am a selected and hover row</TableRow>
+              </TableBody>
+            </Table>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/Table/Table.js b/packages/mui-material/src/Table/Table.js
index 94fbd548971959..d52434210764e6 100644
--- a/packages/mui-material/src/Table/Table.js
+++ b/packages/mui-material/src/Table/Table.js
@@ -33,7 +33,7 @@ const TableRoot = styled('table', {
   '& caption': {
     ...theme.typography.body2,
     padding: theme.spacing(2),
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom',
   },
diff --git a/packages/mui-material/src/TableRow/TableRow.js b/packages/mui-material/src/TableRow/TableRow.js
index 2ac54e89ae4502..230d5ff54824a6 100644
--- a/packages/mui-material/src/TableRow/TableRow.js
+++ b/packages/mui-material/src/TableRow/TableRow.js
@@ -33,15 +33,19 @@ const TableRowRoot = styled('tr', {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0,
   [`&.${tableRowClasses.hover}:hover`]: {
-    backgroundColor: theme.palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
   },
   [`&.${tableRowClasses.selected}`]: {
-    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    backgroundColor: theme.vars
+      ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
+      : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
-      backgroundColor: alpha(
-        theme.palette.primary.main,
-        theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-      ),
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+        : alpha(
+          theme.palette.primary.main,
+          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+        ),
     },
   },
 }));

From 95f32233d1cde87476d0297bff5fd47526bbc7ca Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 4 May 2022 09:16:49 -0400
Subject: [PATCH 2/3] yarn prettier

---
 docs/pages/experiments/material-ui/table.tsx   | 4 +++-
 packages/mui-material/src/TableRow/TableRow.js | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/pages/experiments/material-ui/table.tsx b/docs/pages/experiments/material-ui/table.tsx
index f6952f702cbc72..77465627260cd6 100644
--- a/docs/pages/experiments/material-ui/table.tsx
+++ b/docs/pages/experiments/material-ui/table.tsx
@@ -83,7 +83,9 @@ export default function CssVarsTemplate() {
                 <TableRow>Hello, I'am a row</TableRow>
               </TableHead>
               <TableBody>
-                <TableRow selected hover>Hello, I am a selected and hover row</TableRow>
+                <TableRow selected hover>
+                  Hello, I am a selected and hover row
+                </TableRow>
               </TableBody>
             </Table>
           </Box>
diff --git a/packages/mui-material/src/TableRow/TableRow.js b/packages/mui-material/src/TableRow/TableRow.js
index 230d5ff54824a6..b0607c73ebab5d 100644
--- a/packages/mui-material/src/TableRow/TableRow.js
+++ b/packages/mui-material/src/TableRow/TableRow.js
@@ -43,9 +43,9 @@ const TableRowRoot = styled('tr', {
       backgroundColor: theme.vars
         ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
         : alpha(
-          theme.palette.primary.main,
-          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-        ),
+            theme.palette.primary.main,
+            theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+          ),
     },
   },
 }));

From fcd464d96c6cf87a94f45d2931463a8de579207c Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Wed, 4 May 2022 09:34:35 -0400
Subject: [PATCH 3/3] fix

---
 docs/pages/experiments/material-ui/table.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/pages/experiments/material-ui/table.tsx b/docs/pages/experiments/material-ui/table.tsx
index 77465627260cd6..1304bb14e8f3d0 100644
--- a/docs/pages/experiments/material-ui/table.tsx
+++ b/docs/pages/experiments/material-ui/table.tsx
@@ -60,17 +60,17 @@ export default function CssVarsTemplate() {
           <Box sx={{ width: '100%' }}>
             <Table aria-label="simple table">
               <TableHead>
-                <TableRow>Hi, I'm a row</TableRow>
+                <TableRow>Hi, I am a row</TableRow>
               </TableHead>
               <TableBody>
-                <TableRow>Hi, I'm a row</TableRow>
+                <TableRow>Hi, I am a row</TableRow>
               </TableBody>
             </Table>
           </Box>
           <Box sx={{ width: '100%' }}>
             <Table aria-label="simple table">
               <TableHead>
-                <TableRow>Hello, I'am row</TableRow>
+                <TableRow>Hello, I am row</TableRow>
               </TableHead>
               <TableBody>
                 <TableRow selected>Hello, I am a selected row</TableRow>
@@ -80,7 +80,7 @@ export default function CssVarsTemplate() {
           <Box sx={{ width: '100%' }}>
             <Table aria-label="simple table">
               <TableHead>
-                <TableRow>Hello, I'am a row</TableRow>
+                <TableRow>Hello, I am a row</TableRow>
               </TableHead>
               <TableBody>
                 <TableRow selected hover>