Sw-web-tokens NPM

SW-web Tokens

Requirements

Node >= v16.14 – if you have nvm installed, you can just run nvm use to select the right node version.
yarn classic

Installation

yarn

Initialize Style Dictionary Tokens

Customize token-primitives.json and run yarn init-tokens. See https://github.com/kickstartDS/kickstartDS/blob/feature/style-dictionary/packages/components/core/design-tokens/defaultPrimitives.json for all possible properties.

This will create a tokens.json that Style Dictionary can process.

Note that yarn init-tokens will overwrite a previously created tokens.json!
The init-tokens task is ment to be run once at the very beginning of customization.

Start Storybook

yarn start

Customize Tokens

Once tokens.json was created, you can modify this file to customize the tokens.

Icons

Add/remove/modify SVG icon files in the icons folder.
The filename will be used as identifier. So if you have an icon file named inbox.svg, you can use it e.g. in the Icon componenten (or any component that uses the Icon component): icon="inbox".