Skip to content

knapsack-labs/design-token-tools

Repository files navigation

Tools to help you easily work with design tokens.

A W3C Community Group has formed to define the spec of what a "design token" looks like in a standardized format.

In its simplest form, a token in the proposed spec can look like this:

{
  "token name": {
    "$value": "#fff000",
    "$type": "color"
  }
}

Tokens can also represent more complex concepts:

{
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000080",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}

The tools in this monorepo - which are published as separate packages - make working with and converting your design token data a breeze! Navigate to each folder below for installation instructions and instructions on how to use.

Main Packages

Typescript types describing the shape and behavior of token spec data.

The main utility for parsing raw tokens json into a flattened, de-referenced, developer-friendly intermediate format.

Misc Packages

Convert token data into web assets like CSS, Sass, Less.

Share utilities between the following packages.