feat: improve theme selector and UI components

- Updated `ThemeSelector` to use a new `ThemePreview` component for better theme visualization.
- Refactored button implementation in `ThemeSelector` to utilize the new `Button` component, enhancing consistency.
- Added a UI showcase section in `GeneralSettingsPageClient` to display available UI components with different themes.
- Enhanced `Badge`, `Button`, and `Input` components with new variants and improved styling for better usability and visual appeal.
- Updated CSS variables in `globals.css` for improved contrast and accessibility across themes.

src/components/ui/Alert.tsx

@@ -0,0 +1,58 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'success' | 'destructive' | 'warning' | 'info';
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = 'default', ...props }, ref) => {
+    const variants = {
+      default: 'bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)]',
+      success: 'bg-[color-mix(in_srgb,var(--success)_10%,transparent)] text-[var(--success)] border border-[color-mix(in_srgb,var(--success)_20%,var(--border))]',
+      destructive: 'bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] text-[var(--destructive)] border border-[color-mix(in_srgb,var(--destructive)_20%,var(--border))]',
+      warning: 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] text-[var(--accent)] border border-[color-mix(in_srgb,var(--accent)_20%,var(--border))]',
+      info: 'bg-[color-mix(in_srgb,var(--primary)_10%,transparent)] text-[var(--primary)] border border-[color-mix(in_srgb,var(--primary)_20%,var(--border))]'
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative w-full rounded-lg border p-4',
+          variants[variant],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
+
+const AlertTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-sm [&_p]:leading-relaxed', className)}
+      {...props}
+    />
+  )
+);
+
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/Badge.tsx

@@ -1,38 +1,33 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
-interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';
-  size?: 'sm' | 'md';
+interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'primary' | 'success' | 'destructive' | 'accent' | 'purple' | 'yellow' | 'green' | 'blue' | 'gray';
 }
 
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
-    const baseStyles = 'inline-flex items-center font-mono font-medium transition-all duration-200';
-    
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant = 'default', ...props }, ref) => {
     const variants = {
-      default: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)]',
-      primary: 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30',
-      success: 'bg-[var(--success)]/20 text-[var(--success)] border border-[var(--success)]/30',
-      warning: 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30',
-      danger: 'bg-[var(--destructive)]/20 text-[var(--destructive)] border border-[var(--destructive)]/30',
-      outline: 'bg-transparent text-[var(--muted-foreground)] border border-[var(--border)] hover:bg-[var(--card-hover)] hover:text-[var(--foreground)]'
+      default: 'bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)]',
+      primary: 'bg-[color-mix(in_srgb,var(--primary)_10%,transparent)] text-[var(--primary)] border border-[color-mix(in_srgb,var(--primary)_25%,var(--border))]',
+      success: 'bg-[color-mix(in_srgb,var(--success)_10%,transparent)] text-[var(--success)] border border-[color-mix(in_srgb,var(--success)_25%,var(--border))]',
+      destructive: 'bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] text-[var(--destructive)] border border-[color-mix(in_srgb,var(--destructive)_25%,var(--border))]',
+      accent: 'bg-[color-mix(in_srgb,var(--accent)_10%,transparent)] text-[var(--accent)] border border-[color-mix(in_srgb,var(--accent)_25%,var(--border))]',
+      purple: 'bg-[color-mix(in_srgb,var(--purple)_10%,transparent)] text-[var(--purple)] border border-[color-mix(in_srgb,var(--purple)_25%,var(--border))]',
+      yellow: 'bg-[color-mix(in_srgb,var(--yellow)_10%,transparent)] text-[var(--yellow)] border border-[color-mix(in_srgb,var(--yellow)_25%,var(--border))]',
+      green: 'bg-[color-mix(in_srgb,var(--green)_10%,transparent)] text-[var(--green)] border border-[color-mix(in_srgb,var(--green)_25%,var(--border))]',
+      blue: 'bg-[color-mix(in_srgb,var(--blue)_10%,transparent)] text-[var(--blue)] border border-[color-mix(in_srgb,var(--blue)_25%,var(--border))]',
+      gray: 'bg-[color-mix(in_srgb,var(--gray)_10%,transparent)] text-[var(--gray)] border border-[color-mix(in_srgb,var(--gray)_25%,var(--border))]'
     };
-    
-    const sizes = {
-      sm: 'px-1.5 py-0.5 text-xs rounded',
-      md: 'px-2 py-1 text-xs rounded-md'
-    };
-    
+
     return (
-      <span
+      <div
+        ref={ref}
         className={cn(
-          baseStyles,
+          'inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors',
           variants[variant],
-          sizes[size],
           className
         )}
-        ref={ref}
         {...props}
       />
     );
@@ -41,4 +36,4 @@ const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
 
 Badge.displayName = 'Badge';
 
-export { Badge };
+export { Badge };

src/components/ui/Button.tsx

@@ -2,36 +2,36 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'success' | 'selected';
   size?: 'sm' | 'md' | 'lg';
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
-    const baseStyles = 'inline-flex items-center justify-center font-mono font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[var(--background)] disabled:opacity-50 disabled:cursor-not-allowed';
-    
     const variants = {
-      primary: 'bg-[var(--primary)] hover:bg-[var(--primary)]/80 text-[var(--primary-foreground)] border border-[var(--primary)]/30 shadow-[var(--primary)]/20 shadow-lg hover:shadow-[var(--primary)]/30 focus:ring-[var(--primary)]',
-      secondary: 'bg-[var(--card)] hover:bg-[var(--card-hover)] text-[var(--foreground)] border border-[var(--border)] shadow-[var(--muted)]/20 shadow-lg hover:shadow-[var(--muted)]/30 focus:ring-[var(--muted)]',
-      danger: 'bg-[var(--destructive)] hover:bg-[var(--destructive)]/80 text-white border border-[var(--destructive)]/30 shadow-[var(--destructive)]/20 shadow-lg hover:shadow-[var(--destructive)]/30 focus:ring-[var(--destructive)]',
-      ghost: 'bg-transparent hover:bg-[var(--card)]/50 text-[var(--muted-foreground)] hover:text-[var(--foreground)] border border-[var(--border)]/50 hover:border-[var(--border)] focus:ring-[var(--muted)]'
+      primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[color-mix(in_srgb,var(--primary)_90%,transparent)]',
+      secondary: 'bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] hover:bg-[var(--card-hover)]',
+      ghost: 'text-[var(--foreground)] hover:bg-[var(--card-hover)]',
+      destructive: 'bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_90%,transparent)]',
+      success: 'bg-[var(--success)] text-white hover:bg-[color-mix(in_srgb,var(--success)_90%,transparent)]',
+      selected: 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)] hover:bg-[color-mix(in_srgb,var(--primary)_20%,transparent)]'
     };
-    
+
     const sizes = {
-      sm: 'px-3 py-1.5 text-xs rounded-md',
-      md: 'px-4 py-2 text-sm rounded-lg',
-      lg: 'px-6 py-3 text-base rounded-lg'
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2 text-sm',
+      lg: 'px-6 py-3 text-base'
     };
-    
+
     return (
       <button
+        ref={ref}
         className={cn(
-          baseStyles,
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primary)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
           variants[variant],
           sizes[size],
           className
         )}
-        ref={ref}
         {...props}
       />
     );
@@ -40,4 +40,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
 Button.displayName = 'Button';
 
-export { Button };
+export { Button };

src/components/ui/Input.tsx

@@ -2,43 +2,31 @@ import { InputHTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
+  variant?: 'default' | 'error';
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, label, error, ...props }, ref) => {
+  ({ className, variant = 'default', type, ...props }, ref) => {
+    const variants = {
+      default: 'border border-[var(--border)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--primary)]/70 focus:ring-1 focus:ring-[var(--primary)]/20',
+      error: 'border border-[var(--destructive)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--destructive)]/70 focus:ring-1 focus:ring-[var(--destructive)]/20'
+    };
+
     return (
-      <div className="space-y-2">
-        {label && (
-          <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
-            {label}
-          </label>
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
+          variants[variant],
+          className
         )}
-        <input
-          className={cn(
-            'w-full px-3 py-2 bg-[var(--input)] border border-[var(--border)]/50 rounded-lg',
-            'text-[var(--foreground)] font-mono text-sm placeholder-[var(--muted-foreground)]',
-            'focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50',
-            'hover:border-[var(--border)] transition-all duration-200',
-            'backdrop-blur-sm',
-            error && 'border-[var(--destructive)]/50 focus:ring-[var(--destructive)]/50 focus:border-[var(--destructive)]/50',
-            className
-          )}
-          ref={ref}
-          {...props}
-        />
-        {error && (
-          <p className="text-xs font-mono text-[var(--destructive)] flex items-center gap-1">
-            <span className="text-[var(--destructive)]">⚠</span>
-            {error}
-          </p>
-        )}
-      </div>
+        ref={ref}
+        {...props}
+      />
     );
   }
 );
 
 Input.displayName = 'Input';
 
-export { Input };
+export { Input };

src/components/ui/StyledCard.tsx

@@ -0,0 +1,49 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface StyledCardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'outline' | 'elevated' | 'bordered' | 'column';
+  color?: 'default' | 'primary' | 'success' | 'destructive' | 'accent' | 'purple' | 'yellow' | 'green' | 'blue' | 'gray';
+}
+
+const StyledCard = forwardRef<HTMLDivElement, StyledCardProps>(
+  ({ className, variant = 'default', color = 'default', ...props }, ref) => {
+    const variants = {
+      default: 'bg-[var(--card)]/50 border border-[var(--border)]/50',
+      outline: 'bg-transparent border border-[var(--border)]',
+      elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20',
+      bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg',
+      column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20'
+    };
+
+    const colors = {
+      default: '',
+      primary: 'bg-[color-mix(in_srgb,var(--primary)_8%,transparent)] border-[color-mix(in_srgb,var(--primary)_25%,var(--border))] text-[var(--primary)]',
+      success: 'bg-[color-mix(in_srgb,var(--success)_8%,transparent)] border-[color-mix(in_srgb,var(--success)_25%,var(--border))] text-[var(--success)]',
+      destructive: 'bg-[color-mix(in_srgb,var(--destructive)_8%,transparent)] border-[color-mix(in_srgb,var(--destructive)_25%,var(--border))] text-[var(--destructive)]',
+      accent: 'bg-[color-mix(in_srgb,var(--accent)_8%,transparent)] border-[color-mix(in_srgb,var(--accent)_25%,var(--border))] text-[var(--accent)]',
+      purple: 'bg-[color-mix(in_srgb,var(--purple)_8%,transparent)] border-[color-mix(in_srgb,var(--purple)_25%,var(--border))] text-[var(--purple)]',
+      yellow: 'bg-[color-mix(in_srgb,var(--yellow)_8%,transparent)] border-[color-mix(in_srgb,var(--yellow)_25%,var(--border))] text-[var(--yellow)]',
+      green: 'bg-[color-mix(in_srgb,var(--green)_8%,transparent)] border-[color-mix(in_srgb,var(--green)_25%,var(--border))] text-[var(--green)]',
+      blue: 'bg-[color-mix(in_srgb,var(--blue)_8%,transparent)] border-[color-mix(in_srgb,var(--blue)_25%,var(--border))] text-[var(--blue)]',
+      gray: 'bg-[color-mix(in_srgb,var(--gray)_8%,transparent)] border-[color-mix(in_srgb,var(--gray)_25%,var(--border))] text-[var(--gray)]'
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-lg backdrop-blur-sm transition-all duration-200',
+          variants[variant],
+          colors[color],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+StyledCard.displayName = 'StyledCard';
+
+export { StyledCard };

src/components/ui/index.ts

@@ -0,0 +1,11 @@
+// Composants UI de base
+export { Button } from './Button';
+export { Badge } from './Badge';
+export { Alert, AlertTitle, AlertDescription } from './Alert';
+export { Input } from './Input';
+export { StyledCard } from './StyledCard';
+
+// Composants existants
+export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './Card';
+export { Header } from './Header';
+export { FontSizeToggle } from './FontSizeToggle';