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

Allow the creation of new color tokens directly on Materials Theme Builder #288

Open etyarews opened 6 months ago

etyarews commented 6 months ago

Is your feature request related to a problem? Please describe. The Material Guidelines mention the possibility of creating new color tokens to fit your app needs. Creating new roles is cumbersome and needs fiddling with code, doesn't help that the Theme Builder doesn't export ref colors per #262, which makes it even more cumbersome

Describe the solution you'd like Allow the creation of new color roles on the theme builder website, let us to pick a ref color for dark and light.

Additional context Would also be nice if there was a way to verify contrast ratio between tokens so we can be sure our custom tokens are up to standard.

margeeta commented 5 months ago

Thank you for the request, MTB does create extended color roles, was there an additional use case these do not fulfill?

etyarews commented 5 months ago

Alright, so the nomenclature is a bit confusing as the guidelines changed the names of a few concepts, bear with me for a sec while I explain things you already know:

I'm not talking about additional colors that are called "Custom/Extended/Additional/Static" colors. Those are implemented in MTB, you add a extended color and MTB spits out Extended, onExtended, ExtendedContainer and onExtendedContainer color roles.

What I'm talking about is what the guidelines call Custom Color Roles.

This is the example used:

ln4hk6dp-19

In this example, Primary Graphic is a custom color role created that uses the primary tonal palette, with tone 50 specified as the default value.

This isn't the same concept as "extended" colors