Support for new Design Tokens format?

[drwpow]

I ran across this addon looking for something to display our design tokens expressed according to the upcoming W3C Design Tokens schema, which is a JSON format. It’s still new and somewhat in flux, but I think the overall direction and basic boundaries have been solidified and from here it’s minor tweaks and tiny changes.

Currently the schema supports

• color
• dimension (e.g. 16px)
• duration (e.g. 250ms)
• font (name)
• url (e.g. ./icon/alert.svg)
• cubic-bezier
• typography (multiple font styles)
• gradient
• shadow
• transition

and a few other types are coming down the pipe soon (it’s moving pretty quickly)

I’ve been migrating our design tokens to use this new format, and I’ve also been building my own tooling and participating in the schema discussions as well.

So all that said, would supporting design tokens JSON be something you’d be interested in supporting? And would I be able to assist in that in some way?

[Sqrrl]

Sounds good, and should be pretty straight-forward to implement. I just won't be able to do it in the next few weeks/months.

If you'd like to give it a shot, the strategy could look something like this:

• add JSON files to the webpack loader
• implement a parser for the W3C Design Token files (like the postcss.parser.ts and svg-icon.parser.ts) that extracts and maps categories and tokens from the JSON
• add the categories and tokens to the useTokenTabs hook

[CodeByAlex]

@drwpow this is a great idea - was there any movement on this. We are using Style Dictionary and instead of adding comments in the output, it would be great if the addono could just read in the json

[drwpow]

I’ve been building a parser for the new W3C Design Tokens format, and it’s in such early stages it’s changing so rapidly. It started out being basically the same as style dictionary, but a recent change has made the two formats diverge (e.g. $value rather than value). Will probably wait a little bit for the Design Tokens spec to settle before starting.

But if anyone else wants to yield better support for Style Dictionary please go ahead (I’m hesitant to say that they’ll end up being the same thing; they may be different features entirely)!

[esbenjuul]

This is also a feature I would be using! I would love to assist in the development if I can.

[noe-david]

Would love to see this come to life!!