unionflow-mobile-apps/lib/shared/design_system/tokens/typography_tokens.dart

/// 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 'package:google_fonts/google_fonts.dart';
import 'color_tokens.dart';

/// Tokens typographiques - Système de texte moderne
class TypographyTokens {
  TypographyTokens._();

  // ═══════════════════════════════════════════════════════════════════════════
  // FAMILLES DE POLICES
  // ═══════════════════════════════════════════════════════════════════════════
  
  /// Police principale - Roboto (Google Fonts, cross-platform)
  static const String primaryFontFamily = 'Roboto';

  /// Police display - Roboto (Google Fonts, titres)
  static const String displayFontFamily = 'Roboto';

  /// 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 (Roboto via GoogleFonts)
  static TextStyle get displayLarge => GoogleFonts.roboto(
        fontSize: 32.0,
        fontWeight: FontWeight.w700,
        letterSpacing: -0.5,
        height: 1.2,
        color: ColorTokens.onSurface,
      );

  static TextStyle get displayMedium => GoogleFonts.roboto(
        fontSize: 28.0,
        fontWeight: FontWeight.w700,
        letterSpacing: -0.25,
        height: 1.25,
        color: ColorTokens.onSurface,
      );

  static TextStyle get displaySmall => GoogleFonts.roboto(
        fontSize: 24.0,
        fontWeight: FontWeight.w600,
        letterSpacing: 0.0,
        height: 1.3,
        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);
  }
}