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>
@managemate/tokens
Source unique des tokens DSMMG au format W3C Design Tokens Community Group (DTCG).
Usage
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 | Plugin Figma → sync designer↔code |
Workflow Figma
- Le designer modifie les variables dans Figma via Tokens Studio.
- Export → push vers
packages/tokens/src/tokens.json(PR avec changeset minor). - CI valide les contrastes et regen les sorties.
- Ou inversement : modifier
tokens.json→ CI regen Figma JSON → designer pull dans Figma.
DTCG schema
Chaque token a une forme :
{
"$value": "#D12B6A",
"$type": "color",
"$description": "(optionnel)"
}
Types supportés : color, dimension, fontWeight, duration.
Conventions de naming
color.<palette>.<shade>:color.synapse.500spacing.<index>:spacing.4(= 16px)radius.<scale>:radius.mdfontSize.<scale>:fontSize.basefontWeight.<scale>:fontWeight.semiduration.<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).