What is the best way to work with existing UI Kits?

[phrutos]

Hey there,

I have a design system that has a bunch of colors all applied to about 10K components.

I'm able to import the style into tokens, but how do I make colors change? Currently, I have to go one by one. Is that because the tokens can't be cross-referenced since I didn't create it from scratch from global tokens? Is there a way to connect them to avoid editing each color 900 to 25 one by one?

Really appreciate any feedback.

Thanks!

[six7]

You mean creating semantic design tokens? The way I usually did it is to rename the applied styles to be semantic ones, then create those raw values again (e.g. gray/700 becomes text-muted) and then create a reference from gray700 to text-muted).

What were you hoping the plugin could help you with? Automatically mapping these to new semantic tokens? I'm afraid thats out of scope for this plugin, as it would require some sort of clever ai solution there.

To add on the above way: i found this to be the easiest way as you dont lose applied styles that way. Basically you never want to have option tokens applied anywhere, they should only be values for your semantic ones. And with the above way mentioned above that's a pretty fast process.

[phrutos]

Hey, thanks for the response! I'm a big fan of all your plugins and a big supporter.

I was referring to something like Material Design's color picker. Once you input a color HEX, it identifies roughly the value (900 or 700, etc.), and it gives you the rest of the pallet automatically. I know I'm being lazy here, but if the idea is to be fast, it would be great to achieve that. For example, when I edit one token from the same name, like Primary.900, all other tokens are updated accordingly. https://material.io/design/color/the-color-system.html#tools-for-picking-colors

I think this would require the plugin to have or go get a color library and approximate the colors of the same token tree in that library? I guess that would be the next step which could save setting up time and reverse engineer the plugin logic a bit? Just a thought.

I'm still trying to learn how to take advantage of huge UI Kits, and what all plugins combined can do. Maybe I could run the Batch Styler first on these raw values and then import the tokens. And then, perhaps, I would not have this question.

Regardless, I love and appreciate the tools you provide.

[six7]

I think what would be required for that would be transforms on colors such as lighten() darken() etc. Then you could define your 500 color and have all other colors be transforms of that. That idea was brought up in #85

Once we have that, what you describe would be doable!

And thank you for the kind words! 😊 Glad you like it! ❤️