@maboussoleaidant/design-system 0.1.39 → 0.1.40

package/CHANGELOG.md

@@ -6,6 +6,18 @@ Format inspiré de [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/). Ver
 
 ---
 
+## [0.1.40] — 2026-08-07
+
+Correctif de **cascade layers**. **100 % rétrocompatible** (aucune classe modifiée).
+
+### 🐛 Correctif
+
+- **Ordre des `@layer` figé** (`src/main.css`) — ajout de `@layer theme, base, components, utilities;` en 1re règle du CSS compilé.
+  - **Problème** : sans ordre déclaré, les layers étaient ordonnés par apparition (`components` puis `base`) → le reset de `@layer base` (ex. `button { background-color: transparent }`, `a { … }`) **écrasait** les composants `.mba-*` de `@layer components`. Symptômes côté consommateur : `.mba-btn` / `.mba-btn-light` / `.mba-input-icon` / `.mba-btn-to-top` sans fond ni couleur, `.is-hidden` sans effet, liens `.mba-breadcrumb__link` en mauvaise couleur — **y compris dans un Shadow DOM** important ce fichier.
+  - **Correction** : priorité croissante `theme < base < components < utilities` → les composants gagnent enfin sur le reset, comme attendu. Débloque l'adoption des composants DS dans `mba_front` sans override local.
+
+---
+
 ## [0.1.39] — 2026-08-07
 
 Lot de composants **« Ma vie d'aidant »** (publié en patch pour éviter des publications en cascade). **100 % rétrocompatible** : que des ajouts, aucune classe `.mba-*` existante modifiée de façon cassante. Tout est **CSS pur** (zéro JS dans le DS), tokens uniquement, accessible (0 violation a11y sur les nouvelles stories).

package/dist/mba-design-system.css

@@ -1,23 +1,33 @@
+
+@layer theme, base, components, utilities;
 /**
  * MBA Design System
  *
  * Point d'entrée principal (sans Tailwind utilities)
  * Inclut: tokens + base + composants
  */
-
+/**
+ * Ordre des cascade layers — DOIT rester la 1re règle du CSS compilé.
+ *
+ * Sans cette déclaration, les layers étaient ordonnés par ordre d'apparition
+ * (`components` puis `base`), ce qui faisait gagner le reset `base`
+ * (ex. `button { background-color: transparent }`, `a { … }`) sur les
+ * composants `.mba-*` de `@layer components` — y compris à l'intérieur d'un
+ * Shadow DOM qui importe ce fichier. En figeant l'ordre priorité croissante
+ * `theme < base < components < utilities`, les composants gagnent enfin sur
+ * le reset, comme attendu.
+ */
 /**
  * MBA Design System - Tokens
  *
  * Point d'entrée pour tous les design tokens
  */
-
 /**
  * MBA Design System - Couleurs
  *
  * Palette de couleurs extraite du Design System Figma
  * Préfixe: --mba-color-
  */
-
 :root {
   /* ===========================================
      BASICS
@@ -173,14 +183,12 @@
   /* Focus ring (accessibilité) */
   --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
 }
-
 /**
  * MBA Design System - Typographie
  *
  * Polices: Open Sans (textes) + Congenial (titres)
  * Source: Design System Figma
  */
-
 :root {
   /* ===========================================
      FAMILLES DE POLICES
@@ -229,12 +237,10 @@
   --mba-tracking-wider: 0.05em;
   --mba-tracking-widest: 0.1em;
 }
-
 /* ===========================================
    HEADING PRESETS (Congenial)
    Wrappé dans @layer components pour être overridable par utilities
    =========================================== */
-
 @layer components {
 
 /* XXL - 48px Bold */
@@ -338,16 +344,13 @@
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Espacements
  *
  * Échelle d'espacements extraite du Design System Figma
  * Préfixe: --mba-space-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -372,14 +375,12 @@
      =========================================== */
   --mba-container-width: 70rem;   /* 1120px */
 }
-
 /**
  * MBA Design System - Border Radius
  *
  * Échelle de rayons de bordure extraite du Design System Figma
  * Préfixe: --mba-radius-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA
@@ -398,7 +399,6 @@
   --mba-radius-none: 0;
   --mba-radius-full: 9999px;
 }
-
 /**
  * MBA Design System - Ombres (Elevation)
  *
@@ -406,7 +406,6 @@
  * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
  * Préfixe: --mba-shadow-
  */
-
 :root {
   /* ===========================================
      ÉCHELLE FIGMA (Elevation)
@@ -450,13 +449,11 @@
   --mba-input-ring-success: 0 0 0 1.5px var(--mba-color-success-100);
   --mba-input-ring-success-focus: 0 0 0 1.5px var(--mba-color-success-300);
 }
-
 /**
  * MBA Design System - Transitions
  *
  * Durées et easings pour les animations
  */
-
 :root {
   /* ===========================================
      DUREES
@@ -485,7 +482,6 @@
   --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
   --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
 }
-
 /**
  * MBA Design System - Breakpoints
  *
@@ -496,7 +492,6 @@
  * 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;
@@ -505,7 +500,6 @@
   --mba-breakpoint-xl: 1280px;
   --mba-breakpoint-2xl: 1536px;
 }
-
 /*
   Usage en CSS pur (les @media ne supportent pas les custom properties) :
 
@@ -515,7 +509,6 @@
   @media (min-width: 1280px) { ... }  xl
   @media (min-width: 1536px) { ... }  2xl
 */
-
 /**
  * MBA Design System - Decorations
  *
@@ -525,7 +518,6 @@
  * - dip-up   = creux vers le haut ↑ (utilisé en position bottom)
  * - dip-down = creux vers le bas ↓ (utilisé en position top)
  */
-
 :root {
   /* Wave Default (42px) */
   --mba-wave-height: 42px;
@@ -537,23 +529,19 @@
   --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");
   --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");
 }
-
 /**
  * MBA Design System - Base
  *
  * Reset et styles de base
  */
-
 /**
  * MBA Design System - Fonts
  *
  * @font-face declarations pour Open Sans et Congenial
  */
-
 /* ===========================================
    OPEN SANS (Textes)
    =========================================== */
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -561,7 +549,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -569,7 +556,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -577,7 +563,6 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Open Sans";
   font-style: normal;
@@ -585,12 +570,10 @@
   font-display: swap;
   src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
 }
-
 /* ===========================================
    CONGENIAL (Titres)
    Note: ExtraBold non disponible, on utilise Bold pour les titres
    =========================================== */
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -598,7 +581,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -606,7 +588,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
 }
-
 @font-face {
   font-family: "Congenial";
   font-style: normal;
@@ -614,7 +595,6 @@
   font-display: swap;
   src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
 }
-
 /**
  * MBA Design System - Icons
  *
@@ -626,11 +606,9 @@
  *   1. Éditer src/icons/icons.list.txt
  *   2. Lancer: npm run icons:build
  */
-
 /* ===========================================
    FONT FACE - Material Symbols Rounded
    =========================================== */
-
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
@@ -638,12 +616,10 @@
   font-display: block;
   src: url('../assets/fonts/MaterialSymbolsRounded.woff2') format('woff2');
 }
-
 /* ===========================================
    BASE ICON CLASS
    Wrappé dans @layer base pour permettre aux @layer components de l'overrider
    =========================================== */
-
 @layer base {
 
 .material-symbols-rounded {
@@ -766,9 +742,7 @@
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Preflight
  *
@@ -778,7 +752,6 @@
  * Wrappé dans @layer base pour permettre aux utilities Tailwind
  * de l'overrider sans avoir besoin de !important
  */
-
 @layer base {
 
 *,
@@ -1013,15 +986,12 @@ video {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Base Typography
  *
  * Styles de base pour le texte
  */
-
 @layer base {
 
 body {
@@ -1065,15 +1035,12 @@ a:hover {
 }
 
 }
-
 /* end @layer base */
-
 /**
  * MBA Design System - Composants
  *
  * Classes de composants prêtes à l'emploi
  */
-
 /**
  * MBA Design System - Boutons
  *
@@ -1081,7 +1048,6 @@ a:hover {
  * Couleur: Primary (Violet #703973)
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -1606,9 +1572,7 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Links
  *
@@ -1624,7 +1588,6 @@ a:hover {
  *   <span class="material-symbols-rounded">arrow_forward</span>
  * </a>
  */
-
 @layer components {
 
 .mba-link {
@@ -1667,16 +1630,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Cards
  *
  * Classes: .mba-card, .mba-card--sm, .mba-card-grid
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2288,9 +2248,7 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Arrow Buttons
  *
@@ -2302,7 +2260,6 @@ a:hover {
  * - background: Primary-500
  * - disabled: Grey-300
  */
-
 @layer components {
 
 .mba-arrow {
@@ -2345,16 +2302,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Radio & Checkbox
  *
  * Classes: .mba-radio, .mba-radio--pro, .mba-checkbox, .mba-checkbox--pro
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2558,16 +2512,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Pagination
  *
  * Composant de pagination pour la navigation entre pages
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -2763,16 +2714,13 @@ a:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Inputs
  *
  * Classes: .mba-textarea, .mba-input, .mba-label
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -3287,9 +3235,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Tabs
  *
@@ -3298,7 +3244,6 @@ button.mba-input-icon__icon:hover {
  * Couleurs: Primary 500 (MBA), Primary 900 (Partenaires)
  * Source: Design System Figma (Tabs - Lina-7347)
  */
-
 @layer components {
 
 /* ===========================================
@@ -3387,9 +3332,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* @layer components */
-
 /**
  * MBA Design System - Tags (Badges)
  *
@@ -3415,7 +3358,6 @@ button.mba-input-icon__icon:hover {
  * Note: fonds plus foncés que les pastels de base pour l'accessibilité.
  * Source: Design System Figma.
  */
-
 @layer components {
 
 .mba-tag {
@@ -3509,16 +3451,13 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Header
  *
  * Navigation principale avec dropdown et version mobile
  * Source: Design System Figma
  */
-
 @layer components {
 
 /* ===========================================
@@ -4194,9 +4133,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Wave
  *
@@ -4218,7 +4155,6 @@ button.mba-input-icon__icon:hover {
  * <div class="mba-wave mba-wave--lavender"></div>
  * <div class="mba-wave mba-wave--sm mba-wave--lavender mba-wave--top"></div>
  */
-
 @layer components {
 
 .mba-wave {
@@ -4284,9 +4220,7 @@ button.mba-input-icon__icon:hover {
 
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Section
  *
@@ -4314,7 +4248,6 @@ button.mba-input-icon__icon:hover {
  *   ...
  * </section>
  */
-
 @layer components {
 
 .mba-section {
@@ -4489,9 +4422,7 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /**
  * MBA Design System - Footer
  *
@@ -4510,7 +4441,6 @@ button.mba-input-icon__icon:hover {
  * Modificateurs:
  * - .mba-footer--pro           - Version partenaire (primary-pro)
  */
-
 @layer components {
 
 /* ===========================================
@@ -4898,11 +4828,8 @@ button.mba-input-icon__icon:hover {
 }
 
 }
-
 /* end @layer components */
-
 /* @import "./_forms.css"; */
-
 /**
  * MBA Design System - Alerts
  *
@@ -4930,7 +4857,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (node 4660-18800).
  */
-
 @layer components {
 
   /* ===========================================
@@ -5066,7 +4992,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Accordion
  *
@@ -5075,7 +5000,6 @@ button.mba-input-icon__icon:hover {
  * - À partir de 5 items (ou si le contenu est trop long),
  *   utiliser la variante scrollable pour afficher une scrollbar.
  */
-
 @layer components {
 
   /* ===========================================
@@ -5342,7 +5266,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Carousel
  *
@@ -5368,7 +5291,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (nodes 4660-19043 / 4660-19016).
  */
-
 @layer components {
 
   .mba-carousel {
@@ -5462,7 +5384,6 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Navigation
  *
@@ -5479,7 +5400,6 @@ button.mba-input-icon__icon:hover {
  *
  * Source: Design System Figma (Breadcrumbs - Ma vie d'aidant, node 4660-18352).
  */
-
 @layer components {
 
   /* ===========================================
@@ -5619,35 +5539,28 @@ button.mba-input-icon__icon:hover {
   }
 
 }
-
 /**
  * MBA Design System - Utilities
  *
  * Classes utilitaires complémentaires à Tailwind
  */
-
 /* ===========================================
    FONT SIZE UTILITIES (MBA custom scale)
    Tailwind génère xs, sm, base, lg, xl, 2xl...
    On ajoute nos tailles custom : xxs, md, xxl
    =========================================== */
-
 .text-xxs {
   font-size: var(--mba-font-size-xxs);
 }
-
 .text-md {
   font-size: var(--mba-font-size-md);
 }
-
 .text-xxl {
   font-size: var(--mba-font-size-xxl);
 }
-
 /* ===========================================
    ACCESSIBILITY UTILITIES
    =========================================== */
-
 /* Reduced motion - Respect user preference for reduced animations
    Triggered when user enables "Reduce motion" in system settings
    (macOS, Windows, iOS, Android)
@@ -5659,7 +5572,6 @@ button.mba-input-icon__icon:hover {
 
    WCAG 2.1 Success Criterion 2.3.3 (AAA)
 */
-
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -5670,9 +5582,7 @@ button.mba-input-icon__icon:hover {
     scroll-behavior: auto !important;
   }
 }
-
 /* Visually hidden (accessible) */
-
 .mba-sr-only {
   position: absolute;
   width: 1px;
@@ -5684,9 +5594,7 @@ button.mba-input-icon__icon:hover {
   white-space: nowrap;
   border-width: 0;
 }
-
 /* Not visually hidden */
-
 .mba-not-sr-only {
   position: static;
   width: auto;
@@ -5697,43 +5605,32 @@ button.mba-input-icon__icon:hover {
   clip: auto;
   white-space: normal;
 }
-
 /* ===========================================
    VISIBILITY UTILITIES
    Override pour garantir le masquage même avec
    les composants MBA (display: inline-flex, etc.)
    =========================================== */
-
 /* Hidden - force display: none sur tous les composants */
-
 .hidden {
   display: none !important;
 }
-
 /* Visible utilities */
-
 .visible {
   visibility: visible;
 }
-
 .invisible {
   visibility: hidden;
 }
-
 /* ===========================================
    GRADIENT UTILITIES
    =========================================== */
-
 .bg-gradient-sunset {
   background: var(--mba-gradient-sunset);
 }
-
 /* Border gradient (hover reveal) — applique un contour gradient sunset via ::before */
-
 .mba-border-gradient {
   position: relative;
 }
-
 .mba-border-gradient::before {
   content: "";
   position: absolute;
@@ -5750,7 +5647,6 @@ button.mba-input-icon__icon:hover {
   opacity: 0;
   transition: opacity var(--mba-transition-base);
 }
-
 .mba-border-gradient:hover::before,
 .mba-border-gradient--visible::before {
   opacity: 1;