@netlify/netlify-design-tokens

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(--color-teal-200);
}

Global dark mode support:

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

:root {
  --colorTeal: var(--color-facets-teal-200);
}

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

.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(--color-rgb-facets-teal-200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorTeal: var(--color-rgb-facets-teal-500);
  }
}

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

JavaScript

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

const teal = tokens.color.facets.teal.500;