import { Meta } from "@storybook/blocks";

<Meta title="Intro" />

# DSMMG — Design System ManageMate Group

Référence pour designers et développeurs des produits ManageMate (Synapse, HRTime, Forge, Orbit, MSLM, Espace-Client, sites publics).

## Principes

1. **Accessibilité non-négociable** — RGAA 4.1 / WCAG 2.2 AA, validé via axe-core en CI sur chaque composant.
2. **Headless-first** — comportement (focus, keyboard, ARIA) découplé du style. Primitives Radix UI / Floating UI dessous.
3. **Tokens partout** — aucun hex en dur, aucun `--mmg-color-synapse` direct. Tout passe par les sémantiques (`--mmg-color-text-primary`, `--mmg-color-bg-surface`) et l'accent (`--mmg-color-accent`).
4. **Tree-shakable** — un composant = un fichier. `sideEffects: false`. Les imports inutilisés sont droppés par les bundlers consommateurs.

## Theming utilisateur

Chaque utilisateur peut choisir son accent (rose Synapse par défaut). 9 presets validés AA :
- `synapse` (rose corporate, défaut)
- `rose`, `blue`, `violet`, `green`, `amber`, `red`, `cyan`, `slate`

Le picker change en live ici (toolbar Storybook → "Accent"). Voir aussi le composant **`<ThemePicker />`** dans `Theming`.

## Density

3 modes adaptables via `[data-mmg-density]` :
- `comfortable` (défaut, public)
- `cozy` (apps métier)
- `compact` (power users)

## Standards

- shadcn/ui + Radix UI (architecture, primitives a11y)
- Linear, Notion, Vercel, Stripe (références SaaS dense)
- DSFR (méthodologie a11y)
- Atlassian DS, IBM Carbon (apps enterprise)

## Conventions de naming

| Catégorie | Préfixe |
|---|---|
| Tokens couleur | `--mmg-color-*` |
| Tokens taille | `--mmg-space-*`, `--mmg-radius-*`, `--mmg-font-size-*` |
| Tokens motion | `--mmg-duration-*`, `--mmg-ease-*` |
| Classes CSS | `mmg-<comp>` |
| Classes utilitaires | `mmg-u-*` |
| Variantes BEM | `mmg-<comp>--<variant>` |
| Sous-éléments BEM | `mmg-<comp>__<part>` |

## Navigation

- **Tokens** — primitives, sémantiques, accent, motion
- **Forms** — Button, Input, Select, Checkbox, Radio, Switch, Combobox
- **Layout** — Container, Stack, Grid, Card, Tile
- **Overlays** — Tooltip, Popover, Menu, Dialog (tous Radix-backed)
- **Navigation** — Header, Footer, Breadcrumb, Tabs, Pagination, AppShell
- **Data display** — DataTable, Stat, Avatar, Tag, Badge, Progress
- **Theming** — ThemePicker, dark mode toggle