From 27a09c89c40d68527a92e38dbacf30a4ef2c0b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Wed, 4 May 2022 22:53:15 -0400
Subject: [PATCH] [StepLabel, StepIcon] Add support for CSS variables (#32609)

---
 docs/pages/experiments/material-ui/step.tsx   | 84 +++++++++++++++++++
 .../mui-material/src/StepIcon/StepIcon.js     | 10 +--
 .../mui-material/src/StepLabel/StepLabel.js   |  8 +-
 3 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 docs/pages/experiments/material-ui/step.tsx

diff --git a/docs/pages/experiments/material-ui/step.tsx b/docs/pages/experiments/material-ui/step.tsx
new file mode 100644
index 00000000000000..0a6aa190880c67
--- /dev/null
+++ b/docs/pages/experiments/material-ui/step.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 SettingsIcon from '@mui/icons-material/Settings';
+import { Step, StepIcon, StepLabel, Stepper } 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>
+  );
+};
+
+const steps = ['Step 1', 'Step 2', 'Step 3'];
+
+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 sx={{ width: '100%' }}>
+            <Stepper activeStep={1} alternativeLabel>
+              {steps.map((label) => (
+                <Step key={label}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+          </Box>
+          <Box sx={{ width: '100%' }}>
+            <Stepper activeStep={1} alternativeLabel>
+              {steps.map((label) => (
+                <Step key={label}>
+                  <StepLabel icon={<StepIcon icon={<SettingsIcon />} />}>{label}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/StepIcon/StepIcon.js b/packages/mui-material/src/StepIcon/StepIcon.js
index 1fcb913e1e55bf..3752294a6517f2 100644
--- a/packages/mui-material/src/StepIcon/StepIcon.js
+++ b/packages/mui-material/src/StepIcon/StepIcon.js
@@ -29,15 +29,15 @@ const StepIconRoot = styled(SvgIcon, {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest,
   }),
-  color: theme.palette.text.disabled,
+  color: (theme.vars || theme).palette.text.disabled,
   [`&.${stepIconClasses.completed}`]: {
-    color: theme.palette.primary.main,
+    color: (theme.vars || theme).palette.primary.main,
   },
   [`&.${stepIconClasses.active}`]: {
-    color: theme.palette.primary.main,
+    color: (theme.vars || theme).palette.primary.main,
   },
   [`&.${stepIconClasses.error}`]: {
-    color: theme.palette.error.main,
+    color: (theme.vars || theme).palette.error.main,
   },
 }));
 
@@ -46,7 +46,7 @@ const StepIconText = styled('text', {
   slot: 'Text',
   overridesResolver: (props, styles) => styles.text,
 })(({ theme }) => ({
-  fill: theme.palette.primary.contrastText,
+  fill: (theme.vars || theme).palette.primary.contrastText,
   fontSize: theme.typography.caption.fontSize,
   fontFamily: theme.typography.fontFamily,
 }));
diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js
index 211e57c8837fba..516a2ff5b8303a 100644
--- a/packages/mui-material/src/StepLabel/StepLabel.js
+++ b/packages/mui-material/src/StepLabel/StepLabel.js
@@ -69,11 +69,11 @@ const StepLabelLabel = styled('span', {
     duration: theme.transitions.duration.shortest,
   }),
   [`&.${stepLabelClasses.active}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500,
   },
   [`&.${stepLabelClasses.completed}`]: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500,
   },
   [`&.${stepLabelClasses.alternativeLabel}`]: {
@@ -81,7 +81,7 @@ const StepLabelLabel = styled('span', {
     marginTop: 16,
   },
   [`&.${stepLabelClasses.error}`]: {
-    color: theme.palette.error.main,
+    color: (theme.vars || theme).palette.error.main,
   },
 }));
 
@@ -104,7 +104,7 @@ const StepLabelLabelContainer = styled('span', {
   overridesResolver: (props, styles) => styles.labelContainer,
 })(({ theme }) => ({
   width: '100%',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
 }));
 
 const StepLabel = React.forwardRef(function StepLabel(inProps, ref) {