Color palette blueGrey A100 sample documentation

[Angelk90]

• 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 😯

@oliviertassinari : Currently in the documentation there are the following colors for blueGrey:

But the following shades seem to be missing:
https://github.com/mui-org/material-ui/blob/33850e52ca32787fbc02b64d3225bac2d451612c/packages/material-ui/src/colors/blueGrey.d.ts#L49-L61

Expected Behavior 🤔

The following shades seem to be missing in the documentation for the following colors brown, gray, blueGrey.

Steps to Reproduce 🕹

import blueGrey from '@material-ui/core/colors/blueGrey';
console.log(blueGrey);

{
 50: "#eceff1"
 100: "#cfd8dc"
 200: "#b0bec5"
 300: "#90a4ae"
 400: "#78909c"
 500: "#607d8b"
 600: "#546e7a"
 700: "#455a64"
 800: "#37474f"
 900: "#263238"
 A100: "#cfd8dc"
 A200: "#b0bec5"
 A400: "#78909c"
 A700: "#455a64"
}

[oliviertassinari]

Interesting:

• The legacy spec: https://material.io/archive/guidelines/style/color.html#color-color-palette
• The new spec: https://material.io/design/color/the-color-system.html#tools-for-picking-colors
• The docs: https://next.material-ui.com/customization/color/#color-palette

So it's a 4 years old decision #6548. Ok, happy to update the demos in the docs. Looks like an easy one:

diff --git a/docs/src/pages/customization/color/Color.js b/docs/src/pages/customization/color/Color.js
index 4a040b296a..02454d0c4d 100644
--- a/docs/src/pages/customization/color/Color.js
+++ b/docs/src/pages/customization/color/Color.js
@@ -20,8 +20,10 @@ const mainColors = [
   'Amber',
   'Orange',
   'Deep Orange',
+  'Brown',
+  'Grey',
+  'Blue Grey',
 ];
-const neutralColors = ['Brown', 'Grey', 'Blue Grey'];
 const mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 const altPalette = ['A100', 'A200', 'A400', 'A700'];

@@ -131,14 +133,6 @@ function Color(props) {
           showAltPalette: true,
         }),
       )}
-      {neutralColors.map((neutralColor) =>
-        getColorGroup({
-          classes,
-          theme,
-          color: neutralColor,
-          showAltPalette: false,
-        }),
-      )}
     </div>
   );
 }
diff --git a/packages/material-ui/src/colors/grey.d.ts b/packages/material-ui/src/colors/grey.d.ts
index 7c8c0f2ed3..62b0e6a707 100644
--- a/packages/material-ui/src/colors/grey.d.ts
+++ b/packages/material-ui/src/colors/grey.d.ts
@@ -54,11 +54,11 @@ declare const grey: {
   /**
    * Preview: ![grey A400](https://material-ui.com/static/colors-preview/grey-A400-24x24.svg)
    */
-  A400: '#303030';
+  A400: '#616161';
   /**
    * Preview: ![grey A700](https://material-ui.com/static/colors-preview/grey-A700-24x24.svg)
    */
-  A700: '#616161';
+  A700: '#303030';
 };

 export default grey;
diff --git a/packages/material-ui/src/colors/grey.js b/packages/material-ui/src/colors/grey.js
index 7169551644..038768b0bc 100644
--- a/packages/material-ui/src/colors/grey.js
+++ b/packages/material-ui/src/colors/grey.js
@@ -11,8 +11,8 @@ const grey = {
   900: '#212121',
   A100: '#d5d5d5',
   A200: '#aaaaaa',
-  A400: '#303030',
-  A700: '#616161',
+  A400: '#616161',
+  A700: '#303030',
 };

 export default grey;

[pandeymangg]

Hey, I would like to work on this.

[pandeymangg]

Should I make the changes as indicated in the diffs above?

[Angelk90]

@oliviertassinari : So which way you go, you will take the same reference value A100 -> 100 or the subsequent A100-> 200 as proposed by @peteratticusberg, here.

P.s.

What about a randomColors({number}) -> [] function, it allows you to get n randomly generated colors from the color list.

[oliviertassinari]

@Angelk90 I don't understand the questions. This seems off-topic.

[oliviertassinari]

@anshuman9999 This would be a great starting point, yes. They you would need to make sure it's good enough to be merged (maybe there are no other changes required, maybe not).

[pandeymangg]

@oliviertassinari Alright, I'll try opening a PR for it. Thank You for your help!

[Angelk90]

@oliviertassinari , @anshuman9999 : you should also check the colors like brown and grey.