# @artsdatabanken/tokens

Design tokens for the Artsdatabanken design system — colours, spacing, typography, and dark mode as CSS custom properties.

## Installasjon

```bash
npm install @artsdatabanken/tokens
```

## Bruk

Importer alle tokens (primitives, semantic, spacing, og dark mode):

```css
@import '@artsdatabanken/tokens';
```

Eller importer kun det du trenger:

```css
@import '@artsdatabanken/tokens/primitives';
@import '@artsdatabanken/tokens/semantic';
@import '@artsdatabanken/tokens/spacing';
@import '@artsdatabanken/tokens/dark';
```

## Eksempel

```css
.card {
  background: var(--adb-surface-default);
  color: var(--adb-text-primary);
  padding: var(--adb-spacing-md);
  border: 1px solid var(--adb-border-default);
  border-radius: var(--adb-radius-md);
}
```

## Dark mode

Aktiveres automatisk med `prefers-color-scheme: dark`, eller manuelt med `data-theme="dark"` på et overordnet element:

```html
<body data-theme="dark">
  <!-- Alle tokens bytter til mørk modus -->
</body>
```

Tving lyst tema med `data-theme="light"`.

## Navnekonvensjon

| Type | Mønster | Eksempel |
|---|---|---|
| Primitiver | `--adb-{gruppe}-{palett}-{skala}` | `--adb-brand-freshwater-blue-90` |
| Semantiske | `--adb-{rolle}` | `--adb-surface-accent`, `--adb-text-primary` |
| Spacing | `--adb-spacing-{navn}` | `--adb-spacing-sm`, `--adb-spacing-md` |
| Radius | `--adb-radius-{navn}` | `--adb-radius-3xl` |
| Font | `--adb-font-family-{rolle}` | `--adb-font-family-primary` |

## CDN

For bruk uten npm (f.eks. prototyping):

```html
<link rel="stylesheet" href="https://cdn.example.com/@artsdatabanken/tokens@1.0.0/tokens.css" />
```

## Lisens

[Apache 2.0](../../LICENSE)
