[SpeedDialAction] Add support for CSS variables

docs/pages/experiments/material-ui/speed-dial-action.tsx

@@ -0,0 +1,88 @@
+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 SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialIcon from '@mui/material/SpeedDialIcon';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
+import SaveIcon from '@mui/icons-material/Save';
+import PrintIcon from '@mui/icons-material/Print';
+import ShareIcon from '@mui/icons-material/Share';
+
+const actions = [
+  { icon: <FileCopyIcon />, name: 'Copy' },
+  { icon: <SaveIcon />, name: 'Save' },
+  { icon: <PrintIcon />, name: 'Print' },
+  { icon: <ShareIcon />, name: 'Share' },
+];
+
+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 SpeedDialActionCssVars() {
+  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={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
+            <SpeedDial
+              open
+              ariaLabel="SpeedDial basic example"
+              sx={{ position: 'absolute', bottom: 16, right: 16 }}
+              icon={<SpeedDialIcon />}
+            >
+              {actions.map((action) => (
+                <SpeedDialAction key={action.name} icon={action.icon} tooltipTitle={action.name} />
+              ))}
+            </SpeedDial>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

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

@@ -38,10 +38,12 @@ const SpeedDialActionFab = styled(Fab, {
   },
 })(({ theme, ownerState }) => ({
   margin: 8,
-  color: theme.palette.text.secondary,
-  backgroundColor: theme.palette.background.paper,
+  color: (theme.vars || theme).palette.text.secondary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   '&:hover': {
-    backgroundColor: emphasize(theme.palette.background.paper, 0.15),
+    backgroundColor: theme.vars
+      ? theme.vars.palette.SpeedDialAction.fabHoverBg
+      : emphasize(theme.palette.background.paper, 0.15),
   },
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter,
@@ -98,10 +100,10 @@ const SpeedDialActionStaticTooltipLabel = styled('span', {
 })(({ theme }) => ({
   position: 'absolute',
   ...theme.typography.body1,
-  backgroundColor: theme.palette.background.paper,
-  borderRadius: theme.shape.borderRadius,
-  boxShadow: theme.shadows[1],
-  color: theme.palette.text.secondary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  boxShadow: (theme.vars || theme).shadows[1],
+  color: (theme.vars || theme).palette.text.secondary,
   padding: '4px 16px',
   wordBreak: 'keep-all',
 }));

packages/mui-material/src/styles/createPalette.d.ts

@@ -164,6 +164,9 @@ export interface PaletteWithChannels {
   SnackbarContent: {
     bg: string;
   };
+  SpeedDialAction: {
+    fabHoverBg: string;
+  };
   StepConnector: {
     border: string;
   };

packages/mui-material/src/styles/experimental_extendTheme.js

@@ -86,6 +86,7 @@ export default function extendTheme(options = {}, ...args) {
       'Skeleton',
       'Slider',
       'SnackbarContent',
+      'SpeedDialAction',
       'StepConnector',
       'StepContent',
       'Switch',
@@ -114,6 +115,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
       setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
       setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
       setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
       setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
@@ -150,6 +152,7 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
       setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
       setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
       setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
       setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');