[Checkbox] Add support for CSS variables

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

@@ -0,0 +1,73 @@
+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 Checkbox from '@mui/material/Checkbox';
+import { FormGroup, FormControlLabel } 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',
+            },
+          }}
+        >
+          <Box>The component</Box>
+
+          <Box>
+            <FormGroup>
+              <FormControlLabel control={<Checkbox />} label="Default" />
+              <FormControlLabel control={<Checkbox defaultChecked />} label="Auto Checked" />
+              <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
+            </FormGroup>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

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

@@ -41,15 +41,17 @@ const CheckboxRoot = styled(SwitchBase, {
     ];
   },
 })(({ theme, ownerState }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   ...(!ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(
-        ownerState.color === 'default'
-          ? theme.palette.action.active
-          : theme.palette[ownerState.color].main,
-        theme.palette.action.hoverOpacity,
-      ),
+      backgroundColor: theme.vars
+        ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
+        : alpha(
+            ownerState.color === 'default'
+              ? theme.palette.action.active
+              : theme.palette[ownerState.color].main,
+            theme.palette.action.hoverOpacity,
+          ),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -58,10 +60,10 @@ const CheckboxRoot = styled(SwitchBase, {
   }),
   ...(ownerState.color !== 'default' && {
     [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-      color: theme.palette[ownerState.color].main,
+      color: (theme.vars || theme).palette[ownerState.color].main,
     },
     [`&.${checkboxClasses.disabled}`]: {
-      color: theme.palette.action.disabled,
+      color: (theme.vars || theme).palette.action.disabled,
     },
   }),
 }));