[theme] Allow custom color variants

[carlgunderson]

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

The ability to have success in the color palette for Button, or any component w/ a color prop.

Current Behavior 😯

Only error palette option is available.

Context 🔦

Similar to the need for error styling, a success color palette option for any component that has a color prop would be equally valuable. The current functionality to get a green button option, for instance, requires lots of custom styling on the Button component which isn't ideal. If error is warranted in the palette, why not success as well?

Another idea is for some kind of dynamic mapping, so if you created a manual key of success and passed it in as a color prop to a Button, the button would just try to find the theme override with that key in the palette.

Thanks!

[oliviertassinari]

Vuetify has 4 different colors (success, danger, warning, info) by default on top of the primary and secondary colors in the theme: https://vuetifyjs.com/en/components/buttons#usage. Exactly like Bootstrap. I see some value in that. We should at the minimum make it easy for anybody to have them.

Another idea is for some kind of dynamic mapping

Some effort in this direction: https://deploy-preview-13632--material-ui.netlify.com/system/basics/.

@mui-org/core-contributors thoughts?

[mbrookes]

Where are we with support of style values from props (dynamic styles)? That would potentially allow any color to be passed in, either arbitrarily, or from the theme.

Users can easily add colour keys to the theme for these sorts of things in their own components, but not so easily in MUI components.

Otherwise, I have no objection to adding more colors. Even though the spec doesn’t explicitly provide for such color options, it’s a common UI pattern.

[carlgunderson]

Users can easily add colour keys to the time for these sorts of things.

Are you saying this is already possible with the current theme API? I tried creating a custom color palette object with a key of success but when I tried to access it from a UI component it was undefined.

[oliviertassinari]

@carlgunderson No, it's not possible the way you have in mind. But I think that it should, in an ideal world. Right now, you have to use a wrapper component.

We have some options:

1. We support these 6 color variants by using static style rules.
2. We rely on dynamic style rules.
3. We use a mix of the static and dynamic style rules.

I would personally go with option 3.