[Typography] Cannot customize primary/error color

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

<Typography color="primary"> doesn't allow customizing the color:

• color="primary" doesn't add any classes that we could use for styling.

• styleOverrides doesn't support the primary or colorPrimary key:

  styleOverrides: {
    primary: {
      color: palette.primary[palette.mode === "dark" ? "light" : "main"]
    },
  }
  

• New component variant has no effect:

  variants: [
    {
      props: { color: "primary" },
      style: {
        color: palette.primary[palette.mode === "dark" ? "light" : "main"]
      },
    },
  ],
  
  

Same applies for color="error".

Expected behavior 🤔

Typography provides some way to change the color of color="primary" into palette.primary[palette.mode === "dark" ? "light" : "main"], and same for color="error".

Steps to reproduce 🕹

https://codesandbox.io/s/brave-spence-5wxolh?file=/demo.js

Context 🔦

We're maintaining a UI library based on MUI, so we can't fix this at the <Typography> call site. So we can't do for example <Typography color={palette.primary[palette.mode === "dark" ? "light" : "main"]}>.

Your environment 🌎

No response

Start at the Typography component and reproduce the behavior from the linked CodeSandbox using color="primary" and color="error". Review how styleOverrides and theme variants are applied to these color props. Done means theme customization changes both colors without requiring changes at each Typography call site.