Design tokens as Sass variables and JS/JSON

[eliot-akira]

Ideally, there should be a single source of truth that generates the Sass variables used in the library.

For live documentation (and in the future an admin UI), the design tokens need to be in JS/JSON format.

Consider Style Dictionary.

A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation

There's a W3C working group that's standardizing the JSON format for design tokens.

The Design Tokens Community Group includes companies like Adobe and Figma, as well as Amazon where Style Dictionary was created.

---

Another consideration is if/how to integrate with WordPress block builder's theme.json.

• https://developer.wordpress.org/themes/global-settings-and-styles/

It seems to be loosely based on the design token "standard", but quite limited in scope so far.