/// 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); } }