feat(shared): legacy presentation/ + shared design system + widgets

- lib/presentation : pages legacy (explore/network, notifications) avec BLoC - lib/shared/design_system : UnionFlow Design System v2 (tokens, components) + MD3 tokens + module_colors par feature - lib/shared/widgets : widgets transversaux (core_card, core_shimmer, error_widget, loading_widget, powered_by_lions_dev, etc.) - lib/shared/constants + utils
2026-04-15 20:27:23 +00:00
parent 744faa3a9c
commit 7cd7c6fc9e
36 changed files with 1890 additions and 837 deletions
--- a/lib/shared/design_system/components/buttons/uf_primary_button.dart
+++ b/lib/shared/design_system/components/buttons/uf_primary_button.dart
@@ -63,12 +63,12 @@ class UFPrimaryButton extends StatelessWidget {
      child: ElevatedButton(
        onPressed: isLoading ? null : onPressed,
        style: ElevatedButton.styleFrom(
-          backgroundColor: backgroundColor ?? AppColors.primaryGreen,
+          backgroundColor: backgroundColor ?? AppColors.primary,
          foregroundColor: textColor ?? Colors.white,
-          disabledBackgroundColor: (backgroundColor ?? AppColors.primaryGreen).withOpacity(0.5),
+          disabledBackgroundColor: (backgroundColor ?? AppColors.primary).withOpacity(0.5),
          disabledForegroundColor: (textColor ?? Colors.white).withOpacity(0.7),
          elevation: SpacingTokens.elevationSm,
-          shadowColor: AppColors.darkBorder.withOpacity(0.1),
+          shadowColor: AppColors.borderDark.withOpacity(0.1),
          padding: const EdgeInsets.symmetric(
            horizontal: SpacingTokens.buttonPaddingHorizontal,
            vertical: 10,
--- a/lib/shared/design_system/components/buttons/uf_secondary_button.dart
+++ b/lib/shared/design_system/components/buttons/uf_secondary_button.dart
@@ -34,12 +34,12 @@ class UFSecondaryButton extends StatelessWidget {
      child: ElevatedButton(
        onPressed: isLoading ? null : onPressed,
        style: ElevatedButton.styleFrom(
-          backgroundColor: AppColors.brandGreen,
+          backgroundColor: AppColors.primaryDark,
          foregroundColor: Colors.white,
-          disabledBackgroundColor: AppColors.brandGreen.withOpacity(0.5),
+          disabledBackgroundColor: AppColors.primaryDark.withOpacity(0.5),
          disabledForegroundColor: Colors.white.withOpacity(0.7),
          elevation: SpacingTokens.elevationSm,
-          shadowColor: AppColors.darkBorder.withOpacity(0.1),
+          shadowColor: AppColors.borderDark.withOpacity(0.1),
          padding: const EdgeInsets.symmetric(
            horizontal: SpacingTokens.buttonPaddingHorizontal,
            vertical: 10,
--- a/lib/shared/design_system/components/cards/uf_card.dart
+++ b/lib/shared/design_system/components/cards/uf_card.dart
@@ -89,7 +89,7 @@ class UFCard extends StatelessWidget {

    Widget content = Container(
      padding: effectivePadding,
-      decoration: _getDecoration(effectiveBorderRadius),
+      decoration: _getDecoration(effectiveBorderRadius, context),
      child: child,
    );

@@ -108,27 +108,31 @@ class UFCard extends StatelessWidget {
    );
  }

-  BoxDecoration _getDecoration(double radius) {
+  BoxDecoration _getDecoration(double radius, BuildContext context) {
+    final surfaceColor = Theme.of(context).colorScheme.surface;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final effectiveBorderColor = borderColor ?? (isDark ? AppColors.borderDark : AppColors.border);
+
    switch (style) {
      case UFCardStyle.elevated:
        return BoxDecoration(
-          color: color ?? AppColors.lightSurface,
+          color: color ?? surfaceColor,
          borderRadius: BorderRadius.circular(radius),
        );

      case UFCardStyle.outlined:
        return BoxDecoration(
-          color: color ?? AppColors.lightSurface,
+          color: color ?? surfaceColor,
          borderRadius: BorderRadius.circular(radius),
          border: Border.all(
-            color: borderColor ?? AppColors.lightBorder,
+            color: effectiveBorderColor,
            width: borderWidth ?? 1.0,
          ),
        );

      case UFCardStyle.filled:
        return BoxDecoration(
-          color: color ?? AppColors.lightSurface,
+          color: color ?? surfaceColor,
          borderRadius: BorderRadius.circular(radius),
        );
    }
--- a/lib/shared/design_system/components/cards/uf_info_card.dart
+++ b/lib/shared/design_system/components/cards/uf_info_card.dart
@@ -50,13 +50,13 @@ class UFInfoCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final effectiveIconColor = iconColor ?? AppColors.primaryGreen;
+    final effectiveIconColor = iconColor ?? AppColors.primary;
    final effectivePadding = padding ?? const EdgeInsets.all(SpacingTokens.lg);

    return Container(
      padding: effectivePadding,
      decoration: BoxDecoration(
-        color: isDark ? AppColors.darkSurface : Colors.white,
+        color: isDark ? AppColors.surfaceDark : Colors.white,
        borderRadius: BorderRadius.circular(SpacingTokens.radiusMd),
      ),
      child: Column(
@@ -71,7 +71,7 @@ class UFInfoCard extends StatelessWidget {
                child: Text(
                  title,
                  style: AppTypography.headerSmall.copyWith(
-                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
                  ),
                ),
              ),
--- a/lib/shared/design_system/components/cards/uf_stat_card.dart
+++ b/lib/shared/design_system/components/cards/uf_stat_card.dart
@@ -56,13 +56,13 @@ class UFStatCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final effectiveIconColor = iconColor ?? AppColors.primaryGreen;
+    final effectiveIconColor = iconColor ?? AppColors.primary;
    final effectiveIconBgColor = iconBackgroundColor ??
        effectiveIconColor.withOpacity(0.1);

    return Card(
      elevation: SpacingTokens.elevationSm,
-      shadowColor: AppColors.darkBorder.withOpacity(0.1),
+      shadowColor: AppColors.borderDark.withOpacity(0.1),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(SpacingTokens.radiusMd),
      ),
@@ -97,7 +97,7 @@ class UFStatCard extends StatelessWidget {
                    Icon(
                      Icons.arrow_forward_ios,
                      size: 16,
-                      color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
+                      color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondary,
                    ),
                ],
              ),
@@ -108,7 +108,7 @@ class UFStatCard extends StatelessWidget {
              Text(
                title,
                style: AppTypography.badgeText.copyWith(
-                  color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
+                  color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondary,
                ),
              ),

@@ -118,7 +118,7 @@ class UFStatCard extends StatelessWidget {
              Text(
                value,
                style: AppTypography.headerSmall.copyWith(
-                  color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                  color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
                ),
              ),

@@ -128,7 +128,7 @@ class UFStatCard extends StatelessWidget {
                Text(
                  subtitle!,
                  style: AppTypography.subtitleSmall.copyWith(
-                    color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
+                    color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondary,
                  ),
                ),
              ],
--- a/lib/shared/design_system/components/inputs/uf_dropdown_tile.dart
+++ b/lib/shared/design_system/components/inputs/uf_dropdown_tile.dart
@@ -50,7 +50,7 @@ class UFDropdownTile<T> extends StatelessWidget {
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final effectiveBgColor = backgroundColor ??
-        (isDark ? AppColors.darkSurface : AppColors.lightSurface);
+        (isDark ? AppColors.surfaceDark : AppColors.surface);
    final effectiveItemBuilder = itemBuilder ?? (item) => item.toString();

    return Container(
@@ -67,16 +67,16 @@ class UFDropdownTile<T> extends StatelessWidget {
              title,
              style: AppTypography.bodyTextSmall.copyWith(
                fontWeight: FontWeight.w600,
-                color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: SpacingTokens.lg),
            decoration: BoxDecoration(
-              color: isDark ? AppColors.darkBackground : Colors.white,
+              color: isDark ? AppColors.backgroundDark : Colors.white,
              borderRadius: BorderRadius.circular(SpacingTokens.radiusMd),
-              border: Border.all(color: isDark ? AppColors.darkBorder : AppColors.lightBorder),
+              border: Border.all(color: isDark ? AppColors.borderDark : AppColors.border),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<T>(
--- a/lib/shared/design_system/components/inputs/uf_switch_tile.dart
+++ b/lib/shared/design_system/components/inputs/uf_switch_tile.dart
@@ -46,7 +46,7 @@ class UFSwitchTile extends StatelessWidget {
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final effectiveBgColor = backgroundColor ??
-        (isDark ? AppColors.darkSurface : AppColors.lightSurface);
+        (isDark ? AppColors.surfaceDark : AppColors.surface);

    return Container(
      margin: const EdgeInsets.only(bottom: SpacingTokens.lg),
@@ -65,13 +65,13 @@ class UFSwitchTile extends StatelessWidget {
                  title,
                  style: AppTypography.bodyTextSmall.copyWith(
                    fontWeight: FontWeight.w600,
-                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
                  ),
                ),
                Text(
                  subtitle,
                  style: AppTypography.subtitleSmall.copyWith(
-                    color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
+                    color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondary,
                  ),
                ),
              ],
@@ -80,7 +80,7 @@ class UFSwitchTile extends StatelessWidget {
          Switch(
            value: value,
            onChanged: onChanged,
-            activeColor: AppColors.primaryGreen,
+            activeColor: AppColors.primary,
          ),
        ],
      ),
--- a/lib/shared/design_system/components/uf_app_bar.dart
+++ b/lib/shared/design_system/components/uf_app_bar.dart
@@ -7,21 +7,45 @@ import '../unionflow_design_system.dart';
 /// Composant AppBar unifié pour toutes les pages de détail/formulaire.
 /// Garantit la cohérence visuelle et l'expérience utilisateur.
 ///
-/// Si [mergeLeadingWithTitle] est true et que la route peut être quittée,
-/// le bouton retour et le titre sont fusionnés en une seule ligne (retour
-/// toujours visible avec la même couleur que le titre).
+/// ### Mode module (identité chromatique)
+///
+/// Passez [moduleColor] ou [moduleGradient] pour afficher un AppBar avec
+/// le gradient signature du module, rappelant visuellement à l'utilisateur
+/// dans quelle section de l'application il se trouve.
+///
+/// ```dart
+/// UFAppBar(
+///   title: 'Gestion des Organisations',
+///   moduleGradient: ModuleColors.organisationsGradient,
+/// )
+/// ```
+///
+/// ### Mode standard
+///
+/// Sans [moduleColor] ni [moduleGradient], le comportement existant est
+/// préservé intégralement (backgroundColor, foregroundColor, etc.).
 class UFAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final List<Widget>? actions;
  final Widget? leading;
  final bool automaticallyImplyLeading;
-  /// Fusionne le bouton retour et le titre en une seule zone (retour visible, même couleur que le titre).
+
+  /// Fusionne le bouton retour et le titre en une seule zone (retour visible,
+  /// même couleur que le titre).
  final bool mergeLeadingWithTitle;
  final PreferredSizeWidget? bottom;
  final Color? backgroundColor;
  final Color? foregroundColor;
  final double elevation;

+  /// Couleur primaire du module — génère automatiquement un gradient subtil.
+  /// Prend le dessus sur [backgroundColor] si renseigné.
+  final Color? moduleColor;
+
+  /// Gradient du module (liste de 2 couleurs) — ex: ModuleColors.organisationsGradient.
+  /// Prend le dessus sur [moduleColor] et [backgroundColor] si renseigné.
+  final List<Color>? moduleGradient;
+
  const UFAppBar({
    super.key,
    required this.title,
@@ -33,8 +57,21 @@ class UFAppBar extends StatelessWidget implements PreferredSizeWidget {
    this.backgroundColor,
    this.foregroundColor,
    this.elevation = 0,
+    this.moduleColor,
+    this.moduleGradient,
  });

+  bool get _isModuleMode => moduleGradient != null || moduleColor != null;
+
+  List<Color> get _resolvedGradient {
+    if (moduleGradient != null) return moduleGradient!;
+    final c = moduleColor!;
+    // Génère un gradient sombre → clair depuis la couleur du module
+    final hsl = HSLColor.fromColor(c);
+    final dark = hsl.withLightness((hsl.lightness - 0.06).clamp(0.0, 1.0)).toColor();
+    return [dark, c];
+  }
+
  @override
  Widget build(BuildContext context) {
    final canPop = ModalRoute.of(context)?.canPop ?? false;
@@ -44,38 +81,80 @@ class UFAppBar extends StatelessWidget implements PreferredSizeWidget {
    final isTransparent = backgroundColor == Colors.transparent ||
        (backgroundColor != null && backgroundColor!.opacity < 0.1);

-    return AppBar(
-      title: useMergedTitle
-          ? Row(
-              children: [
-                Material(
-                  color: isTransparent ? Colors.black26 : Colors.transparent,
-                  borderRadius: BorderRadius.circular(20),
-                  child: IconButton(
-                    icon: const Icon(Icons.arrow_back),
-                    onPressed: () => Navigator.of(context).pop(),
+    Widget titleWidget = useMergedTitle
+        ? Row(
+            children: [
+              Material(
+                color: isTransparent ? Colors.black26 : Colors.transparent,
+                borderRadius: BorderRadius.circular(20),
+                child: IconButton(
+                  icon: const Icon(Icons.arrow_back),
+                  onPressed: () => Navigator.of(context).pop(),
+                  color: fg,
+                  tooltip: 'Retour',
+                  style: IconButton.styleFrom(
+                    foregroundColor: fg,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Text(
+                  title,
+                  style: AppTypography.headerSmall.copyWith(
                    color: fg,
-                    tooltip: 'Retour',
-                    style: IconButton.styleFrom(
-                      foregroundColor: fg,
-                    ),
+                    fontWeight: FontWeight.w600,
                  ),
+                  overflow: TextOverflow.ellipsis,
                ),
-                const SizedBox(width: 8),
-                Expanded(
-                  child: Text(
-                    title,
-                    style: AppTypography.headerSmall.copyWith(
-                      color: fg,
-                      fontWeight: FontWeight.w600,
-                    ),
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ),
-              ],
-            )
-          : Text(title),
-      backgroundColor: backgroundColor ?? AppColors.primaryGreen,
+              ),
+            ],
+          )
+        : Text(title);
+
+    // Mode module : gradient via flexibleSpace
+    // iconTheme + actionsIconTheme explicites pour garantir la visibilité
+    // des icônes sur fond gradient sombre (foregroundColor seul ne suffit pas
+    // quand backgroundColor est transparent).
+    if (_isModuleMode) {
+      final gradient = _resolvedGradient;
+      return AppBar(
+        title: titleWidget,
+        backgroundColor: Colors.transparent,
+        foregroundColor: Colors.white,
+        elevation: elevation,
+        leading: useMergedTitle ? null : leading,
+        automaticallyImplyLeading: useMergedTitle ? false : automaticallyImplyLeading,
+        actions: actions,
+        bottom: bottom,
+        iconTheme: const IconThemeData(color: Colors.white, size: 22),
+        actionsIconTheme: const IconThemeData(color: Colors.white, size: 22),
+        systemOverlayStyle: const SystemUiOverlayStyle(
+          statusBarColor: Colors.transparent,
+          statusBarIconBrightness: Brightness.light,
+          statusBarBrightness: Brightness.dark,
+        ),
+        centerTitle: false,
+        titleTextStyle: AppTypography.headerSmall.copyWith(
+          color: Colors.white,
+          fontWeight: FontWeight.w600,
+        ),
+        flexibleSpace: Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              colors: gradient,
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+          ),
+        ),
+      );
+    }
+
+    // Mode standard (comportement existant préservé)
+    return AppBar(
+      title: titleWidget,
+      backgroundColor: backgroundColor ?? AppColors.primary,
      foregroundColor: fg,
      elevation: elevation,
      leading: useMergedTitle ? null : leading,
@@ -97,7 +176,6 @@ class UFAppBar extends StatelessWidget implements PreferredSizeWidget {

  @override
  Size get preferredSize => Size.fromHeight(
-    kToolbarHeight + (bottom?.preferredSize.height ?? 0.0),
-  );
+        kToolbarHeight + (bottom?.preferredSize.height ?? 0.0),
+      );
 }
-
--- a/lib/shared/design_system/components/uf_container.dart
+++ b/lib/shared/design_system/components/uf_container.dart
@@ -125,7 +125,7 @@ class UFContainer extends StatelessWidget {
      alignment: alignment,
      constraints: constraints,
      decoration: BoxDecoration(
-        color: gradient == null ? (color ?? AppColors.lightSurface) : null,
+        color: gradient == null ? (color ?? Theme.of(context).colorScheme.surface) : null,
        gradient: gradient,
        borderRadius: BorderRadius.circular(borderRadius),
        border: border,
--- a/lib/shared/design_system/components/uf_header.dart
+++ b/lib/shared/design_system/components/uf_header.dart
@@ -31,7 +31,7 @@ class UFHeader extends StatelessWidget {
      padding: const EdgeInsets.all(SpacingTokens.lg),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
-          colors: [AppColors.primaryGreen, AppColors.brandGreenLight],
+          colors: [AppColors.primary, AppColors.primaryLight],
        ),
        borderRadius: BorderRadius.circular(SpacingTokens.radiusMd),
      ),
--- a/lib/shared/design_system/components/uf_page_header.dart
+++ b/lib/shared/design_system/components/uf_page_header.dart
@@ -35,7 +35,7 @@ class UFPageHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final effectiveIconColor = iconColor ?? AppColors.primaryGreen;
+    final effectiveIconColor = iconColor ?? AppColors.primary;

    return Column(
      children: [
@@ -66,7 +66,7 @@ class UFPageHeader extends StatelessWidget {
                child: Text(
                  title,
                  style: AppTypography.headerSmall.copyWith(
-                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
                    fontWeight: FontWeight.w600,
                  ),
                ),
@@ -83,7 +83,7 @@ class UFPageHeader extends StatelessWidget {
          Divider(
            height: 1,
            thickness: 1,
-            color: isDark ? AppColors.darkBorder : AppColors.lightBorder,
+            color: isDark ? AppColors.borderDark : AppColors.border,
          ),
      ],
    );
@@ -112,7 +112,7 @@ class UFPageHeaderWithStats extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
-    final effectiveIconColor = iconColor ?? AppColors.primaryGreen;
+    final effectiveIconColor = iconColor ?? AppColors.primary;

    return Column(
      children: [
@@ -146,7 +146,7 @@ class UFPageHeaderWithStats extends StatelessWidget {
                child: Text(
                  title,
                  style: AppTypography.headerSmall.copyWith(
-                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimaryLight,
+                    color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
                    fontWeight: FontWeight.w600,
                  ),
                ),
@@ -185,14 +185,14 @@ class UFPageHeaderWithStats extends StatelessWidget {
        Divider(
          height: 1,
          thickness: 1,
-          color: isDark ? AppColors.darkBorder : AppColors.lightBorder,
+          color: isDark ? AppColors.borderDark : AppColors.border,
        ),
      ],
    );
  }

  Widget _buildStatItem(UFHeaderStat stat, bool isDark) {
-    final effectiveColor = stat.color ?? AppColors.primaryGreen;
+    final effectiveColor = stat.color ?? AppColors.primary;
    return UFContainer.rounded(
      padding: const EdgeInsets.symmetric(
        horizontal: SpacingTokens.md,
@@ -213,7 +213,7 @@ class UFPageHeaderWithStats extends StatelessWidget {
          Text(
            stat.label,
            style: AppTypography.badgeText.copyWith(
-              color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondaryLight,
+              color: isDark ? AppColors.textSecondaryDark : AppColors.textSecondary,
            ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,