Refactoring - Version OK

2025-11-17 16:02:04 +00:00
parent 3f00a26308
commit 3b9ffac8cd
198 changed files with 18010 additions and 11383 deletions
--- a/unionflow-mobile-apps/lib/shared/design_system/tokens/color_tokens.dart
+++ b/unionflow-mobile-apps/lib/shared/design_system/tokens/color_tokens.dart
@@ -0,0 +1,197 @@
+/// Design Tokens - Couleurs UnionFlow
+///
+/// Palette de couleurs Bleu Roi + Bleu Pétrole
+/// Inspirée des tendances UI/UX 2024-2025
+/// Basée sur les principes de Material Design 3
+///
+/// MODE JOUR: Bleu Roi (#4169E1) - Royal Blue
+/// MODE NUIT: Bleu Pétrole (#2C5F6F) - Petroleum Blue
+library color_tokens;
+
+import 'package:flutter/material.dart';
+
+/// Tokens de couleurs UnionFlow - Design System Unifié
+class ColorTokens {
+  ColorTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS PRIMAIRES - MODE JOUR (Bleu Roi)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /// Couleur primaire principale - Bleu Roi (Royal Blue)
+  static const Color primary = Color(0xFF4169E1); // Bleu roi
+  static const Color primaryLight = Color(0xFF6B8EF5); // Bleu roi clair
+  static const Color primaryDark = Color(0xFF2952C8); // Bleu roi sombre
+  static const Color primaryContainer = Color(0xFFE3ECFF); // Container bleu roi
+  static const Color onPrimary = Color(0xFFFFFFFF); // Texte sur primaire (blanc)
+  static const Color onPrimaryContainer = Color(0xFF001A41); // Texte sur container
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS PRIMAIRES - MODE NUIT (Bleu Pétrole)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /// Couleur primaire mode nuit - Bleu Pétrole
+  static const Color primaryDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
+  static const Color primaryLightDarkMode = Color(0xFF3D7A8C); // Bleu pétrole clair
+  static const Color primaryDarkDarkMode = Color(0xFF1B4D5C); // Bleu pétrole sombre
+  static const Color primaryContainerDarkMode = Color(0xFF1E3A44); // Container mode nuit
+  static const Color onPrimaryDarkMode = Color(0xFFE5E7EB); // Texte sur primaire (gris clair)
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SECONDAIRES - Indigo Moderne
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  static const Color secondary = Color(0xFF6366F1); // Indigo moderne
+  static const Color secondaryLight = Color(0xFF8B8FF6); // Indigo clair
+  static const Color secondaryDark = Color(0xFF4F46E5); // Indigo sombre
+  static const Color secondaryContainer = Color(0xFFE0E7FF); // Container indigo
+  static const Color onSecondary = Color(0xFFFFFFFF);
+  static const Color onSecondaryContainer = Color(0xFF1E1B3A);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS TERTIAIRES - Vert Émeraude
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  static const Color tertiary = Color(0xFF10B981); // Vert émeraude
+  static const Color tertiaryLight = Color(0xFF34D399); // Vert clair
+  static const Color tertiaryDark = Color(0xFF059669); // Vert sombre
+  static const Color tertiaryContainer = Color(0xFFD1FAE5); // Container vert
+  static const Color onTertiary = Color(0xFFFFFFFF);
+  static const Color onTertiaryContainer = Color(0xFF002114);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS NEUTRES - MODE JOUR
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  static const Color surface = Color(0xFFFFFFFF); // Surface principale (blanc)
+  static const Color surfaceVariant = Color(0xFFF8F9FA); // Surface variante (gris très clair)
+  static const Color surfaceContainer = Color(0xFFFFFFFF); // Container surface
+  static const Color surfaceContainerHigh = Color(0xFFF8F9FA); // Container élevé
+  static const Color surfaceContainerHighest = Color(0xFFE5E7EB); // Container max
+  static const Color background = Color(0xFFF8F9FA); // Background général
+
+  static const Color onSurface = Color(0xFF1F2937); // Texte principal (gris très foncé)
+  static const Color onSurfaceVariant = Color(0xFF6B7280); // Texte secondaire (gris moyen)
+  static const Color textSecondary = Color(0xFF6B7280); // Texte secondaire (alias)
+  static const Color outline = Color(0xFFD1D5DB); // Bordures
+  static const Color outlineVariant = Color(0xFFE5E7EB); // Bordures claires
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS NEUTRES - MODE NUIT
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  static const Color surfaceDarkMode = Color(0xFF1E1E1E); // Surface principale (gris très sombre)
+  static const Color surfaceVariantDarkMode = Color(0xFF2C2C2C); // Surface variante
+  static const Color backgroundDarkMode = Color(0xFF121212); // Background général (noir profond)
+
+  static const Color onSurfaceDarkMode = Color(0xFFE5E7EB); // Texte principal (gris très clair)
+  static const Color onSurfaceVariantDarkMode = Color(0xFF9CA3AF); // Texte secondaire (gris moyen)
+  static const Color outlineDarkMode = Color(0xFF4B5563); // Bordures mode nuit
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SÉMANTIQUES - États et feedback
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Couleurs de succès
+  static const Color success = Color(0xFF10B981); // Vert succès
+  static const Color successLight = Color(0xFF34D399); // Vert clair
+  static const Color successDark = Color(0xFF059669); // Vert sombre
+  static const Color successContainer = Color(0xFFECFDF5); // Container succès
+  static const Color onSuccess = Color(0xFFFFFFFF);
+  static const Color onSuccessContainer = Color(0xFF002114);
+
+  /// Couleurs d'erreur
+  static const Color error = Color(0xFFDC2626); // Rouge erreur
+  static const Color errorLight = Color(0xFFEF4444); // Rouge clair
+  static const Color errorDark = Color(0xFFB91C1C); // Rouge sombre
+  static const Color errorContainer = Color(0xFFFEF2F2); // Container erreur
+  static const Color onError = Color(0xFFFFFFFF);
+  static const Color onErrorContainer = Color(0xFF410002);
+
+  /// Couleurs d'avertissement
+  static const Color warning = Color(0xFFF59E0B); // Orange avertissement
+  static const Color warningLight = Color(0xFFFBBF24); // Orange clair
+  static const Color warningDark = Color(0xFFD97706); // Orange sombre
+  static const Color warningContainer = Color(0xFFFEF3C7); // Container avertissement
+  static const Color onWarning = Color(0xFFFFFFFF);
+  static const Color onWarningContainer = Color(0xFF2D1B00);
+
+  /// Couleurs d'information
+  static const Color info = Color(0xFF0EA5E9); // Bleu info
+  static const Color infoLight = Color(0xFF38BDF8); // Bleu clair
+  static const Color infoDark = Color(0xFF0284C7); // Bleu sombre
+  static const Color infoContainer = Color(0xFFE0F2FE); // Container info
+  static const Color onInfo = Color(0xFFFFFFFF);
+  static const Color onInfoContainer = Color(0xFF001D36);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COULEURS SPÉCIALISÉES - Interface avancée
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Couleurs de navigation - Mode Jour
+  static const Color navigationBackground = Color(0xFFFFFFFF);
+  static const Color navigationSelected = Color(0xFF4169E1); // Bleu roi
+  static const Color navigationUnselected = Color(0xFF6B7280);
+  static const Color navigationIndicator = Color(0xFF4169E1); // Bleu roi
+
+  /// Couleurs de navigation - Mode Nuit
+  static const Color navigationBackgroundDarkMode = Color(0xFF1E1E1E);
+  static const Color navigationSelectedDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
+  static const Color navigationUnselectedDarkMode = Color(0xFF9CA3AF);
+  static const Color navigationIndicatorDarkMode = Color(0xFF2C5F6F); // Bleu pétrole
+
+  /// Couleurs d'élévation et ombres
+  static const Color shadow = Color(0x1A000000); // Ombre légère
+  static const Color shadowMedium = Color(0x33000000); // Ombre moyenne
+  static const Color shadowHigh = Color(0x4D000000); // Ombre forte
+
+  /// Couleurs de glassmorphism (tendance 2024-2025)
+  static const Color glassBackground = Color(0x80FFFFFF); // Fond verre
+  static const Color glassBorder = Color(0x33FFFFFF); // Bordure verre
+  static const Color glassOverlay = Color(0x0DFFFFFF); // Overlay verre
+
+  /// Couleurs de gradient - Mode Jour (Bleu Roi)
+  static const List<Color> primaryGradient = [
+    Color(0xFF4169E1), // Bleu roi
+    Color(0xFF6B8EF5), // Bleu roi clair
+  ];
+
+  /// Couleurs de gradient - Mode Nuit (Bleu Pétrole)
+  static const List<Color> primaryGradientDarkMode = [
+    Color(0xFF2C5F6F), // Bleu pétrole
+    Color(0xFF3D7A8C), // Bleu pétrole clair
+  ];
+
+  static const List<Color> secondaryGradient = [
+    Color(0xFF6366F1), // Indigo
+    Color(0xFF8B8FF6), // Indigo clair
+  ];
+
+  static const List<Color> successGradient = [
+    Color(0xFF10B981), // Vert émeraude
+    Color(0xFF34D399), // Vert clair
+  ];
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MÉTHODES UTILITAIRES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Obtient une couleur avec opacité
+  static Color withOpacity(Color color, double opacity) {
+    return color.withOpacity(opacity);
+  }
+  
+  /// Obtient une couleur plus claire
+  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();
+  }
+  
+  /// Obtient une couleur plus sombre
+  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();
+  }
+}
--- a/unionflow-mobile-apps/lib/shared/design_system/tokens/radius_tokens.dart
+++ b/unionflow-mobile-apps/lib/shared/design_system/tokens/radius_tokens.dart
@@ -0,0 +1,23 @@
+/// Tokens de rayon pour le design system
+/// Définit les rayons de bordure standardisés de l'application
+library radius_tokens;
+
+/// Tokens de rayon
+class RadiusTokens {
+  RadiusTokens._();
+  
+  /// Small - 4px
+  static const double sm = 4.0;
+  
+  /// Medium - 8px
+  static const double md = 8.0;
+  
+  /// Large - 12px
+  static const double lg = 12.0;
+  
+  /// Extra large - 16px
+  static const double xl = 16.0;
+  
+  /// Round - 50px
+  static const double round = 50.0;
+}
--- a/unionflow-mobile-apps/lib/shared/design_system/tokens/shadow_tokens.dart
+++ b/unionflow-mobile-apps/lib/shared/design_system/tokens/shadow_tokens.dart
@@ -0,0 +1,150 @@
+/// Tokens d'ombres pour le design system
+/// Définit les ombres standardisées de l'application
+library shadow_tokens;
+
+import 'package:flutter/material.dart';
+import 'color_tokens.dart';
+
+/// Tokens d'ombres standardisés
+/// 
+/// Utilisation cohérente des ombres dans toute l'application.
+/// Basé sur les principes de Material Design 3.
+class ShadowTokens {
+  ShadowTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OMBRES STANDARDS
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /// Ombre minimale - Pour éléments subtils
+  static final List<BoxShadow> xs = [
+    const BoxShadow(
+      color: ColorTokens.shadow,
+      blurRadius: 4,
+      offset: Offset(0, 1),
+    ),
+  ];
+
+  /// Ombre petite - Pour cards et boutons
+  static final List<BoxShadow> sm = [
+    const BoxShadow(
+      color: ColorTokens.shadow,
+      blurRadius: 8,
+      offset: Offset(0, 2),
+    ),
+  ];
+
+  /// Ombre moyenne - Pour cards importantes
+  static final List<BoxShadow> md = [
+    const BoxShadow(
+      color: ColorTokens.shadow,
+      blurRadius: 12,
+      offset: Offset(0, 4),
+    ),
+  ];
+
+  /// Ombre large - Pour modals et dialogs
+  static final List<BoxShadow> lg = [
+    const BoxShadow(
+      color: ColorTokens.shadowMedium,
+      blurRadius: 16,
+      offset: Offset(0, 6),
+    ),
+  ];
+
+  /// Ombre très large - Pour éléments flottants
+  static final List<BoxShadow> xl = [
+    const BoxShadow(
+      color: ColorTokens.shadowMedium,
+      blurRadius: 24,
+      offset: Offset(0, 8),
+    ),
+  ];
+
+  /// Ombre extra large - Pour éléments héroïques
+  static final List<BoxShadow> xxl = [
+    const BoxShadow(
+      color: ColorTokens.shadowHigh,
+      blurRadius: 32,
+      offset: Offset(0, 12),
+      spreadRadius: -4,
+    ),
+  ];
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OMBRES COLORÉES
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /// Ombre primaire - Pour éléments avec couleur primaire
+  static final List<BoxShadow> primary = [
+    BoxShadow(
+      color: ColorTokens.primary.withOpacity(0.15),
+      blurRadius: 16,
+      offset: const Offset(0, 4),
+    ),
+  ];
+
+  /// Ombre secondaire - Pour éléments avec couleur secondaire
+  static final List<BoxShadow> secondary = [
+    BoxShadow(
+      color: ColorTokens.secondary.withOpacity(0.15),
+      blurRadius: 16,
+      offset: const Offset(0, 4),
+    ),
+  ];
+
+  /// Ombre success - Pour éléments de succès
+  static final List<BoxShadow> success = [
+    BoxShadow(
+      color: ColorTokens.success.withOpacity(0.15),
+      blurRadius: 16,
+      offset: const Offset(0, 4),
+    ),
+  ];
+
+  /// Ombre error - Pour éléments d'erreur
+  static final List<BoxShadow> error = [
+    BoxShadow(
+      color: ColorTokens.error.withOpacity(0.15),
+      blurRadius: 16,
+      offset: const Offset(0, 4),
+    ),
+  ];
+
+  /// Ombre warning - Pour éléments d'avertissement
+  static final List<BoxShadow> warning = [
+    BoxShadow(
+      color: ColorTokens.warning.withOpacity(0.15),
+      blurRadius: 16,
+      offset: const Offset(0, 4),
+    ),
+  ];
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OMBRES SPÉCIALES
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /// Ombre interne - Pour effets enfoncés
+  static final List<BoxShadow> inner = [
+    const BoxShadow(
+      color: ColorTokens.shadow,
+      blurRadius: 4,
+      offset: Offset(0, 2),
+      spreadRadius: -2,
+    ),
+  ];
+
+  /// Ombre diffuse - Pour glassmorphism
+  static final List<BoxShadow> diffuse = [
+    BoxShadow(
+      color: ColorTokens.shadow.withOpacity(0.05),
+      blurRadius: 20,
+      offset: const Offset(0, 4),
+      spreadRadius: 2,
+    ),
+  ];
+
+  /// Pas d'ombre
+  static const List<BoxShadow> none = [];
+}
+
--- a/unionflow-mobile-apps/lib/shared/design_system/tokens/spacing_tokens.dart
+++ b/unionflow-mobile-apps/lib/shared/design_system/tokens/spacing_tokens.dart
@@ -0,0 +1,194 @@
+/// Design Tokens - Espacements
+/// 
+/// Système d'espacement cohérent basé sur une grille de 4px
+/// Optimisé pour la lisibilité et l'harmonie visuelle
+library spacing_tokens;
+
+/// Tokens d'espacement - Système de grille moderne
+class SpacingTokens {
+  SpacingTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ESPACEMENT DE BASE - Grille 4px
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Unité de base (4px) - Fondation du système
+  static const double baseUnit = 4.0;
+  
+  /// Espacement minimal (2px) - Détails fins
+  static const double xs = baseUnit * 0.5; // 2px
+  
+  /// Espacement très petit (4px) - Éléments adjacents
+  static const double sm = baseUnit * 1; // 4px
+  
+  /// Espacement petit (8px) - Espacement interne léger
+  static const double md = baseUnit * 2; // 8px
+  
+  /// Espacement moyen (12px) - Espacement standard
+  static const double lg = baseUnit * 3; // 12px
+  
+  /// Espacement large (16px) - Séparation de composants
+  static const double xl = baseUnit * 4; // 16px
+  
+  /// Espacement très large (20px) - Séparation importante
+  static const double xxl = baseUnit * 5; // 20px
+  
+  /// Espacement extra large (24px) - Sections principales
+  static const double xxxl = baseUnit * 6; // 24px
+  
+  /// Espacement massif (32px) - Séparation majeure
+  static const double huge = baseUnit * 8; // 32px
+  
+  /// Espacement géant (48px) - Espacement héroïque
+  static const double giant = baseUnit * 12; // 48px
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ESPACEMENTS SPÉCIALISÉS - Composants spécifiques
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Padding des conteneurs
+  static const double containerPaddingSmall = lg; // 12px
+  static const double containerPaddingMedium = xl; // 16px
+  static const double containerPaddingLarge = xxxl; // 24px
+  
+  /// Marges des cartes
+  static const double cardMargin = xl; // 16px
+  static const double cardPadding = xl; // 16px
+  static const double cardPaddingLarge = xxxl; // 24px
+  
+  /// Espacement des listes
+  static const double listItemSpacing = md; // 8px
+  static const double listSectionSpacing = xxxl; // 24px
+  
+  /// Espacement des boutons
+  static const double buttonPaddingHorizontal = xl; // 16px
+  static const double buttonPaddingVertical = lg; // 12px
+  static const double buttonSpacing = md; // 8px
+  
+  /// Espacement des formulaires
+  static const double formFieldSpacing = xl; // 16px
+  static const double formSectionSpacing = xxxl; // 24px
+  static const double formPadding = xl; // 16px
+  
+  /// Espacement de navigation
+  static const double navigationPadding = xl; // 16px
+  static const double navigationItemSpacing = md; // 8px
+  static const double navigationSectionSpacing = xxxl; // 24px
+  
+  /// Espacement des en-têtes
+  static const double headerPadding = xl; // 16px
+  static const double headerHeight = 56.0; // Hauteur standard
+  static const double headerElevation = 4.0; // Élévation
+  
+  /// Espacement des onglets
+  static const double tabPadding = xl; // 16px
+  static const double tabHeight = 48.0; // Hauteur standard
+  
+  /// Espacement des dialogues
+  static const double dialogPadding = xxxl; // 24px
+  static const double dialogMargin = xl; // 16px
+  
+  /// Espacement des snackbars
+  static const double snackbarMargin = xl; // 16px
+  static const double snackbarPadding = xl; // 16px
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RAYONS DE BORDURE - Système cohérent
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Rayon minimal (2px) - Détails subtils
+  static const double radiusXs = 2.0;
+  
+  /// Rayon petit (4px) - Éléments fins
+  static const double radiusSm = 4.0;
+  
+  /// Rayon moyen (8px) - Standard
+  static const double radiusMd = 8.0;
+  
+  /// Rayon large (12px) - Cartes et composants
+  static const double radiusLg = 12.0;
+  
+  /// Rayon très large (16px) - Conteneurs principaux
+  static const double radiusXl = 16.0;
+  
+  /// Rayon extra large (20px) - Éléments héroïques
+  static const double radiusXxl = 20.0;
+  
+  /// Rayon circulaire (999px) - Boutons ronds
+  static const double radiusCircular = 999.0;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ÉLÉVATIONS - Système d'ombres
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Élévation minimale
+  static const double elevationXs = 1.0;
+  
+  /// Élévation petite
+  static const double elevationSm = 2.0;
+  
+  /// Élévation moyenne
+  static const double elevationMd = 4.0;
+  
+  /// Élévation large
+  static const double elevationLg = 8.0;
+  
+  /// Élévation très large
+  static const double elevationXl = 12.0;
+  
+  /// Élévation maximale
+  static const double elevationMax = 24.0;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // DIMENSIONS FIXES - Composants standardisés
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Hauteurs de boutons
+  static const double buttonHeightSmall = 32.0;
+  static const double buttonHeightMedium = 40.0;
+  static const double buttonHeightLarge = 48.0;
+  
+  /// Hauteurs d'éléments de liste
+  static const double listItemHeightSmall = 48.0;
+  static const double listItemHeightMedium = 56.0;
+  static const double listItemHeightLarge = 72.0;
+  
+  /// Largeurs minimales
+  static const double minTouchTarget = 44.0; // Cible tactile minimale
+  static const double minButtonWidth = 64.0; // Largeur minimale bouton
+  
+  /// Largeurs maximales
+  static const double maxContentWidth = 600.0; // Largeur max contenu
+  static const double maxDialogWidth = 400.0; // Largeur max dialogue
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MÉTHODES UTILITAIRES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Calcule un espacement basé sur l'unité de base
+  static double spacing(double multiplier) {
+    return baseUnit * multiplier;
+  }
+  
+  /// Obtient un espacement responsive basé sur la largeur d'écran
+  static double responsiveSpacing(double screenWidth) {
+    if (screenWidth < 600) {
+      return xl; // Mobile
+    } else if (screenWidth < 1200) {
+      return xxxl; // Tablette
+    } else {
+      return huge; // Desktop
+    }
+  }
+  
+  /// Obtient un padding responsive
+  static double responsivePadding(double screenWidth) {
+    if (screenWidth < 600) {
+      return xl; // 16px mobile
+    } else if (screenWidth < 1200) {
+      return xxxl; // 24px tablette
+    } else {
+      return huge; // 32px desktop
+    }
+  }
+}
--- a/unionflow-mobile-apps/lib/shared/design_system/tokens/typography_tokens.dart
+++ b/unionflow-mobile-apps/lib/shared/design_system/tokens/typography_tokens.dart
@@ -0,0 +1,296 @@
+/// Design Tokens - Typographie
+/// 
+/// Système typographique sophistiqué basé sur les tendances 2024-2025
+/// Hiérarchie claire et lisibilité optimale pour applications professionnelles
+library typography_tokens;
+
+import 'package:flutter/material.dart';
+import 'color_tokens.dart';
+
+/// Tokens typographiques - Système de texte moderne
+class TypographyTokens {
+  TypographyTokens._();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FAMILLES DE POLICES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Police principale - Inter (moderne et lisible)
+  static const String primaryFontFamily = 'Inter';
+  
+  /// Police secondaire - SF Pro Display (élégante)
+  static const String secondaryFontFamily = 'SF Pro Display';
+  
+  /// Police monospace - JetBrains Mono (code et données)
+  static const String monospaceFontFamily = 'JetBrains Mono';
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ÉCHELLE TYPOGRAPHIQUE - Basée sur Material Design 3
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Display - Titres principaux et héros
+  static const TextStyle displayLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 57.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: -0.25,
+    height: 1.12,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle displayMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 45.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.0,
+    height: 1.16,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle displaySmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 36.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.0,
+    height: 1.22,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Headline - Titres de sections
+  static const TextStyle headlineLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 32.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.25,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle headlineMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 28.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.29,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle headlineSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 24.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Title - Titres de composants
+  static const TextStyle titleLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 22.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.27,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle titleMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.15,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle titleSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Label - Étiquettes et boutons
+  static const TextStyle labelLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle labelMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.5,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle labelSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 11.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.5,
+    height: 1.45,
+    color: ColorTokens.onSurface,
+  );
+
+  /// Body - Texte de contenu
+  static const TextStyle bodyLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle bodyMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.25,
+    height: 1.43,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle bodySmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.4,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // STYLES SPÉCIALISÉS - Interface UnionFlow
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Navigation - Styles pour menu et navigation
+  static const TextStyle navigationLabel = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.navigationUnselected,
+  );
+  
+  static const TextStyle navigationLabelSelected = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.navigationSelected,
+  );
+
+  /// Cartes et composants
+  static const TextStyle cardTitle = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 18.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.0,
+    height: 1.33,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle cardSubtitle = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.25,
+    height: 1.43,
+    color: ColorTokens.onSurfaceVariant,
+  );
+  
+  static const TextStyle cardValue = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 24.0,
+    fontWeight: FontWeight.w700,
+    letterSpacing: 0.0,
+    height: 1.25,
+    color: ColorTokens.primary,
+  );
+
+  /// Boutons
+  static const TextStyle buttonLarge = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.25,
+    color: ColorTokens.onPrimary,
+  );
+  
+  static const TextStyle buttonMedium = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.1,
+    height: 1.29,
+    color: ColorTokens.onPrimary,
+  );
+  
+  static const TextStyle buttonSmall = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 12.0,
+    fontWeight: FontWeight.w600,
+    letterSpacing: 0.5,
+    height: 1.33,
+    color: ColorTokens.onPrimary,
+  );
+
+  /// Formulaires
+  static const TextStyle inputLabel = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 14.0,
+    fontWeight: FontWeight.w500,
+    letterSpacing: 0.1,
+    height: 1.43,
+    color: ColorTokens.onSurfaceVariant,
+  );
+  
+  static const TextStyle inputText = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurface,
+  );
+  
+  static const TextStyle inputHint = TextStyle(
+    fontFamily: primaryFontFamily,
+    fontSize: 16.0,
+    fontWeight: FontWeight.w400,
+    letterSpacing: 0.5,
+    height: 1.50,
+    color: ColorTokens.onSurfaceVariant,
+  );
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MÉTHODES UTILITAIRES
+  // ═══════════════════════════════════════════════════════════════════════════
+  
+  /// Applique une couleur à un style
+  static TextStyle withColor(TextStyle style, Color color) {
+    return style.copyWith(color: color);
+  }
+  
+  /// Applique un poids de police
+  static TextStyle withWeight(TextStyle style, FontWeight weight) {
+    return style.copyWith(fontWeight: weight);
+  }
+  
+  /// Applique une taille de police
+  static TextStyle withSize(TextStyle style, double size) {
+    return style.copyWith(fontSize: size);
+  }
+}