[Alert] Add support for CSS vars

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

@@ -0,0 +1,75 @@
+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 { Alert } 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',
+            },
+          }}
+        >
+          <Alert variant="filled" severity="error">
+            This is an error alert — check it out!
+          </Alert>
+          <Alert variant="filled" severity="warning">
+            This is a warning alert — check it out!
+          </Alert>
+          <Alert variant="filled" severity="info">
+            This is an info alert — check it out!
+          </Alert>
+          <Alert variant="filled" severity="success">
+            This is a success alert — check it out!
+          </Alert>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

packages/mui-material/src/Alert/Alert.js

@@ -41,8 +41,8 @@ const AlertRoot = styled(Paper, {
     ];
   },
 })(({ theme, ownerState }) => {
-  const getColor = theme.palette.mode === 'light' ? darken : lighten;
-  const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
+  const getColor = (theme.vars || theme).palette.mode === 'light' ? darken : lighten;
+  const getBackgroundColor = (theme.vars || theme).palette.mode === 'light' ? lighten : darken;
   const color = ownerState.color || ownerState.severity;
 
   return {
@@ -52,28 +52,34 @@ const AlertRoot = styled(Paper, {
     padding: '6px 16px',
     ...(color &&
       ownerState.variant === 'standard' && {
-        color: getColor(theme.palette[color].light, 0.6),
-        backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
+        color: getColor((theme.vars || theme).palette[color].light, 0.6),
+        backgroundColor: getBackgroundColor((theme.vars || theme).palette[color].light, 0.9),
         [`& .${alertClasses.icon}`]: {
           color:
-            theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light,
+            (theme.vars || theme).palette.mode === 'dark'
+              ? (theme.vars || theme).palette[color].main
+              : (theme.vars || theme).palette[color].light,
         },
       }),
     ...(color &&
       ownerState.variant === 'outlined' && {
-        color: getColor(theme.palette[color].light, 0.6),
-        border: `1px solid ${theme.palette[color].light}`,
+        color: getColor((theme.vars || theme).palette[color].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
         [`& .${alertClasses.icon}`]: {
           color:
-            theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light,
+            (theme.vars || theme).palette.mode === 'dark'
+              ? (theme.vars || theme).palette[color].main
+              : (theme.vars || theme).palette[color].light,
         },
       }),
     ...(color &&
       ownerState.variant === 'filled' && {
         color: '#fff',
         fontWeight: theme.typography.fontWeightMedium,
         backgroundColor:
-          theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+          (theme.vars || theme).palette.mode === 'dark'
+            ? (theme.vars || theme).palette[color].dark
+            : (theme.vars || theme).palette[color].main,
       }),
   };
 });