design-tokens

Uses style-dictionary to transform tokens defined in json into different formats.

Install dependencies

pnpm install

Generate tokens from json

pnpm run build

Exported Tokens

Sass

_tokens.scss contains exported token values as Sass variables.

@import "~@cockroachlabs/design-tokens/dist/web/tokens"

.example {
    background-color: $color-background-button-primary-success-base;
    color: $color-font-button-primary-success-base;
    border-width: 1px;
    border-style: solid;
    border-color: $color-border-button-primary-success-base;
}

Stylus

tokens.styl contains exported token values as Stylus variables.

@require "~@cockroachlabs/design-tokens/dist/web/tokens"

.example
  color $color-intent-success-4
  background-color $color-intent-success-1
  border-radius 3px

JavaScript

tokens.js contains exported token values as JavaScript constants.

import {
  ColorFont1,
  ColorBaseBlue,
  ColorBasePurple,
} from "@cockroachlabs/design-tokens";

// ...

<SomeComponent
  fontColor={ColorFont1}
  interactionColor={ColorBaseBlue}
  progressColor={ColorBasePurple}
/>;

a tokens.d.ts file is also generated to act as types for tokens for TypeScript support.