From 83c311d5e5a034a0e9ab85d64bf9628559a744f6 Mon Sep 17 00:00:00 2001
From: Nghia Mai <nghia.mai@foodpanda.com>
Date: Mon, 2 May 2022 14:03:44 -0400
Subject: [PATCH 1/2] [MenuItem] Add support for CSS variables

---
 .../experiments/material-ui/menu-item.tsx     | 69 +++++++++++++++++++
 .../mui-material/src/MenuItem/MenuItem.js     | 36 ++++++----
 2 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 docs/pages/experiments/material-ui/menu-item.tsx

diff --git a/docs/pages/experiments/material-ui/menu-item.tsx b/docs/pages/experiments/material-ui/menu-item.tsx
new file mode 100644
index 00000000000000..ce1ce9bfb2f7aa
--- /dev/null
+++ b/docs/pages/experiments/material-ui/menu-item.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import CssBaseline from '@mui/material/CssBaseline';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import {
+    Experimental_CssVarsProvider as CssVarsProvider, useColorScheme
+} from '@mui/material/styles';
+
+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',
+            },
+          }}
+        >
+          <MenuList>
+            <MenuItem>Profile</MenuItem>
+            <MenuItem>My account</MenuItem>
+            <MenuItem>Logout</MenuItem>
+          </MenuList>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/MenuItem/MenuItem.js b/packages/mui-material/src/MenuItem/MenuItem.js
index 6f51e958a9f13f..552064790c2cba 100644
--- a/packages/mui-material/src/MenuItem/MenuItem.js
+++ b/packages/mui-material/src/MenuItem/MenuItem.js
@@ -68,41 +68,49 @@ const MenuItemRoot = styled(ButtonBase, {
     paddingRight: 16,
   }),
   ...(ownerState.divider && {
-    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
     backgroundClip: 'padding-box',
   }),
   '&:hover': {
     textDecoration: 'none',
-    backgroundColor: theme.palette.action.hover,
+    backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent',
     },
   },
   [`&.${menuItemClasses.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),
     [`&.${menuItemClasses.focusVisible}`]: {
-      backgroundColor: alpha(
-        theme.palette.primary.main,
-        theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-      ),
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+        : alpha(
+            theme.palette.primary.main,
+            theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+          ),
     },
   },
   [`&.${menuItemClasses.selected}: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,
+        ),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      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),
     },
   },
   [`&.${menuItemClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus,
+    backgroundColor: (theme.vars || theme).palette.action.focus,
   },
   [`&.${menuItemClasses.disabled}`]: {
-    opacity: theme.palette.action.disabledOpacity,
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
   },
   [`& + .${dividerClasses.root}`]: {
     marginTop: theme.spacing(1),

From 17bf6016fa7296a15b2ec8c861b2b29e409bd7c2 Mon Sep 17 00:00:00 2001
From: Nghia Mai <nghia.mai@foodpanda.com>
Date: Mon, 2 May 2022 14:40:42 -0400
Subject: [PATCH 2/2] fix prettier

---
 docs/pages/experiments/material-ui/menu-item.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/pages/experiments/material-ui/menu-item.tsx b/docs/pages/experiments/material-ui/menu-item.tsx
index ce1ce9bfb2f7aa..061d2eea657eb2 100644
--- a/docs/pages/experiments/material-ui/menu-item.tsx
+++ b/docs/pages/experiments/material-ui/menu-item.tsx
@@ -9,7 +9,8 @@ import CssBaseline from '@mui/material/CssBaseline';
 import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import {
-    Experimental_CssVarsProvider as CssVarsProvider, useColorScheme
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
 } from '@mui/material/styles';
 
 const ColorSchemePicker = () => {