@simonprodigi/design-tokens

Design Tokens

To ensure consistency across different apps we've extracted our core style variables into design tokens.

Contents

• Supported formats
• Installation
• How it works
• Development
• Deploying

Supported formats

• CSS Custom Properties (dist/styles.css)
• SASS Variables (dist/styles.scss)

Installation

Install the package:

npm install @simonprodigi/design-tokens

Then import into your project - here's an example for a React project:

import '@simonprodigi/design-tokens/dist/styles.css

How it works

Each set of tokens are defined in JSON files with the following structure:

{
  "type": {
    "group": {
      "modifier": "value"
    }
  }
}

Here is an example where color is the type, white, black and grey are groups and 10 to 90 are modifiers:

{
  "color": {
    "white": "#FFFFFF",
    "black": "#000000",
    "grey": {
      "10": "#F4F4F9",
      "20": "#ECEDF3",
      "30": "#D1D3DC",
      "40": "#AFB2BE",
      "50": "#9295A4",
      "60": "#787C8C",
      "70": "#5C606F",
      "80": "#454856",
      "90": "#2F323D"
    }
  }
}

The configuration contained in the JSON files is used to generate outputs in the supported formats. Namespaces are generate according to the structure of the JSON file. For example, CSS Custom Properties follow this format:

--type-group-modifier: value;

The data from the previous example would generate the following CSS Custom Properties:

:root {
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-grey-10: #F4F4F9;
  --color-grey-20: #ECEDF3;
  --color-grey-30: #D1D3DC;
  --color-grey-40: #AFB2BE;
  --color-grey-50: #9295A4;
  --color-grey-60: #787C8C;
  --color-grey-70: #5C606F;
  --color-grey-80: #454856;
  --color-grey-90: #2F323D;
}

Development

To build outputs in the supported formats, run the following command:

npm run build

The files generate should appear in the dist/ directory.

Deploying

To publish the package to NPM run:

npm run deploy

This script will build the outputs before publishing to NPM.