UP42 Douglas: Design Tokens

Intro

This repository handles the Douglas Design System tokens. Using Style Dictionary, the tokens are compiled into css and json.

Prerequisites

The package is published to UP42's npm registry on Google Artifact Registry. You must have the Google Cloud CLI (gcloud) installed and authenticated. Check the guide for more context.

Install

To get started with Douglas run:

$ pnpm add @up42/design-system-tokens

or if you are using npm:

$ npm install @up42/design-system-tokens

or if you are using yarn:

$ yarn add @up42/design-system-tokens

Usage

To include the tokens in your app:

import tokens from '@up42/design-system-tokens/dist/json/tokens.json'

css variables are available at dist/css/tokens.css:

.douglas {
  background: var(--douglas-color-primary);
}

Commit messages and creating a release

Please check here to learn more about how to release a new version, and here to know more about our commit message convention.