Architecture

Comment le design system est structuré — et comment il a évolué.

Le monorepo

Sodinix DS est un monorepo : un seul dépôt, plusieurs paquets publiables qui se consomment indépendamment.

| Paquet | Rôle | | -------------------------- | --------------------------------------------- | | @sodinix/tokens | La source de vérité — couleurs, tailles, typo | | @sodinix/ui | Les composants React (web) | | @sodinix/ui-native | Les composants React Native | | @sodinix/tailwind-config | Le pont entre les tokens et Tailwind | | @sodinix/charts | La data viz (Recharts) | | @sodinix/email | Les templates d'emails |

Le flux est unidirectionnel : tout part des tokens. Les composants, les graphiques et le thème Tailwind consomment les tokens — jamais l'inverse.

tokens → tailwind-config → ui → storybook
tokens → charts
tokens → ui-native

L'évolution : la refonte des tokens

Le design system a connu une refonte de fond. L'objet du chantier n'était pas d'ajouter des composants, mais de solidifier la logique des tokens — la base sur laquelle tout le reste repose.

Avant

Les tokens existaient en « 3 niveaux », mais surtout de nom :

• la couche sémantique ne couvrait que la couleur ;
• la troisième couche (les rôles) était vide ;
• aucun token n'était documenté ;
• rien n'empêchait un composant de court-circuiter les couches ;
• pas d'export interopérable, pas de validation.

Maintenant

Trois couches strictes et étanches, chacune avec un rôle clair :

1. Primitives (--ax-*) — les valeurs brutes. La palette.
2. Sémantique — l'intention d'usage : « la couleur d'action primaire », « le rayon d'un contrôle ». Désormais étendue au-delà de la couleur (espacement, rayon, mouvement).
3. Rôles — des compositions, comme les rôles typographiques (text-role-h1 applique taille + graisse + interligne d'un coup).

La règle d'étanchéité est devenue opposable : un composant ne lit que la sémantique ou les rôles, jamais une primitive. Une étape de CI le vérifie.

Ce que la refonte a apporté

• Documentation — chaque token porte une description de son intention ; une page de référence est générée automatiquement.
• Interopérabilité — un export au format W3C DTCG, prêt pour Figma ou Webstudio.
• Multi-plateforme — un export React Native dérivé de la même source : plus de valeurs recopiées à la main qui dérivent.
• Thème high-contrast — en plus du clair et du sombre, un thème d'accessibilité aux contrastes renforcés.
• Palette data-viz — des couleurs pensées pour les graphiques, distinctes de la palette d'interface.

Accessibilité

La cible est WCAG 2.2 niveau AA, vérifiée automatiquement à chaque changement. Concrètement :

• un anneau de focus unifié, visible et net, qui survit au mode contrasté de Windows ;
• le respect de prefers-reduced-motion — les animations se coupent si l'utilisateur l'a demandé au niveau de son système ;
• des couleurs qui ne sont jamais le seul vecteur d'information.

Le « méta »

Au-delà du code, le design system formalise :

• des patterns d'usage (formulaires, états de l'interface, confirmations) ;
• des standards transverses (i18n, performance, RGPD) ;
• un cycle de vie des composants (expérimental → bêta → stable → déprécié).

Pour aller plus loin

• Tokens — le détail des trois couches.
• Storybook — voir tout cela en images.
• Composants — la librairie @sodinix/ui.