w3c design tokens integration

[LilithWittmann]

Is your feature request related to a problem? Please describe.
Currently - as far as I understand - there is no way to custom configure interactions with elements in grida. (e.g. Button hover, text field focus, …)

Describe the solution you'd like
During some research about how to build a state-of-the-art design system, I stumbled upon the awesome work you did here. And generally, it looks like an awesome solution to a lot of issues. I'm just uncertain about how to properly configure interactions like button hover, … in the context of grida. And as I'm currently also exploring w3c design tokens - I thought integrating semantic named w3c design tokens with grida (assistant) could be a great combination.

Did you ever consider that?

[softmarshmallow]

This is a very important subject, and we have a flags feature to contribute on it (still in preview stage).

• Flgas docs - https://grida.co/docs/flags/
• Flags demo - https://blog.grida.co/introducing-grida-embeddings-figma-designs-made-alive-with-production-ready-code-254e40b206bc

Please take a look and share your thoughts!

p.s. your w3c link seems dead (404)

[LilithWittmann]

Oh wow, thank you, for your quick reply! Sorry, I fixed the w3c link.

Yes, I played a bit with the concept of the flag and I think it is really great for annotating something semantically e.g. as a button. But I don't see how this could be still user-friendly when you build e.g. a button with 5 different states (normal, hover, pressed, focus, disabled) and multiple attributes changes in each state (e.g. color, border, shadow).

So I thought it could be cool if you would have a w3c design token definition for each element that looks something like this:

{
   "button":{
      "variants":{
         "base":{
            "default":{
               "bg":{
                  "$value":"{colors.primary.20}"
               }
            },
            "hover":{
               "bg":{
                  "$value":"{colors.primary.80}"
               }
            }
         }
      }
   }
}

So you would have a nested structure of type -> variants -> state. This token structure could be managed with tools like Figma Tokens and then automatically applied to the generated code.

[softmarshmallow]

That is great. Infact it was something I was looking for.
Theres a lot on my table right now, I'll get on to this tomorrow and share my thoughts in details.