MBA Design System

Design System pour l'écosystème Ma Boussole Aidant.

Installation

npm install @maboussoleaidant/design-system

Usage

Option 1 : Composants MBA uniquement (sans Tailwind)

Pour les sites WordPress ou vitrines qui n'ont besoin que des composants .mba-* :

<link rel="stylesheet" href="https://unpkg.com/@maboussoleaidant/design-system/dist/mba-design-system.min.css">

Ou en import CSS :

@import "@maboussoleaidant/design-system";

Option 2 : Avec Tailwind v4 (recommandé pour les apps)

Pour les applications Angular/React/Astro qui utilisent Tailwind v4, importez le preset pour avoir accès à toutes les classes Tailwind JIT avec les tokens MBA :

/* styles.css */
@import "@maboussoleaidant/design-system";
@import "tailwindcss";
@import "@maboussoleaidant/design-system/preset";

Cela vous donne accès à :

• Toutes les classes Tailwind générées par le JIT (h-screen, animate-spin, etc.)
• Les tokens MBA mappés : bg-primary-500, p-sm, rounded-xs, shadow-md, etc.
• Les composants .mba-* du Design System

Note : Le fichier mba-tailwind.css est pré-compilé pour le Storybook uniquement. Utilisez le preset ci-dessus pour vos projets.

Option 3 : Tokens uniquement

Pour intégrer uniquement les variables CSS (couleurs, spacing, etc.) :

@import "@maboussoleaidant/design-system/tokens";

Assets

Le package inclut tous les assets nécessaires au bon fonctionnement des composants :

assets/
├── fonts/                      # Polices (Open Sans, Congenial, Material Symbols)
├── icons-social.svg            # Sprite SVG des icônes sociales
├── logo-mba-agirc-arrco.svg    # Logo standard
├── logo-mba-agirc-arrco-pro.svg # Logo version Pro
└── wave.svg                    # Décoration wave

Selon votre bundler, vous devrez peut-être configurer la copie des assets :

// Vite : les imports CSS résolvent automatiquement les assets
// Webpack : configurer file-loader/asset-modules pour .woff2 et .svg

Développement

# Installer les dépendances
npm install

# Build
npm run build

# Watch mode
npm run dev

Structure

dist/                 # CSS compilé (mba-design-system.css, mba-tailwind.css)
assets/               # Fonts et SVG (inclus dans le package)
src/
├── tokens/           # Design tokens (CSS Custom Properties)
├── base/             # Reset et styles de base
├── components/       # Classes de composants (.mba-btn, .mba-card, .mba-footer, etc.)
└── utilities/        # Classes utilitaires

Documentation

La documentation interactive est disponible via Storybook.