EightShapes Design System Tokens

EightShapes Design System Tokens are key/value pairs representing visual style properties, offered as a package compiled by Amazon Style Dictionary. Learn more about tokens.

Token Source File

src/tokens.json5

The tokens source file follows the style dictionary format for "properties", their term for tokens. This file contains static key/value pairs with interpolated references to values defined earlier in the file.

Token Outputs

This repository builds multiple outputs based on the source token file:

• dist/js/esds-tokens.json
• dist/scss/_edsds-tokens.scss
• dist/scss/_esds-tokens-map.scss
• dist/css/esds-tokens.css
• dist/less/esds-tokens.less

Building Token Outputs

Before running commands in this repository, install lerna.

Running token scripts

The following esds-token npm scripts should be run from the root of the tokens package: ./esds-tokens

Compile Tokens

npm run build

Compile Tokens & Watch For Changes

npm start

Stop Watching

ctrl + C

Adding New Tokens

Add tokens to tokens.json5. They will automatically be added to the compiled outputs.

Amazon Style Dictionary supports spreading tokens across multiple files. If adding tokens in a new token file, the new filepath must be added to the source array in ./config.json.

Adding New Output Formats

Amazon Style Dictionary supports a wide range of token file formats. Refer to their Pre-defined Formats documentation for how to add a new output format.

Dependencies

• chokidar-cli
  Cross-platform file watcher used to trigger recompilation of tokens on save.

• trash-cli
  Cross-platform File system deletion utility used to delete compiled token files before each new build.

• style-dictionary
  Amazon's Token Compiler tool