# Netlify Design Tokens [![NPM version](https://img.shields.io/npm/v/@netlify/netlify-design-tokens.svg)](https://npmjs.com/@netlify/netlify-design-tokens)

## Usage

Install the package in the project of your choice:

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

From there, you may import any of the [`dist`](dist) files into your codebase for reuse as desired:

### CSS

Basic usage:

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

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

Global dark mode support:

```css
@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:

```css
@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

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

const teal = colorFacetsTeal500;
```

or:

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

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