feat: update TODO and enhance design token integration

- Marked hydration issues and design system tasks as complete in TODO.md, reflecting progress on theme optimization. - Added documentation for CSS variables in globals.css to guide future color modifications using design tokens. - Refactored QuickActions component to utilize StatusMessage for better message display and applied design tokens for button styles, improving UI consistency.
2025-09-28 10:21:39 +02:00
parent b5d6967fcd
commit aa348a0f82
8 changed files with 696 additions and 14 deletions
--- a/src/hooks/useDesignTokens.ts
+++ b/src/hooks/useDesignTokens.ts
@@ -0,0 +1,112 @@
+/**
+ * Hook pour utiliser les design tokens dans les composants
+ */
+
+import { useTheme } from '@/contexts/ThemeContext';
+import { DesignTokenUtils, COLOR_PATTERNS, OPACITY } from '@/lib/design-tokens';
+
+export function useDesignTokens() {
+  const { theme } = useTheme();
+  
+  return {
+    theme,
+    
+    // Utilitaires de couleur
+    withOpacity: DesignTokenUtils.withOpacity,
+    borderWithOpacity: DesignTokenUtils.borderWithOpacity,
+    backgroundWithOpacity: DesignTokenUtils.backgroundWithOpacity,
+    
+    // Patterns prédéfinis
+    patterns: COLOR_PATTERNS,
+    
+    // Opacités courantes
+    opacity: OPACITY,
+    
+    // Couleurs CSS Variables (pour usage direct)
+    colors: {
+      background: 'var(--background)',
+      foreground: 'var(--foreground)',
+      card: 'var(--card)',
+      cardHover: 'var(--card-hover)',
+      cardColumn: 'var(--card-column)',
+      border: 'var(--border)',
+      input: 'var(--input)',
+      primary: 'var(--primary)',
+      primaryForeground: 'var(--primary-foreground)',
+      muted: 'var(--muted)',
+      mutedForeground: 'var(--muted-foreground)',
+      destructive: 'var(--destructive)',
+      success: 'var(--success)',
+      accent: 'var(--accent)',
+      purple: 'var(--purple)',
+      yellow: 'var(--yellow)',
+      green: 'var(--green)',
+      blue: 'var(--blue)',
+      gray: 'var(--gray)',
+      grayLight: 'var(--gray-light)',
+    },
+    
+    // Styles prédéfinis pour les composants courants
+    styles: {
+      // Messages d'état
+      successMessage: {
+        color: COLOR_PATTERNS.success.text,
+        backgroundColor: COLOR_PATTERNS.success.background,
+        borderColor: COLOR_PATTERNS.success.border,
+      },
+      errorMessage: {
+        color: COLOR_PATTERNS.error.text,
+        backgroundColor: COLOR_PATTERNS.error.background,
+        borderColor: COLOR_PATTERNS.error.border,
+      },
+      warningMessage: {
+        color: COLOR_PATTERNS.warning.text,
+        backgroundColor: COLOR_PATTERNS.warning.background,
+        borderColor: COLOR_PATTERNS.warning.border,
+      },
+      
+      // Cards colorées
+      primaryCard: {
+        color: COLOR_PATTERNS.primary.text,
+        backgroundColor: COLOR_PATTERNS.primary.background,
+        borderColor: COLOR_PATTERNS.primary.border,
+      },
+      purpleCard: {
+        color: COLOR_PATTERNS.purple.text,
+        backgroundColor: COLOR_PATTERNS.purple.background,
+        borderColor: COLOR_PATTERNS.purple.border,
+      },
+      yellowCard: {
+        color: COLOR_PATTERNS.yellow.text,
+        backgroundColor: COLOR_PATTERNS.yellow.background,
+        borderColor: COLOR_PATTERNS.yellow.border,
+      },
+      
+      // Boutons
+      primaryButton: {
+        backgroundColor: 'var(--primary)',
+        color: 'var(--primary-foreground)',
+        borderColor: 'var(--primary)',
+      },
+      destructiveButton: {
+        backgroundColor: 'var(--destructive)',
+        color: 'white',
+        borderColor: 'var(--destructive)',
+      },
+      
+      // Inputs
+      input: {
+        backgroundColor: 'var(--input)',
+        borderColor: 'var(--border)',
+        color: 'var(--foreground)',
+      },
+      
+      // Scrollbars
+      scrollbar: {
+        track: 'var(--card)',
+        thumb: 'var(--muted)',
+        thumbHover: 'var(--primary)',
+      },
+    },
+  };
+}