Add CSS variables support for Material UI components

docs/data/material/experimental-api/css-variables/CssVariablesCustomization.js

@@ -17,9 +17,9 @@ const CustomButton = styled(Button)(({ theme }) => ({
 
 // Custom button using CSS variables
 const CssVarsCustomButton = styled(Button)({
-  '--md-palette-primary-main': '#FF0000',
-  '--md-palette-primary-dark': '#8B0000',
-  '--md-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values
+  '--mui-palette-primary-main': '#FF0000',
+  '--mui-palette-primary-dark': '#8B0000',
+  '--mui-palette-primary-mainChannel': colorChannel('#FF0000'), // necessary for calculating the alpha values
 });
 
 const useEnhancedEffect =

docs/pages/experiments/material-ui/app-bar.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+
+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',
+            },
+          }}
+        >
+          <AppBar position="static" color="default" enableColorOnDark>
+            <Toolbar>
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+                sx={{ mr: 2 }}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                News
+              </Typography>
+              <Button color="inherit">Login</Button>
+            </Toolbar>
+          </AppBar>
+          <AppBar position="static" enableColorOnDark>
+            <Toolbar>
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+                sx={{ mr: 2 }}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                News
+              </Typography>
+              <Button color="inherit">Login</Button>
+            </Toolbar>
+          </AppBar>
+          <AppBar position="static" color="primary" elevation={12}>
+            <Toolbar>
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+                sx={{ mr: 2 }}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                News
+              </Typography>
+              <Button color="inherit">Login</Button>
+            </Toolbar>
+          </AppBar>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

docs/pages/experiments/material-ui/chip.tsx

@@ -0,0 +1,78 @@
+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 Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+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',
+            },
+          }}
+        >
+          <Stack spacing={1} alignItems="center">
+            <Stack direction="row" spacing={1}>
+              <Chip label="primary" color="primary" />
+              <Chip label="success" color="success" />
+            </Stack>
+            <Stack direction="row" spacing={1}>
+              <Chip label="primary" color="primary" variant="outlined" />
+              <Chip label="success" color="success" variant="outlined" />
+            </Stack>
+            <Stack direction="row" spacing={1}>
+              <Chip label="Deletable" onDelete={() => {}} />
+              <Chip label="Deletable" variant="outlined" onDelete={() => {}} />
+            </Stack>
+          </Stack>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

docs/pages/experiments/material-ui/css-variables-custom-theme.tsx

@@ -15,9 +15,9 @@ import { teal, deepOrange, orange, cyan } from '@mui/material/colors';
 const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success'];
 
 const overrideCssVariables = {
-  '--md-palette-primary-main': '#FF0000',
-  '--md-palette-primary-mainChannel': '255 0 0',
-  '--md-palette-primary-dark': '#8b0000',
+  '--mui-palette-primary-main': '#FF0000',
+  '--mui-palette-primary-mainChannel': '255 0 0',
+  '--mui-palette-primary-dark': '#8b0000',
 };
 
 const ColorSchemePicker = () => {

docs/pages/experiments/material-ui/filled-input.tsx

@@ -0,0 +1,72 @@
+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 FilledInput from '@mui/material/FilledInput';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+
+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',
+            },
+          }}
+        >
+          <FilledInput placeholder="Placeholder" />
+          <FilledInput placeholder="Placeholder" color="secondary" />
+          <FilledInput placeholder="Placeholder" disabled />
+          <FilledInput placeholder="Placeholder" error />
+          <OutlinedInput placeholder="Placeholder" />
+          <OutlinedInput placeholder="Placeholder" color="secondary" />
+          <OutlinedInput placeholder="Placeholder" disabled />
+          <OutlinedInput placeholder="Placeholder" error />
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

docs/pages/experiments/material-ui/linear-progress.tsx

@@ -0,0 +1,72 @@
+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 Stack from '@mui/material/Stack';
+import LinearProgress from '@mui/material/LinearProgress';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+
+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',
+            },
+          }}
+        >
+          <Stack sx={{ width: '100%', color: 'grey.500' }} spacing={2}>
+            <LinearProgress />
+            <LinearProgress color="secondary" />
+            <LinearProgress color="success" />
+            <LinearProgress color="error" />
+            <LinearProgress color="warning" />
+            <LinearProgress color="inherit" />
+          </Stack>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}