ManageMate-Group/DSMMG
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: initial DSMMG v0.2 — refonte architecturale complète
Release / Release / open changeset PR (push) Has been cancelled
Details
CI / Build, typecheck, test, a11y (push) Has been cancelled
Details

Browse Source 
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>
This commit is contained in:
Dinawo
2026-05-04 22:07:57 +02:00
parent 5e019857fc
commit 62317f2ad7
172 changed files with 31397 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+468
View File
@@ -0,0 +1,468 @@
---
version: "0.2"
name: DSMMG
description: >
Design System ManageMate Group — référence pour Synapse, HRTime, Forge,
Orbit, MSLM, Espace-Client et sites publics. Headless-first sur Radix UI,
RGAA 4.1 / WCAG 2.2 AA, theming utilisateur via 9 presets accent.
# ═══════════════════════════════════════════════════════════════════
# COULEURS — primitives → semantic → accent (user-themable)
# ═══════════════════════════════════════════════════════════════════
colors:
# — Neutrals (warm-cool mix : frais en light, neutre en dark) ——————
neutral-0: "#FFFFFF"
neutral-50: "#F7F6FB"
neutral-100: "#F0EFF9"
neutral-150: "#EDEDFA"
neutral-200: "#E4E3F4"
neutral-300: "#C9C7E0"
neutral-400: "#AAA8C9"
neutral-500: "#7875A1"
neutral-600: "#56557A"
neutral-700: "#3B3A56"
neutral-800: "#1F1E32"
neutral-900: "#111120"
# — Synapse (rose corporate ManageMate, défaut accent) ——————
synapse-50: "#FEF0F4"
synapse-100: "#FCE0EA"
synapse-200: "#FAD0DF"
synapse-300: "#F4A0BD"
synapse-400: "#ED608E"
synapse-500: "#D12B6A" # ★ marque ManageMate
synapse-600: "#BA245F"
synapse-700: "#A82257"
synapse-800: "#831B45"
synapse-900: "#5A132F"
# — Presets accent user (8 alternatives au synapse) ——————
rose-500: "#E11D48"
blue-500: "#2563EB"
violet-500: "#7C3AED"
green-500: "#0E9F6E"
amber-500: "#D97706"
red-500: "#DC2626"
cyan-500: "#0891B2"
slate-500: "#475569"
# — Sémantique fixe (NE CHANGE JAMAIS avec l'accent user) ——————
success: "#059669"
warning: "#D97706"
danger: "#DC2626"
info: "#2563EB"
# — Active accent (alias dynamique, par défaut synapse) ——————
primary: "{colors.synapse-500}"
secondary: "{colors.neutral-600}"
tertiary: "{colors.neutral-300}"
# ═══════════════════════════════════════════════════════════════════
# TYPOGRAPHIE — Figtree partout, 3 échelles selon contexte
# ═══════════════════════════════════════════════════════════════════
typography:
# — Display (landings produits — HRTime, Synapse, Forge, Orbit) ——
display-2xl:
fontFamily: Figtree
fontSize: 72px
fontWeight: 800
letterSpacing: "-0.035em"
lineHeight: 1.0
display-xl:
fontFamily: Figtree
fontSize: 60px
fontWeight: 800
letterSpacing: "-0.03em"
lineHeight: 1.05
display-lg:
fontFamily: Figtree
fontSize: 48px
fontWeight: 700
letterSpacing: "-0.025em"
lineHeight: 1.1
display-md:
fontFamily: Figtree
fontSize: 36px
fontWeight: 700
letterSpacing: "-0.02em"
lineHeight: 1.15
# — Headlines (apps métier — h1 → h6 sémantiques) ————————
h1:
fontFamily: Figtree
fontSize: 36px
fontWeight: 700
letterSpacing: "-0.02em"
lineHeight: 1.2
h2:
fontFamily: Figtree
fontSize: 30px
fontWeight: 700
letterSpacing: "-0.015em"
lineHeight: 1.25
h3:
fontFamily: Figtree
fontSize: 24px
fontWeight: 700
letterSpacing: "-0.01em"
lineHeight: 1.3
h4:
fontFamily: Figtree
fontSize: 20px
fontWeight: 600
letterSpacing: "-0.005em"
lineHeight: 1.35
h5:
fontFamily: Figtree
fontSize: 17px
fontWeight: 600
lineHeight: 1.4
h6:
fontFamily: Figtree
fontSize: 15px
fontWeight: 600
lineHeight: 1.45
# — Body ————————————————————————————————————————
body-lg:
fontFamily: Figtree
fontSize: 17px
lineHeight: 1.6
body:
fontFamily: Figtree
fontSize: 15px
lineHeight: 1.55
body-sm:
fontFamily: Figtree
fontSize: 13px
lineHeight: 1.5
body-xs:
fontFamily: Figtree
fontSize: 11px
lineHeight: 1.45
# — Auxiliaires ————————————————————————————————
eyebrow:
fontFamily: Figtree
fontSize: 13px
fontWeight: 600
letterSpacing: "0.06em"
textTransform: uppercase
lead:
fontFamily: Figtree
fontSize: 20px
fontWeight: 400
letterSpacing: "-0.005em"
lineHeight: 1.5
overline:
fontFamily: Figtree
fontSize: 11px
fontWeight: 600
letterSpacing: "0.08em"
textTransform: uppercase
caption:
fontFamily: Figtree
fontSize: 11px
lineHeight: 1.4
code:
fontFamily: "JetBrains Mono"
fontSize: 13px
# ═══════════════════════════════════════════════════════════════════
# RAYONS — pill par défaut sur interactifs et conteneurs
# ═══════════════════════════════════════════════════════════════════
rounded:
none: 0
sm: 8px
md: 12px
card: 20px
panel: 24px
icon: 12px
pill: 9999px
# ═══════════════════════════════════════════════════════════════════
# ESPACEMENT — grille 4pt (multiples de 4 ou 8 exclusivement)
# ═══════════════════════════════════════════════════════════════════
spacing:
"0": 0
"1": 4px
"2": 8px
"3": 12px
"4": 16px
"5": 20px
"6": 24px
"7": 32px
"8": 40px
"9": 48px
"10": 64px
"11": 80px
"12": 120px
# ═══════════════════════════════════════════════════════════════════
# MOTION — animation = feedback fonctionnel, jamais décoratif
# ═══════════════════════════════════════════════════════════════════
motion:
duration:
fast: 120ms # micro-interactions (hover, focus)
base: 200ms # transitions UI standard
slow: 320ms # navigation (modals, drawers)
easing:
default: "cubic-bezier(0.4, 0, 0.2, 1)" # matériel, doux
emphasis: "cubic-bezier(0.2, 0.8, 0.2, 1)" # rebond léger
# ═══════════════════════════════════════════════════════════════════
# DENSITÉ — 3 modes adaptables par préférence user
# ═══════════════════════════════════════════════════════════════════
density:
comfortable:
rowHeight: 44px
inputHeight: 40px
paddingX: 16px
paddingY: 12px
cozy:
rowHeight: 36px
inputHeight: 36px
paddingX: 12px
paddingY: 8px
compact:
rowHeight: 28px
inputHeight: 30px
paddingX: 8px
paddingY: 4px
# ═══════════════════════════════════════════════════════════════════
# COMPOSANTS — extraits clé. Liste exhaustive : @managemate/react
# ═══════════════════════════════════════════════════════════════════
components:
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.neutral-0}"
typography: "{typography.body-sm}"
fontWeight: 600
rounded: "{rounded.pill}"
padding: "10px 22px"
minHeight: 40px
button-tonal:
backgroundColor: "{colors.synapse-50}"
textColor: "{colors.synapse-800}"
typography: "{typography.body-sm}"
fontWeight: 600
rounded: "{rounded.pill}"
padding: "10px 22px"
button-ghost:
backgroundColor: transparent
textColor: "{colors.neutral-700}"
typography: "{typography.body-sm}"
fontWeight: 600
card:
backgroundColor: "{colors.neutral-0}"
rounded: "{rounded.card}"
padding: "{spacing.6}"
borderColor: "{colors.neutral-200}"
input:
backgroundColor: "{colors.neutral-0}"
textColor: "{colors.neutral-900}"
borderColor: "{colors.neutral-200}"
rounded: "{rounded.md}"
padding: "10px 14px"
minHeight: 40px
badge:
backgroundColor: "{colors.neutral-150}"
textColor: "{colors.neutral-700}"
typography: "{typography.body-xs}"
fontWeight: 600
rounded: 6px
padding: "2px 8px"
toast:
backgroundColor: "{colors.neutral-0}"
borderColor: "{colors.neutral-200}"
rounded: 14px
padding: "14px 14px 14px 16px"
tile:
backgroundColor: "{colors.neutral-0}"
borderColor: "{colors.neutral-200}"
rounded: "{rounded.card}"
padding: "{spacing.6}"
---
# DSMMG — Design System ManageMate Group
> **Version 0.2** · La source de vérité visuelle, comportementale et accessible pour les produits ManageMate (Synapse, HRTime, Forge, Orbit, MSLM, Espace-Client, sites publics).
## Overview
Le DSMMG est un design system **headless-first** construit sur Radix UI. Trois mots :
- **Cohérence** — un bouton dans n'importe quel produit ManageMate a la même structure et la même couleur de base. La différenciation se fait par contenu, pas par couleur.
- **Accessibilité** — RGAA 4.1 / WCAG 2.2 AA non-négociable. Validé `axe-core` en CI. Plusieurs clients (collectivités, opérateurs publics) sont soumis au RGAA par la loi.
- **Theming utilisateur** — 9 presets accent (rose Synapse par défaut), chaque utilisateur choisit dans ses préférences. La sémantique (success/danger/warning/info) reste fixe.
## Colors
Trois couches verticales :
```
primitives → semantic → accent (user-themable)
```
1. **Primitives** — rampes brutes (`neutral-0..900`, `synapse-50..900`, et 8 presets). Ne JAMAIS référencer directement dans les composants.
2. **Sémantiques** — `bg-page`, `text-primary`, `border`, `success/warning/danger/info`. **Stables, ne changent pas avec l'accent user.**
3. **Accent** — `--mmg-color-accent-*`. Posé par `[data-mmg-accent="<preset>"]` sur `<html>`. SEUL token couleur user-themable.
### Presets accent disponibles
`synapse` (défaut), `rose`, `blue`, `violet`, `green`, `amber`, `red`, `cyan`, `slate`.
Chaque preset a sa version dark adaptée (saturation -2pts, luminosité +3pts) pour confort visuel.
### Règle absolue
- ❌ **Aucun hex en dur dans les composants.**
- ❌ **Jamais de `--mmg-color-synapse-*` direct** dans un composant — toujours via `--mmg-color-accent-*`.
## Typography
**Figtree** partout (Google Fonts, sans-serif géométrique). 3 échelles selon contexte :
| Famille | Cas d'usage | Tailles |
|---|---|---|
| **Display** | Hero des landings produits (HRTime, Synapse…) | 36px → 72px |
| **Headlines** | Apps métier (h1-h6 sémantiques) | 15px → 36px |
| **Body** | Texte courant et UI | 11px → 17px |
| **Auxiliaires** | eyebrow, lead, overline, caption | 11px → 20px |
**Modificateurs** : `mono`, `tabular`, `balance` (titres), `pretty` (body), `italic`, `emphasis` (italique + accent), `highlight`, `underline`, `strike`, `gradient`, `rainbow`.
> **Choisir le tag (`as`) selon la SÉMANTIQUE, pas selon la taille.** Un titre de page reste `<h1>` même si visuellement il s'affiche en `display-xl`.
## Layout & Spacing
Grille **4 points** stricte. Multiples de 4 ou 8 uniquement. Aucune valeur intermédiaire (10, 14, 22) qui casse l'alignement vertical.
12 niveaux : `0` (0) → `12` (120px).
**Densité** adaptable par utilisateur via `[data-mmg-density="comfortable|cozy|compact"]`. Touch target minimum **44×44** quel que soit le mode (WCAG SC 2.5.5).
## Elevation & Depth
Light mode :
- `shadow-1` — 0 1px 4px ink + 1px ring
- `shadow-2` — 0 4px 16px ink + 1px ring
- `shadow-3` — 0 12px 32px ink (modals, dropdowns)
- `shadow-elevated` — neutre, pour boutons elevated
Dark mode :
- Ombres = noir + halo blanc subtil 4-6 % (jamais "noir s'évapore")
- backdrop-filter blur 12-14px sur overlays/popovers/toasts pour effet verre dépoli
Ombres teintées accent via `color-mix(in srgb, var(--mmg-color-accent) X%, transparent)` — s'adaptent automatiquement au preset user.
## Shapes
Pill par défaut sur **interactifs** (buttons, inputs, badges-pills) et **conteneurs principaux** (Tile, Card, Hero).
| Token | Valeur | Usage |
|---|---|---|
| `rounded-sm` | 8px | inputs, badges-discrets |
| `rounded-md` | 12px | cards compact, popover, menu |
| `rounded-card` | 20px | cards principales, tiles |
| `rounded-panel` | 24px | modals, sheets |
| `rounded-pill` | 9999px | boutons, badges-pills |
## Motion
Animation = **feedback fonctionnel**, jamais décoratif. Trois durées :
- 120ms — micro-interactions (hover, focus, ripple)
- 200ms — transitions UI standard
- 320ms — navigation (modals, drawers, sheets)
`prefers-reduced-motion: reduce` désactive tout (durée 0.001ms). WCAG SC 2.3.3 AAA.
## Components
Catalogue complet (~62 composants) dans `@managemate/react`. Les principaux :
**Forms** : Button, Input, Textarea, Select, Combobox, Checkbox, Radio, Switch, Slider, ToggleGroup, FileUpload.
**Layout** : Container, Section, Stack, Inline, Card, Tile, Hero.
**Feedback** : Alert, Notice, Banner, Badge (avec dot indicator + pulse), Spinner, Skeleton, Toast (pile Sonner-style empilable).
**Overlays** : Tooltip, Popover, Menu, Dialog, ConfirmDialog, Sheet (4 sides × 5 sizes), Drawer, HoverCard, ContextMenu — **tous Radix-backed**.
**Navigation** : Header (mega-menu DSFR-style), Footer, Breadcrumb, Tabs, Pagination, AppShell, Sidebar, Topbar, SkipLink.
**Profile & Cards** : Avatar (status indicator + auto-color), AvatarGroup, UserCard, ProfileHeader (cover + débord), MetricCard (KPI avec trend), PricingCard, FeatureCard, Stat.
**Article** : ArticlePage, ArticleHeader, ArticleAside, ArticleFooter, ArticleCallout, ArticleTOC.
**Theming** : ThemePicker (radiogroup avec navigation flèches/Home/End).
## Do's and Don'ts
### ✅ Do
- Utiliser les **tokens sémantiques** (`--mmg-color-text-primary`, `--mmg-color-bg-surface`).
- Choisir le tag HTML selon **la sémantique**, pas selon la taille visuelle.
- Tester en clavier : Tab, Shift+Tab, Esc, flèches, Enter, Espace.
- Tester en zoom 200 % et reflow 320px.
- Tester avec `prefers-reduced-motion: reduce` activé.
- Préférer les composants Radix-backed (Tooltip, Menu, Dialog…) aux implémentations custom.
- Documenter le composant dans Storybook + MDX avant de le livrer.
### ❌ Don't
- **Aucun hex en dur** dans les composants.
- **Aucune référence directe** à `--mmg-color-synapse-*` — toujours via `--mmg-color-accent-*`.
- **Pas de couleur seule** porteuse d'info (RGAA 9). Toujours redonder avec icône, texte ou pattern.
- **Pas de placeholder** en remplacement de label (RGAA 11.1).
- **Pas de focus invisible** ni `outline: none` sans alternative.
- **Pas de `<div onClick>`** au lieu de `<button>`.
- **Pas d'animation** sans `prefers-reduced-motion`.
- **Pas de composant** sans navigation clavier complète.
- **Pas de composant** sans test axe-core.
- **Pas de fichier** monolithique > 300 lignes mélangeant N composants.
## Accessibilité (engagement)
- **RGAA 4.1 / WCAG 2.2 AA ≥ 95 %**, validé `axe-core` en CI.
- **Sanctions légales** : jusqu'à 50 000 € par service en ligne non conforme (loi 2005-102 + décret 2019-768).
- **Couverture handicaps** : visuels (cécité, malvoyance, daltonisme 8 % des hommes), auditifs, moteurs (paralysie, tremblements, bras cassé), cognitifs (dyslexie, TDAH, autisme, fatigue, langue non maternelle), temporaires/situationnels (soleil, mauvaise connexion, vieux device).
### Tests automatisés
- `axe-core` 4.10 (vitest-axe) — chaque composant interactif.
- Couverture : `wcag2a + wcag2aa + wcag21a + wcag21aa + best-practice`.
- Threshold CI : 60 % ligne / branche / function / statement (à monter à 80 % v0.3).
### Tests manuels recommandés
- NVDA (Windows), VoiceOver (macOS/iOS).
- Clavier 100 % (souris débranchée).
- Zoom 200 % + reflow 320px.
- `prefers-reduced-motion`, `prefers-contrast: more`, `forced-colors: active`.
## Distribution
Monorepo pnpm avec 4 packages :
| Package | Rôle |
|---|---|
| `@managemate/tokens` | Source DTCG W3C des tokens. Génère CSS, JS/TS, Figma, Tailwind v3, Tailwind v4. |
| `@managemate/css` | CSS vanilla — tokens, base, composants, utilitaires `@layer`. |
| `@managemate/icons` | 96 icônes (line + fill) Remix Icon, subset par icône possible. |
| `@managemate/react` | Composants React typés, headless-first sur Radix UI, tree-shakable (`sideEffects: false`). |
Versioning : SemVer strict. Packages **fixed** (même version) pour éviter les incompatibilités cross-package. Changesets sur `main` → release auto.
---
> Ce fichier est lisible par des agents IA via le format [google-labs-code/design.md](https://github.com/google-labs-code/design.md). Front matter YAML = tokens normatifs, corps Markdown = contexte d'application.