Using Style Dictionary to generate Design Tokens files for Wistia

It's been said that Design Tokens are design decisions, reflected in code. We keep those decisions in a single-source of truth for Wistia.com in the design-tokens repo. Powered behind the scenes by Style Dictionary, design-tokens take a .json source housed in the /properties directory to build various output formats. On Storefront, we use the javascript/flat-map format, but we also build a .css version intended for use in Auth.

The process for updating tokens is as follows:

• Make changes to .json as needed as a pull-request
• Once approved and merged into the main branch, choose one of npm version patch | minor | major
• This step creates a new commit with the version changes and created a tag so it should be pushed with git push origin --tags
• npm publish to publish the new version

To consume the revised package (in Storefront, for example)

• On a branch, run npm i @wistia/design-tokens to upgrade to the newest version
• commit package.json and package-lock.json changes

Congrats! You should have up-to-date tokens now on Storefront.