@maboussoleaidant/design-system 0.1.39 → 0.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -0
- package/CHANGELOG.md +71 -0
- package/dist/mba-design-system.css +104 -141
- package/dist/mba-design-system.css.map +1 -1
- package/dist/mba-design-system.min.css +2 -2
- package/dist/mba-tailwind.css +40 -23
- package/dist/mba-tailwind.css.map +1 -1
- package/dist/mba-tailwind.min.css +2 -2
- package/dist/mba-tokens-only.css +29 -0
- package/dist/mba-tokens-only.css.map +1 -1
- package/package.json +1 -1
- package/src/tailwind-preset.css +2 -0
- package/src/tokens/_shadows.css +16 -0
- package/src/tokens/_spacing.css +13 -0
|
@@ -1 +1 @@
|
|
|
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","../src/tokens/_decorations.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@import \"./_decorations.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 --mba-color-infobox: #fef7e6;\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 --mba-color-pastel-bleuet-dark: #C8DBFF;\n --mba-color-pastel-lavender-dark: #CAC8FF;\n --mba-color-pastel-narcisse-dark: #FFEBC3;\n --mba-color-pastel-oranger-dark: #FFDBC8;\n\n /* ===========================================\n TAG BACKGROUNDS\n Fonds des tags/badges : plus foncés que les pastels\n de base pour l'accessibilité (source Figma).\n Primary/Grey réutilisent primary-100 / grey-50.\n =========================================== */\n --mba-color-tag-bleuet: #E0E9F8;\n --mba-color-tag-lavender: #E3E1F8;\n --mba-color-tag-oranger: #FCEAE0;\n --mba-color-tag-narcisse: #F8EEDA;\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-xxxs: 0.75rem; /* 12px - feedback, captions */\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-medium: 500;\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 Wrappé dans @layer components pour être overridable par utilities\n =========================================== */\n\n@layer components {\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} /* end @layer components */\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 --mba-space-gap-10: 10px;\n\n /* ===========================================\n CONTAINER\n =========================================== */\n --mba-container-width: 70rem; /* 1120px */\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 INPUT RINGS (focus/hover states)\n 1.5px outline pour les champs de formulaire\n =========================================== */\n --mba-input-ring-info: 0 0 0 1.5px var(--mba-color-info-100);\n --mba-input-ring-info-focus: 0 0 0 1.5px var(--mba-color-info-300);\n --mba-input-ring-error: 0 0 0 1.5px var(--mba-color-error-100);\n --mba-input-ring-error-focus: 0 0 0 1.5px var(--mba-color-error-300);\n --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);\n --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);\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","/**\n * MBA Design System - Decorations\n *\n * Variables pour éléments décoratifs (waves, shapes, etc.)\n *\n * Naming convention:\n * - dip-up = creux vers le haut ↑ (utilisé en position bottom)\n * - dip-down = creux vers le bas ↓ (utilisé en position top)\n */\n\n:root {\n /* Wave Default (42px) */\n --mba-wave-height: 42px;\n --mba-wave-dip-up-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M1280 42H0V27.6706C95.612 27.6706 246.789 0 360.422 0C499.085 0 780.915 27.6706 914.071 27.6706C1068.75 27.6706 1190.9 0 1280 0V42Z' fill='black'/%3E%3C/svg%3E\");\n --mba-wave-dip-down-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V14.3294C1184.39 14.3294 1033.21 42 919.578 42C780.915 42 499.085 14.3294 365.929 14.3294C211.248 14.3294 89.1044 42 0 42V0Z' fill='black'/%3E%3C/svg%3E\");\n\n /* Wave Small (24px) */\n --mba-wave-sm-height: 24px;\n --mba-wave-sm-dip-up-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M1280 24H0V15.8118C95.612 15.8118 246.789 0 360.422 0C499.085 0 780.915 15.8118 914.071 15.8118C1068.75 15.8118 1190.9 0 1280 0V24Z' fill='black'/%3E%3C/svg%3E\");\n --mba-wave-sm-dip-down-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V8.18824C1184.39 8.18824 1033.21 24 919.578 24C780.915 24 499.085 8.18824 365.929 8.18824C211.248 8.18824 89.1044 24 0 24V0Z' fill='black'/%3E%3C/svg%3E\");\n}\n"]}
|
|
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","../src/tokens/_decorations.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@import \"./_decorations.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 --mba-color-infobox: #fef7e6;\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 --mba-color-pastel-bleuet-dark: #C8DBFF;\n --mba-color-pastel-lavender-dark: #CAC8FF;\n --mba-color-pastel-narcisse-dark: #FFEBC3;\n --mba-color-pastel-oranger-dark: #FFDBC8;\n\n /* ===========================================\n TAG BACKGROUNDS\n Fonds des tags/badges : plus foncés que les pastels\n de base pour l'accessibilité (source Figma).\n Primary/Grey réutilisent primary-100 / grey-50.\n =========================================== */\n --mba-color-tag-bleuet: #E0E9F8;\n --mba-color-tag-lavender: #E3E1F8;\n --mba-color-tag-oranger: #FCEAE0;\n --mba-color-tag-narcisse: #F8EEDA;\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-xxxs: 0.75rem; /* 12px - feedback, captions */\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-medium: 500;\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 Wrappé dans @layer components pour être overridable par utilities\n =========================================== */\n\n@layer components {\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} /* end @layer components */\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 --mba-space-gap-10: 10px;\n\n /* ===========================================\n CONTAINER\n =========================================== */\n --mba-container-width: 70rem; /* 1120px */\n\n /* Gouttière latérale du conteneur de page.\n Partagée par le header et le footer : leurs contenus\n (logo en tête) restent alignés à toutes les largeurs\n et ne se collent jamais au bord du viewport.\n Valeur mobile par défaut, élargie à partir de md. */\n --mba-container-gutter: 1rem; /* 16px */\n}\n\n@media (min-width: 768px) {\n :root {\n --mba-container-gutter: 5rem; /* 80px */\n }\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 OMBRES SÉMANTIQUES (teintées marque)\n Hors échelle d'élévation : couleur de marque\n et non Grey 400, une seule couche.\n =========================================== */\n\n /* Footer — style Figma « Footer aidant »\n 0 -4px 8px 8px, Primary 500 (#703973) à 4 %\n Offset Y négatif : le footer est ancré en bas\n de page, son ombre remonte sur le contenu. */\n --mba-shadow-footer: 0 -4px 8px 8px rgba(112, 57, 115, 0.04);\n\n /* Footer variante Pro — même géométrie,\n Primary Pro 500 (#395172) à 4 %. */\n --mba-shadow-footer-pro: 0 -4px 8px 8px rgba(57, 81, 114, 0.04);\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 INPUT RINGS (focus/hover states)\n 1.5px outline pour les champs de formulaire\n =========================================== */\n --mba-input-ring-info: 0 0 0 1.5px var(--mba-color-info-100);\n --mba-input-ring-info-focus: 0 0 0 1.5px var(--mba-color-info-300);\n --mba-input-ring-error: 0 0 0 1.5px var(--mba-color-error-100);\n --mba-input-ring-error-focus: 0 0 0 1.5px var(--mba-color-error-300);\n --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);\n --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);\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","/**\n * MBA Design System - Decorations\n *\n * Variables pour éléments décoratifs (waves, shapes, etc.)\n *\n * Naming convention:\n * - dip-up = creux vers le haut ↑ (utilisé en position bottom)\n * - dip-down = creux vers le bas ↓ (utilisé en position top)\n */\n\n:root {\n /* Wave Default (42px) */\n --mba-wave-height: 42px;\n --mba-wave-dip-up-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M1280 42H0V27.6706C95.612 27.6706 246.789 0 360.422 0C499.085 0 780.915 27.6706 914.071 27.6706C1068.75 27.6706 1190.9 0 1280 0V42Z' fill='black'/%3E%3C/svg%3E\");\n --mba-wave-dip-down-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 42' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V14.3294C1184.39 14.3294 1033.21 42 919.578 42C780.915 42 499.085 14.3294 365.929 14.3294C211.248 14.3294 89.1044 42 0 42V0Z' fill='black'/%3E%3C/svg%3E\");\n\n /* Wave Small (24px) */\n --mba-wave-sm-height: 24px;\n --mba-wave-sm-dip-up-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M1280 24H0V15.8118C95.612 15.8118 246.789 0 360.422 0C499.085 0 780.915 15.8118 914.071 15.8118C1068.75 15.8118 1190.9 0 1280 0V24Z' fill='black'/%3E%3C/svg%3E\");\n --mba-wave-sm-dip-down-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1280V8.18824C1184.39 8.18824 1033.21 24 919.578 24C780.915 24 499.085 8.18824 365.929 8.18824C211.248 8.18824 89.1044 24 0 24V0Z' fill='black'/%3E%3C/svg%3E\");\n}\n"]}
|
package/package.json
CHANGED
package/src/tailwind-preset.css
CHANGED
|
@@ -207,5 +207,7 @@
|
|
|
207
207
|
--shadow-xs: var(--mba-shadow-xs);
|
|
208
208
|
--shadow-sm: var(--mba-shadow-sm);
|
|
209
209
|
--shadow-md: var(--mba-shadow-md);
|
|
210
|
+
--shadow-footer: var(--mba-shadow-footer);
|
|
211
|
+
--shadow-footer-pro: var(--mba-shadow-footer-pro);
|
|
210
212
|
--shadow-inner: var(--mba-shadow-inner);
|
|
211
213
|
}
|
package/src/tokens/_shadows.css
CHANGED
|
@@ -32,6 +32,22 @@
|
|
|
32
32
|
0 2px 24px 0 rgba(113, 113, 122, 0.04),
|
|
33
33
|
1px 2px 24px 0 rgba(113, 113, 122, 0.08);
|
|
34
34
|
|
|
35
|
+
/* ===========================================
|
|
36
|
+
OMBRES SÉMANTIQUES (teintées marque)
|
|
37
|
+
Hors échelle d'élévation : couleur de marque
|
|
38
|
+
et non Grey 400, une seule couche.
|
|
39
|
+
=========================================== */
|
|
40
|
+
|
|
41
|
+
/* Footer — style Figma « Footer aidant »
|
|
42
|
+
0 -4px 8px 8px, Primary 500 (#703973) à 4 %
|
|
43
|
+
Offset Y négatif : le footer est ancré en bas
|
|
44
|
+
de page, son ombre remonte sur le contenu. */
|
|
45
|
+
--mba-shadow-footer: 0 -4px 8px 8px rgba(112, 57, 115, 0.04);
|
|
46
|
+
|
|
47
|
+
/* Footer variante Pro — même géométrie,
|
|
48
|
+
Primary Pro 500 (#395172) à 4 %. */
|
|
49
|
+
--mba-shadow-footer-pro: 0 -4px 8px 8px rgba(57, 81, 114, 0.04);
|
|
50
|
+
|
|
35
51
|
/* ===========================================
|
|
36
52
|
VALEURS UTILITAIRES
|
|
37
53
|
=========================================== */
|
package/src/tokens/_spacing.css
CHANGED
|
@@ -28,4 +28,17 @@
|
|
|
28
28
|
CONTAINER
|
|
29
29
|
=========================================== */
|
|
30
30
|
--mba-container-width: 70rem; /* 1120px */
|
|
31
|
+
|
|
32
|
+
/* Gouttière latérale du conteneur de page.
|
|
33
|
+
Partagée par le header et le footer : leurs contenus
|
|
34
|
+
(logo en tête) restent alignés à toutes les largeurs
|
|
35
|
+
et ne se collent jamais au bord du viewport.
|
|
36
|
+
Valeur mobile par défaut, élargie à partir de md. */
|
|
37
|
+
--mba-container-gutter: 1rem; /* 16px */
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (min-width: 768px) {
|
|
41
|
+
:root {
|
|
42
|
+
--mba-container-gutter: 5rem; /* 80px */
|
|
43
|
+
}
|
|
31
44
|
}
|