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/colors.css';
.myComponent {
color: var(--color-teal-200);
}
Global dark mode support:
@import '@netlify/netlify-design-tokens/dist/css/colors.css';
:root {
--colorTeal: var(--facets-teal-200);
}
@media (prefers-color-scheme: dark) {
:root {
--colorTeal: var(--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/facets.tailwind.css';
:root {
--colorTeal: var(--facetsTeal200);
}
@media (prefers-color-scheme: dark) {
:root {
--colorTeal: var(--facetsTeal200);
}
}
.myComponent {
color: rgb(var(--colorTeal) / 50%);
}
JavaScript
import tokens from '@netlify/netlify-design-tokens';
const teal = tokens.facets.teal.500;