Toko

Design token translator

Adopting the latest Design Token specification, it consumes token source files and exports them into usable files for different platforms.

Installation

npm install toko

Usage example

Built-in strategies

There are currently 4 built-in strategies that are ready to use namely,

• css
• less
• scss
• js

In which you can import from,

import { css } from 'toko/formats';

Configuration options

  {
    inputs: string[];
    prefix?: string;
    outDir?: string;
    outputs: [
      css({
        prefix?: string,
        resolve?: boolean,
        filename?: string,
        selector?: string
      })
    ]
  },

As JavaScript library, there are 2 approaches to use.

First, valid format JavaScript objects can be passed directly into translate(...)

import { TokenParser, TokenTranslator } from 'toko';
import { css } from 'toko/formats';

const config = { 
  ...,
  outputs: [css()]
}

const translator = new TokenTranslator(config);
const tokens = translator.translate(tokenJSON1, tokenJSON2, tokenJSON3);

Second approach, JavaScript objects can be pass to TokenParser first and uses TokenCollection. - an intermediate data structure that contains richer information, to pass to TokenTranslator.

import { TokenParser, TokenTranslator, TokenCollection } from 'toko';
import { css } from 'toko/formats';

const parser = new TokenParser();
const collection: TokenCollection = parser.parse(tokenJSON1, tokenJSON2, tokenJSON3);

const config = { 
  ...,
  outputs: [css()]
}

const translator = new TokenTranslator(config);
const tokens = translator.translate(collection);

Or as cli,

toko -c examples/cli.config.js

toko examples/base.tokens.json -f css scss -o tokens.css tokens.scss -d dist

Development setup

To start demo page,

npm start