@wix/design-system-tokens

Wix Design System Tokens

This package contains:

1. JSON files containing WDS token definitions.
2. style-dictionary script to process these files and create required output.
3. output generated with style-dictionary.

How it works

Source files which are used to generate style-dictionary output are stored in src/tokens directory in JSON format. These files are processed by style-dictionary, which transforms data into a specific structure & format and outputs files to root tokens directory.

To generate output, run

$ yarn generate

Since this package just exports static files, the build script is only used to prepare package for publishing by moving generated files to the root of the package to allow more elegant imports.

Build & Configuration

Build entry point is generate.ts file which controls the execution of input parsing & output generation. Main configuration for expected output is stored in build-config.ts file. Current solution is partly customized, we use custom Format and Transform to suit our needs.

You can find more details on Style Dictionary and its' configuration here.

Consumption

Tokens are available in 2 themes - default and Studio. Default theme resides at the root of the package, while Studio theme is under the studio directory. Each theme has files named foundation, semantic and component, these correspond directly to the tiers of the tokens. File named all contains the tokens from all of the tiers.