[palette] Fix error color defaults (#10058)

* Fix error default color augmentation, add tests

* Add documentation

* More docs fixes

docs/src/pages/customization/themes.md

@@ -74,7 +74,10 @@ palette: {
     contrastText: getContrastText(secondaryColor.A400),
   },
   error: {
+    light: errorColor[300],
     main: errorColor[500],
+    dark: errorColor[700],
+    contrastText: getContrastText(errorColor[500]),
   },
 },
 ```
@@ -93,13 +96,11 @@ const theme = createMuiTheme({
   palette: {
     primary: indigo,
     secondary: pink,
-    error: {
-      main: red[500],
-    },
+    error: red,
     // Used by `getContrastText()` to maximize the contrast between the background and
     // the text.
     contrastThreshold: 3,
-    // Used by the functions below to shift a color's luminance by approximately
+    // Used to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset: 0.2,

src/styles/createPalette.js

@@ -89,7 +89,9 @@ export default function createPalette(palette: Object) {
       dark: pink.A700,
     },
     error = {
+      light: red[300],
       main: red[500],
+      dark: red[700],
     },
     type = 'light',
     contrastThreshold = 3,

src/styles/createPalette.spec.js

@@ -62,6 +62,16 @@ describe('createPalette()', () => {
       red[500],
       'should use red[500] as the default error main color',
     );
+    assert.strictEqual(
+      palette.error.light,
+      red[300],
+      'should use red[300] as the default error light color',
+    );
+    assert.strictEqual(
+      palette.error.dark,
+      red[700],
+      'should use red[700] as the default error dark color',
+    );
     assert.strictEqual(
       palette.text,
       light.text,
@@ -110,6 +120,16 @@ describe('createPalette()', () => {
       pink[500],
       'should use pink[500] as the error main color',
     );
+    assert.strictEqual(
+      palette.error.light,
+      pink[300],
+      'should use pink[300] as the error light color',
+    );
+    assert.strictEqual(
+      palette.error.dark,
+      pink[700],
+      'should use pink[700] as the error dark color',
+    );
     assert.strictEqual(palette.text, light.text, 'should use light theme text');
   });
 
@@ -129,6 +149,9 @@ describe('createPalette()', () => {
       },
       error: {
         main: pink[500],
+        light: pink[300],
+        dark: pink[700],
+        contrastText: '#00ff00',
       },
     });
     assert.strictEqual(
@@ -176,13 +199,29 @@ describe('createPalette()', () => {
       pink[500],
       'should use pink[500] as the error main color',
     );
+    assert.strictEqual(
+      palette.error.light,
+      pink[300],
+      'should use pink[300] as the error light color',
+    );
+    assert.strictEqual(
+      palette.error.dark,
+      pink[700],
+      'should use pink[700] as the error dark color',
+    );
+    assert.strictEqual(
+      palette.error.contrastText,
+      '#00ff00',
+      'should use #00ff00 as the error contrastText color',
+    );
     assert.strictEqual(palette.text, light.text, 'should use light theme text');
   });
 
   it('should calculate light and dark colors if not provided', () => {
     const palette = createPalette({
       primary: { main: deepOrange[500] },
       secondary: { main: green.A400 },
+      error: { main: pink[500] },
     });
     assert.strictEqual(
       palette.primary.main,
@@ -214,6 +253,21 @@ describe('createPalette()', () => {
       darken(green.A400, 0.3),
       'should use darken(green.A400, 0.3) as the secondary dark color',
     );
+    assert.strictEqual(
+      palette.error.main,
+      pink[500],
+      'should use pink[500] as the error main color',
+    );
+    assert.strictEqual(
+      palette.error.light,
+      lighten(pink[500], 0.2),
+      'should use lighten(pink[500], 0.2) as the error light color',
+    );
+    assert.strictEqual(
+      palette.error.dark,
+      darken(pink[500], 0.3),
+      'should use darken(pink[500], 0.3) as the error dark color',
+    );
   });
 
   it('should calculate light and dark colors using the provided tonalOffset', () => {