epi-design-tokens

Episource Style Dictionary

At Episource, we believe in DRY - Do Not Repeat Yourself! Yes, we do not encourage the use of hexadecimal values for colors, font-size, spacing, when they can be represented as a token variable.

What is a Design Token?

Token is a thing serving as a visible or tangible representation of a fact, quality, feeling, etc. A design token is a variable-name-spacing that is used to represent actual values such as color hexadecimal value. For example, color #fff can be represented as epi-white.

This dictionary uses design tokens to define styles once and use those styles on any platform or language. It provides a single place to create and edit your styles, and exports these tokens to all the places you need - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.

It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

How to use the Design System

Contributing to this style dictionary

Create a branch of this repo, set up the required dependencies running the command

npm install

in your local CLI environment (if you prefer to use yarn, update the commands accordingly).

At this point, run

Tranform the files from the token.json into

npm run transform-tokens

Clean the Build Transformed folder

npm run clean-transformed

npm run build

This command will generate the files in the build folder.

For more information, refer to Amazon Style Dictionary, the official originator of the style dictionary.

Publish to NPM

You can either to publish to a local npm service or to publish externally.

This application is published to epi-design-tokens NPM package, which is a private module for episource.

When you publish this npm module, the prepublishOnly hook will run, calling the style dictionary build system to create the necessary files.

nom version <new-version-no>
npm publish

What to look at

Open the package.json file and see how in this specific app there is an extra prepublishOnly command script, that builds the dictionary.

This command is run automatically before the package is prepared and packed via the npm publish command.