[question] Sync support for Material UI v6

[JeffBaumgardt]

The problem in depth

Using the Sync Plugin (beta) I am able to generate a colorSchemes object. However, that object doesn't quite match the shape for the palette in V6. For instance #382 is an error that I also came across.

Reading the source on say Button I'm trying to infer the hover background color. As far as I can tell it's theme.palette[color].dark which is not the way I want to go, but rather use the states on the color palette for the color which in the figma theme can be a different value from the primary.

For instance colorSchemes.light.palette.primary.main: #1b1b6c colorSchemes.light.palette.primary.dark: #131335

I want to make the hover rgba(27, 27, 108, 0.08), or the same hex as main with an alpha.

Also my designer has created several component changes that are exported as _components which is also not on the theme options type.

I did see there was a roadmap with the sync plugin to actually generate a whole theme.js/ts file. If that's still the goal I would love to tag along.

I feel like the way I'm reading the source on a component I will actually end up having to do a very large component override section in the theme to work around this. I figure I would ask first before I dig too deep in sourse.

Your environment

MUI for FIgma Material UI-v5.16.0 I am installed 5.17 in the morning, but I don't see any changes here that this minor is going to effect this.

Search keywords: Version 6, _states

[JeffBaumgardt]

Specifically the button source I'm seeing is https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Button/Button.js#L176:L187

I don't have a quick/easy way to override the pseudo styles. I could use sx props and one off change there but I would rather have a composable theme object handle this with https://mui.com/material-ui/customization/theme-components/#variants

[JeffBaumgardt]

Update: I am able to override on the theme components as I would expect

components: {
        MuiButton: {
            styleOverrides: {
                root: {
                    variants: [
                        {
                            props: {variant: 'contained'},
                            style: {
                                '@media (hover:hover)': {
                                    '&:hover': {
                                        '--variant-containedBg': 'red',
                                    },
                                },
                            },
                        },
                    ],
                },
            },
        },
    },

In this instance I am overriding the hover state of the button, which I would map to the primary._states.hover in concept. You can see the difficulty here that would go forward as I would have to override all elements that have a pseudo state like this. Also this solution uses css variables so this isn't a pure copy paste for everyone.

I'm not sure who/how to move forward. The design tokens in Figma are great to have, but converting design to a generated theme right now isn't going to work.

[JeffBaumgardt]

As far as I can tell this is actually expected. Given the default behaviour of the hover state goes from main to dark is shown in documentation and even in the figma design file for say buttons. So really this question now more pertains to what is _state and is it just something more the plugin should not resolve when exporting the theme?