[theme] Expose the theme.palette.augmentColor function

[MichaelMure]

Random idea from a user:

material-ui removed recently the palette.palette.background.* colors. Maybe I got it wrong, but I find these colors quite useful when creating panels and stuff for an app, having a selection of colors I can pick from.

I would be nice to have material-ui generate a decent selection of colors, based on the type of palette (light or dark). This could be done different ways:

• provide a fixed set of shade of grey
• in addition to palette.primary and palette.secondary, have palette.background behave the same way. When palette.background.primary is set, compute dark, light and contrastText colors. For example, providing grey[800] would generate decent dark background shades, grey[300] would generate light background shades.
• expose the colors functions that compute dark, light and contrastText so users are free to setup background values easily instead of harcoding colors.

In particular, this would avoid doing things like theme.palette.grey[theme.palette.type === 'light' ? 300 : 900] in each components.

[mbrookes]

@MichaelMure

provide a fixed set of shade of grey

palette.grey

in addition to palette.primary and palette.secondary, have palette.background behave the same way. When palette.background.primary is set, compute dark, light and contrastText colors. For example, providing grey[800] would generate decent dark background shades, grey[300] would generate light background shades.

You can add custom keys to the theme,

expose the colors functions that compute dark, light and contrastText so users are free to setup background values easily instead of harcoding colors.

contrastText() is exposed in the theme. You also have styles/colorManipulator if you need it.

[oliviertassinari]

@MichaelMure Does @mbrookes comment answer your problem?

In particular, this would avoid doing things like theme.palette.grey[theme.palette.type === 'light' ? 300 : 900] in each components.

From our experience with the core components, we couldn't find an approach that scale. I believe this is "code" you have in userland. You are free to inject the value into the theme so you don't repeat it.

When palette.background.primary is set, compute dark, light and contrastText colors.

Are you saying you want to have access to the augmentColor() method in userland?

[MichaelMure]

@MichaelMure Does @mbrookes comment answer your problem?

Not really. I know ( = found out after testing, maybe it should be mentioned explicitly ?) that it's possible to augment manually the palette. But as someone with limited color picking ability, I have no idea what to actually use.

My point is that even after reading the different documentation, you don't get much idea about how to handle background colors. In fact, because background colors are not mentioned, I thought in the beginning that the primary color was the background color. Obviously it didn't end well.

I think that providing a 'not bad' default set of background colors will help new users and guide them for when they want to use better values. As I said in the original comment, there is various way to achieve that.

Are you saying you want to have access to the augmentColor() method in userland?

Yes, and addLightOrDark() as well. These functions seems to give good enough result. Probably need a bit of simplification to be a public function though.

That said, I think having just another internal call to augmentColor (with parameters depending on light/dark) for the background would be enough and cleaner.

[mbrookes]

maybe it should be mentioned explicitly ?) that it's possible to augment manually the palette.

https://material-ui.com/customization/themes/#custom-variables

That said, I think having just another internal call to augmentColor (with parameters depending on light/dark) for the background would be enough and cleaner.

I can see merit in background following the same pattern as primary / secondary / error, and having light, main, dark & contrastText keys.

background.paper would need to move though.

[MichaelMure]

maybe it should be mentioned explicitly ?) that it's possible to augment manually the palette.

https://material-ui.com/customization/themes/#custom-variables

Indeed...

[oliviertassinari]

@MichaelMure Thanks for the feedback. So, I believe we can move forward with the issue by exposing the augmentColor() function to the public API. It can be useful when dealing with a wider set of colors. I have renamed the issue accordingly.

[adrian-d-hidalgo]

Hi, I have a PR for this: #10985, it's useful for me.