@wonderflow/tokens

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):

Inside javascript

If you want to import and use tokens inside your javascript-based project, you can import the json version and use it. Note that the color tokens are provided in HSL format, without the css hsl() notation, which you have to add each time.

app.js

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

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

Inside CSS

Inside css files the tokens are available as custom env variables (env(--[TOKEN-NAME])), they are then converted into the final value at build-time.

app.css

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

div {
  /* Colors are defined as HSL-4 but without the hsl() notation */
  color: hsl(env(--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.