From 75bdc2c5905a5430dd0ef64f390019e07a626d2e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 17 Nov 2022 10:30:39 +0700
Subject: [PATCH 1/4] don't throw error

---
 .../src/styles/experimental_extendTheme.js    | 215 ++++++++++--------
 .../styles/experimental_extendTheme.test.js   |  16 ++
 2 files changed, 136 insertions(+), 95 deletions(-)

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 14ad3990b18de0..ed54c71c6c21b1 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -27,7 +27,16 @@ function assignNode(obj, keys) {
 }
 
 function setColor(obj, key, defaultValue) {
-  obj[key] = obj[key] || defaultValue;
+  if (typeof defaultValue === 'function') {
+    try {
+      const token = defaultValue();
+      obj[key] = obj[key] || token;
+    } catch (error) {
+      // ignore error: this could happen if the color manipulators cannot parse the value.
+    }
+  } else {
+    obj[key] = obj[key] || defaultValue;
+  }
 }
 
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
@@ -108,30 +117,30 @@ export default function extendTheme(options = {}, ...args) {
       'Tooltip',
     ]);
     if (key === 'light') {
-      setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', () => darken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', () => darken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', () => darken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', () => darken(palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
       setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
-      setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
-      setColor(
-        palette.Alert,
-        'successFilledColor',
+      setColor(palette.Alert, 'errorFilledColor', () =>
+        lightPalette.getContrastText(palette.error.main),
+      );
+      setColor(palette.Alert, 'infoFilledColor', () =>
+        lightPalette.getContrastText(palette.info.main),
+      );
+      setColor(palette.Alert, 'successFilledColor', () =>
         lightPalette.getContrastText(palette.success.main),
       );
-      setColor(
-        palette.Alert,
-        'warningFilledColor',
+      setColor(palette.Alert, 'warningFilledColor', () =>
         lightPalette.getContrastText(palette.warning.main),
       );
-      setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', () => lighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', () => lighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', () => lighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', () => lighten(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
@@ -144,64 +153,71 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+      setColor(palette.LinearProgress, 'primaryBg', () => lighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', () => lighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', () => lighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', () => lighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', () => lighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', () => lighten(palette.warning.main, 0.62));
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      setColor(palette.Slider, 'primaryTrack', () => lighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', () => lighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', () => lighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', () => lighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', () => lighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', () => lighten(palette.warning.main, 0.62));
+      let snackbarContentBackground;
+      try {
+        snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      } catch (error) {
+        // ignore error
+      }
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(
-        palette.SnackbarContent,
-        'color',
+      setColor(palette.SnackbarContent, 'color', () =>
         lightPalette.getContrastText(snackbarContentBackground),
       );
-      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', () =>
+        emphasize(palette.background.paper, 0.15),
+      );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', () => lighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', () =>
+        lighten(palette.secondary.main, 0.62),
+      );
+      setColor(palette.Switch, 'errorDisabledColor', () => lighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', () => lighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', () => lighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', () => lighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', () => lighten(alpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', () => alpha(palette.grey[700], 0.92));
     } else {
-      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', () => lighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', () => lighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', () => lighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', () => lighten(palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
       setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
-      setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
-      setColor(
-        palette.Alert,
-        'successFilledColor',
+      setColor(palette.Alert, 'errorFilledColor', () =>
+        darkPalette.getContrastText(palette.error.dark),
+      );
+      setColor(palette.Alert, 'infoFilledColor', () =>
+        darkPalette.getContrastText(palette.info.dark),
+      );
+      setColor(palette.Alert, 'successFilledColor', () =>
         darkPalette.getContrastText(palette.success.dark),
       );
-      setColor(
-        palette.Alert,
-        'warningFilledColor',
+      setColor(palette.Alert, 'warningFilledColor', () =>
         darkPalette.getContrastText(palette.warning.dark),
       );
-      setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', () => darken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', () => darken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', () => darken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', () => darken(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -216,79 +232,88 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+      setColor(palette.LinearProgress, 'primaryBg', () => darken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', () => darken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', () => darken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', () => darken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', () => darken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', () => darken(palette.warning.main, 0.5));
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
-      const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      setColor(palette.Slider, 'primaryTrack', () => darken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', () => darken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', () => darken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', () => darken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', () => darken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', () => darken(palette.warning.main, 0.5));
+      let snackbarContentBackground;
+      try {
+        snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      } catch (error) {
+        // ignore error
+      }
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(
-        palette.SnackbarContent,
-        'color',
+      setColor(palette.SnackbarContent, 'color', () =>
         darkPalette.getContrastText(snackbarContentBackground),
       );
-      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', () =>
+        emphasize(palette.background.paper, 0.15),
+      );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', () => darken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', () =>
+        darken(palette.secondary.main, 0.55),
+      );
+      setColor(palette.Switch, 'errorDisabledColor', () => darken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', () => darken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', () => darken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', () => darken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', () => darken(alpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', () => alpha(palette.grey[700], 0.92));
     }
 
-    palette.background.defaultChannel = colorChannel(palette.background.default); // MUI X - DataGrid needs this token.
+    setColor(palette.background, 'defaultChannel', () => colorChannel(palette.background.default)); // MUI X - DataGrid needs this token.
 
-    palette.common.backgroundChannel = colorChannel(palette.common.background);
-    palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
+    setColor(palette.common, 'backgroundChannel', () => colorChannel(palette.common.background));
+    setColor(palette.common, 'onBackgroundChannel', () =>
+      colorChannel(palette.common.onBackground),
+    );
 
-    palette.dividerChannel = colorChannel(palette.divider);
+    setColor(palette, 'dividerChannel', () => colorChannel(palette.divider));
 
     Object.keys(palette).forEach((color) => {
       const colors = palette[color];
 
       // Color palettes: primary, secondary, error, info, success, and warning
       if (colors.main) {
-        palette[color].mainChannel = colorChannel(colors.main);
+        setColor(palette[color], 'mainChannel', () => colorChannel(colors.main));
       }
       if (colors.light) {
-        palette[color].lightChannel = colorChannel(colors.light);
+        setColor(palette[color], 'lightChannel', () => colorChannel(colors.light));
       }
       if (colors.dark) {
-        palette[color].darkChannel = colorChannel(colors.dark);
+        setColor(palette[color], 'darkChannel', () => colorChannel(colors.dark));
       }
       if (colors.contrastText) {
-        palette[color].contrastTextChannel = colorChannel(colors.contrastText);
+        setColor(palette[color], 'contrastTextChannel', () => colorChannel(colors.contrastText));
       }
 
       // Text colors: text.primary, text.secondary
       if (colors.primary) {
-        palette[color].primaryChannel = colorChannel(colors.primary);
+        setColor(palette[color], 'primaryChannel', () => colorChannel(colors.primary));
       }
       if (colors.secondary) {
-        palette[color].secondaryChannel = colorChannel(colors.secondary);
+        setColor(palette[color], 'secondaryChannel', () => colorChannel(colors.secondary));
       }
 
       // Action colors: action.active, action.selected
       if (colors.active) {
-        palette[color].activeChannel = colorChannel(colors.active);
+        setColor(palette[color], 'activeChannel', () => colorChannel(colors.active));
       }
       if (colors.selected) {
-        palette[color].selectedChannel = colorChannel(colors.selected);
+        setColor(palette[color], 'selectedChannel', () => colorChannel(colors.selected));
       }
     });
   });
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
index a92d9fead8fffa..07eddc3b2a2207 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.test.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -409,4 +409,20 @@ describe('experimental_extendTheme', () => {
       expect(theme.cssVarPrefix).to.equal('foo');
     });
   });
+
+  it('should not break if the value cannot be parsed by color manipulators', () => {
+    expect(() =>
+      extendTheme({
+        colorSchemes: {
+          light: {
+            palette: {
+              custom: {
+                main: 'green',
+              },
+            },
+          },
+        },
+      }),
+    ).not.to.throw();
+  });
 });

From 81e757f63171f69c59c9951ec5dc4d77f4b95316 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 22 Nov 2022 11:38:54 +0700
Subject: [PATCH 2/4] update logic

---
 .../src/styles/experimental_extendTheme.js    | 571 +++++++++++++-----
 .../styles/experimental_extendTheme.test.js   |  56 +-
 2 files changed, 480 insertions(+), 147 deletions(-)

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 09c282003b8b82..a8f834ed8d6b94 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -27,18 +27,33 @@ function assignNode(obj, keys) {
 }
 
 function setColor(obj, key, defaultValue) {
-  if (typeof defaultValue === 'function') {
-    try {
-      const token = defaultValue();
-      obj[key] = obj[key] || token;
-    } catch (error) {
-      // ignore error: this could happen if the color manipulators cannot parse the value.
-    }
-  } else {
-    obj[key] = obj[key] || defaultValue;
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
   }
 }
 
+const warnDev = (key, fn) => {
+  try {
+    return fn();
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `MUI: The value of \`${key}\` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().`,
+      );
+    }
+  }
+  return undefined;
+};
+
+const silent = (fn) => {
+  try {
+    return fn();
+  } catch (error) {
+    // ignore error
+  }
+  return undefined;
+};
+
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 
 export default function extendTheme(options = {}, ...args) {
@@ -117,30 +132,70 @@ export default function extendTheme(options = {}, ...args) {
       'Tooltip',
     ]);
     if (key === 'light') {
-      setColor(palette.Alert, 'errorColor', () => darken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', () => darken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', () => darken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', () => darken(palette.warning.light, 0.6));
+      setColor(
+        palette.Alert,
+        'errorColor',
+        silent(() => darken(palette.error.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'infoColor',
+        silent(() => darken(palette.info.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'successColor',
+        silent(() => darken(palette.success.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'warningColor',
+        silent(() => darken(palette.warning.light, 0.6)),
+      );
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
       setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', () =>
-        lightPalette.getContrastText(palette.error.main),
+      setColor(
+        palette.Alert,
+        'errorFilledColor',
+        silent(() => lightPalette.getContrastText(palette.error.main)),
+      );
+      setColor(
+        palette.Alert,
+        'infoFilledColor',
+        silent(() => lightPalette.getContrastText(palette.info.main)),
+      );
+      setColor(
+        palette.Alert,
+        'successFilledColor',
+        silent(() => lightPalette.getContrastText(palette.success.main)),
+      );
+      setColor(
+        palette.Alert,
+        'warningFilledColor',
+        silent(() => lightPalette.getContrastText(palette.warning.main)),
+      );
+      setColor(
+        palette.Alert,
+        'errorStandardBg',
+        silent(() => lighten(palette.error.light, 0.9)),
       );
-      setColor(palette.Alert, 'infoFilledColor', () =>
-        lightPalette.getContrastText(palette.info.main),
+      setColor(
+        palette.Alert,
+        'infoStandardBg',
+        silent(() => lighten(palette.info.light, 0.9)),
       );
-      setColor(palette.Alert, 'successFilledColor', () =>
-        lightPalette.getContrastText(palette.success.main),
+      setColor(
+        palette.Alert,
+        'successStandardBg',
+        silent(() => lighten(palette.success.light, 0.9)),
       );
-      setColor(palette.Alert, 'warningFilledColor', () =>
-        lightPalette.getContrastText(palette.warning.main),
+      setColor(
+        palette.Alert,
+        'warningStandardBg',
+        silent(() => lighten(palette.warning.light, 0.9)),
       );
-      setColor(palette.Alert, 'errorStandardBg', () => lighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', () => lighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', () => lighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', () => lighten(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
@@ -153,71 +208,188 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', () => lighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', () => lighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', () => lighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', () => lighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', () => lighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', () => lighten(palette.warning.main, 0.62));
+      setColor(
+        palette.LinearProgress,
+        'primaryBg',
+        silent(() => lighten(palette.primary.main, 0.62)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'secondaryBg',
+        silent(() => lighten(palette.secondary.main, 0.62)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'errorBg',
+        silent(() => lighten(palette.error.main, 0.62)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'infoBg',
+        silent(() => lighten(palette.info.main, 0.62)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'successBg',
+        silent(() => lighten(palette.success.main, 0.62)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'warningBg',
+        silent(() => lighten(palette.warning.main, 0.62)),
+      );
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', () => lighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', () => lighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', () => lighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', () => lighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', () => lighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', () => lighten(palette.warning.main, 0.62));
-      let snackbarContentBackground;
-      try {
-        snackbarContentBackground = emphasize(palette.background.default, 0.8);
-      } catch (error) {
-        // ignore error
-      }
+      setColor(
+        palette.Slider,
+        'primaryTrack',
+        silent(() => lighten(palette.primary.main, 0.62)),
+      );
+      setColor(
+        palette.Slider,
+        'secondaryTrack',
+        silent(() => lighten(palette.secondary.main, 0.62)),
+      );
+      setColor(
+        palette.Slider,
+        'errorTrack',
+        silent(() => lighten(palette.error.main, 0.62)),
+      );
+      setColor(
+        palette.Slider,
+        'infoTrack',
+        silent(() => lighten(palette.info.main, 0.62)),
+      );
+      setColor(
+        palette.Slider,
+        'successTrack',
+        silent(() => lighten(palette.success.main, 0.62)),
+      );
+      setColor(
+        palette.Slider,
+        'warningTrack',
+        silent(() => lighten(palette.warning.main, 0.62)),
+      );
+      const snackbarContentBackground = silent(() => emphasize(palette.background.default, 0.8));
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', () =>
-        lightPalette.getContrastText(snackbarContentBackground),
+      setColor(
+        palette.SnackbarContent,
+        'color',
+        silent(() => lightPalette.getContrastText(snackbarContentBackground)),
       );
-      setColor(palette.SpeedDialAction, 'fabHoverBg', () =>
-        emphasize(palette.background.paper, 0.15),
+      setColor(
+        palette.SpeedDialAction,
+        'fabHoverBg',
+        silent(() => emphasize(palette.background.paper, 0.15)),
       );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', () => lighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', () =>
-        lighten(palette.secondary.main, 0.62),
-      );
-      setColor(palette.Switch, 'errorDisabledColor', () => lighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', () => lighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', () => lighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', () => lighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', () => lighten(alpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', () => alpha(palette.grey[700], 0.92));
+      setColor(
+        palette.Switch,
+        'primaryDisabledColor',
+        silent(() => lighten(palette.primary.main, 0.62)),
+      );
+      setColor(
+        palette.Switch,
+        'secondaryDisabledColor',
+        silent(() => lighten(palette.secondary.main, 0.62)),
+      );
+      setColor(
+        palette.Switch,
+        'errorDisabledColor',
+        silent(() => lighten(palette.error.main, 0.62)),
+      );
+      setColor(
+        palette.Switch,
+        'infoDisabledColor',
+        silent(() => lighten(palette.info.main, 0.62)),
+      );
+      setColor(
+        palette.Switch,
+        'successDisabledColor',
+        silent(() => lighten(palette.success.main, 0.62)),
+      );
+      setColor(
+        palette.Switch,
+        'warningDisabledColor',
+        silent(() => lighten(palette.warning.main, 0.62)),
+      );
+      setColor(
+        palette.TableCell,
+        'border',
+        silent(() => lighten(alpha(palette.divider, 1), 0.88)),
+      );
+      setColor(
+        palette.Tooltip,
+        'bg',
+        silent(() => alpha(palette.grey[700], 0.92)),
+      );
     } else {
-      setColor(palette.Alert, 'errorColor', () => lighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', () => lighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', () => lighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', () => lighten(palette.warning.light, 0.6));
+      setColor(
+        palette.Alert,
+        'errorColor',
+        silent(() => lighten(palette.error.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'infoColor',
+        silent(() => lighten(palette.info.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'successColor',
+        silent(() => lighten(palette.success.light, 0.6)),
+      );
+      setColor(
+        palette.Alert,
+        'warningColor',
+        silent(() => lighten(palette.warning.light, 0.6)),
+      );
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
       setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', () =>
-        darkPalette.getContrastText(palette.error.dark),
+      setColor(
+        palette.Alert,
+        'errorFilledColor',
+        silent(() => darkPalette.getContrastText(palette.error.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'infoFilledColor',
+        silent(() => darkPalette.getContrastText(palette.info.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'successFilledColor',
+        silent(() => darkPalette.getContrastText(palette.success.dark)),
+      );
+      setColor(
+        palette.Alert,
+        'warningFilledColor',
+        silent(() => darkPalette.getContrastText(palette.warning.dark)),
       );
-      setColor(palette.Alert, 'infoFilledColor', () =>
-        darkPalette.getContrastText(palette.info.dark),
+      setColor(
+        palette.Alert,
+        'errorStandardBg',
+        silent(() => darken(palette.error.light, 0.9)),
       );
-      setColor(palette.Alert, 'successFilledColor', () =>
-        darkPalette.getContrastText(palette.success.dark),
+      setColor(
+        palette.Alert,
+        'infoStandardBg',
+        silent(() => darken(palette.info.light, 0.9)),
       );
-      setColor(palette.Alert, 'warningFilledColor', () =>
-        darkPalette.getContrastText(palette.warning.dark),
+      setColor(
+        palette.Alert,
+        'successStandardBg',
+        silent(() => darken(palette.success.light, 0.9)),
+      );
+      setColor(
+        palette.Alert,
+        'warningStandardBg',
+        silent(() => darken(palette.warning.light, 0.9)),
       );
-      setColor(palette.Alert, 'errorStandardBg', () => darken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', () => darken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', () => darken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', () => darken(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -232,88 +404,215 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', () => darken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', () => darken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', () => darken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', () => darken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', () => darken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', () => darken(palette.warning.main, 0.5));
+      setColor(
+        palette.LinearProgress,
+        'primaryBg',
+        silent(() => darken(palette.primary.main, 0.5)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'secondaryBg',
+        silent(() => darken(palette.secondary.main, 0.5)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'errorBg',
+        silent(() => darken(palette.error.main, 0.5)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'infoBg',
+        silent(() => darken(palette.info.main, 0.5)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'successBg',
+        silent(() => darken(palette.success.main, 0.5)),
+      );
+      setColor(
+        palette.LinearProgress,
+        'warningBg',
+        silent(() => darken(palette.warning.main, 0.5)),
+      );
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', () => darken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', () => darken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', () => darken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', () => darken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', () => darken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', () => darken(palette.warning.main, 0.5));
-      let snackbarContentBackground;
-      try {
-        snackbarContentBackground = emphasize(palette.background.default, 0.98);
-      } catch (error) {
-        // ignore error
-      }
+      setColor(
+        palette.Slider,
+        'primaryTrack',
+        silent(() => darken(palette.primary.main, 0.5)),
+      );
+      setColor(
+        palette.Slider,
+        'secondaryTrack',
+        silent(() => darken(palette.secondary.main, 0.5)),
+      );
+      setColor(
+        palette.Slider,
+        'errorTrack',
+        silent(() => darken(palette.error.main, 0.5)),
+      );
+      setColor(
+        palette.Slider,
+        'infoTrack',
+        silent(() => darken(palette.info.main, 0.5)),
+      );
+      setColor(
+        palette.Slider,
+        'successTrack',
+        silent(() => darken(palette.success.main, 0.5)),
+      );
+      setColor(
+        palette.Slider,
+        'warningTrack',
+        silent(() => darken(palette.warning.main, 0.5)),
+      );
+      const snackbarContentBackground = silent(() => emphasize(palette.background.default, 0.98));
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', () =>
-        darkPalette.getContrastText(snackbarContentBackground),
+      setColor(
+        palette.SnackbarContent,
+        'color',
+        silent(() => darkPalette.getContrastText(snackbarContentBackground)),
       );
-      setColor(palette.SpeedDialAction, 'fabHoverBg', () =>
-        emphasize(palette.background.paper, 0.15),
+      setColor(
+        palette.SpeedDialAction,
+        'fabHoverBg',
+        silent(() => emphasize(palette.background.paper, 0.15)),
       );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', () => darken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', () =>
-        darken(palette.secondary.main, 0.55),
-      );
-      setColor(palette.Switch, 'errorDisabledColor', () => darken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', () => darken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', () => darken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', () => darken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', () => darken(alpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', () => alpha(palette.grey[700], 0.92));
+      setColor(
+        palette.Switch,
+        'primaryDisabledColor',
+        silent(() => darken(palette.primary.main, 0.55)),
+      );
+      setColor(
+        palette.Switch,
+        'secondaryDisabledColor',
+        silent(() => darken(palette.secondary.main, 0.55)),
+      );
+      setColor(
+        palette.Switch,
+        'errorDisabledColor',
+        silent(() => darken(palette.error.main, 0.55)),
+      );
+      setColor(
+        palette.Switch,
+        'infoDisabledColor',
+        silent(() => darken(palette.info.main, 0.55)),
+      );
+      setColor(
+        palette.Switch,
+        'successDisabledColor',
+        silent(() => darken(palette.success.main, 0.55)),
+      );
+      setColor(
+        palette.Switch,
+        'warningDisabledColor',
+        silent(() => darken(palette.warning.main, 0.55)),
+      );
+      setColor(
+        palette.TableCell,
+        'border',
+        silent(() => darken(alpha(palette.divider, 1), 0.68)),
+      );
+      setColor(
+        palette.Tooltip,
+        'bg',
+        silent(() => alpha(palette.grey[700], 0.92)),
+      );
     }
 
-    setColor(palette.background, 'defaultChannel', () => colorChannel(palette.background.default)); // MUI X - DataGrid needs this token.
+    setColor(
+      palette.background,
+      'defaultChannel',
+      warnDev('palette.background.default', () => colorChannel(palette.background.default)),
+    ); // MUI X - DataGrid needs this token.
 
-    setColor(palette.common, 'backgroundChannel', () => colorChannel(palette.common.background));
-    setColor(palette.common, 'onBackgroundChannel', () =>
-      colorChannel(palette.common.onBackground),
+    setColor(
+      palette.common,
+      'backgroundChannel',
+      warnDev('palette.common.background', () => colorChannel(palette.common.background)),
+    );
+    setColor(
+      palette.common,
+      'onBackgroundChannel',
+      warnDev('palette.common.onBackground', () => colorChannel(palette.common.onBackground)),
     );
 
-    setColor(palette, 'dividerChannel', () => colorChannel(palette.divider));
+    setColor(
+      palette,
+      'dividerChannel',
+      warnDev('palette.divider', () => colorChannel(palette.divider)),
+    );
 
     Object.keys(palette).forEach((color) => {
       const colors = palette[color];
 
-      // Color palettes: primary, secondary, error, info, success, and warning
-      if (colors.main) {
-        setColor(palette[color], 'mainChannel', () => colorChannel(colors.main));
-      }
-      if (colors.light) {
-        setColor(palette[color], 'lightChannel', () => colorChannel(colors.light));
-      }
-      if (colors.dark) {
-        setColor(palette[color], 'darkChannel', () => colorChannel(colors.dark));
-      }
-      if (colors.contrastText) {
-        setColor(palette[color], 'contrastTextChannel', () => colorChannel(colors.contrastText));
-      }
+      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      // Text colors: text.primary, text.secondary
-      if (colors.primary) {
-        setColor(palette[color], 'primaryChannel', () => colorChannel(colors.primary));
-      }
-      if (colors.secondary) {
-        setColor(palette[color], 'secondaryChannel', () => colorChannel(colors.secondary));
-      }
+      if (colors && typeof colors === 'object') {
+        // Silent the error for custom palettes.
+        if (colors.main) {
+          setColor(
+            palette[color],
+            'mainChannel',
+            silent(() => colorChannel(colors.main)),
+          );
+        }
+        if (colors.light) {
+          setColor(
+            palette[color],
+            'lightChannel',
+            silent(() => colorChannel(colors.light)),
+          );
+        }
+        if (colors.dark) {
+          setColor(
+            palette[color],
+            'darkChannel',
+            silent(() => colorChannel(colors.dark)),
+          );
+        }
+        if (colors.contrastText) {
+          setColor(
+            palette[color],
+            'contrastTextChannel',
+            silent(() => colorChannel(colors.contrastText)),
+          );
+        }
 
-      // Action colors: action.active, action.selected
-      if (colors.active) {
-        setColor(palette[color], 'activeChannel', () => colorChannel(colors.active));
-      }
-      if (colors.selected) {
-        setColor(palette[color], 'selectedChannel', () => colorChannel(colors.selected));
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColor(
+            palette[color],
+            'primaryChannel',
+            warnDev('palette.text.primary', () => colorChannel(colors.primary)),
+          );
+          setColor(
+            palette[color],
+            'secondaryChannel',
+            warnDev('palette.text.secondary', () => colorChannel(colors.secondary)),
+          );
+        }
+
+        if (color === 'action') {
+          // Action colors: action.active, action.selected
+          if (colors.active) {
+            setColor(
+              palette[color],
+              'activeChannel',
+              warnDev('palette.action.active', () => colorChannel(colors.active)),
+            );
+          }
+          if (colors.selected) {
+            setColor(
+              palette[color],
+              'selectedChannel',
+              warnDev('palette.action.selected', () => colorChannel(colors.selected)),
+            );
+          }
+        }
       }
     });
   });
diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
index 07eddc3b2a2207..f1ed52690b3187 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.test.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -410,19 +410,53 @@ describe('experimental_extendTheme', () => {
     });
   });
 
-  it('should not break if the value cannot be parsed by color manipulators', () => {
-    expect(() =>
-      extendTheme({
-        colorSchemes: {
-          light: {
-            palette: {
-              custom: {
-                main: 'green',
+  describe('warnings', () => {
+    it('dependent token: should warn if the value cannot be parsed by color manipulators', () => {
+      expect(() =>
+        extendTheme({
+          colorSchemes: {
+            light: {
+              palette: {
+                divider: 'green',
               },
             },
           },
-        },
-      }),
-    ).not.to.throw();
+        }),
+      ).toWarnDev(
+        'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+      );
+    });
+
+    it('independent token: should skip warning', () => {
+      expect(() =>
+        extendTheme({
+          colorSchemes: {
+            light: {
+              palette: {
+                Alert: {
+                  errorColor: 'green',
+                },
+              },
+            },
+          },
+        }),
+      ).not.to.throw();
+    });
+
+    it('custom palette should not throw errors', () => {
+      expect(() =>
+        extendTheme({
+          colorSchemes: {
+            light: {
+              palette: {
+                gradient: {
+                  primary: 'linear-gradient(#000, transparent)',
+                },
+              },
+            },
+          },
+        }),
+      ).not.to.throw();
+    });
   });
 });

From 4e84477ec4b81bc708697adca1d7996ef12570d4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 2 Dec 2022 16:01:24 +0700
Subject: [PATCH 3/4] add safe* color manipulators

---
 .../src/styles/experimental_extendTheme.js    | 431 ++++--------------
 packages/mui-system/src/colorManipulator.d.ts |   5 +
 packages/mui-system/src/colorManipulator.js   |  50 ++
 3 files changed, 156 insertions(+), 330 deletions(-)

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index a8f834ed8d6b94..31bad9ae8709de 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -1,10 +1,10 @@
 import { deepmerge } from '@mui/utils';
 import {
-  colorChannel,
-  alpha,
-  darken,
-  lighten,
-  emphasize,
+  safeColorChannel,
+  safeAlpha,
+  safeDarken,
+  safeLighten,
+  safeEmphasize,
   unstable_createGetCssVar as systemCreateGetCssVar,
 } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
@@ -32,19 +32,6 @@ function setColor(obj, key, defaultValue) {
   }
 }
 
-const warnDev = (key, fn) => {
-  try {
-    return fn();
-  } catch (error) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        `MUI: The value of \`${key}\` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().`,
-      );
-    }
-  }
-  return undefined;
-};
-
 const silent = (fn) => {
   try {
     return fn();
@@ -132,26 +119,10 @@ export default function extendTheme(options = {}, ...args) {
       'Tooltip',
     ]);
     if (key === 'light') {
-      setColor(
-        palette.Alert,
-        'errorColor',
-        silent(() => darken(palette.error.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'infoColor',
-        silent(() => darken(palette.info.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'successColor',
-        silent(() => darken(palette.success.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'warningColor',
-        silent(() => darken(palette.warning.light, 0.6)),
-      );
+      setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
@@ -176,26 +147,10 @@ export default function extendTheme(options = {}, ...args) {
         'warningFilledColor',
         silent(() => lightPalette.getContrastText(palette.warning.main)),
       );
-      setColor(
-        palette.Alert,
-        'errorStandardBg',
-        silent(() => lighten(palette.error.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'infoStandardBg',
-        silent(() => lighten(palette.info.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'successStandardBg',
-        silent(() => lighten(palette.success.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'warningStandardBg',
-        silent(() => lighten(palette.warning.light, 0.9)),
-      );
+      setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
@@ -208,68 +163,20 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(
-        palette.LinearProgress,
-        'primaryBg',
-        silent(() => lighten(palette.primary.main, 0.62)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'secondaryBg',
-        silent(() => lighten(palette.secondary.main, 0.62)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'errorBg',
-        silent(() => lighten(palette.error.main, 0.62)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'infoBg',
-        silent(() => lighten(palette.info.main, 0.62)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'successBg',
-        silent(() => lighten(palette.success.main, 0.62)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'warningBg',
-        silent(() => lighten(palette.warning.main, 0.62)),
-      );
+      setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
-      setColor(
-        palette.Slider,
-        'primaryTrack',
-        silent(() => lighten(palette.primary.main, 0.62)),
-      );
-      setColor(
-        palette.Slider,
-        'secondaryTrack',
-        silent(() => lighten(palette.secondary.main, 0.62)),
-      );
-      setColor(
-        palette.Slider,
-        'errorTrack',
-        silent(() => lighten(palette.error.main, 0.62)),
-      );
-      setColor(
-        palette.Slider,
-        'infoTrack',
-        silent(() => lighten(palette.info.main, 0.62)),
-      );
-      setColor(
-        palette.Slider,
-        'successTrack',
-        silent(() => lighten(palette.success.main, 0.62)),
-      );
-      setColor(
-        palette.Slider,
-        'warningTrack',
-        silent(() => lighten(palette.warning.main, 0.62)),
-      );
-      const snackbarContentBackground = silent(() => emphasize(palette.background.default, 0.8));
+      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(
         palette.SnackbarContent,
@@ -279,73 +186,25 @@ export default function extendTheme(options = {}, ...args) {
       setColor(
         palette.SpeedDialAction,
         'fabHoverBg',
-        silent(() => emphasize(palette.background.paper, 0.15)),
+        safeEmphasize(palette.background.paper, 0.15),
       );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
-      setColor(
-        palette.Switch,
-        'primaryDisabledColor',
-        silent(() => lighten(palette.primary.main, 0.62)),
-      );
-      setColor(
-        palette.Switch,
-        'secondaryDisabledColor',
-        silent(() => lighten(palette.secondary.main, 0.62)),
-      );
-      setColor(
-        palette.Switch,
-        'errorDisabledColor',
-        silent(() => lighten(palette.error.main, 0.62)),
-      );
-      setColor(
-        palette.Switch,
-        'infoDisabledColor',
-        silent(() => lighten(palette.info.main, 0.62)),
-      );
-      setColor(
-        palette.Switch,
-        'successDisabledColor',
-        silent(() => lighten(palette.success.main, 0.62)),
-      );
-      setColor(
-        palette.Switch,
-        'warningDisabledColor',
-        silent(() => lighten(palette.warning.main, 0.62)),
-      );
-      setColor(
-        palette.TableCell,
-        'border',
-        silent(() => lighten(alpha(palette.divider, 1), 0.88)),
-      );
-      setColor(
-        palette.Tooltip,
-        'bg',
-        silent(() => alpha(palette.grey[700], 0.92)),
-      );
+      setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
     } else {
-      setColor(
-        palette.Alert,
-        'errorColor',
-        silent(() => lighten(palette.error.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'infoColor',
-        silent(() => lighten(palette.info.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'successColor',
-        silent(() => lighten(palette.success.light, 0.6)),
-      );
-      setColor(
-        palette.Alert,
-        'warningColor',
-        silent(() => lighten(palette.warning.light, 0.6)),
-      );
+      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
       setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
@@ -370,26 +229,10 @@ export default function extendTheme(options = {}, ...args) {
         'warningFilledColor',
         silent(() => darkPalette.getContrastText(palette.warning.dark)),
       );
-      setColor(
-        palette.Alert,
-        'errorStandardBg',
-        silent(() => darken(palette.error.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'infoStandardBg',
-        silent(() => darken(palette.info.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'successStandardBg',
-        silent(() => darken(palette.success.light, 0.9)),
-      );
-      setColor(
-        palette.Alert,
-        'warningStandardBg',
-        silent(() => darken(palette.warning.light, 0.9)),
-      );
+      setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
@@ -404,68 +247,20 @@ export default function extendTheme(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(
-        palette.LinearProgress,
-        'primaryBg',
-        silent(() => darken(palette.primary.main, 0.5)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'secondaryBg',
-        silent(() => darken(palette.secondary.main, 0.5)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'errorBg',
-        silent(() => darken(palette.error.main, 0.5)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'infoBg',
-        silent(() => darken(palette.info.main, 0.5)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'successBg',
-        silent(() => darken(palette.success.main, 0.5)),
-      );
-      setColor(
-        palette.LinearProgress,
-        'warningBg',
-        silent(() => darken(palette.warning.main, 0.5)),
-      );
+      setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
       setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
-      setColor(
-        palette.Slider,
-        'primaryTrack',
-        silent(() => darken(palette.primary.main, 0.5)),
-      );
-      setColor(
-        palette.Slider,
-        'secondaryTrack',
-        silent(() => darken(palette.secondary.main, 0.5)),
-      );
-      setColor(
-        palette.Slider,
-        'errorTrack',
-        silent(() => darken(palette.error.main, 0.5)),
-      );
-      setColor(
-        palette.Slider,
-        'infoTrack',
-        silent(() => darken(palette.info.main, 0.5)),
-      );
-      setColor(
-        palette.Slider,
-        'successTrack',
-        silent(() => darken(palette.success.main, 0.5)),
-      );
-      setColor(
-        palette.Slider,
-        'warningTrack',
-        silent(() => darken(palette.warning.main, 0.5)),
-      );
-      const snackbarContentBackground = silent(() => emphasize(palette.background.default, 0.98));
+      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
+      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
       setColor(
         palette.SnackbarContent,
@@ -475,75 +270,55 @@ export default function extendTheme(options = {}, ...args) {
       setColor(
         palette.SpeedDialAction,
         'fabHoverBg',
-        silent(() => emphasize(palette.background.paper, 0.15)),
+        safeEmphasize(palette.background.paper, 0.15),
       );
       setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
       setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
       setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
       setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
-      setColor(
-        palette.Switch,
-        'primaryDisabledColor',
-        silent(() => darken(palette.primary.main, 0.55)),
-      );
-      setColor(
-        palette.Switch,
-        'secondaryDisabledColor',
-        silent(() => darken(palette.secondary.main, 0.55)),
-      );
-      setColor(
-        palette.Switch,
-        'errorDisabledColor',
-        silent(() => darken(palette.error.main, 0.55)),
-      );
-      setColor(
-        palette.Switch,
-        'infoDisabledColor',
-        silent(() => darken(palette.info.main, 0.55)),
-      );
-      setColor(
-        palette.Switch,
-        'successDisabledColor',
-        silent(() => darken(palette.success.main, 0.55)),
-      );
-      setColor(
-        palette.Switch,
-        'warningDisabledColor',
-        silent(() => darken(palette.warning.main, 0.55)),
-      );
-      setColor(
-        palette.TableCell,
-        'border',
-        silent(() => darken(alpha(palette.divider, 1), 0.68)),
-      );
-      setColor(
-        palette.Tooltip,
-        'bg',
-        silent(() => alpha(palette.grey[700], 0.92)),
-      );
+      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
     }
 
     setColor(
       palette.background,
       'defaultChannel',
-      warnDev('palette.background.default', () => colorChannel(palette.background.default)),
+      safeColorChannel(
+        palette.background.default,
+        'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+      ),
     ); // MUI X - DataGrid needs this token.
 
     setColor(
       palette.common,
       'backgroundChannel',
-      warnDev('palette.common.background', () => colorChannel(palette.common.background)),
+      safeColorChannel(
+        palette.common.background,
+        'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+      ),
     );
     setColor(
       palette.common,
       'onBackgroundChannel',
-      warnDev('palette.common.onBackground', () => colorChannel(palette.common.onBackground)),
+      safeColorChannel(
+        palette.common.onBackground,
+        'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+      ),
     );
 
     setColor(
       palette,
       'dividerChannel',
-      warnDev('palette.divider', () => colorChannel(palette.divider)),
+      safeColorChannel(
+        palette.divider,
+        'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+      ),
     );
 
     Object.keys(palette).forEach((color) => {
@@ -554,32 +329,16 @@ export default function extendTheme(options = {}, ...args) {
       if (colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
-          setColor(
-            palette[color],
-            'mainChannel',
-            silent(() => colorChannel(colors.main)),
-          );
+          setColor(palette[color], 'mainChannel', safeColorChannel(colors.main));
         }
         if (colors.light) {
-          setColor(
-            palette[color],
-            'lightChannel',
-            silent(() => colorChannel(colors.light)),
-          );
+          setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));
         }
         if (colors.dark) {
-          setColor(
-            palette[color],
-            'darkChannel',
-            silent(() => colorChannel(colors.dark)),
-          );
+          setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));
         }
         if (colors.contrastText) {
-          setColor(
-            palette[color],
-            'contrastTextChannel',
-            silent(() => colorChannel(colors.contrastText)),
-          );
+          setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));
         }
 
         if (color === 'text') {
@@ -587,12 +346,18 @@ export default function extendTheme(options = {}, ...args) {
           setColor(
             palette[color],
             'primaryChannel',
-            warnDev('palette.text.primary', () => colorChannel(colors.primary)),
+            safeColorChannel(
+              colors.primary,
+              'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+            ),
           );
           setColor(
             palette[color],
             'secondaryChannel',
-            warnDev('palette.text.secondary', () => colorChannel(colors.secondary)),
+            safeColorChannel(
+              colors.secondary,
+              'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+            ),
           );
         }
 
@@ -602,14 +367,20 @@ export default function extendTheme(options = {}, ...args) {
             setColor(
               palette[color],
               'activeChannel',
-              warnDev('palette.action.active', () => colorChannel(colors.active)),
+              safeColorChannel(
+                colors.active,
+                'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+              ),
             );
           }
           if (colors.selected) {
             setColor(
               palette[color],
               'selectedChannel',
-              warnDev('palette.action.selected', () => colorChannel(colors.selected)),
+              safeColorChannel(
+                colors.selected,
+                'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().',
+              ),
             );
           }
         }
diff --git a/packages/mui-system/src/colorManipulator.d.ts b/packages/mui-system/src/colorManipulator.d.ts
index c80f7a9459fceb..bb16d0e59d7c59 100644
--- a/packages/mui-system/src/colorManipulator.d.ts
+++ b/packages/mui-system/src/colorManipulator.d.ts
@@ -10,10 +10,15 @@ export function rgbToHex(color: string): string;
 export function hslToRgb(color: string): string;
 export function decomposeColor(color: string): ColorObject;
 export function colorChannel(color: string): string;
+export function safeColorChannel(color: string, warning?: string): string;
 export function recomposeColor(color: ColorObject): string;
 export function getContrastRatio(foreground: string, background: string): number;
 export function getLuminance(color: string): number;
 export function emphasize(color: string, coefficient?: number): string;
+export function safeEmphasize(color: string, coefficient?: number, warning?: string): string;
 export function alpha(color: string, value: number): string;
+export function safeAlpha(color: string, value: number, warning?: string): string;
 export function darken(color: string, coefficient: number): string;
+export function safeDarken(color: string, coefficient: number, warning?: string): string;
 export function lighten(color: string, coefficient: number): string;
+export function safeLighten(color: string, coefficient: number, warning?: string): string;
diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator.js
index b600a17414524e..a67ded7dcc793e 100644
--- a/packages/mui-system/src/colorManipulator.js
+++ b/packages/mui-system/src/colorManipulator.js
@@ -111,6 +111,16 @@ export const colorChannel = (color) => {
     .map((val, idx) => (decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val))
     .join(' ');
 };
+export const safeColorChannel = (color, warning) => {
+  try {
+    return colorChannel(color);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+};
 
 /**
  * Converts a color object with type and values to a string.
@@ -240,6 +250,16 @@ export function alpha(color, value) {
 
   return recomposeColor(color);
 }
+export function safeAlpha(color, value, warning) {
+  try {
+    return alpha(color, value);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darkens a color.
@@ -260,6 +280,16 @@ export function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
+export function safeDarken(color, coefficient, warning) {
+  try {
+    return darken(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Lightens a color.
@@ -285,6 +315,16 @@ export function lighten(color, coefficient) {
 
   return recomposeColor(color);
 }
+export function safeLighten(color, coefficient, warning) {
+  try {
+    return lighten(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}
 
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -296,3 +336,13 @@ export function lighten(color, coefficient) {
 export function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }
+export function safeEmphasize(color, coefficient, warning) {
+  try {
+    return safeEmphasize(color, coefficient);
+  } catch (error) {
+    if (warning && process.env.NODE_ENV !== 'production') {
+      console.warn(warning);
+    }
+    return color;
+  }
+}

From 73c11f3291191cb4493f2b04d5b9c23e4585b9b3 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 2 Dec 2022 16:14:17 +0700
Subject: [PATCH 4/4] use private prefix

---
 .../src/styles/experimental_extendTheme.js        | 10 +++++-----
 packages/mui-system/src/colorManipulator.d.ts     | 15 ++++++++++-----
 packages/mui-system/src/colorManipulator.js       | 13 +++++++------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
index 31bad9ae8709de..b86ac72cb0bd55 100644
--- a/packages/mui-material/src/styles/experimental_extendTheme.js
+++ b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -1,10 +1,10 @@
 import { deepmerge } from '@mui/utils';
 import {
-  safeColorChannel,
-  safeAlpha,
-  safeDarken,
-  safeLighten,
-  safeEmphasize,
+  private_safeColorChannel as safeColorChannel,
+  private_safeAlpha as safeAlpha,
+  private_safeDarken as safeDarken,
+  private_safeLighten as safeLighten,
+  private_safeEmphasize as safeEmphasize,
   unstable_createGetCssVar as systemCreateGetCssVar,
 } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
diff --git a/packages/mui-system/src/colorManipulator.d.ts b/packages/mui-system/src/colorManipulator.d.ts
index bb16d0e59d7c59..b23b7f5dd39790 100644
--- a/packages/mui-system/src/colorManipulator.d.ts
+++ b/packages/mui-system/src/colorManipulator.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
@@ -10,15 +11,19 @@ export function rgbToHex(color: string): string;
 export function hslToRgb(color: string): string;
 export function decomposeColor(color: string): ColorObject;
 export function colorChannel(color: string): string;
-export function safeColorChannel(color: string, warning?: string): string;
+export function private_safeColorChannel(color: string, warning?: string): string;
 export function recomposeColor(color: ColorObject): string;
 export function getContrastRatio(foreground: string, background: string): number;
 export function getLuminance(color: string): number;
 export function emphasize(color: string, coefficient?: number): string;
-export function safeEmphasize(color: string, coefficient?: number, warning?: string): string;
+export function private_safeEmphasize(
+  color: string,
+  coefficient?: number,
+  warning?: string,
+): string;
 export function alpha(color: string, value: number): string;
-export function safeAlpha(color: string, value: number, warning?: string): string;
+export function private_safeAlpha(color: string, value: number, warning?: string): string;
 export function darken(color: string, coefficient: number): string;
-export function safeDarken(color: string, coefficient: number, warning?: string): string;
+export function private_safeDarken(color: string, coefficient: number, warning?: string): string;
 export function lighten(color: string, coefficient: number): string;
-export function safeLighten(color: string, coefficient: number, warning?: string): string;
+export function private_safeLighten(color: string, coefficient: number, warning?: string): string;
diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator.js
index a67ded7dcc793e..e6699ffcf6ab91 100644
--- a/packages/mui-system/src/colorManipulator.js
+++ b/packages/mui-system/src/colorManipulator.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import MuiError from '@mui/utils/macros/MuiError.macro';
 
 /**
@@ -111,7 +112,7 @@ export const colorChannel = (color) => {
     .map((val, idx) => (decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val))
     .join(' ');
 };
-export const safeColorChannel = (color, warning) => {
+export const private_safeColorChannel = (color, warning) => {
   try {
     return colorChannel(color);
   } catch (error) {
@@ -250,7 +251,7 @@ export function alpha(color, value) {
 
   return recomposeColor(color);
 }
-export function safeAlpha(color, value, warning) {
+export function private_safeAlpha(color, value, warning) {
   try {
     return alpha(color, value);
   } catch (error) {
@@ -280,7 +281,7 @@ export function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
-export function safeDarken(color, coefficient, warning) {
+export function private_safeDarken(color, coefficient, warning) {
   try {
     return darken(color, coefficient);
   } catch (error) {
@@ -315,7 +316,7 @@ export function lighten(color, coefficient) {
 
   return recomposeColor(color);
 }
-export function safeLighten(color, coefficient, warning) {
+export function private_safeLighten(color, coefficient, warning) {
   try {
     return lighten(color, coefficient);
   } catch (error) {
@@ -336,9 +337,9 @@ export function safeLighten(color, coefficient, warning) {
 export function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }
-export function safeEmphasize(color, coefficient, warning) {
+export function private_safeEmphasize(color, coefficient, warning) {
   try {
-    return safeEmphasize(color, coefficient);
+    return private_safeEmphasize(color, coefficient);
   } catch (error) {
     if (warning && process.env.NODE_ENV !== 'production') {
       console.warn(warning);