From d87affaa8cc4cfeda35342c7a16adf09d911844b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Sun, 1 May 2022 23:13:48 -0400
Subject: [PATCH] [AvatarGroup] Add support for CSS variables (#32507)

---
 .../experiments/material-ui/avatar-group.tsx  | 97 +++++++++++++++++++
 .../src/AvatarGroup/AvatarGroup.js            |  4 +-
 2 files changed, 99 insertions(+), 2 deletions(-)
 create mode 100644 docs/pages/experiments/material-ui/avatar-group.tsx

diff --git a/docs/pages/experiments/material-ui/avatar-group.tsx b/docs/pages/experiments/material-ui/avatar-group.tsx
new file mode 100644
index 00000000000000..e3b80653cf789f
--- /dev/null
+++ b/docs/pages/experiments/material-ui/avatar-group.tsx
@@ -0,0 +1,97 @@
+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 { Avatar, AvatarGroup } 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 AvatarGroupCssVars() {
+  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={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+            <AvatarGroup>
+              <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+              <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+              <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+            </AvatarGroup>
+            <AvatarGroup variant="rounded">
+              <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+              <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+              <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+            </AvatarGroup>
+            <AvatarGroup variant="square">
+              <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+              <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+              <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+            </AvatarGroup>
+          </Box>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+            <AvatarGroup>
+              <Avatar>H</Avatar>
+              <Avatar>H</Avatar>
+              <Avatar>H</Avatar>
+            </AvatarGroup>
+            <AvatarGroup variant="rounded">
+              <Avatar variant="rounded">H</Avatar>
+              <Avatar variant="rounded">H</Avatar>
+              <Avatar variant="rounded">H</Avatar>
+            </AvatarGroup>
+            <AvatarGroup variant="square">
+              <Avatar variant="square">H</Avatar>
+              <Avatar variant="square">H</Avatar>
+              <Avatar variant="square">H</Avatar>
+            </AvatarGroup>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index 91bda6af680bcc..45a3b0bde884a5 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -34,7 +34,7 @@ const AvatarGroupRoot = styled('div', {
   }),
 })(({ theme }) => ({
   [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -50,7 +50,7 @@ const AvatarGroupAvatar = styled(Avatar, {
   slot: 'Avatar',
   overridesResolver: (props, styles) => styles.avatar,
 })(({ theme }) => ({
-  border: `2px solid ${theme.palette.background.default}`,
+  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
   boxSizing: 'content-box',
   marginLeft: -8,
   '&:last-child': {