# Mercure Design System — Changelog Toutes les versions notables. Format basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) · versions [SemVer](https://semver.org/lang/fr/) MAJOR.MINOR.PATCH. > **Rappel SemVer pour un design system** > - **MAJOR** : breaking change (token renommé/supprimé, classe `.mc-*` retirée, comportement JS API changé) > - **MINOR** : ajout rétro-compatible (nouveau token, nouveau composant, nouvelle variante) > - **PATCH** : fix sans changement d'API (correction visuelle, bug JS, doc) --- ## [0.3.0] — 2026-05-16 · Phase 3 · Production-ready ### Added - **Build pipeline** — `build-tokens.mjs` transforme `tokens.json` en : - `dist/tokens.css` (CSS custom properties, `--mc-*`) - `dist/tokens.scss` (variables Sass, `$mc-*`) - `dist/tokens.js` (ESM, `colorBg1`, etc.) - `dist/tokens.xml` (Android-style colors, hex8) - `dist/tokens.figma.json` (Tokens Studio compatible, `category/sub/name`) - **Stories page** (`stories.html` + `stories.js` + `stories.css`) — Storybook-lite vanilla : - 17 stories sur 7 catégories (Buttons, Pills, Typography, Glass, Forms, Data, Overlays) - Knobs interactifs : `select`, `string`, `boolean`, `number` - Toggle thème, toggle fond (flat / radial), search/filter, deep-link via hash - Code panel auto-formaté + Args table - **Floating positioning** (`floating.js`) — replacement vanilla minimal de `@floating-ui/dom` : - `window.mcFloat({ reference, floating, placement, offset, padding })` → cleanup function - Auto-flip si pas assez d'espace, shift dans le viewport sinon - rAF-coalesced sur scroll/resize - **Popovers** désormais auto-positionnés via `mcFloat` (placement initial conservé, flip si bord du viewport) - **Tests Playwright** (`playwright.config.js` + `tests/visual.spec.js`) : - 2 projets : `chromium-dark` + `chromium-light` - 9 tests : load, theme persist, modal/toast/popover, story render, a11y keyboard - Auto-démarre `python3 -m http.server` via `webServer` - **`package.json`** — scripts `build:tokens`, `test:install`, `test:visual`, `serve` - **`font-synthesis: weight`** sur `body` pour interpoler le Regular/Bold à partir de Brockmann Medium en attendant les vraies fontes (voir Notes) ### Changed - **Popover entrance** : simplifiée à un fade-only (le transform serait écrasé par `mcFloat`). - **`tokens.json`** bump à `0.2.0` → `0.3.0` (light theme déjà ajouté en 0.2) ### Notes - **Brockmann Regular & Bold** ne sont pas fournis (seule la Medium est en `assets/fonts/`). Avec `font-synthesis: weight` activé, le navigateur peut interpoler les autres poids visuellement — c'est correct pour les UI mais pas pour les longs textes. Pour passer à v1.0 il faudra acquérir les vraies fontes ou définir un fallback Inter explicite par graisse. - **Tooltips** restent CSS-only (`::before` + `::after`). Pour les cas où le viewport-edge flip est critique, utiliser un popover. --- ## [0.2.0] — 2026-05-15 · Phase 2 · Extend ### Added - **Light mode** — bascule via `[data-theme="light"]` sur `` + persistance localStorage + fallback `prefers-color-scheme`. - **Forms avancés** : `.mc-radio`, `.mc-check`, `.mc-switch`, `.mc-slider` (tokens-driven, focus-visible géré). - **Data components** : `.mc-table`, `.mc-badge` (7 variantes), `.mc-skeleton` (4 formes), `.mc-avatar` (sm/lg/status/group), `.mc-state` (empty + error). - **Overlays** : `.mc-modal`, `.mc-drawer`, `.mc-toast` (avec `window.mcToast()` API), `.mc-tip` (CSS-only), `.mc-popover` (click-outside + Esc). - **Lucide whitelist** (`icons.svg`) — 30 icônes curées en 8 catégories, sprite réutilisable via ``. - **`.mc-icon`** helper class. - **`.mc-theme-toggle`** bouton sun/moon. ### Changed - `tokens.json` enrichi avec un bloc `theme.light` (primitives + semantic overrides). --- ## [0.1.0] — 2026-05-15 · Phase 1 · Tokenize ### Added - **`tokens.css`** — 95 tokens primitives + sémantiques extraits de `lab-b.css` / `lab-robot.css`. - **`tokens.json`** — export Style Dictionary / Tokens Studio compatible. - **`components.css`** — 9 composants : `.mc-glass`, `.mc-btn`, `.mc-pill`, `.mc-eyebrow`, `.mc-h1`/`h2`/`h3`/`lead`/`stat`, `.mc-field` (input/select/textarea), `.mc-nav` (dock), `.mc-container`, `.mc-section`, `.mc-bg-*`. - **`system.js`** — spotlight curseur délégué (un seul listener), nav-scroll, copy-on-click. - **`@media (prefers-reduced-motion: reduce)`** — kill switch global pour toutes animations/transitions. - **`index.html`** — page de référence vivante avec 10 sections nav-able. ### Notes - Préfixe `--mc-*` choisi (pas `--lb-*` du code source) pour découpler le système de la marque-fille "Lab". - Layer primitive → sémantique : seul le sémantique doit être touché pour theming. --- ## Roadmap post-0.3 (non livré) - Variants Brockmann Regular + Bold (acquisition de licence) - iOS tokens output (`.swift`) dans le build pipeline - Composants restants : `.mc-tabs`, `.mc-segmented`, `.mc-progress`, `.mc-stepper`, `.mc-command-palette` - Tests visuels avec snapshots (`toMatchSnapshot`) et gating CI - Publication NPM `@mercure/design-system` - Documentation MDX migrée vers Storybook (si l'équipe veut React) --- ## Workflow de release 1. Bump `version` dans `package.json` + `tokens.json` + nav dock label `Stories` (`v0.X.Y`) 2. Ajouter une section ici au format ci-dessus 3. `npm run build:tokens` pour régénérer `dist/` 4. `npm run test:visual` pour valider 5. Tag git : `git tag v0.X.Y && git push --tags` 6. Si publication NPM : `npm publish --access=public` ## Convention de breaking change Un changement breaking **doit** : - Bumper MAJOR - Lister explicitement le token / la classe / l'API touchée - Fournir un script `codemod-X.Y.mjs` quand le remplacement est mécanique - Documenter la rationale et la migration manuelle quand le remplacement ne l'est pas