[sync] theme contrast instead of contrastText when exported using Material UI Sync

[fpaz]

Steps to reproduce

When extracting the theme using Material UI Sync. The contrastText was renamed to contrast

{
  "colorSchemes": {
    "light": {
      "palette": {
        "primary": {
          "main": "#042B37",
          "dark": "#032631",
          "light": "#4F6B73",
          "_states": {
            "active": "rgba(4, 43, 55, 0.56)",
            "hover": "rgba(4, 43, 55, 0.04)",
            "selected": "rgba(4, 43, 55, 0.08)",
            "focus": "rgba(4, 43, 55, 0.12)",
            "focusVisible": "rgba(4, 43, 55, 0.3)",
            "outlinedBorder": "rgba(4, 43, 55, 0.5)",
            "disabled": "rgba(4, 43, 55, 0.38)",
            "disabledBackground": "rgba(4, 43, 55, 0.12)"
          },
          "contrast": "#FFFFFF"  // <-- contrast instead of contrastText
        },

Current behavior

When viewing the source for the root style. We get two contrast values.

:root {
    --mui-palette-primary-contrast: #FFFFFF;
    --mui-palette-primary-contrastText: #fff;
}

Expected behavior

It should only generate one value for the contrast.

:root {
    --mui-palette-primary-contrastText: #FFFFFF;
}

Context

We have to rename contrast to contrastText from the generated theme for it to work on our application. Is there any documentation around the implementation of contrast?

Your environment

Software	Version
Design file version	v5.16.0
Design tool	Figma
etc.

Search keywords: contrast contrastText

[oliviertassinari]

True https://mui.com/material-ui/customization/palette/#color-tokens.

Stuff like https://github.com/mui/mui-private/blob/8f4f962d53c6aa5cd8fad3e43c04b6cbb161bd1f/packages/material-ui-sync-figma/src/defaults/theme.ts#L21 looks weird.

          primary: {
            main: '#2196F3',
            dark: '#1E88E5',
            light: '#42A5F5',
            contrast: '#FFFFFF',
            _states: {
              hover: 'rgba(33, 150, 243, 0.04)',
              selected: 'rgba(33, 150, 243, 0.08)',
              focus: 'rgba(33, 150, 243, 0.12)',
              focusVisible: 'rgba(33, 150, 243, 0.3)',
              outlinedBorder: 'rgba(33, 150, 243, 0.5)',
            },
          },

packages/material-ui-sync-figma/src/defaults/theme.ts

[oliviertassinari]

I can reproduce with the latest version:

I suspect that fixing #393 in the Figma Kit and updating the source in the Figma plugin, like https://github.com/mui/mui-private/blob/8f4f962d53c6aa5cd8fad3e43c04b6cbb161bd1f/packages/material-ui-sync-figma/src/defaults/theme.ts#L21 will fix this.