Introduce the color prop for the Card component

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Seems like the Card component never had color support but a lot of other similar interactive and non-interactive (including presentational) components do (like Button, AppBar, Checkbox, Chip).

Examples 🌈

Using something like <Card color="primary" /> to style the card similarly to AppBar would provide additional flexibility to developers.

Imagine a dashboard with cards that showcase information with different levels of importance such as this example borrowed from horizon-ui. You can see 2 main colors being used: a default white one (the standard for MUI as well) and a more prominent purple one (would most likely correspond to the primary palette option in most MUI themes.

Motivation 🔦

In this commit the documentation regarding colors was improved to highlight that component's color can be modified through the defined color prop in combination with the theme palette.

In that commit the CardPropsColorOverrides was marked for removal as it's been erroneously added in this commit without actually being used in any of the types.

I don't think this color handling was ever implemented for the card and it would be a great addition to complement such a key component as is the card when building dashboards. The existing overridable prop interface could be left and the color handling could instead be introduced as an additional feature.

Start at the Card component and compare its existing API and styling behavior with similar components such as AppBar, Button, Checkbox, and Chip. Check how the color prop is documented and typed for those components, then verify that Card accepts a theme-palette color such as primary and is styled consistently.