[theme] Warn when palette structure is wrong

packages/material-ui/src/styles/createPalette.js

@@ -132,12 +132,6 @@ export default function createPalette(palette) {
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
   function getContrastText(background) {
-    if (!background) {
-      throw new TypeError(
-        `Material-UI: missing background argument in getContrastText(${background}).`,
-      );
-    }
-
     const contrastText =
       getContrastRatio(background, dark.text.primary) >= contrastThreshold
         ? dark.text.primary
@@ -159,21 +153,48 @@ export default function createPalette(palette) {
     return contrastText;
   }
 
-  function augmentColor(color, mainShade = 500, lightShade = 300, darkShade = 700) {
+  const augmentColor = (color, mainShade = 500, lightShade = 300, darkShade = 700) => {
     color = { ...color };
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
 
-    if (process.env.NODE_ENV !== 'production') {
-      if (!color.main) {
-        throw new Error(
+    if (!color.main) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
           [
             'Material-UI: the color provided to augmentColor(color) is invalid.',
             `The color object needs to have a \`main\` property or a \`${mainShade}\` property.`,
           ].join('\n'),
         );
       }
+      color.main = indigo[500];
+    }
+
+    if (typeof color.main !== 'string') {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          [
+            'Material-UI: the color provided to augmentColor(color) is invalid.',
+            `\`color.main\` should be a string, but \`${JSON.stringify(
+              color.main,
+            )}\` was provided instead.`,
+            '',
+            'Did you intent to do one of the followings?',
+            '',
+            'import { green } from "@material-ui/core/colors";',
+            '',
+            'const theme1 = createMuiTheme({ palette: {',
+            '  primary: green,',
+            '} });',
+            '',
+            'const theme2 = createMuiTheme({ palette: {',
+            '  primary: { main: green[500] },',
+            '} });',
+          ].join('\n'),
+        );
+      }
+      color.main = indigo[500];
     }
 
     addLightOrDark(color, 'light', lightShade, tonalOffset);
@@ -183,7 +204,7 @@ export default function createPalette(palette) {
     }
 
     return color;
-  }
+  };
 
   const types = { dark, light };
 

packages/material-ui/src/styles/createPalette.test.js

@@ -5,14 +5,6 @@ import { darken, lighten } from './colorManipulator';
 import createPalette, { dark, light } from './createPalette';
 
 describe('createPalette()', () => {
-  beforeEach(() => {
-    consoleErrorMock.spy();
-  });
-
-  afterEach(() => {
-    consoleErrorMock.reset();
-  });
-
   it('should create a palette with a rich color object', () => {
     const palette = createPalette({
       primary: deepOrange,
@@ -85,26 +77,11 @@ describe('createPalette()', () => {
       pink.A400,
     );
     expect(palette.text, 'should use dark theme text').to.equal(dark.text);
-    expect(consoleErrorMock.callCount()).to.equal(0);
-  });
-
-  it('logs an error when an invalid type is specified', () => {
-    createPalette({ type: 'foo' });
-    expect(consoleErrorMock.callCount()).to.equal(1);
-    expect(consoleErrorMock.messages()[0]).to.match(
-      /Material-UI: the palette type `foo` is not supported/,
-    );
   });
 
   describe('augmentColor', () => {
     const palette = createPalette({});
 
-    it('should throw when the input is invalid', () => {
-      expect(() => {
-        palette.augmentColor({});
-      }).to.throw(/The color object needs to have a/);
-    });
-
     it('should accept a color', () => {
       const color1 = palette.augmentColor(indigo);
       expect(color1).to.deep.include({
@@ -150,6 +127,45 @@ describe('createPalette()', () => {
         expect(() => getContrastText(argument), errorMessage).to.throw();
       });
     });
+  });
+
+  it('should create a palette with unique object references', () => {
+    const redPalette = createPalette({ background: { paper: 'red' } });
+    const bluePalette = createPalette({ background: { paper: 'blue' } });
+    expect(redPalette).to.not.equal(bluePalette);
+    expect(redPalette.background).to.not.equal(bluePalette.background);
+  });
+
+  describe('warnings', () => {
+    beforeEach(() => {
+      consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('logs an error when an invalid type is specified', () => {
+      createPalette({ type: 'foo' });
+      expect(consoleErrorMock.callCount()).to.equal(1);
+      expect(consoleErrorMock.messages()[0]).to.include(
+        'Material-UI: the palette type `foo` is not supported',
+      );
+    });
+
+    it('logs an error when a wrong color is provided', () => {
+      createPalette({ primary: '#fff' });
+      expect(consoleErrorMock.callCount()).to.equal(1);
+      expect(consoleErrorMock.messages()[0]).to.include(
+        'The color object needs to have a `main` property or a `500` property.',
+      );
+
+      createPalette({ primary: { main: { foo: 'bar' }} });
+      expect(consoleErrorMock.callCount()).to.equal(2);
+      expect(consoleErrorMock.messages()[1]).to.include(
+        '`color.main` should be a string, but `{"foo":"bar"}` was provided instead.',
+      );
+    });
 
     it('logs an error when the contrast ratio does not reach AA', () => {
       const { getContrastText } = createPalette({
@@ -164,11 +180,4 @@ describe('createPalette()', () => {
       );
     });
   });
-
-  it('should create a palette with unique object references', () => {
-    const redPalette = createPalette({ background: { paper: 'red' } });
-    const bluePalette = createPalette({ background: { paper: 'blue' } });
-    expect(redPalette).to.not.equal(bluePalette);
-    expect(redPalette.background).to.not.equal(bluePalette.background);
-  });
 });