w3c design tokens integration about assistant

[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.