Netlify Design Tokens

Usage

Install the package in the project of your choice:

yarn add -D @netlify/netlify-design-tokens

From there, you may import any of the dist files into your codebase for reuse as desired:

CSS

Basic usage:

@import '@netlify/netlify-design-tokens/dist/css/color.css';

.myComponent {
  color: var(--colorFacetsTeal200);
}

Global dark mode support:

@import '@netlify/netlify-design-tokens/dist/css/color.css';

:root {
  --colorTeal: var(--colorFacetsTeal200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorTeal: var(--colorFacetsTeal500);
  }
}

.myComponent {
  color: var(--colorTeal);
}

Alternatively, use the rgb(<color> / <alpha>) notation to vary color opacity:

@import '@netlify/netlify-design-tokens/dist/css/color.rgb.css';

:root {
  --colorTeal: var(--colorRgbFacetsTeal200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorTeal: var(--colorRgbFacetsTeal200);
  }
}

.myComponent {
  color: rgb(var(--colorTeal) / 50%);
}

JavaScript

import { colorFacetsTeal500 } from '@netlify/netlify-design-tokens';

const teal = colorFacetsTeal500;

or:

import * as tokens from '@netlify/netlify-design-tokens';

const teal = tokens.colorFacetsTeal500;
const boldText = tokens.typographyWeightBold;