import 'package:flutter/material.dart'; /// Design System pour les dashboards avec thème bleu roi et bleu pétrole class DashboardTheme { // === COULEURS PRINCIPALES === /// Bleu roi - Couleur principale static const Color royalBlue = Color(0xFF4169E1); /// Bleu pétrole - Couleur secondaire static const Color tealBlue = Color(0xFF008B8B); /// Variations du bleu roi static const Color royalBlueLight = Color(0xFF6495ED); static const Color royalBlueDark = Color(0xFF191970); /// Variations du bleu pétrole static const Color tealBlueLight = Color(0xFF20B2AA); static const Color tealBlueDark = Color(0xFF006666); // === COULEURS FONCTIONNELLES === /// Couleurs de statut static const Color success = Color(0xFF10B981); static const Color warning = Color(0xFFF59E0B); static const Color error = Color(0xFFEF4444); static const Color info = Color(0xFF3B82F6); /// Couleurs neutres static const Color white = Color(0xFFFFFFFF); static const Color grey50 = Color(0xFFF9FAFB); static const Color grey100 = Color(0xFFF3F4F6); static const Color grey200 = Color(0xFFE5E7EB); static const Color grey300 = Color(0xFFD1D5DB); static const Color grey400 = Color(0xFF9CA3AF); static const Color grey500 = Color(0xFF6B7280); static const Color grey600 = Color(0xFF4B5563); static const Color grey700 = Color(0xFF374151); static const Color grey800 = Color(0xFF1F2937); static const Color grey900 = Color(0xFF111827); // === GRADIENTS === /// Gradient principal (bleu roi vers bleu pétrole) static const LinearGradient primaryGradient = LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [royalBlue, tealBlue], ); /// Gradient léger pour les cartes static const LinearGradient cardGradient = LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [royalBlueLight, tealBlueLight], stops: [0.0, 1.0], ); /// Gradient sombre pour les headers static const LinearGradient headerGradient = LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [royalBlueDark, royalBlue], ); // === OMBRES === /// Ombre légère pour les cartes static const List cardShadow = [ BoxShadow( color: Color(0x1A000000), blurRadius: 8, offset: Offset(0, 2), ), ]; /// Ombre plus prononcée pour les éléments flottants static const List elevatedShadow = [ BoxShadow( color: Color(0x1F000000), blurRadius: 16, offset: Offset(0, 4), ), ]; /// Ombre subtile pour les éléments délicats static const List subtleShadow = [ BoxShadow( color: Color(0x0A000000), blurRadius: 4, offset: Offset(0, 1), ), ]; // === BORDURES === /// Rayon de bordure standard static const double borderRadius = 12.0; static const double borderRadiusSmall = 8.0; static const double borderRadiusLarge = 16.0; /// Bordures colorées static const BorderSide primaryBorder = BorderSide( color: royalBlue, width: 1.0, ); static const BorderSide secondaryBorder = BorderSide( color: tealBlue, width: 1.0, ); // === ESPACEMENTS === static const double spacing2 = 2.0; static const double spacing4 = 4.0; static const double spacing6 = 6.0; static const double spacing8 = 8.0; static const double spacing12 = 12.0; static const double spacing16 = 16.0; static const double spacing20 = 20.0; static const double spacing24 = 24.0; static const double spacing32 = 32.0; static const double spacing48 = 48.0; // === STYLES DE TEXTE === /// Titre principal static const TextStyle titleLarge = TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: grey900, height: 1.2, ); /// Titre de section static const TextStyle titleMedium = TextStyle( fontSize: 18, fontWeight: FontWeight.w600, color: grey800, height: 1.3, ); /// Titre de carte static const TextStyle titleSmall = TextStyle( fontSize: 16, fontWeight: FontWeight.w600, color: grey700, height: 1.4, ); /// Corps de texte static const TextStyle bodyLarge = TextStyle( fontSize: 16, fontWeight: FontWeight.normal, color: grey700, height: 1.5, ); /// Corps de texte moyen static const TextStyle bodyMedium = TextStyle( fontSize: 14, fontWeight: FontWeight.normal, color: grey600, height: 1.4, ); /// Petit texte static const TextStyle bodySmall = TextStyle( fontSize: 12, fontWeight: FontWeight.normal, color: grey500, height: 1.3, ); /// Texte de métrique (gros chiffres) static const TextStyle metricLarge = TextStyle( fontSize: 32, fontWeight: FontWeight.bold, color: royalBlue, height: 1.1, ); /// Texte de métrique moyen static const TextStyle metricMedium = TextStyle( fontSize: 24, fontWeight: FontWeight.w600, color: tealBlue, height: 1.2, ); // === STYLES DE BOUTONS === /// Style de bouton principal static ButtonStyle get primaryButtonStyle => ElevatedButton.styleFrom( backgroundColor: royalBlue, foregroundColor: white, elevation: 2, shadowColor: royalBlue.withOpacity(0.3), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(borderRadius), ), padding: const EdgeInsets.symmetric( horizontal: spacing20, vertical: spacing12, ), ); /// Style de bouton secondaire static ButtonStyle get secondaryButtonStyle => OutlinedButton.styleFrom( foregroundColor: tealBlue, side: const BorderSide(color: tealBlue), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(borderRadius), ), padding: const EdgeInsets.symmetric( horizontal: spacing20, vertical: spacing12, ), ); // === DÉCORATION DE CONTENEURS === /// Décoration de carte standard static BoxDecoration get cardDecoration => BoxDecoration( color: white, borderRadius: BorderRadius.circular(borderRadius), boxShadow: cardShadow, ); /// Décoration de carte avec gradient static BoxDecoration get gradientCardDecoration => BoxDecoration( gradient: cardGradient, borderRadius: BorderRadius.circular(borderRadius), boxShadow: cardShadow, ); /// Décoration de header static BoxDecoration get headerDecoration => const BoxDecoration( gradient: headerGradient, borderRadius: BorderRadius.only( bottomLeft: Radius.circular(borderRadiusLarge), bottomRight: Radius.circular(borderRadiusLarge), ), ); }