---
"@managemate/css": major
"@managemate/react": major
"@managemate/icons": major
---

# DSMMG 0.2 — refonte architecturale

**Breaking changes :**

- **Tokens couleur** : tous les tokens couleur passent sous le préfixe `--mmg-color-*`.
  - `--mmg-bg-*` → `--mmg-color-bg-*`
  - `--mmg-text-1/2/3/4` → `--mmg-color-text-{primary,secondary,tertiary,quaternary}`
  - `--mmg-border-*` → `--mmg-color-border-*`
  - `--mmg-brand-*` → `--mmg-color-accent-*`
  - `--mmg-success/warning/danger/info-*` → `--mmg-color-*`
  - `--mmg-art-*` → `--mmg-color-art-*`
  - `--mmg-state-*` → `--mmg-color-state-*`
- **Tokens typographie** : `--mmg-text-{xs..5xl}` → `--mmg-font-size-*`, `--mmg-leading-*` → `--mmg-line-height-*`, `--mmg-weight-*` → `--mmg-font-weight-*`.
- **Suppression `[data-mmg-product]`** : remplacé par presets utilisateur via `[data-mmg-accent]`.
- **Composants splittés** : `Advanced.tsx`, `Chrome.tsx`, `Article.tsx` éclatés en un fichier par composant. Imports inchangés via le barrel `index.tsx`.
- **Build** : packages désormais distribués via `dist/` (ESM + CJS + types). Les imports depuis `src/` ne sont plus supportés.

**Nouveautés :**

- **9 presets accent** utilisateur (`synapse`, `rose`, `blue`, `violet`, `green`, `amber`, `red`, `cyan`, `slate`) avec rampes complètes et variantes dark.
- Composant `ThemePicker` + hooks `useAccent`, `useTheme`.
- Cascade `@layer reset, tokens, base, components, utilities` pour permettre les surcharges sans `!important`.
- Utilitaires CSS `mmg-u-*` (stack, flex, grid, text, bg, padding, margin…).

**Migration :**

Lancer le codemod fourni pour migrer ton codebase consommateur :

```sh
node scripts/migrate-tokens.mjs
```