158 lines
3.6 KiB
Markdown
158 lines
3.6 KiB
Markdown
# 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
|
|
|