# 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

1. [Introduction](#introduction)
2. [Installation](#installation)
3. [Tokens](#tokens)
4. [Composants](#composants)
5. [Exemples](#exemples)
6. [Règles d'Utilisation](#règles-dutilisation)

---

## 🎯 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 :

```dart
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

```dart
// 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

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

### Typographie (TypographyTokens)

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

### Espacements (SpacingTokens)

```dart
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

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

### UFStatCard

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

---

## ✅ Règles d'Utilisation

### DO ✅

1. **TOUJOURS** utiliser `ColorTokens.*` pour les couleurs
2. **TOUJOURS** utiliser `SpacingTokens.*` pour les espacements
3. **TOUJOURS** utiliser les composants `UF*` quand disponibles

### DON'T ❌

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

---

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