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
397 stars 27 forks source link

Ability to rename custom color and change default primary value (instad of custom040) #28

Closed rahulgajjar closed 2 years ago

rahulgajjar commented 2 years ago

When the custom color is added it is being added as custom0 and custom1 which is not helpful.

By default, the Material theme does not generate the colors for Warning or Success. When those colors are added to the theme as custom colors, it would help to identify which color is used for which. This is extremely helpful when the created styles are used by many designers on the team who maybe are not familiar with technical terms.

My purpose of adding custom color is to keep some color static, like brand color or the warning, success colors. While keeping the ability to change colors dynamically for another part of the UI. Renaming the field would help to make a clear distinction.

The second issue is there is no way for me to define proper success and warning color following the current scheme where it automatically selects the value 40 for the custom color. Even in the example image shown on the material3 website, I would not be able to get those orange and green colors.

image

image

PrattiDev commented 2 years ago

I want this so, so badly. The fact we can't insert a shade to a custom token makes creating original designs with dynamic color impossible within Figma.

When the plugin was first released, I thought this would be an option. In any case, one of the ideas I've had was to write the desired shade as a description of a color style and have it be recognized by the plugin and assigned properly.

Token

Haven't really gone through all the edge cases and potential accessibility issues. I'm sure Google's designers would know it best. It's a very important feature that I think deserves more attention.

rodydavis commented 2 years ago

Just added support for custom color, rename and delete on the web version! 🎉

https://material-foundation.github.io/material-theme-builder/#/dynamic

Working on rename support for the Figma version.

rahulgajjar commented 2 years ago

@rodydavis Thank you so much for the update.

Still, one issue remains. I would be unable to select the orange color as mentioned in the above example. When the custom color is added, it is meant to be custom, or at least very close to the custom color. I get that the material you will generate the palette according to the predefined algorithms, but the selected color could be more close to the input color.

When I input orange color (#E7A12A) it gives dirty orange color (Orange 40) which is very far from the input color and unusable in many cases. The input color is more close to 'Orange 70' on the generated palette. Is there a way to do that? The rest of the colors (On Orange, Orange Container, On Orance Container) could be adjusted accordingly so that it meets the accessibility standards.

rodydavis commented 2 years ago

This is as designed, but the original key color used as input will be available in export. If it is not or missing on a platform please file an issue!

and you are welcome 🎉