erictooth/token2css

Easily convert design tokens into CSS preprocessor variables.

token2css ·

token2css takes a list of design tokens in a structured format such as JSON or YAML and converts them to a list of CSS preprocessor variables (Less, Sass/SCSS, and Stylus currently supported).

Usage

With stdin/stdout

cat ./tokens.yaml | npx token2css -f stylus > output.styl

With input/output flags

npx token2css ./tokens.json -f scss -o output.scss

Example

Design tokens:

color:
  blue:
    25: "#000d80"
    50: "#001aff"
    100: "#f5fafe"
  grey:
    35: "#595959"
    50: "#787878"
    85: "#dddddd"
button:
  border-radius: 5px
  min-width: 60px
  font-weight: 300
  padding: 7px 12px
  variant:
    primary:
      background-color: $color--blue--50
      border: 1px solid $color--blue--25
      color: white

SCSS output:

$color--blue--25: #000d80;
$color--blue--50: #001aff;
$color--blue--100: #f5fafe;
$color--grey--35: #595959;
$color--grey--50: #787878;
$color--grey--85: #dddddd;
$button--border-radius: 5px;
$button--min-width: 60px;
$button--font-weight: 300;
$button--padding: 7px 12px;
$button--variant--primary--background-color: $color--blue--50;
$button--variant--primary--border: 1px solid $color--blue--25;
$button--variant--primary--color: white;

Token Guidelines

• Do not use arrays in your token file — named keys are required for each nested property (accomplished by using objects).

Wrong:

color:
  - blue:
      25: "#000d80"
      50: "#001aff"
  - grey:
      35: "#595959"
      50: "#787878"

Correct:

color:
  blue:
    25: "#000d80"
    50: "#001aff"
  grey:
    35: "#595959"
    50: "#787878"

• Each nested level of a token results in another -- appended to the name.

Input:

button:
    disabled:
        background-color: grey

Output:

$button--disabled--background-color: grey;

• If you want to reference a variable, always perpend the name with $ — regardless of the target variable syntax you choose. $ indicates that the following value is a variable and allows it to be reformatted for other languages.

    color:
        blue:
            50: "#787878"
    button:
        background-color: $color--blue--50