unionflow-server-api/unionflow-mobile-apps/lib/shared/design_system/dashboard_theme.dart

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<BoxShadow> cardShadow = [
    BoxShadow(
      color: Color(0x1A000000),
      blurRadius: 8,
      offset: Offset(0, 2),
    ),
  ];
  
  /// Ombre plus prononcée pour les éléments flottants
  static const List<BoxShadow> elevatedShadow = [
    BoxShadow(
      color: Color(0x1F000000),
      blurRadius: 16,
      offset: Offset(0, 4),
    ),
  ];

  /// Ombre subtile pour les éléments délicats
  static const List<BoxShadow> 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),
    ),
  );
}