From 1875689bd415efa343bb8d70cdc0f55ddfc3e687 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 4 May 2022 15:39:23 +0530
Subject: [PATCH 1/2] feat(FormLabel): Add support for CSS variables

---
 packages/mui-material/src/FormLabel/FormLabel.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js
index 67944e5f3d18c5..6369be7a052abb 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.js
+++ b/packages/mui-material/src/FormLabel/FormLabel.js
@@ -38,19 +38,19 @@ export const FormLabelRoot = styled('label', {
     };
   },
 })(({ theme, ownerState }) => ({
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
   [`&.${formLabelClasses.focused}`]: {
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
   },
   [`&.${formLabelClasses.disabled}`]: {
-    color: theme.palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
   },
   [`&.${formLabelClasses.error}`]: {
-    color: theme.palette.error.main,
+    color: (theme.vars || theme).palette.error.main,
   },
 }));
 
@@ -60,7 +60,7 @@ const AsteriskComponent = styled('span', {
   overridesResolver: (props, styles) => styles.asterisk,
 })(({ theme }) => ({
   [`&.${formLabelClasses.error}`]: {
-    color: theme.palette.error.main,
+    color: (theme.vars || theme).palette.error.main,
   },
 }));
 

From 82c2c8bbf784bd6192fbe6f2704ef8a8abac7546 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 4 May 2022 15:39:50 +0530
Subject: [PATCH 2/2] docs: add CSS vars experimental docs for FormLabel

---
 .../experiments/material-ui/form-label.tsx    | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 docs/pages/experiments/material-ui/form-label.tsx

diff --git a/docs/pages/experiments/material-ui/form-label.tsx b/docs/pages/experiments/material-ui/form-label.tsx
new file mode 100644
index 00000000000000..b3566a1c9b5eee
--- /dev/null
+++ b/docs/pages/experiments/material-ui/form-label.tsx
@@ -0,0 +1,109 @@
+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 FormLabel from '@mui/material/FormLabel';
+import FormControl from '@mui/material/FormControl';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Checkbox from '@mui/material/Checkbox';
+
+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 [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: false,
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({
+      ...state,
+      [event.target.name]: event.target.checked,
+    });
+  };
+
+  const { gilad, jason, antoine } = state;
+  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box sx={{ display: 'flex' }}>
+          <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
+            <FormLabel component="legend">Assign responsibility</FormLabel>
+            <FormGroup>
+              <FormControlLabel
+                control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
+                label="Gilad Gray"
+              />
+              <FormControlLabel
+                control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
+                label="Jason Killian"
+              />
+              <FormControlLabel
+                control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
+                label="Antoine Llorca"
+              />
+            </FormGroup>
+            <FormHelperText>Be careful</FormHelperText>
+          </FormControl>
+          <FormControl required error={error} component="fieldset" sx={{ m: 3 }} variant="standard">
+            <FormLabel component="legend">Pick two</FormLabel>
+            <FormGroup>
+              <FormControlLabel
+                control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
+                label="Gilad Gray"
+              />
+              <FormControlLabel
+                control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
+                label="Jason Killian"
+              />
+              <FormControlLabel
+                control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
+                label="Antoine Llorca"
+              />
+            </FormGroup>
+            <FormHelperText>You can display an error</FormHelperText>
+          </FormControl>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}