lionsdev/unionflow-server-impl-quarkus

Fork 0

Files

dahoud 990ee549e6 gitignore propre

2025-11-09 16:31:19 +00:00

3.6 KiB

Raw Blame History

Guide d'Utilisation - UnionFlow Design System

Version: 1.0.0
Date: 2025-10-05
Palette: Bleu Roi (#4169E1) + Bleu Pétrole (#2C5F6F)

📚 Table des Matières

Introduction
Installation
Tokens
Composants
Exemples
Règles d'Utilisation

🎯 Introduction

Le Design System UnionFlow est un système de design unifié basé sur Material Design 3 et les tendances UI/UX 2024-2025. Il fournit une palette de couleurs cohérente, des tokens de design et des composants réutilisables.

Palette de Couleurs

Mode Jour

Primary: #4169E1 (Bleu Roi)
Secondary: #6366F1 (Indigo)
Tertiary: #10B981 (Vert Émeraude)

Mode Nuit

Primary: #2C5F6F (Bleu Pétrole)
Secondary: #4F46E5 (Indigo Sombre)
Tertiary: #059669 (Vert Sombre)

📦 Installation

Import Unique

Importez le Design System dans vos fichiers :

import 'package:unionflow_mobile_apps/core/design_system/unionflow_design_system.dart';

Cet import donne accès à :

ColorTokens - Couleurs
TypographyTokens - Typographie
SpacingTokens - Espacements
UFPrimaryButton, UFSecondaryButton - Boutons
UFStatCard - Cards de statistiques

🎨 Tokens

Couleurs (ColorTokens)

Couleurs Primaires

// Mode Jour
ColorTokens.primary              // #4169E1 - Bleu Roi
ColorTokens.primaryLight         // #6B8EF5 - Bleu Roi Clair
ColorTokens.primaryDark          // #2952C8 - Bleu Roi Sombre
ColorTokens.onPrimary            // #FFFFFF - Texte sur primaire

// Mode Nuit
ColorTokens.primaryDarkMode      // #2C5F6F - Bleu Pétrole
ColorTokens.onPrimaryDarkMode    // #E5E7EB - Texte sur primaire

Couleurs Sémantiques

ColorTokens.success              // #10B981 - Vert Succès
ColorTokens.error                // #DC2626 - Rouge Erreur
ColorTokens.warning              // #F59E0B - Orange Avertissement
ColorTokens.info                 // #0EA5E9 - Bleu Info

Typographie (TypographyTokens)

TypographyTokens.headlineLarge   // 32px - Titres de section
TypographyTokens.headlineMedium  // 28px
TypographyTokens.bodyLarge       // 16px - Corps de texte
TypographyTokens.buttonLarge     // 16px - Boutons

Espacements (SpacingTokens)

SpacingTokens.xs                 // 2px
SpacingTokens.sm                 // 4px
SpacingTokens.md                 // 8px
SpacingTokens.lg                 // 12px
SpacingTokens.xl                 // 16px
SpacingTokens.xxl                // 20px
SpacingTokens.xxxl               // 24px
SpacingTokens.huge               // 32px

// Rayons de bordure
SpacingTokens.radiusLg           // 12px
SpacingTokens.radiusMd           // 8px

🧩 Composants

UFPrimaryButton

UFPrimaryButton(
  label: 'Connexion',
  onPressed: () => login(),
  icon: Icons.login,
  isFullWidth: true,
)

UFStatCard

UFStatCard(
  title: 'Membres',
  value: '142',
  icon: Icons.people,
  iconColor: ColorTokens.primary,
  subtitle: '+5 ce mois',
  onTap: () => navigateToMembers(),
)

✅ Règles d'Utilisation

DO ✅

TOUJOURS utiliser ColorTokens.* pour les couleurs
TOUJOURS utiliser SpacingTokens.* pour les espacements
TOUJOURS utiliser les composants UF* quand disponibles

DON'T ❌

JAMAIS définir de couleurs en dur (ex: Color(0xFF...))
JAMAIS définir d'espacements en dur (ex: 16.0)
JAMAIS créer de widgets custom sans vérifier les composants existants

Dernière mise à jour: 2025-10-05

3.6 KiB Raw Blame History