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