From 0eb90ac9d542119f36b3ef30e4611a6d36be86bd Mon Sep 17 00:00:00 2001
From: kdichev <konstantin.dichev@gmail.com>
Date: Sat, 21 Sep 2024 18:08:12 +0300
Subject: [PATCH 1/4] add materia-pigment-css and remove pigment-css-react

---
 package-lock.json | 19 ++++++++++++++++++-
 package.json      |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55e43a4..bb99b54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@mui/material": "^6.1.1",
-        "@pigment-css/react": "^0.0.23",
+        "@mui/material-pigment-css": "^6.1.1",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18"
@@ -799,6 +799,23 @@
         }
       }
     },
+    "node_modules/@mui/material-pigment-css": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/material-pigment-css/-/material-pigment-css-6.1.1.tgz",
+      "integrity": "sha512-BfFGa5aWZygKC+wWaL0BPxwQyRelDuV6L5VW73zOdZJwpN2zzCiuosFpTX/JazH1TQC7BYaPN0XIggsOWBnQcw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.6",
+        "@mui/system": "6.1.1",
+        "@pigment-css/react": "0.0.23"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/package.json b/package.json
index 43d13c1..db97758 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@mui/material": "^6.1.1",
-    "@pigment-css/react": "^0.0.23",
+    "@mui/material-pigment-css": "^6.1.1",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18"

From 8a18013e7325ab3ad4b5c755d8611aa4f63c7d2f Mon Sep 17 00:00:00 2001
From: kdichev <konstantin.dichev@gmail.com>
Date: Sat, 21 Sep 2024 18:08:29 +0300
Subject: [PATCH 2/4] add transformLibraries and create theme

---
 next.config.mjs | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index 50b8398..7f94040 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,19 +1,16 @@
+import { createTheme } from "@mui/material";
 import { withPigment } from "@pigment-css/nextjs-plugin";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
 export default withPigment(nextConfig, {
-  theme: {
-    colors: {
-      primary: "tomato",
-      secondary: "cyan",
-    },
-    spacing: {
-      unit: 8,
-    },
+  transformLibraries: ["@mui/material"],
+  theme: createTheme({
+    palette: { primary: { main: "#ff6347" } },
+    spacing: 8,
     typography: {
       fontFamily: "sans-serif",
     },
-  },
+  }),
 });

From f45fcf02ebf00c45d8e8d91903cc150b79a15c73 Mon Sep 17 00:00:00 2001
From: kdichev <konstantin.dichev@gmail.com>
Date: Sat, 21 Sep 2024 18:09:17 +0300
Subject: [PATCH 3/4] import material-pigment-css-styles, remove
 pigment-css-react-styles

---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 00b4ad8..54cf2bd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import "@pigment-css/react/styles.css";
+import "@mui/material-pigment-css/styles.css";
 
 const RootLayout = async ({
   children,

From 820cc7cb7a26b0c78b22139ebe5a4dca15fa6bf1 Mon Sep 17 00:00:00 2001
From: kdichev <konstantin.dichev@gmail.com>
Date: Sat, 21 Sep 2024 18:09:50 +0300
Subject: [PATCH 4/4] import styled from material-pigment-css instead of
 pigment-css-react and fix theme usage

---
 src/app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a427312..e1d4326 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@mui/material";
-import { styled } from "@pigment-css/react";
+import { styled } from "@mui/material-pigment-css";
 
 const Heading = styled("h1")(({ theme }) => ({
-  color: theme.colors.primary,
-  fontSize: theme.spacing.unit * 4,
+  color: theme.palette.primary.main,
+  fontSize: theme.spacing(4),
   fontFamily: theme.typography.fontFamily,
 }));