Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[sync][question] Support for Material UI v6 #397

Open
JeffBaumgardt opened this issue Sep 10, 2024 · 3 comments
Open

[sync][question] Support for Material UI v6 #397

JeffBaumgardt opened this issue Sep 10, 2024 · 3 comments
Labels
figma scope: sync Issues related to the Material UI Sync Figma plugin

Comments

@JeffBaumgardt
Copy link

JeffBaumgardt commented Sep 10, 2024

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 JeffBaumgardt added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: question Community support but can be turned into an improvement labels Sep 10, 2024
@JeffBaumgardt
Copy link
Author

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

@zannager zannager added figma scope: sync Issues related to the Material UI Sync Figma plugin labels Sep 11, 2024
@JeffBaumgardt
Copy link
Author

JeffBaumgardt commented Sep 11, 2024

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
Copy link
Author

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?

@oliviertassinari oliviertassinari removed support: question Community support but can be turned into an improvement status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 3, 2024
@oliviertassinari oliviertassinari changed the title [question] Sync support for MUI@6 [question] Sync support for Material UI v6 Oct 9, 2024
@oliviertassinari oliviertassinari changed the title [question] Sync support for Material UI v6 [sync][question] Support for Material UI v6 Dec 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
figma scope: sync Issues related to the Material UI Sync Figma plugin
Projects
None yet
Development

No branches or pull requests

4 participants