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.

src/components/settings/index/QuickActions.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { Card, CardContent } from '@/components/ui/Card';
+import { StatusMessage } from '@/components/ui/StatusMessage';
+import { useDesignTokens } from '@/hooks/useDesignTokens';
 
 interface Message {
   type: 'success' | 'error';
@@ -27,6 +29,7 @@ export function QuickActions({
   jiraEnabled,
   messages 
 }: QuickActionsProps) {
+  const { styles } = useDesignTokens();
   return (
     <div className="mt-8">
       <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
@@ -43,17 +46,18 @@ export function QuickActions({
                   Créer une sauvegarde des données
                 </p>
                 {messages.backup && (
-                  <p className="text-xs mt-1" style={{ 
-                    color: messages.backup.type === 'success' ? 'var(--success)' : 'var(--destructive)' 
-                  }}>
-                    {messages.backup.text}
-                  </p>
+                  <div className="mt-2">
+                    <StatusMessage type={messages.backup.type}>
+                      {messages.backup.text}
+                    </StatusMessage>
+                  </div>
                 )}
               </div>
               <button 
                 onClick={onCreateBackup}
                 disabled={isBackupLoading}
-                className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                style={styles.primaryButton}
               >
                 {isBackupLoading ? 'En cours...' : 'Sauvegarder'}
               </button>
@@ -70,17 +74,18 @@ export function QuickActions({
                   Tester la connexion Jira
                 </p>
                 {messages.jira && (
-                  <p className="text-xs mt-1" style={{ 
-                    color: messages.jira.type === 'success' ? 'var(--success)' : 'var(--destructive)' 
-                  }}>
-                    {messages.jira.text}
-                  </p>
+                  <div className="mt-2">
+                    <StatusMessage type={messages.jira.type}>
+                      {messages.jira.text}
+                    </StatusMessage>
+                  </div>
                 )}
               </div>
               <button 
                 onClick={onTestJira}
                 disabled={!jiraEnabled || isJiraTestLoading}
-                className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-3 py-1.5 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                style={styles.input}
               >
                 {isJiraTestLoading ? 'Test...' : 'Tester'}
               </button>

src/components/ui/ColoredCard.tsx

@@ -0,0 +1,57 @@
+/**
+ * Composant de carte colorée utilisant les design tokens
+ */
+
+import { ReactNode } from 'react';
+import { useDesignTokens } from '@/hooks/useDesignTokens';
+
+interface ColoredCardProps {
+  color: 'primary' | 'purple' | 'yellow' | 'green' | 'blue' | 'gray';
+  children: ReactNode;
+  className?: string;
+  hover?: boolean;
+}
+
+export function ColoredCard({ color, children, className = '', hover = true }: ColoredCardProps) {
+  const { styles } = useDesignTokens();
+  
+  const getStyle = () => {
+    switch (color) {
+      case 'primary':
+        return styles.primaryCard;
+      case 'purple':
+        return styles.purpleCard;
+      case 'yellow':
+        return styles.yellowCard;
+      case 'green':
+        return {
+          color: 'var(--green)',
+          backgroundColor: 'color-mix(in srgb, var(--green) 10%, transparent)',
+          borderColor: 'color-mix(in srgb, var(--green) 20%, var(--border))',
+        };
+      case 'blue':
+        return {
+          color: 'var(--blue)',
+          backgroundColor: 'color-mix(in srgb, var(--blue) 10%, transparent)',
+          borderColor: 'color-mix(in srgb, var(--blue) 20%, var(--border))',
+        };
+      case 'gray':
+        return {
+          color: 'var(--muted-foreground)',
+          backgroundColor: 'color-mix(in srgb, var(--muted) 10%, transparent)',
+          borderColor: 'color-mix(in srgb, var(--muted) 20%, var(--border))',
+        };
+      default:
+        return styles.primaryCard;
+    }
+  };
+  
+  return (
+    <div 
+      className={`p-4 rounded-lg border transition-all ${hover ? 'hover:shadow-sm hover:scale-[1.01]' : ''} ${className}`}
+      style={getStyle()}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/StatusMessage.tsx

@@ -0,0 +1,58 @@
+/**
+ * Composant pour afficher des messages d'état avec les design tokens
+ */
+
+import { ReactNode } from 'react';
+import { useDesignTokens } from '@/hooks/useDesignTokens';
+
+interface StatusMessageProps {
+  type: 'success' | 'error' | 'warning' | 'info';
+  children: ReactNode;
+  className?: string;
+}
+
+export function StatusMessage({ type, children, className = '' }: StatusMessageProps) {
+  const { styles } = useDesignTokens();
+  
+  const getStyle = () => {
+    switch (type) {
+      case 'success':
+        return styles.successMessage;
+      case 'error':
+        return styles.errorMessage;
+      case 'warning':
+        return styles.warningMessage;
+      case 'info':
+        return styles.primaryCard;
+      default:
+        return styles.primaryCard;
+    }
+  };
+  
+  const getIcon = () => {
+    switch (type) {
+      case 'success':
+        return '✅';
+      case 'error':
+        return '❌';
+      case 'warning':
+        return '⚠️';
+      case 'info':
+        return 'ℹ️';
+      default:
+        return 'ℹ️';
+    }
+  };
+  
+  return (
+    <div 
+      className={`p-3 rounded border ${className}`}
+      style={getStyle()}
+    >
+      <div className="flex items-center gap-2">
+        <span>{getIcon()}</span>
+        <span>{children}</span>
+      </div>
+    </div>
+  );
+}