added neumorphism button card sidebar and created styles folder

src/components/ui/Button.tsx

@@ -1,27 +1,20 @@
 import React, { forwardRef } from 'react';
 import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
-// 1. Dictionnaire des variantes (Sémantique de couleurs GISE)
+// Couleurs de texte pour chaque variante
 const variantStyles = {
-  primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm border border-transparent",
-  secondary: "bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-900 shadow-sm border border-transparent",
-  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 shadow-sm border border-transparent",
-  success: "bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-600 shadow-sm border border-transparent",
-  outline: "bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-900",
-  ghost: "bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-900 border border-transparent",
-};
-
-// 2. Dictionnaire des tailles
-const sizeStyles = {
-  sm: "px-3 py-1.5 text-xs",
-  md: "px-4 py-2.5 text-sm",
-  lg: "px-6 py-3 text-base w-full sm:w-auto", // w-full sur mobile par défaut, auto sur desktop
-  icon: "p-2", // Format carré optimisé pour les boutons sans texte
+  primary: "text-[#090909] dark:text-white font-bold",
+  secondary: "text-slate-500 dark:text-slate-400 font-bold",
+  danger: "text-rose-600 dark:text-rose-400 font-bold",
+  success: "text-emerald-600 dark:text-emerald-400 font-bold",
+  outline: "text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700",
+  ghost: "text-slate-600 dark:text-slate-400 border-transparent shadow-none dark:shadow-none",
 };
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: keyof typeof variantStyles;
-  size?: keyof typeof sizeStyles;
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
   isLoading?: boolean;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
@@ -43,28 +36,34 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     }, 
     ref
   ) => {
-    const newLocal = "ml-2 flex-shrink-0";
     return (
       <button
-        ref={ref} // Indispensable pour l'accessibilité ou des librairies externes
+        ref={ref}
         type={type}
         disabled={disabled || isLoading}
         className={cn(
-          // Styles de base structurels
-          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200",
-          "focus:outline-none active:scale-[0.98]",
-          "disabled:opacity-60 disabled:pointer-events-none disabled:active:scale-100",
-          // Application dynamique des dictionnaires
+          // Style de base & Neumorphism
+          "inline-flex items-center justify-center cursor-pointer outline-none transition-all duration-300 ease-in-out",
+          "bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "border border-[#e8e8e8] dark:border-[#1e293b]",
+          "hover:border-white dark:hover:border-[#2a3850]",
+          NEUMORPHISM.lightShadow,
+          NEUMORPHISM.lightActive,
+          NEUMORPHISM.darkShadow,
+          NEUMORPHISM.darkActive,
+          "disabled:opacity-50 disabled:pointer-events-none",
+          
+          // Variantes & Tailles
           variantStyles[variant],
-          sizeStyles[size],
+          NEUMORPHISM.sizeStyles[size],
           className
         )}
         {...props}
       >
-        {/* Spinner SVG optimisé pour le chargement */}
+        {/* Spinner SVG si en chargement */}
         {isLoading && (
           <svg 
-            className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" 
+            className="animate-spin -ml-1 mr-2 h-5 w-5 text-current" 
             xmlns="http://www.w3.org/2000/svg" 
             fill="none" 
             viewBox="0 0 24 24"
@@ -81,7 +80,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <span className="truncate">{children}</span>
 
         {/* Icône de droite */}
-        {rightIcon && <span className={newLocal}>{rightIcon}</span>}
+        {rightIcon && <span className="ml-2 shrink-0">{rightIcon}</span>}
       </button>
     );
   }