From 0fc6c38a6ee662ead10766d7b275d14c1549e41c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 5 Apr 2024 10:46:20 +0200
Subject: [PATCH 1/7] Migrate SvgIcon to Pigment CSS

---
 packages/mui-material/src/SvgIcon/SvgIcon.js | 71 ++++++++++++++------
 1 file changed, 51 insertions(+), 20 deletions(-)

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index e99c51e720f9a9..8cd46201402c27 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
+
 const useUtilityClasses = (ownerState) => {
   const { color, fontSize, classes } = ownerState;
 
@@ -34,32 +35,60 @@ const SvgIconRoot = styled('svg', {
       styles[`fontSize${capitalize(ownerState.fontSize)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
     duration: theme.transitions?.duration?.shorter,
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem',
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color:
-    (theme.vars || theme).palette?.[ownerState.color]?.main ??
+  variants: [
+    {
+      props: (props) => !props.hasSvgAsChild,
+      style: {
+        // the <svg> will define the property that has `currentColor`
+        // for example heroicons uses fill="none" and stroke="currentColor"
+        fill: 'currentColor',
+      },
+    },
+    {
+      props: { fontSize: 'inherit' },
+      style: { fontSize: 'inherit' },
+    },
+    {
+      props: { fontSize: 'small' },
+      style: { fontSize: theme.typography?.pxToRem?.(20) || '1.25rem' },
+    },
+    {
+      props: { fontSize: 'medium' },
+      style: { fontSize: theme.typography?.pxToRem?.(24) || '1.5rem' },
+    },
+    {
+      props: { fontSize: 'large' },
+      style: { fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem' },
+    },
+    // TODO v5 deprecate color prop, v6 remove for sx
+    ...Object.entries(theme.palette)
+      .filter(([, value]) => value.main || value.action || value.disabled)
+      .map(([color]) => ({
+        props: { color },
+        style: { color: theme.palette?.[color]?.main },
+      })),
+    {
+      props: { color: 'action' },
+      style: { color: theme.palette?.action?.active },
+    },
+    {
+      props: { color: 'disabled' },
+      style: { color: theme.palette?.action?.disabled },
+    },
     {
-      action: (theme.vars || theme).palette?.action?.active,
-      disabled: (theme.vars || theme).palette?.action?.disabled,
-      inherit: undefined,
-    }[ownerState.color],
+      props: { color: 'inherit' },
+      style: { color: undefined },
+    },
+  ],
 }));
 
 const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
@@ -211,6 +240,8 @@ SvgIcon.propTypes /* remove-proptypes */ = {
   viewBox: PropTypes.string,
 };
 
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 
 export default SvgIcon;

From cac0b4ef0fb95fe06b98db8b9e971a7ddbcb8dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 5 Apr 2024 10:46:40 +0200
Subject: [PATCH 2/7] Generate Pigment CSS demos

---
 .../src/app/material-ui/icons/page.tsx        | 79 ++++++++++++++++++
 .../src/pages/material-ui/icons.tsx           | 80 +++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
 create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx

diff --git a/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
new file mode 100644
index 00000000000000..350724bdcd0697
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import CreateSvgIcon from '../../../../../../docs/data/material/components/icons/CreateSvgIcon';
+import FontAwesomeIcon from '../../../../../../docs/data/material/components/icons/FontAwesomeIcon';
+import FontAwesomeIconSize from '../../../../../../docs/data/material/components/icons/FontAwesomeIconSize';
+import FontAwesomeSvgIconDemo from '../../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo';
+import Icons from '../../../../../../docs/data/material/components/icons/Icons';
+import SvgIconChildren from '../../../../../../docs/data/material/components/icons/SvgIconChildren';
+import SvgIconsColor from '../../../../../../docs/data/material/components/icons/SvgIconsColor';
+import SvgIconsSize from '../../../../../../docs/data/material/components/icons/SvgIconsSize';
+import SvgMaterialIcons from '../../../../../../docs/data/material/components/icons/SvgMaterialIcons';
+import TwoToneIcons from '../../../../../../docs/data/material/components/icons/TwoToneIcons';
+
+export default function IconsPage() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Create Svg Icon</h2>
+        <div className="demo-container">
+          <CreateSvgIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon</h2>
+        <div className="demo-container">
+          <FontAwesomeIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon Size</h2>
+        <div className="demo-container">
+          <FontAwesomeIconSize />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Svg Icon Demo</h2>
+        <div className="demo-container">
+          <FontAwesomeSvgIconDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Icons</h2>
+        <div className="demo-container">
+          <Icons />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icon Children</h2>
+        <div className="demo-container">
+          <SvgIconChildren />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Color</h2>
+        <div className="demo-container">
+          <SvgIconsColor />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Size</h2>
+        <div className="demo-container">
+          <SvgIconsSize />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Material Icons</h2>
+        <div className="demo-container">
+          <SvgMaterialIcons />
+        </div>
+      </section>
+      <section>
+        <h2> Two Tone Icons</h2>
+        <div className="demo-container">
+          <TwoToneIcons />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
new file mode 100644
index 00000000000000..d9432b14bd46c8
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import CreateSvgIcon from '../../../../../docs/data/material/components/icons/CreateSvgIcon.tsx';
+import FontAwesomeIcon from '../../../../../docs/data/material/components/icons/FontAwesomeIcon.tsx';
+import FontAwesomeIconSize from '../../../../../docs/data/material/components/icons/FontAwesomeIconSize.tsx';
+import FontAwesomeSvgIconDemo from '../../../../../docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx';
+import Icons from '../../../../../docs/data/material/components/icons/Icons.tsx';
+import SvgIconChildren from '../../../../../docs/data/material/components/icons/SvgIconChildren.tsx';
+import SvgIconsColor from '../../../../../docs/data/material/components/icons/SvgIconsColor.tsx';
+import SvgIconsSize from '../../../../../docs/data/material/components/icons/SvgIconsSize.tsx';
+import SvgMaterialIcons from '../../../../../docs/data/material/components/icons/SvgMaterialIcons.tsx';
+import TwoToneIcons from '../../../../../docs/data/material/components/icons/TwoToneIcons.tsx';
+
+export default function IconsPage() {
+  return (
+    <MaterialUILayout>
+      <h1>Icons</h1>
+      <section>
+        <h2> Create Svg Icon</h2>
+        <div className="demo-container">
+          <CreateSvgIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon</h2>
+        <div className="demo-container">
+          <FontAwesomeIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Icon Size</h2>
+        <div className="demo-container">
+          <FontAwesomeIconSize />
+        </div>
+      </section>
+      <section>
+        <h2> Font Awesome Svg Icon Demo</h2>
+        <div className="demo-container">
+          <FontAwesomeSvgIconDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Icons</h2>
+        <div className="demo-container">
+          <Icons />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icon Children</h2>
+        <div className="demo-container">
+          <SvgIconChildren />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Color</h2>
+        <div className="demo-container">
+          <SvgIconsColor />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Icons Size</h2>
+        <div className="demo-container">
+          <SvgIconsSize />
+        </div>
+      </section>
+      <section>
+        <h2> Svg Material Icons</h2>
+        <div className="demo-container">
+          <SvgMaterialIcons />
+        </div>
+      </section>
+      <section>
+        <h2> Two Tone Icons</h2>
+        <div className="demo-container">
+          <TwoToneIcons />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}

From b060d546f315e8c0682050dad032ea44ac409bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 8 Apr 2024 16:15:42 +0200
Subject: [PATCH 3/7] Circumvent compile error using inline styles

---
 docs/data/material/components/icons/TwoToneIcons.js  | 2 +-
 docs/data/material/components/icons/TwoToneIcons.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js
index cc52d9c1a8fa67..f6fec4d546b409 100644
--- a/docs/data/material/components/icons/TwoToneIcons.js
+++ b/docs/data/material/components/icons/TwoToneIcons.js
@@ -12,8 +12,8 @@ export default function TwoToneIcons() {
 
   return (
     <Icon
-      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
       baseClassName="material-icons-two-tone"
+      style={isDarkMode ? { filter: 'invert(1)' } : undefined}
     >
       add_circle
     </Icon>
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/TwoToneIcons.tsx
index cc52d9c1a8fa67..f6fec4d546b409 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx
@@ -12,8 +12,8 @@ export default function TwoToneIcons() {
 
   return (
     <Icon
-      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
       baseClassName="material-icons-two-tone"
+      style={isDarkMode ? { filter: 'invert(1)' } : undefined}
     >
       add_circle
     </Icon>

From 09d13a2fe5be5562e66600230b84bf0d7ac283cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Mon, 8 Apr 2024 17:01:30 +0200
Subject: [PATCH 4/7] Generate TS demo preview

---
 docs/data/material/components/icons/TwoToneIcons.tsx.preview | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
index 82be925bbaaa31..d7e8f33863fbd8 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx.preview
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
@@ -1,6 +1,6 @@
 <Icon
-  sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
   baseClassName="material-icons-two-tone"
+  style={isDarkMode ? { filter: 'invert(1)' } : undefined}
 >
   add_circle
 </Icon>
\ No newline at end of file

From 469ef998cf7617d13b2891a02014bdfdfe1ab7d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 9 Apr 2024 07:29:12 +0200
Subject: [PATCH 5/7] Undo inline styles changes

---
 docs/data/material/components/icons/TwoToneIcons.js          | 2 +-
 docs/data/material/components/icons/TwoToneIcons.tsx         | 2 +-
 docs/data/material/components/icons/TwoToneIcons.tsx.preview | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js
index f6fec4d546b409..cc52d9c1a8fa67 100644
--- a/docs/data/material/components/icons/TwoToneIcons.js
+++ b/docs/data/material/components/icons/TwoToneIcons.js
@@ -12,8 +12,8 @@ export default function TwoToneIcons() {
 
   return (
     <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
       baseClassName="material-icons-two-tone"
-      style={isDarkMode ? { filter: 'invert(1)' } : undefined}
     >
       add_circle
     </Icon>
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/TwoToneIcons.tsx
index f6fec4d546b409..cc52d9c1a8fa67 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx
@@ -12,8 +12,8 @@ export default function TwoToneIcons() {
 
   return (
     <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
       baseClassName="material-icons-two-tone"
-      style={isDarkMode ? { filter: 'invert(1)' } : undefined}
     >
       add_circle
     </Icon>
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
index d7e8f33863fbd8..82be925bbaaa31 100644
--- a/docs/data/material/components/icons/TwoToneIcons.tsx.preview
+++ b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
@@ -1,6 +1,6 @@
 <Icon
+  sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
   baseClassName="material-icons-two-tone"
-  style={isDarkMode ? { filter: 'invert(1)' } : undefined}
 >
   add_circle
 </Icon>
\ No newline at end of file

From 4e66d18e4362e6358cf7da3d9308168d7e7b5977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Tue, 9 Apr 2024 12:24:27 +0200
Subject: [PATCH 6/7] Check for theme vars

---
 packages/mui-material/src/SvgIcon/SvgIcon.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index 8cd46201402c27..37774cfad0e027 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -42,7 +42,7 @@ const SvgIconRoot = styled('svg', {
   display: 'inline-block',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter,
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter,
   }),
   variants: [
     {
@@ -70,19 +70,19 @@ const SvgIconRoot = styled('svg', {
       style: { fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem' },
     },
     // TODO v5 deprecate color prop, v6 remove for sx
-    ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main || value.action || value.disabled)
+    ...Object.entries((theme.vars ?? theme).palette)
+      .filter(([, value]) => value.main)
       .map(([color]) => ({
         props: { color },
-        style: { color: theme.palette?.[color]?.main },
+        style: { color: (theme.vars ?? theme).palette?.[color]?.main },
       })),
     {
       props: { color: 'action' },
-      style: { color: theme.palette?.action?.active },
+      style: { color: (theme.vars ?? theme).palette?.action?.active },
     },
     {
       props: { color: 'disabled' },
-      style: { color: theme.palette?.action?.disabled },
+      style: { color: (theme.vars ?? theme).palette?.action?.disabled },
     },
     {
       props: { color: 'inherit' },

From d207897544f9bc225f79cfea8ebc4c5163585cf2 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 25 Apr 2024 16:24:27 +0700
Subject: [PATCH 7/7] remove TwoTone from demo

---
 .../src/app/material-ui/icons/page.tsx                     | 7 -------
 apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx  | 7 -------
 2 files changed, 14 deletions(-)

diff --git a/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
index 350724bdcd0697..a5a646c5635606 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/icons/page.tsx
@@ -9,7 +9,6 @@ import SvgIconChildren from '../../../../../../docs/data/material/components/ico
 import SvgIconsColor from '../../../../../../docs/data/material/components/icons/SvgIconsColor';
 import SvgIconsSize from '../../../../../../docs/data/material/components/icons/SvgIconsSize';
 import SvgMaterialIcons from '../../../../../../docs/data/material/components/icons/SvgMaterialIcons';
-import TwoToneIcons from '../../../../../../docs/data/material/components/icons/TwoToneIcons';
 
 export default function IconsPage() {
   return (
@@ -68,12 +67,6 @@ export default function IconsPage() {
           <SvgMaterialIcons />
         </div>
       </section>
-      <section>
-        <h2> Two Tone Icons</h2>
-        <div className="demo-container">
-          <TwoToneIcons />
-        </div>
-      </section>
     </React.Fragment>
   );
 }
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
index d9432b14bd46c8..0839fd022f0bc9 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/icons.tsx
@@ -9,7 +9,6 @@ import SvgIconChildren from '../../../../../docs/data/material/components/icons/
 import SvgIconsColor from '../../../../../docs/data/material/components/icons/SvgIconsColor.tsx';
 import SvgIconsSize from '../../../../../docs/data/material/components/icons/SvgIconsSize.tsx';
 import SvgMaterialIcons from '../../../../../docs/data/material/components/icons/SvgMaterialIcons.tsx';
-import TwoToneIcons from '../../../../../docs/data/material/components/icons/TwoToneIcons.tsx';
 
 export default function IconsPage() {
   return (
@@ -69,12 +68,6 @@ export default function IconsPage() {
           <SvgMaterialIcons />
         </div>
       </section>
-      <section>
-        <h2> Two Tone Icons</h2>
-        <div className="demo-container">
-          <TwoToneIcons />
-        </div>
-      </section>
     </MaterialUILayout>
   );
 }