Tay NPM | npm.io

tay

Compiles YAML design tokens into usable project variables.

Workflow

Installation

$ npm install --save tay

Usage

Add to npm package.json:

"scripts": {
	"tay": "tay --input tokens.yaml --output public/styles/tokens.css"
}

Then npm run tay. Additionally, if you use npm start/npm build:

"scripts": {
	"prestart": "npm run tay",
	"prebuild": "npm run tay"
}

tay will then run when you start or build the project.

Available formatters

Tokens can be output in the following formats:

CSS custom properties
Sass variables
JS exports
Flat JSON
JSON

CLI options

-v, --version              output the version number
-i, --input <inputFile>    Input YAML file
-o, --output <outputFile>  Output file
-w, --watch                Watch input for changes
-h, --help                 output usage information

Example

/src/tokens.yaml

spacing:
  large: 2rem
  medium: 1rem
  small: 0.5rem
radius:
  large: 0.5rem
  medium: 0.25rem
  small: 0.125rem

Run:

$ tay -i /src/tokens.yaml -o /public/tokens.css -o /src/tokens/tokens.js

/public/tokens.css

:root {
	--spacing-large: 2rem;
	--spacing-medium: 1rem;
	--spacing-small: 0.5rem;
	--radius-large: 0.5rem;
	--radius-medium: 0.25rem;
	--radius-small: 0.125rem;
}

/src/tokens/tokens.js

export const spacingLarge = '2rem';
export const spacingMedium = '1rem';
export const spacingSmall = '0.5rem';
export const radiusLarge = '0.5rem';
export const radiusMedium = '0.25rem';
export const radiusSmall = '0.125rem';