question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for new Design Tokens format?

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:4
  • Comments:5

github_iconTop GitHub Comments

3reactions
CodeByAlexcommented, Feb 18, 2022

@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

1reaction
esbenjuulcommented, Mar 23, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Design Tokens Format Module
This document describes the technical specification for a file format to exchange design tokens between different tools.
Read more >
Design Tokens and how a W3C specification will help going ...
We utilize Design Tokens to describe visual styles. The most common examples are colors, typography, radii, spacing, sizing, and shadows.
Read more >
Design Tokens Community Group - W3C
The Design Tokens Community Group's goal is to provide standards upon which products and design tools can rely for sharing stylistic pieces ...
Read more >
Design tokens – Material Design 3
Design tokens. Tokens store style values like colors and fonts so the same values can be used across designs, code, tools, and platforms....
Read more >
The Pyramid Design Token Structure: The Best Way to Format ...
This set of tokens make opinionated choices around base sizing, typography scales, main border radiuses, status colors, etc.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found