Tokens - Initial Impressions

A small feedback on reorganizing and linking/relative values

Dragging collapsed set groups breaks the token editor until a reload and
selecting sets for themes can really become impossible on long lists :sweat_smile:


Pressing the collapse saves instead (as a workaround), but scrolling would be needed.
Also renaming components vs tokens feel inconsistent when it comes to ungrouping :thinking:

I wonder why can’t we do overrides like adjusting the alpha value of the same name without self-references and cycles, i.e. a translucent set that could take app.bg from base and do rgba({app.bg},0.5) also needs to be called app.bg for it to override correctly but that’s not possible I guess.
image

For now, I found a workaround to set the base app.bg to a {dynamic.color.value} and do rgba() on the same relative set in the translucent one as well

I thought we would do global aliases with the full name, e.g. {vendor.base.app.bg} etc to avoid conflicts, but I might be misinterpreting the w3c spec here.
Still on the spec, I believe this specific rgba alpha override is the only calculation we can do so far with other colours, right?
Maybe I’m just overcomplicating things, but some extended transformations (like style dictionary) could become handy.


Playing around with the colors, so far the new system is integrated really nicely! Better than some other competitors and any previous foss tool for sure =D

1 Like