195 lines
8.4 KiB
Dart
195 lines
8.4 KiB
Dart
/// 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
|
|
}
|
|
}
|
|
}
|