[docs] ColorDemo.js Palette Preview still in old version

Demo palette code preview doesn’t follow the interface

interface PaletteColor {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

{
  palette: {
    primary: blue,
    secondary: pink,
  },
}

Expected Behavior 🤔

{
  palette: {
    primary: {
      main: blue
    },
    secondary: {
      main: pink
    },
  },
}

Steps to Reproduce 🕹

Steps:

1. Open https://material-ui.com/customization/color/#playground
2. See the box on the right

Context 🔦

Found this issue when documenting Material-UI theming in an internal project.

Your Environment 🌎

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: Not Found
    Firefox: 82.0.3
    Safari: 14.0

[yukinoda]

@yukinoda OK, great. Feel free to work on a pull request for it in this case 😃

@oliviertassinari Great. I’ll work on it.

I guess I don’t need to be assigned to work on this right? 😮

[oliviertassinari]

@yukinoda Yeah ok. In this case, I propose that we slowly move away from supporting dropping a complete object color:

I think that we can avoid magic.

diff --git a/docs/src/pages/customization/color/ColorDemo.js b/docs/src/pages/customization/color/ColorDemo.js
index f28450f27d..d3c2279012 100644
--- a/docs/src/pages/customization/color/ColorDemo.js
+++ b/docs/src/pages/customization/color/ColorDemo.js
@@ -38,28 +38,30 @@ const styles = (theme) => ({
 });

 function ColorDemo(props) {
-  const { classes, data } = props;
+  const { classes, data, shades } = props;
   const theme = useTheme();
   const primary = theme.palette.augmentColor({
     color: {
       main: data.primary,
-      output:
-        data.primaryShade === 4
-          ? `${data.primaryHue}`
-          : `{
-        main: '${data.primary}',
-      }`,
+      output: data.primaryShade !== null
+        ? `{
+      main: ${data.primaryHue}[${shades[data.primaryShade]}],
+    }`
+        : `{
+      main: '${data.primary}',
+    }`,
     },
   });
   const secondary = theme.palette.augmentColor({
     color: {
       main: data.secondary,
-      output:
-        data.secondaryShade === 11
-          ? `${data.secondaryHue}`
+      output: data.secondaryShade !== null
+          ? `{
+      main: ${data.secondaryHue}[${shades[data.secondaryShade]}],
+    }`
           : `{
-        main: '${data.secondary}',
-      }`,
+      main: '${data.secondary}',
+    }`,
     },
   });

@@ -108,6 +110,7 @@ function ColorDemo(props) {
 ColorDemo.propTypes = {
   classes: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
+  shades: PropTypes.object.isRequired,
 };

 export default withStyles(styles)(ColorDemo);
diff --git a/docs/src/pages/customization/color/ColorTool.js b/docs/src/pages/customization/color/ColorTool.js
index 10893383ff..6ca22055b2 100644
--- a/docs/src/pages/customization/color/ColorTool.js
+++ b/docs/src/pages/customization/color/ColorTool.js
@@ -67,6 +67,9 @@ const styles = (theme) => ({
     marginLeft: theme.spacing(3),
     marginRight: theme.spacing(3),
   },
+  intentShade: {
+    width: 50,
+  },
   colorBar: {
     marginTop: theme.spacing(2),
   },
@@ -110,6 +113,7 @@ function ColorTool(props) {
     setState((prevState) => ({
       ...prevState,
       [`${name}Input`]: color,
+      [`${name}Shade`]: null,
     }));

     let isValidColor = false;
@@ -210,7 +214,7 @@ function ColorTool(props) {
     const color = state[`${intent}`];

     return (
-      <Grid item xs={12} sm={6} md={4}>
+      <Grid item xs={12} md={6}>
         <Typography component="label" gutterBottom htmlFor={intent} variant="h6">
           {capitalize(intent)}
         </Typography>
@@ -231,7 +235,9 @@ function ColorTool(props) {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <Typography className={classes.intentShade}>
+            {shades[intentShade]}
+          </Typography>
         </div>
         <div className={classes.swatch}>
           {hues.map((hue) => {
@@ -276,8 +282,8 @@ function ColorTool(props) {
     <Grid container spacing={5} className={classes.root}>
       {colorPicker('primary')}
       {colorPicker('secondary')}
-      <Grid item xs={12} sm={6} md={4}>
-        <ColorDemo data={state} />
+      <Grid item xs={12} md={6}>
+        <ColorDemo data={state} shades={shades} />
       </Grid>
       <Grid item xs={12}>
         <Button variant="contained" onClick={handleChangeDocsColors}>