[Button] using nested custom `color`

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

Start by tracing how the Button component handles its color prop and compare that with the documented custom palette and sx behavior. Confirm the expected handling for values such as secondary.darker and secondary.200, then add or update the relevant Button tests so nested custom colors are accepted.