[Avatar] Add support for CSS variables (#32499)

mui · Jun 17, 2022 · b9cfab2 · b9cfab2
1 parent d14be1c
commit b9cfab2
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx b/docs/pages/experiments/material-ui/css-variables-custom-theme.tsx
@@ -6,6 +6,7 @@ import {
 } from '@mui/material/styles';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
+import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Box from '@mui/material/Box';
@@ -121,6 +122,18 @@ export default function Page() {
           ))}
           <Input sx={overrideCssVariables} placeholder="custom" />
         </Box>
+        <Box sx={{ py: 5, maxWidth: { md: 1152, xl: 1536 }, mx: 'auto' }}>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+            <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+            <Avatar variant="rounded" alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+            <Avatar variant="square" alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+          </Box>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+            <Avatar>H</Avatar>
+            <Avatar variant="rounded">H</Avatar>
+            <Avatar variant="square">H</Avatar>
+          </Box>
+        </Box>
       </Box>
     </CssVarsProvider>
   );

diff --git a/docs/pages/experiments/material-ui/css-variables.tsx b/docs/pages/experiments/material-ui/css-variables.tsx
@@ -5,6 +5,7 @@ import {
 } from '@mui/material/styles';
 import Moon from '@mui/icons-material/DarkMode';
 import Sun from '@mui/icons-material/LightMode';
+import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import Input from '@mui/material/Input';
@@ -73,6 +74,19 @@ export default function Page() {
           ))}
         </Box>
       </Box>
+
+      <div>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+          <Avatar variant="rounded" alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+          <Avatar variant="square" alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        </Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
+          <Avatar>H</Avatar>
+          <Avatar variant="rounded">H</Avatar>
+          <Avatar variant="square">H</Avatar>
+        </Box>
+      </div>
     </CssVarsProvider>
   );
 }
diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js
@@ -46,15 +46,21 @@ const AvatarRoot = styled('div', {
   overflow: 'hidden',
   userSelect: 'none',
   ...(ownerState.variant === 'rounded' && {
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
   }),
   ...(ownerState.variant === 'square' && {
     borderRadius: 0,
   }),
   ...(ownerState.colorDefault && {
-    color: theme.palette.background.default,
-    backgroundColor:
-      theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
+    color: (theme.vars || theme).palette.background.default,
+    ...(theme.vars
+      ? {
+          backgroundColor: theme.vars.palette.Avatar.defaultBg,
+        }
+      : {
+          backgroundColor:
+            theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
+        }),
   }),
 }));
 

diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts
@@ -135,6 +135,9 @@ export interface PaletteWithChannels {
     darkBg: string;
     darkColor: string;
   };
+  Avatar: {
+    defaultBg: string;
+  };
   Chip: {
     defaultBorder: string;
     defaultAvatarColor: string;

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -80,6 +80,7 @@ export default function extendTheme(options = {}, ...args) {
     // assign component variables
     assignNode(palette, [
       'AppBar',
+      'Avatar',
       'Chip',
       'FilledInput',
       'LinearProgress',
@@ -94,6 +95,7 @@ export default function extendTheme(options = {}, ...args) {
     ]);
     if (key === 'light') {
       setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
       setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
       setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
       setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
@@ -130,6 +132,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
       setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
       setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
       setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
       setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
       setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');