UP42 Douglas: Design Tokens

Intro

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

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);
}

scss variables are available at dist/scss/_tokens.scss:

.douglas {
  background: $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.