feat(shared): legacy presentation/ + shared design system + widgets
- lib/presentation : pages legacy (explore/network, notifications) avec BLoC - lib/shared/design_system : UnionFlow Design System v2 (tokens, components) + MD3 tokens + module_colors par feature - lib/shared/widgets : widgets transversaux (core_card, core_shimmer, error_widget, loading_widget, powered_by_lions_dev, etc.) - lib/shared/constants + utils
This commit is contained in:
dahoud
@@ -1,38 +1,524 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// UnionFlow Mobile App - Couleurs Globales (DRY)
|
||||
/// Palette : Vert Forêt (Jour) / Vert Ardoise (Nuit)
|
||||
/// UnionFlow Mobile App — Source unique de vérité pour toutes les couleurs
|
||||
///
|
||||
/// Palette WCAG 2.1 validée, alignée sur le logo SVG (gradient #297FFF→#7616E8)
|
||||
/// et le frontend web Freya.
|
||||
///
|
||||
/// ╔══════════════════════════════════════════════════════════════════════════╗
|
||||
/// ║ RÈGLES D'USAGE ║
|
||||
/// ║ • Texte sur fond clair → textPrimary / textTitle (WCAG AAA/AA) ║
|
||||
/// ║ • Texte sur fond sombre → textPrimaryDark / textTitleDark ║
|
||||
/// ║ • Boutons / icônes UI → primary (WCAG AA) ║
|
||||
/// ║ • Texte sur bouton coloré → onPrimary / onError / onGradient ║
|
||||
/// ║ • Gradient/branding → logoGradient (décoratif) ║
|
||||
/// ║ • Accent violet UI → accent (≥3:1) ║
|
||||
/// ║ • Fond carte/surface → surface / surfaceDark ║
|
||||
/// ║ • Fond page → background / backgroundDark ║
|
||||
/// ║ • Fond légèrement teinté → backgroundSubtle / backgroundSubtleDark ║
|
||||
/// ║ • Bordures → border / borderDark ║
|
||||
/// ║ • Ombres → shadow / shadowMedium / softShadow ║
|
||||
/// ╚══════════════════════════════════════════════════════════════════════════╝
|
||||
class AppColors {
|
||||
// --- Branding ---
|
||||
static const Color primaryGreen = Color(0xFF2E7D32); // Vert forêt professionnel
|
||||
static const Color brandGreen = Color(0xFF1B5E20); // Vert foncé / gradient top
|
||||
static const Color brandGreenLight = Color(0xFF4CAF50); // Vert d'accentuation
|
||||
static const Color brandMint = Color(0xFFA5D6A7); // Vert menthe / secondaire
|
||||
AppColors._();
|
||||
|
||||
// --- Mode Jour (Light) ---
|
||||
static const Color lightBackground = Color(0xFFF1F8E9); // Teinte verte très légère
|
||||
static const Color lightSurface = Color(0xFFFFFFFF); // Blanc pur pour les cartes
|
||||
static const Color lightBorder = Color(0xFFC8E6C9); // Bordure vert pâle
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// LOGO
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
// --- Mode Nuit (Dark) ---
|
||||
static const Color darkBackground = Color(0xFF0F1A0F); // Vert noir profond
|
||||
static const Color darkSurface = Color(0xFF1A2E1A); // Vert ardoise
|
||||
static const Color darkBorder = Color(0xFF3A5E3A); // Bordure sombre
|
||||
/// #297FFF — Bleu logo (début du gradient décoratif — décoratif uniquement)
|
||||
static const Color logoBlue = Color(0xFF297FFF);
|
||||
|
||||
// --- Texte ---
|
||||
static const Color textPrimaryLight = Color(0xFF1C2B1C); // Vert très foncé / quasi noir
|
||||
static const Color textSecondaryLight = Color(0xFF4E6B4E); // Vert gris moyen
|
||||
static const Color textPrimaryDark = Color(0xFFE0F2E0); // Blanc verdâtre
|
||||
static const Color textSecondaryDark = Color(0xFF90B890); // Vert gris clair
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// PRIMAIRE — Bleu UnionFlow
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
// --- Sémantique ---
|
||||
/// #2563EB — Bleu primaire UI [5.7:1 sur blanc ✅ WCAG AA]
|
||||
static const Color primary = Color(0xFF2563EB);
|
||||
|
||||
/// #60A5FA — Bleu clair (dark mode, fonds colorés)
|
||||
static const Color primaryLight = Color(0xFF60A5FA);
|
||||
|
||||
/// #1D4ED8 — Bleu foncé [7.2:1 sur blanc ✅ WCAG AAA]
|
||||
static const Color primaryDark = Color(0xFF1D4ED8);
|
||||
|
||||
/// #EFF6FF — Container / fond clair teinté bleu
|
||||
static const Color primaryContainer = Color(0xFFEFF6FF);
|
||||
|
||||
/// #1E3A8A — Contenu sur container primaire
|
||||
static const Color onPrimaryContainer = Color(0xFF1E3A8A);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ACCENT / SECONDAIRE — Violet logo
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #7616E8 — Violet accent (gradient fin logo, UI ≥3:1, NON pour texte)
|
||||
static const Color accent = Color(0xFF7616E8);
|
||||
|
||||
/// #9B59F0 — Violet clair
|
||||
static const Color accentLight = Color(0xFF9B59F0);
|
||||
|
||||
/// #5B0FBA — Violet foncé [4.8:1 sur blanc ✅ pour texte]
|
||||
static const Color accentDark = Color(0xFF5B0FBA);
|
||||
|
||||
/// #F3ECFF — Container accent clair
|
||||
static const Color accentContainer = Color(0xFFF3ECFF);
|
||||
|
||||
/// #2A006F — Contenu sur container accent
|
||||
static const Color onAccentContainer = Color(0xFF2A006F);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// TERTIAIRE — Bleu intermédiaire (MD3)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #5297FF — Bleu intermédiaire (mi-chemin logo)
|
||||
static const Color tertiary = Color(0xFF5297FF);
|
||||
|
||||
/// #85BAFF — Tertiaire clair
|
||||
static const Color tertiaryLight = Color(0xFF85BAFF);
|
||||
|
||||
/// #DBEAFF — Container tertiaire
|
||||
static const Color tertiaryContainer = Color(0xFFDBEAFF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// SURFACES — Mode Jour
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #EFF6FF — Fond principal (légèrement teinté bleu)
|
||||
static const Color background = Color(0xFFEFF6FF);
|
||||
|
||||
/// #F8FAFC — Fond subtil (zones secondaires, headers de liste)
|
||||
static const Color backgroundSubtle = Color(0xFFF8FAFC);
|
||||
|
||||
/// #FFFFFF — Surface pure (cards, dialogs)
|
||||
static const Color surface = Color(0xFFFFFFFF);
|
||||
|
||||
/// #F1F5F9 — Surface variante (sections internes)
|
||||
static const Color surfaceVariant = Color(0xFFF1F5F9);
|
||||
|
||||
/// #F5F8FF — Surface container (légèrement teintée)
|
||||
static const Color surfaceContainer = Color(0xFFF5F8FF);
|
||||
|
||||
/// #EAF0FF — Surface container élevée
|
||||
static const Color surfaceContainerHigh = Color(0xFFEAF0FF);
|
||||
|
||||
/// #E2E8F0 — Bordures subtiles
|
||||
static const Color border = Color(0xFFE2E8F0);
|
||||
|
||||
/// #CBD5E1 — Bordures plus marquées (séparateurs, inputs)
|
||||
static const Color borderStrong = Color(0xFFCBD5E1);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// SURFACES — Mode Nuit
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #0A0D1A — Navy profond OLED [20:1 ✅]
|
||||
static const Color backgroundDark = Color(0xFF0A0D1A);
|
||||
|
||||
/// #121824 — Fond subtil dark
|
||||
static const Color backgroundSubtleDark = Color(0xFF121824);
|
||||
|
||||
/// #161B26 — Surface principale dark
|
||||
static const Color surfaceDark = Color(0xFF161B26);
|
||||
|
||||
/// #1E2535 — Surface variante dark
|
||||
static const Color surfaceVariantDark = Color(0xFF1E2535);
|
||||
|
||||
/// #1E2438 — Surface container dark (cards)
|
||||
static const Color surfaceContainerDark = Color(0xFF1E2438);
|
||||
|
||||
/// #2D3554 — Bordures dark
|
||||
static const Color borderDark = Color(0xFF2D3554);
|
||||
|
||||
/// #3D4B6E — Bordures plus marquées dark
|
||||
static const Color borderStrongDark = Color(0xFF3D4B6E);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// TEXTE — Mode Jour
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #0F172A — Texte principal [19.1:1 ✅ WCAG AAA]
|
||||
static const Color textPrimary = Color(0xFF0F172A);
|
||||
|
||||
/// #1E293B — Titres (hiérarchie entre primary et body)
|
||||
static const Color textTitle = Color(0xFF1E293B);
|
||||
|
||||
/// #475569 — Texte secondaire [7.2:1 ✅ WCAG AA]
|
||||
static const Color textSecondary = Color(0xFF475569);
|
||||
|
||||
/// #64748B — Texte tertiaire / icônes secondaires [4.8:1 ✅]
|
||||
static const Color textTertiary = Color(0xFF64748B);
|
||||
|
||||
/// #94A3B8 — Texte désactivé / captions [3.3:1, hints uniquement]
|
||||
static const Color textDisabled = Color(0xFF94A3B8);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// TEXTE — Mode Nuit
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #F1F5FF — Texte principal dark
|
||||
static const Color textPrimaryDark = Color(0xFFF1F5FF);
|
||||
|
||||
/// #FFFFFF — Titres dark (lumineux pour la hiérarchie)
|
||||
static const Color textTitleDark = Color(0xFFFFFFFF);
|
||||
|
||||
/// #94A3B8 — Texte secondaire dark
|
||||
static const Color textSecondaryDark = Color(0xFF94A3B8);
|
||||
|
||||
/// #64748B — Texte désactivé dark
|
||||
static const Color textDisabledDark = Color(0xFF64748B);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ON-COLORS — Contenu SUR une couleur
|
||||
// NE PAS hardcoder Colors.white — utiliser ces tokens.
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Blanc pur — texte/icônes sur [primary], gradient, fond coloré
|
||||
static const Color onPrimary = Color(0xFFFFFFFF);
|
||||
|
||||
/// Blanc pur — texte/icônes sur [accent]
|
||||
static const Color onAccent = Color(0xFFFFFFFF);
|
||||
|
||||
/// Blanc pur — texte/icônes sur [error]
|
||||
static const Color onError = Color(0xFFFFFFFF);
|
||||
|
||||
/// Blanc pur — texte/icônes sur [success]
|
||||
static const Color onSuccess = Color(0xFFFFFFFF);
|
||||
|
||||
/// Blanc pur — texte/icônes sur [warning] foncé
|
||||
static const Color onWarning = Color(0xFFFFFFFF);
|
||||
|
||||
/// Blanc pur — texte/icônes sur gradient logo / module headers
|
||||
static const Color onGradient = Color(0xFFFFFFFF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// SÉMANTIQUE — Succès, Erreur, Avertissement, Info
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #15803D — Succès texte [6.6:1 ✅ WCAG AA]
|
||||
static const Color success = Color(0xFF15803D);
|
||||
|
||||
/// #166534 — Succès foncé
|
||||
static const Color successDark = Color(0xFF166534);
|
||||
|
||||
/// #22C55E — Succès UI/icônes (≥3:1)
|
||||
static const Color successUI = Color(0xFF22C55E);
|
||||
|
||||
/// #DCFCE7 — Fond succès light (badges, chips)
|
||||
static const Color successContainer = Color(0xFFDCFCE7);
|
||||
|
||||
/// #052E16 — Contenu sur container succès
|
||||
static const Color onSuccessContainer = Color(0xFF052E16);
|
||||
|
||||
/// #DC2626 — Erreur [4.5:1 ✅ WCAG AA]
|
||||
static const Color error = Color(0xFFDC2626);
|
||||
static const Color success = Color(0xFF2E7D32);
|
||||
static const Color warning = Color(0xFFF59E0B);
|
||||
static const Color info = Color(0xFF0288D1);
|
||||
|
||||
// --- Utilitaires ---
|
||||
/// #B91C1C — Erreur foncée
|
||||
static const Color errorDark = Color(0xFFB91C1C);
|
||||
|
||||
/// #FCA5A5 — Erreur claire (icônes sur fond blanc)
|
||||
static const Color errorLight = Color(0xFFFCA5A5);
|
||||
|
||||
/// #FEE2E2 — Fond erreur light
|
||||
static const Color errorContainer = Color(0xFFFEE2E2);
|
||||
|
||||
/// #410002 — Contenu sur container erreur
|
||||
static const Color onErrorContainer = Color(0xFF410002);
|
||||
|
||||
/// #B45309 — Warning texte [5.8:1 ✅ WCAG AA]
|
||||
static const Color warning = Color(0xFFB45309);
|
||||
|
||||
/// #92400E — Warning foncé
|
||||
static const Color warningDark = Color(0xFF92400E);
|
||||
|
||||
/// #F59E0B — Warning UI/icônes (décoratif)
|
||||
static const Color warningUI = Color(0xFFF59E0B);
|
||||
|
||||
/// #FEF3C7 — Fond warning light
|
||||
static const Color warningContainer = Color(0xFFFEF3C7);
|
||||
|
||||
/// #2D1B00 — Contenu sur container warning
|
||||
static const Color onWarningContainer = Color(0xFF2D1B00);
|
||||
|
||||
/// #2563EB — Info (identique au primaire)
|
||||
static const Color info = Color(0xFF2563EB);
|
||||
|
||||
/// #1D4ED8 — Info foncée
|
||||
static const Color infoDark = Color(0xFF1D4ED8);
|
||||
|
||||
/// #60A5FA — Info claire
|
||||
static const Color infoLight = Color(0xFF60A5FA);
|
||||
|
||||
/// #DBEAFE — Fond info light
|
||||
static const Color infoContainer = Color(0xFFDBEAFE);
|
||||
|
||||
/// #1E3A8A — Contenu sur container info
|
||||
static const Color onInfoContainer = Color(0xFF1E3A8A);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// NAVIGATION
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color navigationBackground = Color(0xFFFFFFFF);
|
||||
static const Color navigationSelected = Color(0xFF2563EB);
|
||||
static const Color navigationUnselected = Color(0xFF64748B);
|
||||
static const Color navigationIndicator = Color(0xFFEFF6FF);
|
||||
|
||||
static const Color navigationBackgroundDark = Color(0xFF161B26);
|
||||
static const Color navigationSelectedDark = Color(0xFF60A5FA);
|
||||
static const Color navigationUnselectedDark = Color(0xFF64748B);
|
||||
static const Color navigationIndicatorDark = Color(0xFF1A2350);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// GLASS / EFFETS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Fond verre translucide (glassmorphism)
|
||||
static const Color glassBackground = Color(0x80FFFFFF);
|
||||
|
||||
/// Bordure verre translucide
|
||||
static const Color glassBorder = Color(0x33FFFFFF);
|
||||
|
||||
/// Overlay verre très subtil
|
||||
static const Color glassOverlay = Color(0x0DFFFFFF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// OMBRES — Color tokens
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Ombre très subtile (élévation 1-2)
|
||||
static const Color shadow = Color(0x0A000000);
|
||||
|
||||
/// Ombre légère (élévation 3-4)
|
||||
static const Color shadowMedium = Color(0x1A000000);
|
||||
|
||||
/// Ombre marquée (élévation 6+)
|
||||
static const Color shadowStrong = Color(0x33000000);
|
||||
|
||||
/// Ombre intense (modales, drawers)
|
||||
static const Color shadowHigh = Color(0x4D000000);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// OMBRES — BoxShadow getters (prêts à l'emploi)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Ombre douce — cards standards
|
||||
static List<BoxShadow> get softShadow => [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF0F172A).withOpacity(0.08),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
/// Ombre moyenne — éléments surélevés, sheets
|
||||
static List<BoxShadow> get mediumShadow => [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF0F172A).withOpacity(0.12),
|
||||
blurRadius: 32,
|
||||
offset: const Offset(0, 12),
|
||||
),
|
||||
];
|
||||
|
||||
/// Halo bleu primaire — boutons CTA, éléments actifs
|
||||
static List<BoxShadow> get blueGlowShadow => [
|
||||
BoxShadow(
|
||||
color: primary.withOpacity(0.25),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
/// Halo violet accent — éléments premium, gradients
|
||||
static List<BoxShadow> get purpleGlowShadow => [
|
||||
BoxShadow(
|
||||
color: accent.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// PALETTE BRAND — Couleurs expressives (dashboards, UI premium)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// #F4A261 — Ambre chaleureux (dashboards consultant, UI premium)
|
||||
static const Color amber = Color(0xFFF4A261);
|
||||
|
||||
/// #F8C590 — Ambre clair
|
||||
static const Color amberLight = Color(0xFFF8C590);
|
||||
|
||||
/// #E9DCC9 — Sable doux (fonds neutres chauds)
|
||||
static const Color sand = Color(0xFFE9DCC9);
|
||||
|
||||
/// #F5F0E8 — Sable clair
|
||||
static const Color sandLight = Color(0xFFF5F0E8);
|
||||
|
||||
/// #E07A5F — Terracotta (accents événements, UI chaleureux)
|
||||
static const Color terracotta = Color(0xFFE07A5F);
|
||||
|
||||
/// #F2AC99 — Terracotta clair
|
||||
static const Color terracottaLight = Color(0xFFF2AC99);
|
||||
|
||||
/// #FFF3F0 — Terracotta pale (containers, badges)
|
||||
static const Color terracottaPale = Color(0xFFFFF3F0);
|
||||
|
||||
/// #1E1A44 — Indigo profond (fonds sombres premium)
|
||||
static const Color indigo = Color(0xFF1E1A44);
|
||||
|
||||
/// #3A3A6B — Indigo moyen
|
||||
static const Color indigoLight = Color(0xFF3A3A6B);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// GRADIENTS — List<Color> (pour ShaderMask, charts, etc.)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Gradient logo signature : #297FFF → #7616E8 (décoratif — non pour texte)
|
||||
static const List<Color> logoGradientColors = [
|
||||
Color(0xFF297FFF),
|
||||
Color(0xFF7616E8),
|
||||
];
|
||||
|
||||
/// Gradient primaire UI (accessible)
|
||||
static const List<Color> primaryGradientColors = [
|
||||
Color(0xFF1D4ED8),
|
||||
Color(0xFF2563EB),
|
||||
Color(0xFF5297FF),
|
||||
];
|
||||
|
||||
/// Gradient login (fond immersif)
|
||||
static const List<Color> loginGradientColors = [
|
||||
Color(0xFF1D4ED8),
|
||||
Color(0xFF2563EB),
|
||||
Color(0xFF7616E8),
|
||||
];
|
||||
|
||||
/// Gradient dark mode
|
||||
static const List<Color> darkGradientColors = [
|
||||
Color(0xFF0A0D1A),
|
||||
Color(0xFF161B26),
|
||||
Color(0xFF1E2438),
|
||||
];
|
||||
|
||||
/// Gradient succès
|
||||
static const List<Color> successGradientColors = [
|
||||
Color(0xFF166534),
|
||||
Color(0xFF15803D),
|
||||
];
|
||||
|
||||
/// Gradient warm (terracotta → ambre)
|
||||
static const List<Color> warmGradientColors = [
|
||||
Color(0xFFE07A5F),
|
||||
Color(0xFFF4A261),
|
||||
];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// GRADIENTS — LinearGradient (prêts à l'emploi)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Gradient logo signature (décoratif — NE PAS utiliser pour du texte)
|
||||
static const LinearGradient logoGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF297FFF), Color(0xFF7616E8)],
|
||||
);
|
||||
|
||||
/// Gradient primaire UI (version accessible)
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF1D4ED8), Color(0xFF2563EB)],
|
||||
);
|
||||
|
||||
/// Gradient login (fond immersif plein écran)
|
||||
static const LinearGradient loginGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF1D4ED8), Color(0xFF2563EB), Color(0xFF7616E8)],
|
||||
stops: [0.0, 0.55, 1.0],
|
||||
);
|
||||
|
||||
/// Gradient subtil (backgrounds de sections, headers légers)
|
||||
static const LinearGradient subtleGradient = LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFFF5F8FF), Color(0xFFEFF6FF)],
|
||||
);
|
||||
|
||||
/// Gradient warm terracotta → ambre (UI premium, dashboards)
|
||||
static const LinearGradient warmGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFFE07A5F), Color(0xFFF4A261)],
|
||||
);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// UTILITAIRES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Applique une opacité à une couleur
|
||||
static Color withOpacity(Color color, double opacity) =>
|
||||
color.withOpacity(opacity);
|
||||
|
||||
/// Éclaircit une couleur d'un facteur donné (HSL)
|
||||
static Color lighten(Color color, [double amount = 0.1]) {
|
||||
final hsl = HSLColor.fromColor(color);
|
||||
return hsl
|
||||
.withLightness((hsl.lightness + amount).clamp(0.0, 1.0))
|
||||
.toColor();
|
||||
}
|
||||
|
||||
/// Assombrit une couleur d'un facteur donné (HSL)
|
||||
static Color darken(Color color, [double amount = 0.1]) {
|
||||
final hsl = HSLColor.fromColor(color);
|
||||
return hsl
|
||||
.withLightness((hsl.lightness - amount).clamp(0.0, 1.0))
|
||||
.toColor();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ALIAS DE COMPATIBILITÉ (@deprecated — à migrer progressivement)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// @deprecated → [primary]
|
||||
static const Color primaryGreen = primary;
|
||||
|
||||
/// @deprecated → [primaryDark]
|
||||
static const Color brandGreen = primaryDark;
|
||||
|
||||
/// @deprecated → [primaryLight]
|
||||
static const Color brandGreenLight = primaryLight;
|
||||
|
||||
/// @deprecated → [primaryContainer]
|
||||
static const Color brandMint = primaryContainer;
|
||||
|
||||
/// @deprecated → [background]
|
||||
static const Color lightBackground = background;
|
||||
|
||||
/// @deprecated → [surface]
|
||||
static const Color lightSurface = surface;
|
||||
|
||||
/// @deprecated → [border]
|
||||
static const Color lightBorder = border;
|
||||
|
||||
/// @deprecated → [backgroundDark]
|
||||
static const Color darkBackground = backgroundDark;
|
||||
|
||||
/// @deprecated → [surfaceDark]
|
||||
static const Color darkSurface = surfaceDark;
|
||||
|
||||
/// @deprecated → [borderDark]
|
||||
static const Color darkBorder = borderDark;
|
||||
|
||||
/// @deprecated → [textPrimary]
|
||||
static const Color textPrimaryLight = textPrimary;
|
||||
|
||||
/// @deprecated → [textSecondary]
|
||||
static const Color textSecondaryLight = textSecondary;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// DIVERS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color transparent = Colors.transparent;
|
||||
static const Color surface = lightSurface;
|
||||
static const Color background = lightBackground;
|
||||
}
|
||||
|
||||
@@ -1,190 +1,126 @@
|
||||
/// Design Tokens - Couleurs UnionFlow
|
||||
/// Facade de compatibilité — redirige vers [AppColors]
|
||||
///
|
||||
/// Palette Vert Zen / Santé — Professionnelle et apaisante
|
||||
/// MODE JOUR : Vert Forêt (#2E7D32) — Forest Green
|
||||
/// MODE NUIT : Vert Ardoise (#1A2E1A) — Slate Green
|
||||
/// Cette classe existe uniquement pour ne pas casser le code existant.
|
||||
/// Pour tout nouveau code, utiliser [AppColors] directement.
|
||||
///
|
||||
/// @deprecated Utiliser [AppColors]
|
||||
library color_tokens;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'app_colors.dart';
|
||||
|
||||
/// Tokens de couleurs UnionFlow - Design System Unifié
|
||||
class ColorTokens {
|
||||
ColorTokens._();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS PRIMAIRES - MODE JOUR (Vert Forêt)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ── Primaire ────────────────────────────────────────────────────────────
|
||||
static const Color primary = AppColors.primary;
|
||||
static const Color primaryLight = AppColors.primaryLight;
|
||||
static const Color primaryDark = AppColors.primaryDark;
|
||||
static const Color primaryContainer = AppColors.primaryContainer;
|
||||
static const Color onPrimary = AppColors.onPrimary;
|
||||
static const Color onPrimaryContainer = AppColors.onPrimaryContainer;
|
||||
|
||||
/// Couleur primaire principale - Vert Forêt
|
||||
static const Color primary = Color(0xFF2E7D32);
|
||||
static const Color primaryLight = Color(0xFF4CAF50);
|
||||
static const Color primaryDark = Color(0xFF1B5E20);
|
||||
static const Color primaryContainer = Color(0xFFE8F5E9);
|
||||
static const Color onPrimary = Color(0xFFFFFFFF);
|
||||
static const Color onPrimaryContainer = Color(0xFF003908);
|
||||
// ── Secondaire (= Accent) ────────────────────────────────────────────────
|
||||
static const Color secondary = AppColors.accent;
|
||||
static const Color secondaryLight = AppColors.accentLight;
|
||||
static const Color secondaryDark = AppColors.accentDark;
|
||||
static const Color secondaryContainer = AppColors.accentContainer;
|
||||
static const Color onSecondary = AppColors.onAccent;
|
||||
static const Color onSecondaryContainer = AppColors.onAccentContainer;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS PRIMAIRES - MODE NUIT (Vert Ardoise)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ── Tertiaire ────────────────────────────────────────────────────────────
|
||||
static const Color tertiary = AppColors.tertiary;
|
||||
static const Color tertiaryLight = AppColors.tertiaryLight;
|
||||
static const Color tertiaryDark = AppColors.primaryDark;
|
||||
static const Color tertiaryContainer = AppColors.tertiaryContainer;
|
||||
static const Color onTertiary = AppColors.onPrimary;
|
||||
static const Color onTertiaryContainer = AppColors.onPrimaryContainer;
|
||||
|
||||
static const Color primaryDarkMode = Color(0xFF1A2E1A);
|
||||
static const Color primaryLightDarkMode = Color(0xFF2E4D2E);
|
||||
static const Color primaryDarkDarkMode = Color(0xFF0F1A0F);
|
||||
static const Color primaryContainerDarkMode = Color(0xFF1E3A1E);
|
||||
static const Color onPrimaryDarkMode = Color(0xFFE0F2E0);
|
||||
// ── Surfaces Mode Jour ───────────────────────────────────────────────────
|
||||
static const Color background = AppColors.background;
|
||||
static const Color surface = AppColors.surface;
|
||||
static const Color surfaceVariant = AppColors.surfaceContainer;
|
||||
static const Color surfaceContainer = AppColors.surface;
|
||||
static const Color surfaceContainerHigh = AppColors.surfaceContainer;
|
||||
static const Color surfaceContainerHighest = AppColors.surfaceContainerHigh;
|
||||
static const Color onSurface = AppColors.textPrimary;
|
||||
static const Color onSurfaceVariant = AppColors.textSecondary;
|
||||
static const Color textSecondary = AppColors.textTertiary;
|
||||
static const Color outline = AppColors.border;
|
||||
static const Color outlineVariant = AppColors.borderStrong;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS SECONDAIRES - Vert Menthe / Sauge
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ── Surfaces Mode Nuit ───────────────────────────────────────────────────
|
||||
static const Color backgroundDark = AppColors.backgroundDark;
|
||||
static const Color surfaceDark = AppColors.surfaceDark;
|
||||
static const Color surfaceVariantDark = AppColors.surfaceVariantDark;
|
||||
static const Color surfaceContainerDark = AppColors.surfaceContainerDark;
|
||||
static const Color onSurfaceDark = AppColors.textPrimaryDark;
|
||||
static const Color onSurfaceVariantDark = AppColors.textSecondaryDark;
|
||||
static const Color outlineDark = AppColors.borderDark;
|
||||
|
||||
static const Color secondary = Color(0xFF66BB6A);
|
||||
static const Color secondaryLight = Color(0xFFA5D6A7);
|
||||
static const Color secondaryDark = Color(0xFF388E3C);
|
||||
static const Color secondaryContainer = Color(0xFFC8E6C9);
|
||||
static const Color onSecondary = Color(0xFFFFFFFF);
|
||||
static const Color onSecondaryContainer = Color(0xFF002106);
|
||||
// ── Sémantique ───────────────────────────────────────────────────────────
|
||||
static const Color success = AppColors.success;
|
||||
static const Color successLight = AppColors.successUI;
|
||||
static const Color successDark = AppColors.successDark;
|
||||
static const Color successContainer = AppColors.successContainer;
|
||||
static const Color onSuccess = AppColors.onSuccess;
|
||||
static const Color onSuccessContainer = AppColors.onSuccessContainer;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS TERTIAIRES - Vert Lime / Accent
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
static const Color error = AppColors.error;
|
||||
static const Color errorLight = AppColors.errorLight;
|
||||
static const Color errorDark = AppColors.errorDark;
|
||||
static const Color errorContainer = AppColors.errorContainer;
|
||||
static const Color onError = AppColors.onError;
|
||||
static const Color onErrorContainer = AppColors.onErrorContainer;
|
||||
|
||||
static const Color tertiary = Color(0xFF8BC34A);
|
||||
static const Color tertiaryLight = Color(0xFFAED581);
|
||||
static const Color tertiaryDark = Color(0xFF558B2F);
|
||||
static const Color tertiaryContainer = Color(0xFFDCEDC8);
|
||||
static const Color onTertiary = Color(0xFFFFFFFF);
|
||||
static const Color onTertiaryContainer = Color(0xFF1B3A00);
|
||||
static const Color warning = AppColors.warning;
|
||||
static const Color warningLight = AppColors.warningUI;
|
||||
static const Color warningDark = AppColors.warningDark;
|
||||
static const Color warningContainer = AppColors.warningContainer;
|
||||
static const Color onWarning = AppColors.onWarning;
|
||||
static const Color onWarningContainer = AppColors.onWarningContainer;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS NEUTRES - MODE JOUR
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
static const Color info = AppColors.info;
|
||||
static const Color infoLight = AppColors.infoLight;
|
||||
static const Color infoDark = AppColors.infoDark;
|
||||
static const Color infoContainer = AppColors.infoContainer;
|
||||
static const Color onInfo = AppColors.onPrimary;
|
||||
static const Color onInfoContainer = AppColors.onInfoContainer;
|
||||
|
||||
static const Color surface = Color(0xFFFFFFFF);
|
||||
static const Color surfaceVariant = Color(0xFFF1F8E9);
|
||||
static const Color surfaceContainer = Color(0xFFFFFFFF);
|
||||
static const Color surfaceContainerHigh = Color(0xFFF1F8E9);
|
||||
static const Color surfaceContainerHighest = Color(0xFFDCEDC8);
|
||||
static const Color background = Color(0xFFF1F8E9);
|
||||
// ── Navigation ───────────────────────────────────────────────────────────
|
||||
static const Color navigationBackground = AppColors.navigationBackground;
|
||||
static const Color navigationSelected = AppColors.navigationSelected;
|
||||
static const Color navigationUnselected = AppColors.navigationUnselected;
|
||||
static const Color navigationIndicator = AppColors.navigationIndicator;
|
||||
static const Color navigationBackgroundDark = AppColors.navigationBackgroundDark;
|
||||
static const Color navigationSelectedDark = AppColors.navigationSelectedDark;
|
||||
static const Color navigationUnselectedDark = AppColors.navigationUnselectedDark;
|
||||
static const Color navigationIndicatorDark = AppColors.navigationIndicatorDark;
|
||||
|
||||
static const Color onSurface = Color(0xFF1C2B1C);
|
||||
static const Color onSurfaceVariant = Color(0xFF4E6B4E);
|
||||
static const Color textSecondary = Color(0xFF4E6B4E);
|
||||
static const Color outline = Color(0xFFC8E6C9);
|
||||
static const Color outlineVariant = Color(0xFFDCEDC8);
|
||||
// ── Ombres & Effets ──────────────────────────────────────────────────────
|
||||
static const Color shadow = AppColors.shadow;
|
||||
static const Color shadowMedium = AppColors.shadowMedium;
|
||||
static const Color shadowHigh = AppColors.shadowHigh;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS NEUTRES - MODE NUIT
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
static const Color glassBackground = AppColors.glassBackground;
|
||||
static const Color glassBorder = AppColors.glassBorder;
|
||||
static const Color glassOverlay = AppColors.glassOverlay;
|
||||
|
||||
static const Color surfaceDarkMode = Color(0xFF1A2E1A);
|
||||
static const Color surfaceVariantDarkMode = Color(0xFF243824);
|
||||
static const Color backgroundDarkMode = Color(0xFF0F1A0F);
|
||||
// ── Gradients ────────────────────────────────────────────────────────────
|
||||
static const List<Color> logoGradient = AppColors.logoGradientColors;
|
||||
static const List<Color> primaryGradient = AppColors.primaryGradientColors;
|
||||
static const List<Color> loginGradient = AppColors.loginGradientColors;
|
||||
static const List<Color> primaryGradientDark = AppColors.darkGradientColors;
|
||||
static const List<Color> secondaryGradient = [AppColors.tertiary, AppColors.accent];
|
||||
static const List<Color> successGradient = AppColors.successGradientColors;
|
||||
|
||||
static const Color onSurfaceDarkMode = Color(0xFFE0F2E0);
|
||||
static const Color onSurfaceVariantDarkMode = Color(0xFF90B890);
|
||||
static const Color outlineDarkMode = Color(0xFF3A5E3A);
|
||||
// ── Utilitaires ──────────────────────────────────────────────────────────
|
||||
static Color withOpacity(Color color, double opacity) =>
|
||||
AppColors.withOpacity(color, opacity);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS SÉMANTIQUES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
static Color lighten(Color color, [double amount = 0.1]) =>
|
||||
AppColors.lighten(color, amount);
|
||||
|
||||
static const Color success = Color(0xFF2E7D32);
|
||||
static const Color successLight = Color(0xFF4CAF50);
|
||||
static const Color successDark = Color(0xFF1B5E20);
|
||||
static const Color successContainer = Color(0xFFE8F5E9);
|
||||
static const Color onSuccess = Color(0xFFFFFFFF);
|
||||
static const Color onSuccessContainer = Color(0xFF003908);
|
||||
|
||||
static const Color error = Color(0xFFDC2626);
|
||||
static const Color errorLight = Color(0xFFEF4444);
|
||||
static const Color errorDark = Color(0xFFB91C1C);
|
||||
static const Color errorContainer = Color(0xFFFEF2F2);
|
||||
static const Color onError = Color(0xFFFFFFFF);
|
||||
static const Color onErrorContainer = Color(0xFF410002);
|
||||
|
||||
static const Color warning = Color(0xFFF59E0B);
|
||||
static const Color warningLight = Color(0xFFFBBF24);
|
||||
static const Color warningDark = Color(0xFFD97706);
|
||||
static const Color warningContainer = Color(0xFFFEF3C7);
|
||||
static const Color onWarning = Color(0xFFFFFFFF);
|
||||
static const Color onWarningContainer = Color(0xFF2D1B00);
|
||||
|
||||
static const Color info = Color(0xFF0288D1);
|
||||
static const Color infoLight = Color(0xFF29B6F6);
|
||||
static const Color infoDark = Color(0xFF01579B);
|
||||
static const Color infoContainer = Color(0xFFE1F5FE);
|
||||
static const Color onInfo = Color(0xFFFFFFFF);
|
||||
static const Color onInfoContainer = Color(0xFF001D36);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COULEURS DE NAVIGATION
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color navigationBackground = Color(0xFFFFFFFF);
|
||||
static const Color navigationSelected = Color(0xFF2E7D32);
|
||||
static const Color navigationUnselected = Color(0xFF4E6B4E);
|
||||
static const Color navigationIndicator = Color(0xFFE8F5E9);
|
||||
|
||||
static const Color navigationBackgroundDarkMode = Color(0xFF1A2E1A);
|
||||
static const Color navigationSelectedDarkMode = Color(0xFFA5D6A7);
|
||||
static const Color navigationUnselectedDarkMode = Color(0xFF90B890);
|
||||
static const Color navigationIndicatorDarkMode = Color(0xFF2E4D2E);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// OMBRES ET EFFETS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color shadow = Color(0x1A1C2B1C);
|
||||
static const Color shadowMedium = Color(0x331C2B1C);
|
||||
static const Color shadowHigh = Color(0x4D1C2B1C);
|
||||
|
||||
static const Color glassBackground = Color(0x80FFFFFF);
|
||||
static const Color glassBorder = Color(0x33FFFFFF);
|
||||
static const Color glassOverlay = Color(0x0DFFFFFF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// GRADIENTS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const List<Color> primaryGradient = [
|
||||
Color(0xFF1B5E20),
|
||||
Color(0xFF2E7D32),
|
||||
Color(0xFF388E3C),
|
||||
];
|
||||
|
||||
static const List<Color> primaryGradientDarkMode = [
|
||||
Color(0xFF0F1A0F),
|
||||
Color(0xFF1A2E1A),
|
||||
Color(0xFF243824),
|
||||
];
|
||||
|
||||
static const List<Color> secondaryGradient = [
|
||||
Color(0xFF388E3C),
|
||||
Color(0xFF66BB6A),
|
||||
];
|
||||
|
||||
static const List<Color> successGradient = [
|
||||
Color(0xFF2E7D32),
|
||||
Color(0xFF4CAF50),
|
||||
];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MÉTHODES UTILITAIRES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static Color withOpacity(Color color, double opacity) {
|
||||
return color.withOpacity(opacity);
|
||||
}
|
||||
|
||||
static Color lighten(Color color, [double amount = 0.1]) {
|
||||
final hsl = HSLColor.fromColor(color);
|
||||
final lightness = (hsl.lightness + amount).clamp(0.0, 1.0);
|
||||
return hsl.withLightness(lightness).toColor();
|
||||
}
|
||||
|
||||
static Color darken(Color color, [double amount = 0.1]) {
|
||||
final hsl = HSLColor.fromColor(color);
|
||||
final lightness = (hsl.lightness - amount).clamp(0.0, 1.0);
|
||||
return hsl.withLightness(lightness).toColor();
|
||||
}
|
||||
static Color darken(Color color, [double amount = 0.1]) =>
|
||||
AppColors.darken(color, amount);
|
||||
}
|
||||
|
||||
218
lib/shared/design_system/tokens/module_colors.dart
Normal file
218
lib/shared/design_system/tokens/module_colors.dart
Normal file
@@ -0,0 +1,218 @@
|
||||
/// Système d'identité chromatique par module — UnionFlow
|
||||
///
|
||||
/// Chaque module/section de l'application possède :
|
||||
/// • Une couleur primaire distinctive (WCAG AA validée)
|
||||
/// • Un gradient directionnel (foncé → clair)
|
||||
/// • Une couleur de container claire (fonds, badges)
|
||||
/// • La couleur sur laquelle écrire en blanc
|
||||
///
|
||||
/// Principe : quand l'utilisateur entre dans un écran d'un module,
|
||||
/// le top bar reflète intelligemment la couleur de ce module.
|
||||
library module_colors;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'app_colors.dart';
|
||||
|
||||
class ModuleColors {
|
||||
ModuleColors._();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ORGANISATIONS — Bleu primaire UnionFlow [5.7:1 ✅]
|
||||
// Bouton dashboard : Icons.business_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color organisations = Color(0xFF2563EB);
|
||||
static const Color organisationsDark = Color(0xFF1D4ED8);
|
||||
static const Color organisationsLight = Color(0xFFEFF6FF);
|
||||
static const Color organisationsOnColor = AppColors.onGradient;
|
||||
static const List<Color> organisationsGradient = [Color(0xFF1D4ED8), Color(0xFF2563EB)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MEMBRES — Violet accent [4.8:1 ✅ pour texte]
|
||||
// Bouton dashboard : Icons.people_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color membres = Color(0xFF7616E8);
|
||||
static const Color membresDark = Color(0xFF5B0FBA);
|
||||
static const Color membresLight = Color(0xFFF3ECFF);
|
||||
static const Color membresOnColor = AppColors.onGradient;
|
||||
static const List<Color> membresGradient = [Color(0xFF5B0FBA), Color(0xFF7616E8)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COTISATIONS / FINANCE — Ambre doré [5.8:1 ✅]
|
||||
// Bouton dashboard : Icons.payments_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color cotisations = Color(0xFFB45309);
|
||||
static const Color cotisationsDark = Color(0xFF92400E);
|
||||
static const Color cotisationsLight = Color(0xFFFEF3C7);
|
||||
static const Color cotisationsOnColor = AppColors.onGradient;
|
||||
static const List<Color> cotisationsGradient = [Color(0xFF92400E), Color(0xFFB45309)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ÉVÉNEMENTS — Terracotta vibrant
|
||||
// Bouton dashboard : Icons.event_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color evenements = Color(0xFFD4551C);
|
||||
static const Color evenementsDark = Color(0xFFB84315);
|
||||
static const Color evenementsLight = Color(0xFFFFF3F0);
|
||||
static const Color evenementsOnColor = AppColors.onGradient;
|
||||
static const List<Color> evenementsGradient = [Color(0xFFB84315), Color(0xFFD4551C)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// SOLIDARITÉ / AIDE — Rouge compassion [4.5:1 ✅]
|
||||
// Bouton dashboard : Icons.favorite_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color solidarite = Color(0xFFDC2626);
|
||||
static const Color solidariteDark = Color(0xFFB91C1C);
|
||||
static const Color solidariteLight = Color(0xFFFEF2F2);
|
||||
static const Color solidariteOnColor = AppColors.onGradient;
|
||||
static const List<Color> solidariteGradient = [Color(0xFFB91C1C), Color(0xFFDC2626)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ÉPARGNE — Vert croissance [6.6:1 ✅]
|
||||
// Bouton dashboard : Icons.savings_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color epargne = Color(0xFF15803D);
|
||||
static const Color epargneDark = Color(0xFF166534);
|
||||
static const Color epargneLight = Color(0xFFF0FDF4);
|
||||
static const Color epargneOnColor = AppColors.onGradient;
|
||||
static const List<Color> epargneGradient = [Color(0xFF166534), Color(0xFF15803D)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// ADHÉSIONS — Émeraude [4.8:1 ✅]
|
||||
// Bouton dashboard : Icons.how_to_reg_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color adhesions = Color(0xFF047857);
|
||||
static const Color adhesionsDark = Color(0xFF065F46);
|
||||
static const Color adhesionsLight = Color(0xFFECFDF5);
|
||||
static const Color adhesionsOnColor = AppColors.onGradient;
|
||||
static const List<Color> adhesionsGradient = [Color(0xFF065F46), Color(0xFF047857)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COMMUNICATION — Cyan dynamique
|
||||
// Bouton dashboard : Icons.chat_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color communication = Color(0xFF0891B2);
|
||||
static const Color communicationDark = Color(0xFF0E7490);
|
||||
static const Color communicationLight = Color(0xFFECFEFF);
|
||||
static const Color communicationOnColor = AppColors.onGradient;
|
||||
static const List<Color> communicationGradient = [Color(0xFF0E7490), Color(0xFF0891B2)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// RAPPORTS / ANALYTICS — Indigo analytique
|
||||
// Bouton dashboard : Icons.analytics_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color rapports = Color(0xFF4338CA);
|
||||
static const Color rapportsDark = Color(0xFF3730A3);
|
||||
static const Color rapportsLight = Color(0xFFEEF2FF);
|
||||
static const Color rapportsOnColor = AppColors.onGradient;
|
||||
static const List<Color> rapportsGradient = [Color(0xFF3730A3), Color(0xFF4338CA)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// PROFIL — Gradient signature logo (identité personnelle)
|
||||
// Bouton dashboard : Icons.person_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color profil = Color(0xFF7616E8);
|
||||
static const Color profilDark = Color(0xFF297FFF);
|
||||
static const Color profilLight = Color(0xFFF3ECFF);
|
||||
static const Color profilOnColor = AppColors.onGradient;
|
||||
static const List<Color> profilGradient = [Color(0xFF297FFF), Color(0xFF7616E8)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// SYSTÈME / ADMIN — Navy autorité
|
||||
// Bouton dashboard : Icons.settings_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color systeme = Color(0xFF1E293B);
|
||||
static const Color systemeDark = Color(0xFF0F172A);
|
||||
static const Color systemeLight = Color(0xFFF1F5F9);
|
||||
static const Color systemeOnColor = AppColors.onGradient;
|
||||
static const List<Color> systemeGradient = [Color(0xFF0F172A), Color(0xFF1E293B)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// BACKUP — Ambre attention
|
||||
// Bouton dashboard : Icons.backup_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color backup = Color(0xFFD97706);
|
||||
static const Color backupDark = Color(0xFFB45309);
|
||||
static const Color backupLight = Color(0xFFFEF3C7);
|
||||
static const Color backupOnColor = AppColors.onGradient;
|
||||
static const List<Color> backupGradient = [Color(0xFFB45309), Color(0xFFD97706)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// LOGS / MONITORING — Slate technique
|
||||
// Bouton dashboard : Icons.terminal_rounded
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color logs = Color(0xFF475569);
|
||||
static const Color logsDark = Color(0xFF334155);
|
||||
static const Color logsLight = Color(0xFFF8FAFC);
|
||||
static const Color logsOnColor = AppColors.onGradient;
|
||||
static const List<Color> logsGradient = [Color(0xFF334155), Color(0xFF475569)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// NOTIFICATIONS — Violet vif
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color notifications = Color(0xFF6366F1);
|
||||
static const Color notificationsDark = Color(0xFF4F46E5);
|
||||
static const Color notificationsLight = Color(0xFFEEF2FF);
|
||||
static const Color notificationsOnColor = AppColors.onGradient;
|
||||
static const List<Color> notificationsGradient = [Color(0xFF4F46E5), Color(0xFF6366F1)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// PARAMÈTRES — Slate neutre
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color parametres = Color(0xFF334155);
|
||||
static const Color parametresDark = Color(0xFF1E293B);
|
||||
static const Color parametresLight = Color(0xFFF1F5F9);
|
||||
static const Color parametresOnColor = AppColors.onGradient;
|
||||
static const List<Color> parametresGradient = [Color(0xFF1E293B), Color(0xFF334155)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// FINANCE WORKFLOW (Approbations, Budgets)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color financeWorkflow = Color(0xFF0F766E);
|
||||
static const Color financeWorkflowDark = Color(0xFF134E4A);
|
||||
static const Color financeWorkflowLight = Color(0xFFF0FDFA);
|
||||
static const Color financeWorkflowOnColor = AppColors.onGradient;
|
||||
static const List<Color> financeWorkflowGradient = [Color(0xFF134E4A), Color(0xFF0F766E)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// AIDE / SUPPORT
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
static const Color support = Color(0xFF2563EB);
|
||||
static const Color supportDark = Color(0xFF1D4ED8);
|
||||
static const Color supportLight = Color(0xFFEFF6FF);
|
||||
static const Color supportOnColor = AppColors.onGradient;
|
||||
static const List<Color> supportGradient = [Color(0xFF1D4ED8), Color(0xFF2563EB)];
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// UTILITAIRES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// Retourne le gradient LinearGradient depuis la liste de couleurs d'un module
|
||||
static LinearGradient gradient(
|
||||
List<Color> colors, {
|
||||
AlignmentGeometry begin = Alignment.centerLeft,
|
||||
AlignmentGeometry end = Alignment.centerRight,
|
||||
}) {
|
||||
return LinearGradient(colors: colors, begin: begin, end: end);
|
||||
}
|
||||
|
||||
/// Retourne le gradient vertical (pour AppBar)
|
||||
static LinearGradient verticalGradient(List<Color> colors) =>
|
||||
gradient(colors, begin: Alignment.topLeft, end: Alignment.bottomRight);
|
||||
}
|
||||
@@ -1,185 +1,93 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'app_colors.dart';
|
||||
|
||||
/// UnionFlow Color System - Palette Signature
|
||||
/// Inspirée des valeurs de solidarité, prospérité et modernité africaine
|
||||
/// Facade de compatibilité — redirige vers [AppColors]
|
||||
///
|
||||
/// Cette classe existe uniquement pour ne pas casser le code existant.
|
||||
/// Pour tout nouveau code, utiliser [AppColors] directement.
|
||||
///
|
||||
/// @deprecated Utiliser [AppColors]
|
||||
class UnionFlowColors {
|
||||
UnionFlowColors._();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// COULEURS PRIMAIRES (Identité UnionFlow)
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// ── Primaire ────────────────────────────────────────────────────────────
|
||||
static const Color unionBlue = AppColors.primary;
|
||||
static const Color unionBlueLight = AppColors.primaryLight;
|
||||
static const Color unionBlueDark = AppColors.primaryDark;
|
||||
static const Color unionBluePale = AppColors.primaryContainer;
|
||||
static const Color unionBlueLogo = AppColors.logoBlue;
|
||||
|
||||
/// Vert UnionFlow - Symbole de croissance et prospérité
|
||||
static const Color unionGreen = Color(0xFF0F6B4F);
|
||||
static const Color unionGreenLight = Color(0xFF1F8A67);
|
||||
static const Color unionGreenPale = Color(0xFFEEF5F2);
|
||||
// ── Accent ──────────────────────────────────────────────────────────────
|
||||
static const Color unionPurple = AppColors.accent;
|
||||
static const Color unionPurpleLight = AppColors.accentLight;
|
||||
static const Color unionPurpleDark = AppColors.accentDark;
|
||||
static const Color unionPurplePale = AppColors.accentContainer;
|
||||
|
||||
/// Or - Symbole de richesse et communauté
|
||||
static const Color gold = Color(0xFFD4A017);
|
||||
static const Color goldLight = Color(0xFFE8C568);
|
||||
static const Color goldPale = Color(0xFFFFF9E6);
|
||||
// ── Sémantique ──────────────────────────────────────────────────────────
|
||||
static const Color success = AppColors.success;
|
||||
static const Color successLight = AppColors.successUI;
|
||||
static const Color successPale = AppColors.successContainer;
|
||||
|
||||
/// Indigo - Modernité et confiance
|
||||
static const Color indigo = Color(0xFF1E2A44);
|
||||
static const Color indigoLight = Color(0xFF3A4A6B);
|
||||
static const Color warning = AppColors.warning;
|
||||
static const Color warningLight = AppColors.warningUI;
|
||||
static const Color warningPale = AppColors.warningContainer;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// COULEURS SECONDAIRES (Accents culturels)
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
static const Color error = AppColors.error;
|
||||
static const Color errorLight = AppColors.errorLight;
|
||||
static const Color errorPale = AppColors.errorContainer;
|
||||
|
||||
/// Terracotta - Chaleur et tradition
|
||||
static const Color terracotta = Color(0xFFE07A5F);
|
||||
static const Color terracottaLight = Color(0xFFF2AC99);
|
||||
static const Color terracottaPale = Color(0xFFFFF3F0);
|
||||
static const Color info = AppColors.info;
|
||||
static const Color infoLight = AppColors.infoLight;
|
||||
static const Color infoPale = AppColors.infoContainer;
|
||||
|
||||
/// Ambre - Énergie et optimisme
|
||||
static const Color amber = Color(0xFFF4A261);
|
||||
static const Color amberLight = Color(0xFFF8C590);
|
||||
// ── Surfaces ────────────────────────────────────────────────────────────
|
||||
static const Color background = AppColors.background;
|
||||
static const Color surface = AppColors.surface;
|
||||
static const Color surfaceVariant = AppColors.surfaceContainer;
|
||||
static const Color surfaceContainer = AppColors.surfaceContainerHigh;
|
||||
static const Color surfaceGlass = AppColors.backgroundSubtle;
|
||||
|
||||
/// Sable - Neutralité élégante
|
||||
static const Color sand = Color(0xFFE9DCC9);
|
||||
static const Color sandLight = Color(0xFFF5F0E8);
|
||||
// ── Texte & Bordures ─────────────────────────────────────────────────────
|
||||
static const Color textPrimary = AppColors.textPrimary;
|
||||
static const Color textSecondary = AppColors.textSecondary;
|
||||
static const Color textTertiary = AppColors.textDisabled;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// COULEURS SÉMANTIQUES
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
static const Color border = AppColors.border;
|
||||
static const Color borderMedium = AppColors.borderStrong;
|
||||
static const Color borderStrong = AppColors.textDisabled;
|
||||
|
||||
/// Succès - Validation, confirmation
|
||||
static const Color success = Color(0xFF22C55E);
|
||||
static const Color successLight = Color(0xFF86EFAC);
|
||||
static const Color successPale = Color(0xFFF0FDF4);
|
||||
// ── Palette brand ────────────────────────────────────────────────────────
|
||||
static const Color amber = AppColors.amber;
|
||||
static const Color amberLight = AppColors.amberLight;
|
||||
static const Color gold = AppColors.accent;
|
||||
static const Color goldLight = AppColors.accentLight;
|
||||
static const Color goldPale = AppColors.accentContainer;
|
||||
static const Color terracotta = AppColors.terracotta;
|
||||
static const Color terracottaLight = AppColors.terracottaLight;
|
||||
static const Color terracottaPale = AppColors.terracottaPale;
|
||||
static const Color indigo = AppColors.indigo;
|
||||
static const Color indigoLight = AppColors.indigoLight;
|
||||
static const Color sand = AppColors.sand;
|
||||
static const Color sandLight = AppColors.sandLight;
|
||||
|
||||
/// Attention - Avertissements
|
||||
static const Color warning = Color(0xFFF59E0B);
|
||||
static const Color warningLight = Color(0xFFFBBF24);
|
||||
static const Color warningPale = Color(0xFFFEFCE8);
|
||||
// ── Alias historiques ────────────────────────────────────────────────────
|
||||
static const Color unionGreen = AppColors.primary;
|
||||
static const Color unionGreenLight = AppColors.primaryLight;
|
||||
static const Color unionGreenPale = AppColors.primaryContainer;
|
||||
|
||||
/// Erreur - Actions négatives
|
||||
static const Color error = Color(0xFFEF4444);
|
||||
static const Color errorLight = Color(0xFFFCA5A5);
|
||||
static const Color errorPale = Color(0xFFFEF2F2);
|
||||
// ── Gradients ────────────────────────────────────────────────────────────
|
||||
static const LinearGradient logoGradient = AppColors.logoGradient;
|
||||
static const LinearGradient primaryGradient = AppColors.primaryGradient;
|
||||
static const LinearGradient loginGradient = AppColors.loginGradient;
|
||||
static const LinearGradient subtleGradient = AppColors.subtleGradient;
|
||||
static const LinearGradient warmGradient = AppColors.warmGradient;
|
||||
static const LinearGradient goldGradient = AppColors.logoGradient;
|
||||
|
||||
/// Info - Informations neutres
|
||||
static const Color info = Color(0xFF3B82F6);
|
||||
static const Color infoLight = Color(0xFF93C5FD);
|
||||
static const Color infoPale = Color(0xFFEFF6FF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// COULEURS DE SURFACE
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/// Background principal
|
||||
static const Color background = Color(0xFFF7F9FA);
|
||||
|
||||
/// Surface des cards
|
||||
static const Color surface = Color(0xFFFFFFFF);
|
||||
|
||||
/// Surface variant (légèrement teintée)
|
||||
static const Color surfaceVariant = Color(0xFFF5F7F8);
|
||||
|
||||
/// Surface avec effet glassmorphism
|
||||
static const Color surfaceGlass = Color(0xFFFAFBFC);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// TEXTE & BORDURES
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/// Texte principal
|
||||
static const Color textPrimary = Color(0xFF111827);
|
||||
|
||||
/// Texte secondaire
|
||||
static const Color textSecondary = Color(0xFF6B7280);
|
||||
|
||||
/// Texte tertiaire
|
||||
static const Color textTertiary = Color(0xFF9CA3AF);
|
||||
|
||||
/// Bordures subtiles
|
||||
static const Color border = Color(0xFFE5E7EB);
|
||||
|
||||
/// Bordures moyennes
|
||||
static const Color borderMedium = Color(0xFFD1D5DB);
|
||||
|
||||
/// Bordures fortes
|
||||
static const Color borderStrong = Color(0xFF9CA3AF);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// GRADIENTS SIGNATURE
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/// Gradient principal (Vert → Or)
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [unionGreen, unionGreenLight],
|
||||
);
|
||||
|
||||
/// Gradient chaleureux (Terracotta → Ambre)
|
||||
static const LinearGradient warmGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [terracotta, amber],
|
||||
);
|
||||
|
||||
/// Gradient or (Gold → Gold Light)
|
||||
static const LinearGradient goldGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [gold, goldLight],
|
||||
);
|
||||
|
||||
/// Gradient subtil pour backgrounds
|
||||
static const LinearGradient subtleGradient = LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0xFFFAFBFC), Color(0xFFF7F9FA)],
|
||||
);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// OMBRES SIGNATURE
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/// Ombre douce (cards, buttons)
|
||||
static List<BoxShadow> get softShadow => [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.08),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
/// Ombre moyenne (modals, floating elements)
|
||||
static List<BoxShadow> get mediumShadow => [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.12),
|
||||
blurRadius: 32,
|
||||
offset: const Offset(0, 12),
|
||||
),
|
||||
];
|
||||
|
||||
/// Ombre forte (dialogs, overlays)
|
||||
static List<BoxShadow> get strongShadow => [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF000000).withOpacity(0.16),
|
||||
blurRadius: 48,
|
||||
offset: const Offset(0, 16),
|
||||
),
|
||||
];
|
||||
|
||||
/// Ombre colorée verte (pour CTAs)
|
||||
static List<BoxShadow> get greenGlowShadow => [
|
||||
BoxShadow(
|
||||
color: unionGreen.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
/// Ombre colorée dorée (pour éléments premium)
|
||||
static List<BoxShadow> get goldGlowShadow => [
|
||||
BoxShadow(
|
||||
color: gold.withOpacity(0.25),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
];
|
||||
// ── Ombres ───────────────────────────────────────────────────────────────
|
||||
static List<BoxShadow> get softShadow => AppColors.softShadow;
|
||||
static List<BoxShadow> get mediumShadow => AppColors.mediumShadow;
|
||||
static List<BoxShadow> get blueGlowShadow => AppColors.blueGlowShadow;
|
||||
static List<BoxShadow> get purpleGlowShadow => AppColors.purpleGlowShadow;
|
||||
static List<BoxShadow> get greenGlowShadow => AppColors.blueGlowShadow;
|
||||
static List<BoxShadow> get goldGlowShadow => AppColors.purpleGlowShadow;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user