[ToggleButton] Add support for CSS variables

docs/pages/experiments/material-ui/toggle-button.tsx

@@ -0,0 +1,84 @@
+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 ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import AirlineSeatReclineNormalIcon from '@mui/icons-material/AirlineSeatReclineNormal';
+import AirlineSeatIndividualSuiteIcon from '@mui/icons-material/AirlineSeatIndividualSuite';
+import AirlineSeatReclineExtraIcon from '@mui/icons-material/AirlineSeatReclineExtra';
+
+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() {
+  const [selected, setSelected] = React.useState<string | null>('lying');
+
+  const handleChange = (event: React.MouseEvent<HTMLElement>, value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <ToggleButtonGroup value={selected} exclusive onChange={handleChange}>
+            <ToggleButton value="sitting">
+              <AirlineSeatReclineNormalIcon sx={{ fontSize: 40 }} />
+            </ToggleButton>
+            <ToggleButton value="lying">
+              <AirlineSeatReclineExtraIcon sx={{ fontSize: 40 }} />
+            </ToggleButton>
+            <ToggleButton value="sleeping" disabled>
+              <AirlineSeatIndividualSuiteIcon sx={{ fontSize: 40 }} />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

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

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { colorChannel } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '../styles';
 import ButtonBase from '../ButtonBase';
@@ -36,42 +37,58 @@ const ToggleButtonRoot = styled(ButtonBase, {
     return [styles.root, styles[`size${capitalize(ownerState.size)}`]];
   },
 })(({ theme, ownerState }) => {
-  const selectedColor =
+  let selectedColor =
     ownerState.color === 'standard'
       ? theme.palette.text.primary
       : theme.palette[ownerState.color].main;
+  const selectedColorChannel = colorChannel(selectedColor);
+  if (theme.vars) {
+    selectedColor =
+      ownerState.color === 'standard'
+        ? theme.vars.palette.text.primary
+        : theme.vars.palette[ownerState.color].main;
+  }
+
   return {
     ...theme.typography.button,
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 11,
-    border: `1px solid ${theme.palette.divider}`,
-    color: theme.palette.action.active,
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    color: (theme.vars || theme).palette.action.active,
     ...(ownerState.fullWidth && {
       width: '100%',
     }),
     [`&.${toggleButtonClasses.disabled}`]: {
-      color: theme.palette.action.disabled,
-      border: `1px solid ${theme.palette.action.disabledBackground}`,
+      color: (theme.vars || theme).palette.action.disabled,
+      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
     },
     '&:hover': {
       textDecoration: 'none',
       // Reset on mouse devices
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars
+        ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.hoverOpacity})`
+        : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
     [`&.${toggleButtonClasses.selected}`]: {
       color: selectedColor,
-      backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars
+        ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})`
+        : alpha(selectedColor, theme.palette.action.selectedOpacity),
       '&:hover': {
-        backgroundColor: alpha(
-          selectedColor,
-          theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-        ),
+        backgroundColor: theme.vars
+          ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+          : alpha(
+              selectedColor,
+              theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+            ),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+          backgroundColor: theme.vars
+            ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})`
+            : alpha(selectedColor, theme.palette.action.selectedOpacity),
         },
       },
     },