[theme] Add theme color strong typing onto the sx color properties

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Add strong type checking onto the palette theme aware sx properties.

Examples 🌈

No response

Motivation 🔦

Since MUI v5, the suggested way to configure the color related sx props is to use string reference of the theme palette, making the implementation simpler: https://mui.com/system/the-sx-prop/#palette

However, with the moving from theme.palette to string reference, we loose the typescript strong checking of the available color.

The sx color prop for example, will only suggest css related values, not something like primary.main.

Because of that, I'm still preferring the theme.palette usage.

It would be a great addition to have type checking on the palette theme aware properties.

This was also something asked on StackOverflow: https://stackoverflow.com/q/69888051/1731473