[material-ui] Skip tonalOffset from setting color channel (#44585)

Author: siriwatknp

packages/mui-material/src/styles/createTheme.test.js

@@ -221,6 +221,22 @@ describe('createTheme', () => {
       expect(theme.colorSchemes.dark).to.not.equal(undefined);
     });
 
+    it('should be able to customize tonal offset', () => {
+      const theme = createTheme({
+        cssVariables: true,
+        palette: {
+          primary: {
+            main: green[500],
+          },
+          tonalOffset: {
+            light: 0.1,
+            dark: 0.9,
+          },
+        },
+      });
+      expect(theme.palette.primary.main).to.equal('#4caf50');
+    });
+
     describe('spacing', () => {
       it('should provide the default spacing', () => {
         const theme = createTheme({ cssVariables: true });

packages/mui-material/src/styles/createThemeWithVars.js

@@ -40,7 +40,7 @@ function setColor(obj, key, defaultValue) {
 }
 
 function toRgb(color) {
-  if (!color || !color.startsWith('hsl')) {
+  if (typeof color !== 'string' || !color.startsWith('hsl')) {
     return color;
   }
   return hslToRgb(color);
@@ -421,7 +421,7 @@ export default function createThemeWithVars(options = {}, ...args) {
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));