Typography does not support color "success"

General summary I would like to be able to set the color props for the Typography element to “success”, this code does not color the text color Current Behavior 😯 The Typography component does not have a color props with the “success” value Expected Behavior 🤔 I would like to be able to set the color props to “success” and for this to work correctly Steps to Reproduce 🕹

1. Create CRA with Typography with color = “success” props

Sandbox issue here Context 🔦 I want to get the “success” text color of Typography in a short way without creating unnecessary entities My Environment 🌎

  System:
    OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
  Binaries:
    Node: 14.18.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.15 - /usr/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 93.0

[paulintrognon]

It is inconsistent with the icons, which has got me very frustrated today. I thought I wasn’t using the API right, it got me wasting time experimenting with the MuiTheme before I figured out that Typography and Icons behave differently:

• <Circle color="success" /> works ✔️
• <Circle color="success.main" /> fails ❌
• <Typography color="success" /> fails ❌
• <Typography color="success.main" /> works ✔️

So while I agree it is non essential, it is kinda annoying.

[RemyMachado]

It’s a bit tricky. primary & secondary works without .main, but the other colors in the palette don’t.