search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
362 stars 28 forks source link

Material Theme Builder - infinite save (completely unusable) #138

Closed viessg closed 1 year ago

viessg commented 1 year ago

Material Theme Builder can't be used on my chrome/figma as it infinitely saves GoogleMaterialThemeBuilder_bug

PhoenixWings7 commented 1 year ago

That happens to me too. I copied Material 3 Design Kit but when I try to customize colors via Theme Builder, it gets stuck on saving...

lucaben commented 1 year ago

This plugin is almost impossible to use, as riddled with bugs as it is... primary colour used as a background for full buttons gets a different colour than the one chosen, state layers colours (used as background for outlined buttons) are not updated, infinite saving and the plugin not reflecting the current chosen palettes (has to be restarted after each change), and the documentation on how to use colours is almost non-existent and no rationale given on why there's so many palettes and styles.

margeeta commented 1 year ago

Thanks for the feedback. MTB has been updated. Figma may time out with large files, but it shouldn't get stuck on instances. For more on M3 color system check out https://m3.material.io/styles/color/the-color-system/key-colors-tones

lucaben commented 1 year ago

Thanks Margeeta. I've deleted my previous comments as I think I've now understood why certain problems were showing up. The UI seems to loop indefinitely and someone may close it, thinking it doesn't work, that's something you may want to notify in the plugin UI. It takes a good 30 seconds for all the updates to propagate. The official documentation on how to use colours lacks detail, rationale and examples, I encourage the team to add more to it. It's a very long list of styles, it's difficult to understand why so many, and the tokens I see in the documentation seem to be inconsistent with the styles I see on the MD3 kit for Figma. Also something that should be clarified is how are these palettes generated? I've tried using different combinations of primary, starting from the same colour and only changing the lightness. I keep getting the same palette. That makes sense in a way, but none of the colours in the palette seem to perfectly match the one chosen. If I want to modify the background colour for the filled button so it passes AAA accessibility, apparently the only way to do it is to change it manually in Figma. It would be useful to understand what are the rules behind, so if there's any limitations on what can be automated, that's fine but at least I'd like to know. Another question is why do the secondary and tertiary colour update when I change the primary? It does make sense, but I can't understand what's the logic behind. Cheers