# @managemate/tokens

Source unique des tokens DSMMG au format **W3C Design Tokens Community Group (DTCG)**.

## Usage

```sh
pnpm --filter @managemate/tokens build
```

Génère dans `dist/` :

| Fichier | Format | Pour qui |
|---|---|---|
| `tokens.css` | CSS custom properties `--mmg-*` | Le navigateur, importé par `@managemate/css` |
| `tokens.js` | ESM | Code Node/Bundler — JS/TS apps |
| `tokens.cjs` | CommonJS | Code Node legacy |
| `tokens.d.ts` | TypeScript declarations | Auto-complete dans les IDEs |
| `figma-tokens.json` | [Tokens Studio](https://tokens.studio/) | Plugin Figma → sync designer↔code |

## Workflow Figma

1. Le designer modifie les variables dans Figma via [Tokens Studio](https://tokens.studio/).
2. Export → push vers `packages/tokens/src/tokens.json` (PR avec changeset minor).
3. CI valide les contrastes et regen les sorties.
4. Ou inversement : modifier `tokens.json` → CI regen Figma JSON → designer pull dans Figma.

## DTCG schema

Chaque token a une forme :

```json
{
  "$value": "#D12B6A",
  "$type": "color",
  "$description": "(optionnel)"
}
```

Types supportés : `color`, `dimension`, `fontWeight`, `duration`.

## Conventions de naming

- `color.<palette>.<shade>` : `color.synapse.500`
- `spacing.<index>` : `spacing.4` (= 16px)
- `radius.<scale>` : `radius.md`
- `fontSize.<scale>` : `fontSize.base`
- `fontWeight.<scale>` : `fontWeight.semi`
- `duration.<scale>` : `duration.fast`

Le préfixe CSS `--mmg-` est ajouté automatiquement par Style Dictionary.

## Présets accent (cross-pkg)

Les tokens primitifs sont publiés ici. Les presets accent (`[data-mmg-accent="…"]`) restent définis dans `@managemate/css` (`tokens/accent.css`) car ils dépendent du contexte (light/dark, sélection user).