Package Exports

@wonderflow/tokens

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wonderflow/tokens) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Wanda Design Tokens

This repo contains all the design tokens generated from the Wonderflow design language. These tokens are the foundation for our digital products.

How to use

To use the tokens you have to install the npm package first:

npm i @wonderflow/tokens

based on the platform you're working on, you can import the tokens from the relative platform folder inside node_modules. For example if you're working on web, you can import the tokens as JSON or CSS (custom-properties):

app.js

import tkns from '@wonderflow/tokens/platforms/web/tokens.json'

<div style={{color: `hsl(${tkns.color.blue['50']} / 10%)`}} />

app.css

@import '@wonderflow/tokens/platforms/web/tokens.css';

div {
  /* Colors are defined as HSL-4 but without the hsl() notation */
  color: hsl(var(--color-primary-50) / 50%);
}

NOTE

You need to use postcss-import or postcss-easy-import to import files from node_modules

Platforms

Currently we ship tokens only for the web platform, others may be added in the future.