/* ============================================================================= MyMobil — Design Tokens (source de vérité du design system) ----------------------------------------------------------------------------- Ce fichier est LE master des valeurs du design (couleurs, radius, espacements, typo, tailles). Tout le reste doit y faire référence via var(--mm-*). CASCADE : - custom.css : utilise --mud-palette-* (Mud) + les alias legacy ci-dessous. - Radzen (--rz-*) : remappés ici sur la palette Mud -> suit le dark mode tout seul. - MudBlazor (--mud-*) : la palette C# (IHM/MyMobilTheme.cs) LIT ce fichier au démarrage via IHM/DesignTokens.cs (tokens.css est embarqué comme ressource de l'assembly GUI). MudColor reçoit donc les vrais hex --mm-* et calcule correctement -rgb / -hover / -darken / -lighten. => Pour changer une couleur de marque : éditer SEULEMENT la primitive --mm-* ci-dessous, c'est l'unique source de vérité. Ordre de chargement (index.html) : APRES material-base.css (Radzen), AVANT custom.css. ⚠️ Ne pas renommer une primitive --mm-* sans mettre à jour les clés lues dans MyMobilTheme.cs (DesignTokens.Color("...")) : un token manquant lève une exception au démarrage. ============================================================================= */ :root { /* ---------------------------------------------------------------------- 1. PRIMITIVES — valeurs brutes (ne jamais utiliser en dur ailleurs) ---------------------------------------------------------------------- */ /* Marque */ --mm-blue: #276481; /* bleu pétrole — primary (light) */ --mm-blue-2: #307DA1; /* secondary (light) = rgb(48,125,161) */ --mm-turquoise: #56BEC6; /* turquoise — primary (dark) */ --mm-turquoise-2: #429399; /* secondary (dark) */ --mm-tertiary: #1EC8A5; /* accent tertiaire — ce que l'app rend (défaut MudBlazor Tertiary, non surchargé) */ --mm-gold: #F5B301; /* or — étoile favori du menu (SDD-001) */ /* Neutres */ --mm-white: #fff; --mm-black: #333; /* = MudBlazor Black (lu par MyMobilTheme.cs) */ --mm-text-primary: #424242; /* texte courant — ce que l'app rend (défaut MudBlazor TextPrimary, non surchargé) */ --mm-grey-bg: #F3F5F7; /* fond champs/cards (light) = BackgroundGray */ --mm-grey-dark: #333333; --mm-grey-text: #A0A6AC; --mm-action-default: #adadb1; /* icônes/états inactifs */ /* Surfaces dark */ --mm-bg-dark: #27272F; --mm-grey-bg-dark: #424242; --mm-surface-dark: #373740; --mm-drawer-dark: #32333d; /* Sémantique (statuts) */ --mm-success: #5BBC88; --mm-warning: #FF9800; --mm-warning-soft: #ffb545; --mm-danger: #ff5050; --mm-error: #FF6767; --mm-inactive: #999999; --mm-cancel: #86869c; /* bouton Annuler (dialog) */ --mm-cancel-hover: #666677; /* Dégradé signature bleu -> turquoise */ --mm-gradient: linear-gradient(135deg, var(--mm-blue) 0%, var(--mm-turquoise) 100%); /* Variantes « tranche » du dégradé signature : 4 dégradés progressifs (bleu profond -> turquoise vif) posés sur une grille 2x2 de tuiles de navigation, qui se lisent comme UN seul dégradé balayant le groupe en diagonale. Valeurs des tuiles d'accueil .home-tile-1..4 (Index.razor.css / BienFromIndex). */ --mm-gradient-tile-1: linear-gradient(135deg, rgba(40,102,131,1) 0%, rgba(71,165,178,1) 100%); --mm-gradient-tile-2: linear-gradient(135deg, rgba(61,142,161,1) 0%, rgba(70,197,195,1) 100%); --mm-gradient-tile-3: linear-gradient(135deg, rgba(56,132,153,1) 0%, rgba(70,187,189,1) 100%); --mm-gradient-tile-4: linear-gradient(135deg, rgba(69,158,173,1) 0%, rgba(68,223,209,1) 100%); /* ---------------------------------------------------------------------- 2. TYPOGRAPHIE ---------------------------------------------------------------------- */ --mm-font-family: "Poppins", sans-serif; --mm-font-size-base: 14px; --mm-fs-10: 10px; --mm-fs-11: 11px; --mm-fs-12: 12px; --mm-fs-13: 13px; --mm-fs-14: 14px; --mm-fs-16: 16px; --mm-fs-18: 18px; --mm-fs-20: 20px; /* titre de page (page-title) */ --mm-fs-24: 24px; /* Graisses Poppins (rapatriées du projet Claude Design, 2026-07) */ --mm-fw-light: 300; --mm-fw-regular: 400; --mm-fw-medium: 500; --mm-fw-semibold: 600; --mm-fw-bold: 700; /* ---------------------------------------------------------------------- 3. BORDER-RADIUS ---------------------------------------------------------------------- */ --mm-radius-pill: 24px; /* boutons pleins / pills */ --mm-radius-chip: 16px; /* chips / petits tags */ --mm-radius-card: 10px; /* cards / blocs / dialogs / drawers (standard)*/ --mm-radius-sm: 8px; /* contrôles/encarts secondaires (segments, alertes, menus)*/ --mm-radius-dialog: 6px; /* boutons de dialog */ --mm-radius-input: 5px; /* inputs */ --mm-radius-round: 50%; /* boutons ronds */ /* ---------------------------------------------------------------------- 4. ESPACEMENTS ---------------------------------------------------------------------- */ --mm-space-1: 8px; --mm-space-2: 16px; --mm-space-3: 32px; --mm-gutter: 1.25rem; /* gouttière latérale container */ --mm-menu-offset: 120px; /* padding bas #app (menu fixe bas) */ --mm-sidebar-w: 250px; /* largeur sidebar PC dépliée */ --mm-sidebar-w-rail: 64px; /* largeur sidebar PC repliée (rail) */ /* ---------------------------------------------------------------------- 5. HAUTEURS / TAILLES STANDARD ---------------------------------------------------------------------- */ --mm-h-button: 48px; /* bouton plein / input / select / rond */ --mm-h-round-sm: 32px; /* petit bouton rond */ --mm-h-fab-sm: 36px; --mm-h-select-lg: 65px; --mm-h-tag-sm: 20px; --mm-h-tag-md: 35px; /* ---------------------------------------------------------------------- 6. ALIAS LEGACY (rétro-compatibilité custom.css — anciennement dans son :root) On garde les noms historiques mais ils pointent désormais sur les primitives. ---------------------------------------------------------------------- */ --lt-primary: var(--mm-blue); --dt-primary: var(--mm-turquoise); --lt-grey: var(--mm-grey-bg); --dt-grey: var(--mm-grey-dark); --dt-grey-txt: var(--mm-grey-text); --valid: var(--mm-success); --error: var(--mm-error); --inactive: var(--mm-inactive); /* Dégradé signature bleu -> turquoise — réservé au bouton de connexion (MM-2168). Les boutons d'action courants restent en aplat var(--mud-palette-primary). */ --mymobil-gradient-signature: linear-gradient(135deg, var(--mm-blue) 0%, var(--mm-turquoise) 100%); /* ---------------------------------------------------------------------- 7. EXTENSIONS — familles ajoutées lors de la migration des styles en dur (bordures, ombres, overlays, fonds de statut doux, marque externe) ---------------------------------------------------------------------- */ /* Bordures / séparateurs */ --mm-border: rgb(189,189,189); /* bordure de titre de dialog, séparateurs */ /* Marque externe */ --mm-whatsapp: #25D366; /* couleur officielle WhatsApp */ --mm-whatsapp-on: #ffffff; /* texte/icône posé sur le fond WhatsApp (Claude Design, 2026-07) */ /* Ombres (box-shadow) — élévations Material */ --mm-shadow: rgba(0,0,0,.1); --mm-shadow-md: rgba(0,0,0,.15); --mm-shadow-lg: rgba(0,0,0,.2); /* Ombres composées (rapatriées du projet Claude Design, 2026-07) */ --mm-elevation: 0 4px 24px var(--mm-shadow); --mm-elevation-sm: 0 2px 8px var(--mm-shadow); /* survol de card */ --mm-elevation-round: 0px 10px 15px -3px rgba(0,0,0,.1); /* bouton rond « raised » */ /* Overlays / scrims */ --mm-overlay: rgba(0,0,0,.6); /* fond de chargement plein écran */ --mm-overlay-hover: rgba(0,0,0,.08); /* survol d'item de liste */ --mm-overlay-active: rgba(0,0,0,.12); /* item de liste actif */ /* Fonds de statut doux (badge/bandeau) — couple fond + texte */ --mm-success-bg: #e8f5e9; /* statut Validé / succès (Material green 50/800) */ --mm-success-fg: #2e7d32; --mm-warning-bg: #fff3e0; --mm-warning-fg: #e65100; --mm-danger-bg: #ffebee; --mm-danger-fg: #c62828; --mm-info: #2196f3; --mm-info-bg: #e3f2fd; --mm-info-fg: #1565c0; --mm-neutral-bg: #eceff1; /* statut neutre / Annulé (Material blue-grey 50/700) */ --mm-neutral-fg: #455a64; /* Teintes translucides dérivées (fond hover, badge actif, encarts) — anciennement rgba() en dur dans le catalogue de maquettes ; promues tokens via le projet Claude Design (2026-07). */ --mm-primary-tint: rgba(39,100,129,.10); --mm-primary-tint-2: rgba(39,100,129,.18); --mm-success-tint: rgba(91,188,136,.14); --mm-warning-tint: rgba(255,152,0,.12); --mm-error-tint: rgba(255,80,80,.10); --mm-info-tint: rgba(48,125,161,.12); /* Surfaces UI utilitaires (gris fonctionnels, sans rôle de marque) */ /* Champs « filled » (input MudBlazor variant Filled) — fond gris translucide, coins hauts arrondis, filet bas. Valeurs sourcées de MudBlazor.min.css. */ --mm-input-fill: rgba(0,0,0,.09); /* fond d'un champ filled au repos */ --mm-input-fill-hover: rgba(0,0,0,.13); /* fond d'un champ filled au survol */ --mm-row-hover: #fafbfc; /* survol de ligne (table/liste) */ --mm-grey-hover: #e4e6e8; /* survol d'un bouton/zone gris clair */ --mm-skeleton-base: #ebedef; /* base du dégradé de squelette de chargement */ --mm-skeleton-shine: #f5f6f7; /* reflet du dégradé de squelette */ --mm-toast-bg: #2e3035; /* fond du toast (snackbar sombre) */ } /* ============================================================================= RADZEN — on remappe ses variables sur la palette MudBlazor pour qu'elle suive le thème (light/dark) automatiquement. Fallback sur les primitives --mm-* tant que MudThemeProvider n'a pas injecté --mud-palette-* (premier paint). Chargé après material-base.css => ces déclarations gagnent la cascade. ============================================================================= */ :root { --rz-primary: var(--mud-palette-primary, var(--mm-blue)); --rz-primary-light: var(--mud-palette-primary-lighten, var(--mm-turquoise)); --rz-primary-lighter: var(--mm-turquoise); --rz-primary-dark: var(--mud-palette-primary-darken, var(--mm-blue)); --rz-primary-darker: var(--mm-blue); --rz-secondary: var(--mud-palette-secondary, var(--mm-blue-2)); --rz-secondary-light: var(--mud-palette-secondary-lighten, var(--mm-blue-2)); --rz-secondary-lighter: var(--mm-blue-2); --rz-secondary-dark: var(--mud-palette-secondary-darken, var(--mm-blue-2)); --rz-secondary-darker: var(--mm-blue-2); --rz-text-color: var(--mud-palette-text-primary, var(--mm-black)); --rz-base-background-color: var(--mud-palette-surface, var(--mm-white)); --rz-body-background-color: var(--mud-palette-background, var(--mm-white)); --rz-content-background-color: var(--mud-palette-surface, var(--mm-white)); } /* ============================================================================= TOKENS SÉMANTIQUES — mode-aware (light/dark via la classe .mm-dark sur ) ----------------------------------------------------------------------------- Utilisés par les composants (*.razor.css) pour les couleurs qui changent selon le thème. Les composants n'utilisent QUE var(--mm-*) — jamais var(--mud-*). Le miroir runtime des couleurs de marque reste géré par MyMobilTheme.cs (Mud), ces tokens servent la couche CSS scoped/custom. ⚠️ Ces noms (mm-primary, mm-surface, mm-on-surface…) ne sont PAS lus par MyMobilTheme.cs (qui ne lit que les primitives mm-blue, mm-turquoise…), donc « dernière déclaration gagnante » de DesignTokens.cs est sans effet ici. La classe .mm-dark est posée sur par MainLayout.OnAfterRenderAsync, synchronisée avec MyMobilTheme.IsDarkMode. ============================================================================= */ :root { /* Couleurs de marque */ --mm-primary: var(--mm-blue); --mm-secondary: var(--mm-blue-2); /* Surfaces et fonds */ --mm-bg: var(--mm-white); /* fond de page */ --mm-surface: var(--mm-white); /* fond de carte / dialog */ --mm-bg-subtle: var(--mm-grey-bg); /* fond gris (champs, blocs) */ /* Texte */ --mm-on-surface: var(--mm-text-primary); /* texte principal = ce que l'app rend (#424242) */ --mm-on-surface-2: var(--mm-grey-text); /* texte secondaire */ /* Séparateurs */ --mm-divider: rgba(0, 0, 0, .12); } :root.mm-dark { --mm-primary: var(--mm-turquoise); --mm-secondary: var(--mm-turquoise-2); --mm-bg: var(--mm-bg-dark); --mm-surface: var(--mm-surface-dark); --mm-bg-subtle: var(--mm-grey-bg-dark); --mm-on-surface: var(--mm-white); --mm-on-surface-2: rgba(255, 255, 255, .70); --mm-divider: rgba(255, 255, 255, .12); }