[Typography] text color not working in v6 + Pigment CSS

[gaetansnl]

Steps to reproduce

Link to live example: (required)

Steps:
Use pigmentcss

1. <Typography color="text.secondary">Hello!!!</Typography>

Current behavior

No secondary text color

Expected behavior

Secondary text color

Context

Also same issue with ListItemText and secondary prop because it uses typography

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 22.5.1 - /opt/homebrew/bin/node
    npm: 10.8.2 - /opt/homebrew/bin/npm
    pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.100
    Edge: Not Found
    Safari: 17.3.1
  npmPackages:
    @emotion/react:  11.13.0 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.0.0-dev.240424162023-9968b4889d 
    @mui/icons-material: next => 6.0.0-beta.5 
    @mui/material: next => 6.0.0-beta.5 
    @mui/material-pigment-css: next => 6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 
    @mui/private-theming:  6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 
    @mui/styled-engine:  6.0.0-beta.5 
    @mui/system:  6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 
    @mui/types:  7.2.15 
    @mui/utils:  6.0.0-beta.5-dev.20240809-114550-93cb3d65e7 
    @types/react: ^18 => 18.3.3 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 
    typescript: ^5 => 5.5.4 

Search keywords: Typography text color not working

[siriwatknp]

I miss the migration docs for this. Using color prop with dot notation is not supported with Pigment CSS due to dynamic interpolation.

Please use sx prop:

<Typography sx={{ color: "text.secondary" }}>Hello!!!</Typography>

[gaetansnl]

Thanks. I confirm it works with sx. Seems the issue is also present in mui code

material-ui/packages/mui-material/src/ListItemText/ListItemText.js

Line 109 in d9d0a37

color="text.secondary"

[siriwatknp]

Thanks. I confirm it works with sx. Seems the issue is also present in mui code

material-ui/packages/mui-material/src/ListItemText/ListItemText.js

Line 109 in d9d0a37

color="text.secondary"

Oh, wow thank you so much. Will open a fix soon.

[aarongarciah]

@siriwatknp can you expand on this?

Using color prop with dot notation is not supported with Pigment CSS due to dynamic interpolation.

From a DX perspective I'd expect to be able to use the same notation everywhere a color is expected.

[siriwatknp]

From a DX perspective I'd expect to be able to use the same notation everywhere a color is expected.

Just to be clear, is this expected in your opinion <Button variant="outlined" color="text.primary">?

At the moment, we should separate between color prop and sx color.

color prop: it does not represent an exact value of CSS color to use, for example, <Button color="primary"> uses different CSS color value depends on the variant prop. You can only guess that the tone of the Button will be within primary palette. I think this mental model should apply to all components. (or change the name of the prop to something else)

sx color: this refers directly to CSS color property, so you can use dot notation or any valid CSS color.

[siriwatknp]

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.