6.0.0 • Published 5 months ago
@netlify/netlify-design-tokens v6.0.0
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;
6.0.0-beta.7
7 months ago
6.0.0-beta.8
7 months ago
6.0.0-beta.9
7 months ago
6.0.0-beta.3
7 months ago
6.0.0-beta.4
7 months ago
6.0.0-beta.5
7 months ago
6.0.0-beta.6
7 months ago
6.0.0-beta.1
7 months ago
6.0.0
5 months ago
6.0.0-beta.2
7 months ago
6.0.0-rc.1
6 months ago
6.0.0-rc.3
6 months ago
6.0.0-rc.2
6 months ago
5.0.0
1 year ago
4.0.1
1 year ago
3.4.0
2 years ago
3.5.0
2 years ago
4.0.0
2 years ago
3.3.0
2 years ago
3.2.0
2 years ago
3.1.1
2 years ago
3.0.0
2 years ago
2.1.0
2 years ago
2.0.0
2 years ago
1.1.2
2 years ago
1.1.0
3 years ago
1.0.0
3 years ago