[PropTypes] Add variants primary and secondary to proptypes

[JeanBeaurepaire]

It would be great if we could add more types of props color to the color props

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I want to be able to display on my components who have color props:

• secondaryLight
• secondaryDark
• primaryLight
• primaryDark

Current Behavior

I can only display my primary and my secondary color.
export namespace PropTypes { type Color = 'inherit' | 'primary' | 'secondary' | 'default'; }

Examples

https://material.io/design/color/the-color-system.html#color-theme-creation

For example based on the material spec, you can make a color theme for your app using your primary color, as well as dark and light primary variants.

Context

Sometimes, I would like do display some components with some variants color and I can't display those variants with the current color PropsTypes.

[oliviertassinari]

@Abbo44 At work, we have been writing a wrapper component to solve this problem. I'm eager to explore the alternatives to this strategy.

[JeanBeaurepaire]

I don't know exactly the alternatives but I think it's important to have the choice to display the variants of the primary and secondary color.
If you have an existant solution, could you inform it on the material ui colors doc for example ? It would be a beginning.

It could also be an other optionnal props called colorVariant in the component who has already the color props, where we could write if the variant color is main , light or dark . By default the variant would be main

[eps1lon]

To be honest I'm not a fan of style props. You can already do this by passing your own className with withStyles and theme.palette[variant]['light' | 'main' | 'dark'].

We have to define new classNames and props which increases API surface and bundle size for everyone when this feature is already supported.

[eps1lon]

Duplicate of #13875