Dinawo
62317f2ad7
Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.
- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
56 lines
1.7 KiB
Markdown
56 lines
1.7 KiB
Markdown
# @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).
|