@maboussoleaidant/design-system 0.1.35 → 0.1.37
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 +6 -0
- package/dist/mba-design-system.css +236 -1
- package/dist/mba-design-system.css.map +1 -1
- package/dist/mba-design-system.min.css +2 -2
- package/dist/mba-tailwind.css +202 -5
- package/dist/mba-tailwind.css.map +1 -1
- package/dist/mba-tailwind.min.css +2 -2
- package/dist/mba-tokens-only.css +15 -0
- package/dist/mba-tokens-only.css.map +1 -1
- package/package.json +1 -1
- package/src/tailwind-preset.css +4 -0
- package/src/tokens/_colors.css +15 -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\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","/**\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"]}
|
package/package.json
CHANGED
package/src/tailwind-preset.css
CHANGED
|
@@ -96,6 +96,10 @@
|
|
|
96
96
|
--color-pastel-lavender: var(--mba-color-pastel-lavender);
|
|
97
97
|
--color-pastel-narcisse: var(--mba-color-pastel-narcisse);
|
|
98
98
|
--color-pastel-oranger: var(--mba-color-pastel-oranger);
|
|
99
|
+
--color-pastel-bleuet-dark: var(--mba-color-pastel-bleuet-dark);
|
|
100
|
+
--color-pastel-lavender-dark: var(--mba-color-pastel-lavender-dark);
|
|
101
|
+
--color-pastel-narcisse-dark: var(--mba-color-pastel-narcisse-dark);
|
|
102
|
+
--color-pastel-oranger-dark: var(--mba-color-pastel-oranger-dark);
|
|
99
103
|
|
|
100
104
|
/* Autres */
|
|
101
105
|
--color-beige: var(--mba-color-beige);
|
package/src/tokens/_colors.css
CHANGED
|
@@ -113,6 +113,21 @@
|
|
|
113
113
|
--mba-color-pastel-lavender: #EEEDFF;
|
|
114
114
|
--mba-color-pastel-narcisse: #FFF6E4;
|
|
115
115
|
--mba-color-pastel-oranger: #FFF2EB;
|
|
116
|
+
--mba-color-pastel-bleuet-dark: #C8DBFF;
|
|
117
|
+
--mba-color-pastel-lavender-dark: #CAC8FF;
|
|
118
|
+
--mba-color-pastel-narcisse-dark: #FFEBC3;
|
|
119
|
+
--mba-color-pastel-oranger-dark: #FFDBC8;
|
|
120
|
+
|
|
121
|
+
/* ===========================================
|
|
122
|
+
TAG BACKGROUNDS
|
|
123
|
+
Fonds des tags/badges : plus foncés que les pastels
|
|
124
|
+
de base pour l'accessibilité (source Figma).
|
|
125
|
+
Primary/Grey réutilisent primary-100 / grey-50.
|
|
126
|
+
=========================================== */
|
|
127
|
+
--mba-color-tag-bleuet: #E0E9F8;
|
|
128
|
+
--mba-color-tag-lavender: #E3E1F8;
|
|
129
|
+
--mba-color-tag-oranger: #FCEAE0;
|
|
130
|
+
--mba-color-tag-narcisse: #F8EEDA;
|
|
116
131
|
|
|
117
132
|
/* ===========================================
|
|
118
133
|
CUSTOM - Beige (Background cards)
|