@maboussoleaidant/design-system 0.1.4 → 0.1.6

package/dist/mba-tokens-only.css

@@ -478,3 +478,5 @@
   @media (min-width: 1280px) { ... }  xl
   @media (min-width: 1536px) { ... }  2xl
 */
+
+/*# sourceMappingURL=mba-tokens-only.css.map */

package/dist/mba-tokens-only.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/index.css","../src/tokens/_colors.css","../src/tokens/_typography.css","../src/tokens/_spacing.css","../src/tokens/_radius.css","../src/tokens/_shadows.css","../src/tokens/_transitions.css","../src/tokens/_breakpoints.css"],"names":[],"mappings":"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","file":"mba-tokens-only.css","sourcesContent":["/**\n * MBA Design System - Tokens\n *\n * Point d'entrée pour tous les design tokens\n */\n\n@import \"./_colors.css\";\n@import \"./_typography.css\";\n@import \"./_spacing.css\";\n@import \"./_radius.css\";\n@import \"./_shadows.css\";\n@import \"./_transitions.css\";\n@import \"./_breakpoints.css\";\n","/**\n * MBA Design System - Couleurs\n *\n * Palette de couleurs extraite du Design System Figma\n * Préfixe: --mba-color-\n */\n\n:root {\n  /* ===========================================\n     BASICS\n     =========================================== */\n  --mba-color-white: #FFFFFF;\n  --mba-color-black: #1C1C1D;\n\n  /* ===========================================\n     GREY (Neutral)\n     =========================================== */\n  --mba-color-grey-50: #F2F2F3;\n  --mba-color-grey-100: #D7D7DB;\n  --mba-color-grey-300: #B6B6BC;\n  --mba-color-grey-400: #71717A;\n  --mba-color-grey-800: #303034;\n\n  /* ===========================================\n     PRIMARY (Violet)\n     Couleur principale de la marque\n     =========================================== */\n  --mba-color-primary-50: #FFF6FF;\n  --mba-color-primary-100: #EDD7EF;\n  --mba-color-primary-400: #C097C3;\n  --mba-color-primary-500: #703973;  /* Couleur déposée */\n  --mba-color-primary-800: #461C52;\n  --mba-color-primary-900: #2C1133;\n\n  /* ===========================================\n     SECONDARY\n     =========================================== */\n  --mba-color-secondary-500: #FDC785;\n\n  /* ===========================================\n     PRIMARY PRO (Blue)\n     Couleur pour l'offre Pro/Entreprise\n     =========================================== */\n  --mba-color-primary-pro-50: #F7FAFD;\n  --mba-color-primary-pro-100: #DFEDF7;\n  --mba-color-primary-pro-400: #6A88AA;\n  --mba-color-primary-pro-500: #395172;\n  --mba-color-primary-pro-800: #122042;\n\n  /* ===========================================\n     ALERT - ERROR / REQUIRED (Rouge)\n     =========================================== */\n  --mba-color-error-100: #FFDED1;\n  --mba-color-error-300: #F8B09E;\n  --mba-color-error-400: #D9514E;\n  --mba-color-error-500: #C1121F;\n  --mba-color-error-800: #6F052A;\n\n  /* ===========================================\n     ALERT - SUCCESS / VALIDATION (Vert)\n     =========================================== */\n  --mba-color-success-100: #E6FADE;\n  --mba-color-success-300: #B7E7AC;\n  --mba-color-success-400: #74C474;\n  --mba-color-success-500: #489E50;\n  --mba-color-success-800: #165B30;\n\n  /* ===========================================\n     ALERT - WARNING / IN PROGRESS (Jaune)\n     =========================================== */\n  --mba-color-warning-50: #FEFAEC;\n  --mba-color-warning-100: #FBF2CB;\n  --mba-color-warning-300: #F8E199;\n  --mba-color-warning-400: #D6A73D;\n  --mba-color-warning-500: #BC7F09;\n  --mba-color-warning-800: #6D3D02;\n\n  /* ===========================================\n     ALERT - INFO / NEUTRAL (Bleu)\n     =========================================== */\n  --mba-color-info-50: #F1FBFE;\n  --mba-color-info-100: #E2F6FC;\n  --mba-color-info-300: #C6EAF9;\n  --mba-color-info-400: #8ABDE0;\n  --mba-color-info-500: #649CCC;\n  --mba-color-info-800: #1F4076;\n\n  /* ===========================================\n     CUSTOM PALETTE - Brick\n     (Ultra light et dark - pour tags, articles, backgrounds)\n     =========================================== */\n  --mba-color-brick-light: #FCF4F0;\n  --mba-color-brick: #AC5118;\n\n  /* ===========================================\n     CUSTOM PALETTE - Forest\n     =========================================== */\n  --mba-color-forest-light: #DEF8EF;\n  --mba-color-forest: #16654C;\n\n  /* ===========================================\n     CUSTOM PALETTE - Rose\n     =========================================== */\n  --mba-color-rose-light: #FAEFF4;\n  --mba-color-rose: #B83C75;\n\n  /* ===========================================\n     CUSTOM PALETTE - Pastels (Nouveau)\n     Note: Non accessibles pour texte/titre\n     =========================================== */\n  --mba-color-pastel-bleuet: #EBF2FF;\n  --mba-color-pastel-lavender: #EEEDFF;\n  --mba-color-pastel-narcisse: #FFF6E4;\n  --mba-color-pastel-oranger: #FFF2EB;\n\n  /* ===========================================\n     CUSTOM - Beige (Background cards)\n     =========================================== */\n  --mba-color-beige: #F9F5F0;\n\n  /* ===========================================\n     GRADIENT\n     =========================================== */\n  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);\n\n  /* ===========================================\n     SEMANTIC COLORS\n     (Utilise uniquement les tokens Figma existants)\n     =========================================== */\n  --mba-color-background: var(--mba-color-white);\n  --mba-color-surface: var(--mba-color-grey-50);\n  --mba-color-surface-raised: var(--mba-color-white);\n  --mba-color-border: var(--mba-color-grey-100);\n  --mba-color-border-strong: var(--mba-color-grey-300);\n\n  --mba-color-text: var(--mba-color-black);\n  --mba-color-text-muted: var(--mba-color-grey-400);\n  --mba-color-text-subtle: var(--mba-color-grey-300);\n  --mba-color-text-inverse: var(--mba-color-white);\n\n  --mba-color-link: var(--mba-color-primary-500);\n  --mba-color-link-hover: var(--mba-color-primary-800);\n\n  /* Focus ring (accessibilité) */\n  --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);\n}\n","/**\n * MBA Design System - Typographie\n *\n * Polices: Open Sans (textes) + Congenial (titres)\n * Source: Design System Figma\n */\n\n:root {\n  /* ===========================================\n     FAMILLES DE POLICES\n     =========================================== */\n  --mba-font-family-text: \"Open Sans\", ui-sans-serif, system-ui, sans-serif;\n  --mba-font-family-heading: \"Congenial\", ui-sans-serif, system-ui, sans-serif;\n  --mba-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n\n  /* ===========================================\n     TAILLES DE POLICE (Figma Scale)\n     =========================================== */\n  --mba-font-size-xxs: 0.875rem;   /* 14px */\n  --mba-font-size-xs: 1rem;        /* 16px */\n  --mba-font-size-sm: 1.125rem;    /* 18px */\n  --mba-font-size-md: 1.5rem;      /* 24px */\n  --mba-font-size-xl: 2rem;        /* 32px */\n  --mba-font-size-xxl: 3rem;       /* 48px */\n\n  /* ===========================================\n     FONT WEIGHTS\n     =========================================== */\n  --mba-font-weight-regular: 400;\n  --mba-font-weight-semibold: 600;\n  --mba-font-weight-bold: 700;\n  --mba-font-weight-extrabold: 800;\n\n  /* ===========================================\n     LINE HEIGHTS\n     =========================================== */\n  --mba-leading-none: 1;\n  --mba-leading-tight: 1.25;\n  --mba-leading-snug: 1.375;\n  --mba-leading-normal: 1.5;\n  --mba-leading-relaxed: 1.625;\n  --mba-leading-loose: 2;\n\n  /* ===========================================\n     LETTER SPACING\n     =========================================== */\n  --mba-tracking-tighter: -0.05em;\n  --mba-tracking-tight: -0.025em;\n  --mba-tracking-normal: 0em;\n  --mba-tracking-wide: 0.025em;\n  --mba-tracking-wider: 0.05em;\n  --mba-tracking-widest: 0.1em;\n}\n\n/* ===========================================\n   HEADING PRESETS (Congenial)\n   =========================================== */\n\n/* XXL - 48px Bold */\n.mba-heading-xxl {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-xxl);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-tight);\n}\n\n/* XL - 32px Bold */\n.mba-heading-xl {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-xl);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-tight);\n}\n\n/* MD - 24px Bold (Figma: extra-bold, mais Congenial ExtraBold non dispo) */\n.mba-heading-md {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-md);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-snug);\n}\n\n/* SM - 18px Bold */\n.mba-heading-sm {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-sm);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-normal);\n}\n\n/* XS - 16px Bold */\n.mba-heading-xs {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-xs);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-normal);\n}\n\n/* XXS - 14px Bold */\n.mba-heading-xxs {\n  font-family: var(--mba-font-family-heading);\n  font-size: var(--mba-font-size-xxs);\n  font-weight: var(--mba-font-weight-bold);\n  line-height: var(--mba-leading-normal);\n}\n\n/* ===========================================\n   TEXT PRESETS (Open Sans)\n   =========================================== */\n\n/* XXL - 48px */\n.mba-text-xxl {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-xxl);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n\n/* XL - 32px */\n.mba-text-xl {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-xl);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n\n/* MD - 24px */\n.mba-text-md {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-md);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n\n/* SM - 18px */\n.mba-text-sm {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-sm);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n\n/* XS - 16px (Base) */\n.mba-text-xs {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-xs);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n\n/* XXS - 14px */\n.mba-text-xxs {\n  font-family: var(--mba-font-family-text);\n  font-size: var(--mba-font-size-xxs);\n  font-weight: var(--mba-font-weight-regular);\n  line-height: var(--mba-leading-normal);\n}\n","/**\n * MBA Design System - Espacements\n *\n * Échelle d'espacements extraite du Design System Figma\n * Préfixe: --mba-space-\n */\n\n:root {\n  /* ===========================================\n     ÉCHELLE FIGMA\n     =========================================== */\n  --mba-space-xxs: 0.25rem;   /* 4px */\n  --mba-space-xs: 0.5rem;     /* 8px */\n  --mba-space-sm: 1rem;       /* 16px */\n  --mba-space-md: 1.5rem;     /* 24px */\n  --mba-space-lg: 2rem;       /* 32px */\n  --mba-space-xl: 3rem;       /* 48px */\n  --mba-space-xxl: 4rem;      /* 64px */\n\n  /* ===========================================\n     VALEURS UTILITAIRES\n     =========================================== */\n  --mba-space-0: 0;\n  --mba-space-px: 1px;\n}\n","/**\n * MBA Design System - Border Radius\n *\n * Échelle de rayons de bordure extraite du Design System Figma\n * Préfixe: --mba-radius-\n */\n\n:root {\n  /* ===========================================\n     ÉCHELLE FIGMA\n     =========================================== */\n  --mba-radius-2xs: 0.25rem;    /* 4px */\n  --mba-radius-xs: 0.5rem;      /* 8px */\n  --mba-radius-sm: 1rem;        /* 16px */\n  --mba-radius-md: 1.5rem;      /* 24px */\n  --mba-radius-lg: 2rem;        /* 32px */\n  --mba-radius-xl: 3rem;        /* 48px */\n  --mba-radius-xxl: 4rem;       /* 64px */\n\n  /* ===========================================\n     VALEURS UTILITAIRES\n     =========================================== */\n  --mba-radius-none: 0;\n  --mba-radius-full: 9999px;\n}\n","/**\n * MBA Design System - Ombres (Elevation)\n *\n * Échelle d'élévation extraite du Design System Figma\n * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))\n * Préfixe: --mba-shadow-\n */\n\n:root {\n  /* ===========================================\n     ÉCHELLE FIGMA (Elevation)\n     Double couche: 4% + 8% opacité\n     =========================================== */\n\n  /* XXS - blur 4px */\n  --mba-shadow-xxs:\n    0 2px 4px 0 rgba(113, 113, 122, 0.04),\n    1px 2px 4px 0 rgba(113, 113, 122, 0.08);\n\n  /* XS - blur 8px */\n  --mba-shadow-xs:\n    0 2px 8px 0 rgba(113, 113, 122, 0.04),\n    1px 2px 8px 0 rgba(113, 113, 122, 0.08);\n\n  /* SM - blur 16px */\n  --mba-shadow-sm:\n    0 2px 16px 0 rgba(113, 113, 122, 0.04),\n    1px 2px 16px 0 rgba(113, 113, 122, 0.08);\n\n  /* MD - blur 24px */\n  --mba-shadow-md:\n    0 2px 24px 0 rgba(113, 113, 122, 0.04),\n    1px 2px 24px 0 rgba(113, 113, 122, 0.08);\n\n  /* ===========================================\n     VALEURS UTILITAIRES\n     =========================================== */\n  --mba-shadow-none: 0 0 #0000;\n  --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);\n}\n","/**\n * MBA Design System - Transitions\n *\n * Durées et easings pour les animations\n */\n\n:root {\n  /* ===========================================\n     DUREES\n     =========================================== */\n  --mba-duration-75: 75ms;\n  --mba-duration-100: 100ms;\n  --mba-duration-150: 150ms;\n  --mba-duration-200: 200ms;\n  --mba-duration-300: 300ms;\n  --mba-duration-500: 500ms;\n  --mba-duration-700: 700ms;\n  --mba-duration-1000: 1000ms;\n\n  /* ===========================================\n     EASINGS\n     =========================================== */\n  --mba-ease-linear: linear;\n  --mba-ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --mba-ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --mba-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /* ===========================================\n     TRANSITIONS PRECONSTRUITES\n     =========================================== */\n  --mba-transition-fast: var(--mba-duration-150) var(--mba-ease-in-out);\n  --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);\n  --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);\n}\n","/**\n * MBA Design System - Breakpoints\n *\n * Points de rupture responsive\n * Note: Les custom properties ne fonctionnent pas dans @media queries,\n * ces valeurs sont documentées ici pour référence et usage JS.\n *\n * Utiliser les classes Tailwind (sm:, md:, lg:, xl:, 2xl:)\n * ou les @media queries directement.\n */\n\n:root {\n  /* Breakpoints pour référence (usage JS) */\n  --mba-breakpoint-sm: 640px;\n  --mba-breakpoint-md: 768px;\n  --mba-breakpoint-lg: 1024px;\n  --mba-breakpoint-xl: 1280px;\n  --mba-breakpoint-2xl: 1536px;\n}\n\n/*\n  Usage en CSS pur (les @media ne supportent pas les custom properties) :\n\n  @media (min-width: 640px) { ... }   sm\n  @media (min-width: 768px) { ... }   md\n  @media (min-width: 1024px) { ... }  lg\n  @media (min-width: 1280px) { ... }  xl\n  @media (min-width: 1536px) { ... }  2xl\n*/\n"]}

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "@maboussoleaidant/design-system",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Design System Ma Boussole Aidant - Tokens et composants CSS",
   "main": "dist/mba-design-system.css",
   "exports": {
     ".": "./dist/mba-design-system.css",
+    "./min": "./dist/mba-design-system.min.css",
     "./tokens": "./dist/mba-tokens-only.css",
-    "./tailwind": "./dist/mba-tailwind.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);
+}