gistfile1.txt

## 🚚 Installation
```sh
npm i @rhds/tokens
```

## 🎭 Usage
We use [style-dictionary](https://amzn.github.io/style-dictionary/) to transform our tokens into multiple formats and helpers.

### Stylelint Plugin

Install the stylelint plugin to automatically correct token values in your files.

```yaml
# .stylelintrc.yml
extends: stylelint-config-standard

# add the plugin:
plugins:
  - ./node_modules/@rhds/tokens/plugins/stylelint.cjs

# Make sure to activate the rule:
rules:
  rhds/token-values: true
```

### Global CSS
Apply defaults to the document root by importing the global stylesheet:
```html
<link rel="stylesheet" href="/url/to/@rhds/tokens/css/global.css">
<style>
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--rh-font-family-heading);
  }
</style>
```

### Shadow Root Reset
Reset a component's styles (preventing inheritance) by adding `resetStyles` to it's static Constructible Style Sheet list:
```ts
import { resetStyles } from '@rhds/tokens/css/reset.css.js';
import style from './rh-jazz-hands.css';

@customElement('rh-jazz-hands')
export class RhJazzHands extends LitElement {
  static readonly styles = [resetStyles, style];
}
```

### JavaScript Objects
Import tokens as JavaScript objects:
```js
import { tokens } from '@rhds/tokens';

html`<span style="color: ${tokens.get('--rh-color-blue-300')}">I'm blue</span>`;
```
or for tree-shakable imports:
```js
import { ColorBlue300 } from '@rhds/tokens/values.js';

html`<span style="color: ${ColorBlue300}">I'm blue</span>`;
```
**NOTE**: We *strongly* recommend using CSS variables (and accompanying snippets)
wherever, instead of importing tokens as JavaScript objects.