[figma] Elevation colors are confusing, try to find another method

[mui-bot2]

You have a new comment on Material UI for Figma (and MUI X)

Paul Whelan

Can I ask why the paper-elevation variables are is inside the background collection? Inside this collection you have 24 variables set to white, this kinda feels redundant and in the incorrect place especially considering you have setup a collection called 'elevation'. Inside the 'elevation' collection you have created a single variable called 'outline'. What is the purpose of this? In addition, Paper elevation is a style, correct? It's a drop shadow set in the styles panel so the variables set up are a bit confusing IMO. To apply elevation why are you proposing to add a variable (that only applies a colour) and a style to a frame... surely the style is enough. Just seem like an uanessacry step in the design process.

Reply to comment

Search keywords:

[adrianmanea]

Answered but I think there is an improvement here that can be done.

Hi @pwgsn the elevation of the paper has different background color on dark mode. We had to define those as variables so they can change based on the mode. Outline on the other hand is the same for both light and dark.
I absolutely get your point, having so many elevations defined while being all white (doesn't make sense, right?)—but we had to define them as long as the dark mode has different colors.
The API basically ads a layer with different opacity based on the elevation. I have an idea to simply define variables with the opacities of the elevation. That way we can stick with one color, I think. I may need to experiement.

[oliviertassinari]

palette.background.paper-elevation-* is kind of weird but I also get the rationale.
What confuses me though is palette.background.elevation.outline, I can't quite figure out the rule it follows, it feels random.

I could see us doing is to reorganize this:

• palette.background.paper-elevation-* -> palette._components.paper.background-elevation-*
• palette.background.elevation.outline -> palette._components.paper.outlineBorder (though palette.divider might be enough)