[Typography] Replace dot notation color value to work with Pigment CSS

[siriwatknp]

Context

Reported by #43278 (comment).

The dot notation should be used in sx prop.

For the color prop, the value should be a range of string so I have to add textPrimary and textSecondary to Typography because some components are using text.secondary internally.

Adjusted the color types to show autocomplete for supported color but still allow any string to that it does not break the app in v5.

Current change

Add textPrimary and textSecondary to Typography's color prop

Another option

Add text.primary and text.secondary to the Typography's variants:

export const TypographyRoot = styled('span', {
  name: 'MuiTypography',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    const { ownerState } = props;

    return [
      styles.root,
    ];
  },
})(({ theme }) => ({
  margin: 0,
  variants: [
    …,
    { props: { color: 'text.primary' }, style: { color: theme.palette.text.primary },
    { props: { color: 'text.secondary' }, style: { color: theme.palette.text.secondary },
  ],
}));

With this, it works with Pigment CSS and there is no need other internal usage of <Typography color="text.secondary">. However, I feel that it's a bit inconsistent with other components that has color prop.

Anyway, I am fine with both of the options.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43288--material-ui.netlify.app/

Link: parsed: +0.73% , gzip: +0.21%
@material-ui/core: parsed: +0.10% , gzip: +0.04%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f126e59

[aarongarciah]

I left a question in the issue #43278 (comment)

[siriwatknp]

I left a question in the issue #43278 (comment)

Another option is to add text.primary and text.secondary to the Typography's variants:

export const TypographyRoot = styled('span', {
  name: 'MuiTypography',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    const { ownerState } = props;

    return [
      styles.root,
    ];
  },
})(({ theme }) => ({
  margin: 0,
  variants: [
    …,
    { props: { color: 'text.primary' }, style: { color: theme.palette.text.primary },
    { props: { color: 'text.secondary' }, style: { color: theme.palette.text.secondary },
  ],
}));

With this, it works with Pigment CSS and there is no need other internal usage of <Typography color="text.secondary">. However, I feel that it's a bit inconsistent with other components that has color prop.

Anyway, I am fine with both of the options.

[aarongarciah]

After the discussion in #43278, I agree adding textPrimary and textSecondary is the way to go given our current theme palette shape. But for completeness, I think we should also add textDisabled, so we cover all values under the text key in the theme:

[DiegoAndai]

@siriwatknp should we add a small section to the pigment migration about this?

[siriwatknp]

@siriwatknp should we add a small section to the pigment migration about this?

Good point, adding it. It turns out that the migration guide already include the system props migration. I think it's enough.