Initial commit: unionflow-mobile-apps
Application Flutter complète (sans build artifacts). Signed-off-by: lions dev Team
This commit is contained in:
dahoud
296
lib/shared/design_system/tokens/typography_tokens.dart
Normal file
296
lib/shared/design_system/tokens/typography_tokens.dart
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user