From 054401c31e4a8906dc47c1ceddbd5748fe9393eb Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 10 Oct 2024 14:59:59 +0700
Subject: [PATCH] make the palette always return new light and dark

---
 .../mui-material/src/styles/createPalette.js  | 138 +++++++++---------
 .../src/styles/createPalette.test.js          |  15 +-
 .../src/styles/createTheme.test.js            |  38 +++++
 3 files changed, 125 insertions(+), 66 deletions(-)

diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js
index d3c47d9dfa9b32..7f357a8adffe13 100644
--- a/packages/mui-material/src/styles/createPalette.js
+++ b/packages/mui-material/src/styles/createPalette.js
@@ -9,71 +9,79 @@ import blue from '../colors/blue';
 import lightBlue from '../colors/lightBlue';
 import green from '../colors/green';
 
-export const light = {
-  // The colors used to style the text.
-  text: {
-    // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
-    // Secondary text.
-    secondary: 'rgba(0, 0, 0, 0.6)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)',
-  },
-  // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
-  // The background colors used to style the surfaces.
-  // Consistency between these values is important.
-  background: {
-    paper: common.white,
-    default: common.white,
-  },
-  // The colors used to style the action elements.
-  action: {
-    // The color of an active action like an icon button.
-    active: 'rgba(0, 0, 0, 0.54)',
-    // The color of an hovered action.
-    hover: 'rgba(0, 0, 0, 0.04)',
-    hoverOpacity: 0.04,
-    // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.08)',
-    selectedOpacity: 0.08,
-    // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
-    // The background color of a disabled action.
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12,
-  },
-};
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: 'rgba(0, 0, 0, 0.87)',
+      // Secondary text.
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      // Disabled text have even lower visual prominence.
+      disabled: 'rgba(0, 0, 0, 0.38)',
+    },
+    // The color used to divide different elements.
+    divider: 'rgba(0, 0, 0, 0.12)',
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: common.white,
+      default: common.white,
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: 'rgba(0, 0, 0, 0.54)',
+      // The color of an hovered action.
+      hover: 'rgba(0, 0, 0, 0.04)',
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: 'rgba(0, 0, 0, 0.08)',
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: 'rgba(0, 0, 0, 0.26)',
+      // The background color of a disabled action.
+      disabledBackground: 'rgba(0, 0, 0, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(0, 0, 0, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12,
+    },
+  };
+}
+
+export const light = getLight();
+
+function getDark() {
+  return {
+    text: {
+      primary: common.white,
+      secondary: 'rgba(255, 255, 255, 0.7)',
+      disabled: 'rgba(255, 255, 255, 0.5)',
+      icon: 'rgba(255, 255, 255, 0.5)',
+    },
+    divider: 'rgba(255, 255, 255, 0.12)',
+    background: {
+      paper: '#121212',
+      default: '#121212',
+    },
+    action: {
+      active: common.white,
+      hover: 'rgba(255, 255, 255, 0.08)',
+      hoverOpacity: 0.08,
+      selected: 'rgba(255, 255, 255, 0.16)',
+      selectedOpacity: 0.16,
+      disabled: 'rgba(255, 255, 255, 0.3)',
+      disabledBackground: 'rgba(255, 255, 255, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(255, 255, 255, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24,
+    },
+  };
+}
 
-export const dark = {
-  text: {
-    primary: common.white,
-    secondary: 'rgba(255, 255, 255, 0.7)',
-    disabled: 'rgba(255, 255, 255, 0.5)',
-    icon: 'rgba(255, 255, 255, 0.5)',
-  },
-  divider: 'rgba(255, 255, 255, 0.12)',
-  background: {
-    paper: '#121212',
-    default: '#121212',
-  },
-  action: {
-    active: common.white,
-    hover: 'rgba(255, 255, 255, 0.08)',
-    hoverOpacity: 0.08,
-    selected: 'rgba(255, 255, 255, 0.16)',
-    selectedOpacity: 0.16,
-    disabled: 'rgba(255, 255, 255, 0.3)',
-    disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(255, 255, 255, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24,
-  },
-};
+export const dark = getDark();
 
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
@@ -256,7 +264,7 @@ export default function createPalette(palette) {
     return color;
   };
 
-  const modes = { dark, light };
+  const modes = { dark: getDark(), light: getLight() };
 
   if (process.env.NODE_ENV !== 'production') {
     if (!modes[mode]) {
diff --git a/packages/mui-material/src/styles/createPalette.test.js b/packages/mui-material/src/styles/createPalette.test.js
index 16c7cfaa4c0de8..7d427a4c5be3c3 100644
--- a/packages/mui-material/src/styles/createPalette.test.js
+++ b/packages/mui-material/src/styles/createPalette.test.js
@@ -91,7 +91,20 @@ describe('createPalette()', () => {
     expect(palette.secondary.main, 'should use purple as the default secondary color').to.equal(
       purple[200],
     );
-    expect(palette.text, 'should use dark theme text').to.equal(dark.text);
+    expect(palette.text, 'should use dark theme text').to.deep.equal(dark.text);
+  });
+
+  it('should create independent object', () => {
+    const palette1 = createPalette({});
+    const palette2 = createPalette({});
+
+    expect(palette1.background.default).to.equal('#fff');
+    expect(palette2.background.default).to.equal('#fff');
+
+    palette1.background.default = '#000';
+
+    expect(palette1.background.default).to.equal('#000');
+    expect(palette2.background.default).to.equal('#fff');
   });
 
   describe('augmentColor', () => {
diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js
index d30d691418e0c0..26ff78e849e899 100644
--- a/packages/mui-material/src/styles/createTheme.test.js
+++ b/packages/mui-material/src/styles/createTheme.test.js
@@ -523,4 +523,42 @@ describe('createTheme', () => {
       );
     }
   });
+
+  it('should create a new object', () => {
+    const defaultTheme = createTheme({
+      cssVariables: {
+        colorSchemeSelector: 'data-mui-color-scheme',
+      },
+      colorSchemes: { dark: true },
+    });
+
+    expect(
+      defaultTheme.generateStyleSheets()[2]['[data-mui-color-scheme="dark"]'][
+        '--mui-palette-background-defaultChannel'
+      ],
+    ).to.equal('18 18 18');
+
+    const theme = createTheme({
+      cssVariables: {
+        colorSchemeSelector: 'data-mui-color-scheme',
+        cssVarPrefix: 'template',
+      },
+      colorSchemes: {
+        dark: {
+          palette: {
+            background: {
+              default: 'hsl(220, 35%, 3%)',
+              paper: 'hsl(220, 30%, 7%)',
+            },
+          },
+        },
+      },
+    });
+
+    expect(
+      theme.generateStyleSheets()[2]['[data-mui-color-scheme="dark"]'][
+        '--template-palette-background-defaultChannel'
+      ],
+    ).to.equal('5 7 10');
+  });
 });