[Button] using nested custom color

[RemyMachado]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, we can define new colors with the theme:
https://mui.com/customization/palette/#adding-new-colors

Unfortunately it seems that we can't use the nested property directly within the color prop of the Button

 <Button color="secondary.darker" /> // Error

It would be nice if we could use it in the same way we use sx prop.

<Box sx={{ backgroundColor: 'secondary.darker' }} /> // Working

Examples 🌈

 <Button color="secondary.darker" />
 <Button color="secondary.200" />

Motivation 🔦

I know it's two very different implementations between the sx and color properties, but maybe it would help having a common API.
To be honest, I setup my whole theme thinking I would be able to pass nested custom colors. I was quite disappointed when I found out it was only possible within the sx prop

[mnajdova]

We had some discussion around this when we were working on the system. The main problem, as you already pointed out, is that the color inside the Button, is not the CSS property color, it affects the background, and adjusts the other colors, depending on it. It would be a surprise if it would affect only the text color.

The color as a system property, works as you have expected on the CSS utility components, like Box, Typography etc. In most of the other components, the color is changing more than just the CSS property color

[RemyMachado]

...the color is changing more than just the CSS property color

Absolutely, and that's why it's even more frustrating not to be able to use color shades. At the moment, I'm redefining another color that is a duplicate of the nested property I want to to use. I must duplicate every shade as a Palette, to leverage the color property.

palette: {
    mode: 'light',
    secondary: {
      main: '#785447',
      200: '#BBA9A3',
    },
    secondary200: {
      main: '#BBA9A3',
    },
}

[RemyMachado]

Good news, I just noticed that color="secondary.200" is already available for the Typography component. Thus, it's not reserved to the sx prop. Maybe the Typography logic charged of the color prop could be merged with the Button one.

[oakh1]

I'm having the same issue as @RemyMachado - is there any update to this? Or is it in progress as the Typography seems to support this already? :) Thanks!