@maboussoleaidant/design-system 0.1.5 → 0.1.6

package/README.md

@@ -23,24 +23,23 @@ Ou en import CSS :
 @import "@maboussoleaidant/design-system";
 ```
 
-### Option 2 : Avec Tailwind JIT (recommandé pour les apps)
+### Option 2 : Avec Tailwind v4 (recommandé pour les apps)
 
-Pour les applications Angular/React/Astro qui utilisent Tailwind, **utilisez le JIT** pour avoir accès à toutes les classes Tailwind avec les tokens MBA :
+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 :
 
 ```css
 /* styles.css */
 @import "@maboussoleaidant/design-system";
 @import "tailwindcss";
-
-@theme {
-  /* Copier le mapping depuis src/tailwind.css ou voir la doc Storybook */
-  --color-primary-500: var(--mba-color-primary-500);
-  --spacing-sm: var(--mba-space-sm);
-  /* ... */
-}
+@import "@maboussoleaidant/design-system/preset";
 ```
 
-> **Note :** Le fichier `mba-tailwind.css` pré-compilé ne contient que les classes Tailwind utilisées dans le Storybook du DS. Pour un projet réel, utilisez le JIT ci-dessus.
+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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maboussoleaidant/design-system",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "Design System Ma Boussole Aidant - Tokens et composants CSS",
   "main": "dist/mba-design-system.css",
@@ -8,12 +8,15 @@
     ".": "./dist/mba-design-system.css",
     "./min": "./dist/mba-design-system.min.css",
     "./tokens": "./dist/mba-tokens-only.css",
+    "./preset": "./src/tailwind-preset.css",
     "./tailwind": "./dist/mba-tailwind.css",
     "./tailwind/min": "./dist/mba-tailwind.min.css"
   },
   "files": [
     "dist/",
     "src/assets/",
+    "src/tokens/",
+    "src/tailwind-preset.css",
     "README.md",
     "LICENSE"
   ],

package/src/tailwind-preset.css

@@ -0,0 +1,207 @@
+/**
+ * MBA Design System - Tailwind v4 Preset
+ *
+ * Ce fichier contient le mapping des tokens MBA vers Tailwind.
+ * À importer APRÈS tailwindcss dans votre projet.
+ *
+ * Usage:
+ *   @import "@maboussoleaidant/design-system";
+ *   @import "tailwindcss";
+ *   @import "@maboussoleaidant/design-system/preset";
+ *
+ * Cela vous donne accès à toutes les classes Tailwind JIT
+ * avec les valeurs du Design System MBA.
+ */
+
+/* Import des tokens MBA (variables CSS) */
+@import "./tokens/index.css";
+
+/* ===========================================
+   MAPPING TOKENS MBA → TAILWIND VIA @theme
+   =========================================== */
+@theme {
+  /* -----------------------------------------
+     COULEURS (uniquement les tokens Figma)
+     ----------------------------------------- */
+
+  /* Basics */
+  --color-white: var(--mba-color-white);
+  --color-black: var(--mba-color-black);
+
+  /* Grey (5 valeurs Figma) */
+  --color-grey-50: var(--mba-color-grey-50);
+  --color-grey-100: var(--mba-color-grey-100);
+  --color-grey-300: var(--mba-color-grey-300);
+  --color-grey-400: var(--mba-color-grey-400);
+  --color-grey-800: var(--mba-color-grey-800);
+
+  /* Primary - Violet (6 valeurs Figma) */
+  --color-primary-50: var(--mba-color-primary-50);
+  --color-primary-100: var(--mba-color-primary-100);
+  --color-primary-400: var(--mba-color-primary-400);
+  --color-primary-500: var(--mba-color-primary-500);
+  --color-primary-800: var(--mba-color-primary-800);
+  --color-primary-900: var(--mba-color-primary-900);
+
+  /* Secondary (1 valeur Figma) */
+  --color-secondary-500: var(--mba-color-secondary-500);
+
+  /* Primary Pro - Blue (5 valeurs Figma) */
+  --color-primary-pro-50: var(--mba-color-primary-pro-50);
+  --color-primary-pro-100: var(--mba-color-primary-pro-100);
+  --color-primary-pro-400: var(--mba-color-primary-pro-400);
+  --color-primary-pro-500: var(--mba-color-primary-pro-500);
+  --color-primary-pro-800: var(--mba-color-primary-pro-800);
+
+  /* Error (5 valeurs Figma) */
+  --color-error-100: var(--mba-color-error-100);
+  --color-error-300: var(--mba-color-error-300);
+  --color-error-400: var(--mba-color-error-400);
+  --color-error-500: var(--mba-color-error-500);
+  --color-error-800: var(--mba-color-error-800);
+
+  /* Success (5 valeurs Figma) */
+  --color-success-100: var(--mba-color-success-100);
+  --color-success-300: var(--mba-color-success-300);
+  --color-success-400: var(--mba-color-success-400);
+  --color-success-500: var(--mba-color-success-500);
+  --color-success-800: var(--mba-color-success-800);
+
+  /* Warning (6 valeurs Figma) */
+  --color-warning-50: var(--mba-color-warning-50);
+  --color-warning-100: var(--mba-color-warning-100);
+  --color-warning-300: var(--mba-color-warning-300);
+  --color-warning-400: var(--mba-color-warning-400);
+  --color-warning-500: var(--mba-color-warning-500);
+  --color-warning-800: var(--mba-color-warning-800);
+
+  /* Info (6 valeurs Figma) */
+  --color-info-50: var(--mba-color-info-50);
+  --color-info-100: var(--mba-color-info-100);
+  --color-info-300: var(--mba-color-info-300);
+  --color-info-400: var(--mba-color-info-400);
+  --color-info-500: var(--mba-color-info-500);
+  --color-info-800: var(--mba-color-info-800);
+
+  /* Custom - Brick, Forest, Rose */
+  --color-brick-light: var(--mba-color-brick-light);
+  --color-brick: var(--mba-color-brick);
+  --color-forest-light: var(--mba-color-forest-light);
+  --color-forest: var(--mba-color-forest);
+  --color-rose-light: var(--mba-color-rose-light);
+  --color-rose: var(--mba-color-rose);
+
+  /* Pastels */
+  --color-pastel-bleuet: var(--mba-color-pastel-bleuet);
+  --color-pastel-lavender: var(--mba-color-pastel-lavender);
+  --color-pastel-narcisse: var(--mba-color-pastel-narcisse);
+  --color-pastel-oranger: var(--mba-color-pastel-oranger);
+
+  /* Autres */
+  --color-beige: var(--mba-color-beige);
+
+  /* -----------------------------------------
+     FONTS
+     ----------------------------------------- */
+  --font-sans: var(--mba-font-family-text);
+  --font-heading: var(--mba-font-family-heading);
+  --font-mono: var(--mba-font-family-mono);
+
+  /* -----------------------------------------
+     FONT SIZES (Figma scale)
+     ----------------------------------------- */
+  --font-size-xxs: var(--mba-font-size-xxs);
+  --font-size-xs: var(--mba-font-size-xs);
+  --font-size-sm: var(--mba-font-size-sm);
+  --font-size-md: var(--mba-font-size-md);
+  --font-size-xl: var(--mba-font-size-xl);
+  --font-size-xxl: var(--mba-font-size-xxl);
+
+  /* -----------------------------------------
+     SPACING (Figma semantic scale)
+     ----------------------------------------- */
+  --spacing-0: var(--mba-space-0);
+  --spacing-px: var(--mba-space-px);
+  --spacing-xxs: var(--mba-space-xxs);
+  --spacing-xs: var(--mba-space-xs);
+  --spacing-sm: var(--mba-space-sm);
+  --spacing-md: var(--mba-space-md);
+  --spacing-lg: var(--mba-space-lg);
+  --spacing-xl: var(--mba-space-xl);
+  --spacing-xxl: var(--mba-space-xxl);
+
+  /* -----------------------------------------
+     SPACING (Tailwind numeric scale)
+     Pour w-*, h-*, size-*, min-w-*, etc.
+     ----------------------------------------- */
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
+
+  /* -----------------------------------------
+     MAX-WIDTH (Tailwind standard scale)
+     Pour les conteneurs : max-w-sm, max-w-xl, etc.
+     ----------------------------------------- */
+  --max-width-xs: 20rem;     /* 320px */
+  --max-width-sm: 24rem;     /* 384px */
+  --max-width-md: 28rem;     /* 448px */
+  --max-width-lg: 32rem;     /* 512px */
+  --max-width-xl: 36rem;     /* 576px */
+  --max-width-2xl: 42rem;    /* 672px */
+  --max-width-3xl: 48rem;    /* 768px */
+  --max-width-4xl: 56rem;    /* 896px */
+  --max-width-5xl: 64rem;    /* 1024px */
+  --max-width-6xl: 72rem;    /* 1152px */
+  --max-width-7xl: 80rem;    /* 1280px */
+  --max-width-full: 100%;
+  --max-width-none: none;
+
+  /* -----------------------------------------
+     BORDER RADIUS (Figma scale)
+     ----------------------------------------- */
+  --radius-none: var(--mba-radius-none);
+  --radius-2xs: var(--mba-radius-2xs);
+  --radius-xs: var(--mba-radius-xs);
+  --radius-sm: var(--mba-radius-sm);
+  --radius-md: var(--mba-radius-md);
+  --radius-lg: var(--mba-radius-lg);
+  --radius-xl: var(--mba-radius-xl);
+  --radius-xxl: var(--mba-radius-xxl);
+  --radius-full: var(--mba-radius-full);
+
+  /* -----------------------------------------
+     SHADOWS (Figma elevation)
+     ----------------------------------------- */
+  --shadow-none: var(--mba-shadow-none);
+  --shadow-xxs: var(--mba-shadow-xxs);
+  --shadow-xs: var(--mba-shadow-xs);
+  --shadow-sm: var(--mba-shadow-sm);
+  --shadow-md: var(--mba-shadow-md);
+  --shadow-inner: var(--mba-shadow-inner);
+}

package/src/tokens/_breakpoints.css

@@ -0,0 +1,29 @@
+/**
+ * MBA Design System - Breakpoints
+ *
+ * Points de rupture responsive
+ * Note: Les custom properties ne fonctionnent pas dans @media queries,
+ * ces valeurs sont documentées ici pour référence et usage JS.
+ *
+ * Utiliser les classes Tailwind (sm:, md:, lg:, xl:, 2xl:)
+ * ou les @media queries directement.
+ */
+
+:root {
+  /* Breakpoints pour référence (usage JS) */
+  --mba-breakpoint-sm: 640px;
+  --mba-breakpoint-md: 768px;
+  --mba-breakpoint-lg: 1024px;
+  --mba-breakpoint-xl: 1280px;
+  --mba-breakpoint-2xl: 1536px;
+}
+
+/*
+  Usage en CSS pur (les @media ne supportent pas les custom properties) :
+
+  @media (min-width: 640px) { ... }   sm
+  @media (min-width: 768px) { ... }   md
+  @media (min-width: 1024px) { ... }  lg
+  @media (min-width: 1280px) { ... }  xl
+  @media (min-width: 1536px) { ... }  2xl
+*/

package/src/tokens/_colors.css

@@ -0,0 +1,146 @@
+/**
+ * MBA Design System - Couleurs
+ *
+ * Palette de couleurs extraite du Design System Figma
+ * Préfixe: --mba-color-
+ */
+
+:root {
+  /* ===========================================
+     BASICS
+     =========================================== */
+  --mba-color-white: #FFFFFF;
+  --mba-color-black: #1C1C1D;
+
+  /* ===========================================
+     GREY (Neutral)
+     =========================================== */
+  --mba-color-grey-50: #F2F2F3;
+  --mba-color-grey-100: #D7D7DB;
+  --mba-color-grey-300: #B6B6BC;
+  --mba-color-grey-400: #71717A;
+  --mba-color-grey-800: #303034;
+
+  /* ===========================================
+     PRIMARY (Violet)
+     Couleur principale de la marque
+     =========================================== */
+  --mba-color-primary-50: #FFF6FF;
+  --mba-color-primary-100: #EDD7EF;
+  --mba-color-primary-400: #C097C3;
+  --mba-color-primary-500: #703973;  /* Couleur déposée */
+  --mba-color-primary-800: #461C52;
+  --mba-color-primary-900: #2C1133;
+
+  /* ===========================================
+     SECONDARY
+     =========================================== */
+  --mba-color-secondary-500: #FDC785;
+
+  /* ===========================================
+     PRIMARY PRO (Blue)
+     Couleur pour l'offre Pro/Entreprise
+     =========================================== */
+  --mba-color-primary-pro-50: #F7FAFD;
+  --mba-color-primary-pro-100: #DFEDF7;
+  --mba-color-primary-pro-400: #6A88AA;
+  --mba-color-primary-pro-500: #395172;
+  --mba-color-primary-pro-800: #122042;
+
+  /* ===========================================
+     ALERT - ERROR / REQUIRED (Rouge)
+     =========================================== */
+  --mba-color-error-100: #FFDED1;
+  --mba-color-error-300: #F8B09E;
+  --mba-color-error-400: #D9514E;
+  --mba-color-error-500: #C1121F;
+  --mba-color-error-800: #6F052A;
+
+  /* ===========================================
+     ALERT - SUCCESS / VALIDATION (Vert)
+     =========================================== */
+  --mba-color-success-100: #E6FADE;
+  --mba-color-success-300: #B7E7AC;
+  --mba-color-success-400: #74C474;
+  --mba-color-success-500: #489E50;
+  --mba-color-success-800: #165B30;
+
+  /* ===========================================
+     ALERT - WARNING / IN PROGRESS (Jaune)
+     =========================================== */
+  --mba-color-warning-50: #FEFAEC;
+  --mba-color-warning-100: #FBF2CB;
+  --mba-color-warning-300: #F8E199;
+  --mba-color-warning-400: #D6A73D;
+  --mba-color-warning-500: #BC7F09;
+  --mba-color-warning-800: #6D3D02;
+
+  /* ===========================================
+     ALERT - INFO / NEUTRAL (Bleu)
+     =========================================== */
+  --mba-color-info-50: #F1FBFE;
+  --mba-color-info-100: #E2F6FC;
+  --mba-color-info-300: #C6EAF9;
+  --mba-color-info-400: #8ABDE0;
+  --mba-color-info-500: #649CCC;
+  --mba-color-info-800: #1F4076;
+
+  /* ===========================================
+     CUSTOM PALETTE - Brick
+     (Ultra light et dark - pour tags, articles, backgrounds)
+     =========================================== */
+  --mba-color-brick-light: #FCF4F0;
+  --mba-color-brick: #AC5118;
+
+  /* ===========================================
+     CUSTOM PALETTE - Forest
+     =========================================== */
+  --mba-color-forest-light: #DEF8EF;
+  --mba-color-forest: #16654C;
+
+  /* ===========================================
+     CUSTOM PALETTE - Rose
+     =========================================== */
+  --mba-color-rose-light: #FAEFF4;
+  --mba-color-rose: #B83C75;
+
+  /* ===========================================
+     CUSTOM PALETTE - Pastels (Nouveau)
+     Note: Non accessibles pour texte/titre
+     =========================================== */
+  --mba-color-pastel-bleuet: #EBF2FF;
+  --mba-color-pastel-lavender: #EEEDFF;
+  --mba-color-pastel-narcisse: #FFF6E4;
+  --mba-color-pastel-oranger: #FFF2EB;
+
+  /* ===========================================
+     CUSTOM - Beige (Background cards)
+     =========================================== */
+  --mba-color-beige: #F9F5F0;
+
+  /* ===========================================
+     GRADIENT
+     =========================================== */
+  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
+
+  /* ===========================================
+     SEMANTIC COLORS
+     (Utilise uniquement les tokens Figma existants)
+     =========================================== */
+  --mba-color-background: var(--mba-color-white);
+  --mba-color-surface: var(--mba-color-grey-50);
+  --mba-color-surface-raised: var(--mba-color-white);
+  --mba-color-border: var(--mba-color-grey-100);
+  --mba-color-border-strong: var(--mba-color-grey-300);
+
+  --mba-color-text: var(--mba-color-black);
+  --mba-color-text-muted: var(--mba-color-grey-400);
+  --mba-color-text-subtle: var(--mba-color-grey-300);
+  --mba-color-text-inverse: var(--mba-color-white);
+
+  --mba-color-link: var(--mba-color-primary-500);
+  --mba-color-link-hover: var(--mba-color-primary-800);
+
+  /* Focus ring (accessibilité) */
+  --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
+}

package/src/tokens/_radius.css

@@ -0,0 +1,25 @@
+/**
+ * MBA Design System - Border Radius
+ *
+ * Échelle de rayons de bordure extraite du Design System Figma
+ * Préfixe: --mba-radius-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA
+     =========================================== */
+  --mba-radius-2xs: 0.25rem;    /* 4px */
+  --mba-radius-xs: 0.5rem;      /* 8px */
+  --mba-radius-sm: 1rem;        /* 16px */
+  --mba-radius-md: 1.5rem;      /* 24px */
+  --mba-radius-lg: 2rem;        /* 32px */
+  --mba-radius-xl: 3rem;        /* 48px */
+  --mba-radius-xxl: 4rem;       /* 64px */
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-radius-none: 0;
+  --mba-radius-full: 9999px;
+}

package/src/tokens/_shadows.css

@@ -0,0 +1,40 @@
+/**
+ * MBA Design System - Ombres (Elevation)
+ *
+ * Échelle d'élévation extraite du Design System Figma
+ * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
+ * Préfixe: --mba-shadow-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA (Elevation)
+     Double couche: 4% + 8% opacité
+     =========================================== */
+
+  /* XXS - blur 4px */
+  --mba-shadow-xxs:
+    0 2px 4px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 4px 0 rgba(113, 113, 122, 0.08);
+
+  /* XS - blur 8px */
+  --mba-shadow-xs:
+    0 2px 8px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 8px 0 rgba(113, 113, 122, 0.08);
+
+  /* SM - blur 16px */
+  --mba-shadow-sm:
+    0 2px 16px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 16px 0 rgba(113, 113, 122, 0.08);
+
+  /* MD - blur 24px */
+  --mba-shadow-md:
+    0 2px 24px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 24px 0 rgba(113, 113, 122, 0.08);
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-shadow-none: 0 0 #0000;
+  --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);
+}

package/src/tokens/_spacing.css

@@ -0,0 +1,25 @@
+/**
+ * MBA Design System - Espacements
+ *
+ * Échelle d'espacements extraite du Design System Figma
+ * Préfixe: --mba-space-
+ */
+
+:root {
+  /* ===========================================
+     ÉCHELLE FIGMA
+     =========================================== */
+  --mba-space-xxs: 0.25rem;   /* 4px */
+  --mba-space-xs: 0.5rem;     /* 8px */
+  --mba-space-sm: 1rem;       /* 16px */
+  --mba-space-md: 1.5rem;     /* 24px */
+  --mba-space-lg: 2rem;       /* 32px */
+  --mba-space-xl: 3rem;       /* 48px */
+  --mba-space-xxl: 4rem;      /* 64px */
+
+  /* ===========================================
+     VALEURS UTILITAIRES
+     =========================================== */
+  --mba-space-0: 0;
+  --mba-space-px: 1px;
+}

package/src/tokens/_transitions.css

@@ -0,0 +1,34 @@
+/**
+ * MBA Design System - Transitions
+ *
+ * Durées et easings pour les animations
+ */
+
+:root {
+  /* ===========================================
+     DUREES
+     =========================================== */
+  --mba-duration-75: 75ms;
+  --mba-duration-100: 100ms;
+  --mba-duration-150: 150ms;
+  --mba-duration-200: 200ms;
+  --mba-duration-300: 300ms;
+  --mba-duration-500: 500ms;
+  --mba-duration-700: 700ms;
+  --mba-duration-1000: 1000ms;
+
+  /* ===========================================
+     EASINGS
+     =========================================== */
+  --mba-ease-linear: linear;
+  --mba-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --mba-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --mba-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ===========================================
+     TRANSITIONS PRECONSTRUITES
+     =========================================== */
+  --mba-transition-fast: var(--mba-duration-150) var(--mba-ease-in-out);
+  --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
+  --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
+}

package/src/tokens/_typography.css

@@ -0,0 +1,157 @@
+/**
+ * MBA Design System - Typographie
+ *
+ * Polices: Open Sans (textes) + Congenial (titres)
+ * Source: Design System Figma
+ */
+
+:root {
+  /* ===========================================
+     FAMILLES DE POLICES
+     =========================================== */
+  --mba-font-family-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-heading: "Congenial", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  /* ===========================================
+     TAILLES DE POLICE (Figma Scale)
+     =========================================== */
+  --mba-font-size-xxs: 0.875rem;   /* 14px */
+  --mba-font-size-xs: 1rem;        /* 16px */
+  --mba-font-size-sm: 1.125rem;    /* 18px */
+  --mba-font-size-md: 1.5rem;      /* 24px */
+  --mba-font-size-xl: 2rem;        /* 32px */
+  --mba-font-size-xxl: 3rem;       /* 48px */
+
+  /* ===========================================
+     FONT WEIGHTS
+     =========================================== */
+  --mba-font-weight-regular: 400;
+  --mba-font-weight-semibold: 600;
+  --mba-font-weight-bold: 700;
+  --mba-font-weight-extrabold: 800;
+
+  /* ===========================================
+     LINE HEIGHTS
+     =========================================== */
+  --mba-leading-none: 1;
+  --mba-leading-tight: 1.25;
+  --mba-leading-snug: 1.375;
+  --mba-leading-normal: 1.5;
+  --mba-leading-relaxed: 1.625;
+  --mba-leading-loose: 2;
+
+  /* ===========================================
+     LETTER SPACING
+     =========================================== */
+  --mba-tracking-tighter: -0.05em;
+  --mba-tracking-tight: -0.025em;
+  --mba-tracking-normal: 0em;
+  --mba-tracking-wide: 0.025em;
+  --mba-tracking-wider: 0.05em;
+  --mba-tracking-widest: 0.1em;
+}
+
+/* ===========================================
+   HEADING PRESETS (Congenial)
+   =========================================== */
+
+/* XXL - 48px Bold */
+.mba-heading-xxl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+
+/* XL - 32px Bold */
+.mba-heading-xl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+
+/* MD - 24px Bold (Figma: extra-bold, mais Congenial ExtraBold non dispo) */
+.mba-heading-md {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-md);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-snug);
+}
+
+/* SM - 18px Bold */
+.mba-heading-sm {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XS - 16px Bold */
+.mba-heading-xs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XXS - 14px Bold */
+.mba-heading-xxs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+
+/* ===========================================
+   TEXT PRESETS (Open Sans)
+   =========================================== */
+
+/* XXL - 48px */
+.mba-text-xxl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XL - 32px */
+.mba-text-xl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* MD - 24px */
+.mba-text-md {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-md);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* SM - 18px */
+.mba-text-sm {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XS - 16px (Base) */
+.mba-text-xs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+
+/* XXS - 14px */
+.mba-text-xxs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}

package/src/tokens/index.css

@@ -0,0 +1,13 @@
+/**
+ * MBA Design System - Tokens
+ *
+ * Point d'entrée pour tous les design tokens
+ */
+
+@import "./_colors.css";
+@import "./_typography.css";
+@import "./_spacing.css";
+@import "./_radius.css";
+@import "./_shadows.css";
+@import "./_transitions.css";
+@import "./_breakpoints.css";