[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.

[aarongarciah]

@siriwatknp is this conceptually correct?

• color prop is not meant to have direct access to theme color tokens. It's a set of variants and every component decides which values to expose.
• sx has direct access to theme tokens e.g. color: 'text.primary'.

If that's the case, why did we support text.primary in the color prop before this PR?

I think we should be consistent and intentional with this decision. I agree a variant (color prop) is not the same as a CSS property (sx color property). The former is semantic and the later requires knowledge of how the component is implemented.

[gaetansnl]

@siriwatknp Maybe the issue is similar with "inherit". For example with https://next.mui.com/material-ui/react-link/ . It doesn't replace the color attribute too, seems the component is also based on typography

[siriwatknp]

is this conceptually correct?

Yes, that's what I perceive it at the moment.

If that's the case, why did we support text.primary in the color prop before this PR?

I believe that the push (at the beginning of v5, even before I joined) was about system props instead of sx prop but it was partially done with some components (e.g. Typography, Link, Box, Grid).

But things have changed and the direction we are pushing toward static generation with Pigment CSS does not work well with the system props, so I think that's the constraint to drop the system props.

I think we should be consistent and intentional with this decision

Totally agree, that's why I think the text.secondary should be removed from the color prop.

[siriwatknp]

@siriwatknp Maybe the issue is similar with "inherit". For example with https://next.mui.com/material-ui/react-link/ . It doesn't replace the color attribute too, seems the component is also based on typography

inherit is a CSS value, so it should be used in sx prop. Even though, there are components that support color: 'inherit' but I think it should not be continued to the rest because it could create the same confusion around what's inherit actually means.

[gaetansnl]

@siriwatknp So I suppose it is a breaking change for V6, but it makes sense. Thank you !

[siriwatknp]

@siriwatknp So I suppose it is a breaking change for V6, but it makes sense. Thank you !

It's not a breaking change for v6. It still works with the default Emotion engine but for opting-in to Pigment CSS, it will not work.