[FEAT] Implement design tokens

[drfarrell]

Color Variables make sure that designs comply with brand guidelines, and has been a really popular feature adopted by designers as they've become more technical.

Onlook should be able to...

• Read Variables from a rendered page or a codebase and display them for the user
• Allow users to create new Variables in a codebase
• Allow users to change existing Variables in a codebase
• Allow users to assign Variables to properties on an element

Why is this an important feature?

• It's perceived as a blocker for getting users to adopt the tool in their workflows – the current use of hex codes is insufficient for more complex codebases with variables already defined.

This understandably will require a good amount of design research to include in the current interface before it is built out.

[Kitenite]

One suggestion is that we implement a standard design token format. Maybe borrow from TailwindCSS. This way, people are port their design tokens into our format. This also means we can push updates from the Onlook app into the token file such that you can continue to build on top of it.

See this proposal for a standard format https://tr.designtokens.org/format/ Example of a design system tokens: https://github.com/oxidecomputer/design-system/blob/master/styles/src/tokens.json

[drfarrell]

Ideally the variables are as flexible as possible, and it seems from many systems that there is a lot of standardization of how variables are written. It seems like most if not all css variables are written to be human-legible.

Is it possible to read in the names of the tokens and understand their scopes and nubering from their names, and therefore, we don't have to be prescriptive about them?

For scoping specifically, if it has "text" or "bg" or "background" we can make it only show up in a dropdown input for that property.

As an example, here's a snapshot of variables from a product using mantine's color variables

[hitaspdotnet]

can you assign me to this please? I'm already done this, working on some refactoring.