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/app/globals.css

@@ -34,7 +34,7 @@
   --border: #64748b; /* slate-500 - encore plus clair */
   --input: #334155; /* slate-700 - plus clair */
   --primary: #06b6d4; /* cyan-500 */
-  --primary-foreground: #f1f5f9; /* slate-100 */
+  --primary-foreground: #ffffff; /* white - better contrast with cyan */
   --muted: #64748b; /* slate-500 */
   --muted-foreground: #94a3b8; /* slate-400 */
   --accent: #f59e0b; /* amber-500 */
@@ -58,7 +58,7 @@
   --border: #6272a4; /* dracula comment */
   --input: #44475a; /* dracula current line */
   --primary: #ff79c6; /* dracula pink */
-  --primary-foreground: #282a36; /* dracula background */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #6272a4; /* dracula comment */
   --muted-foreground: #50fa7b; /* dracula green */
   --accent: #ffb86c; /* dracula orange */
@@ -82,7 +82,7 @@
   --border: #49483e; /* monokai line */
   --input: #3e3d32; /* monokai selection */
   --primary: #f92672; /* monokai pink */
-  --primary-foreground: #272822; /* monokai background */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #75715e; /* monokai comment */
   --muted-foreground: #a6e22e; /* monokai green */
   --accent: #fd971f; /* monokai orange */
@@ -106,7 +106,7 @@
   --border: #4c566a; /* nord3 */
   --input: #3b4252; /* nord1 */
   --primary: #88c0d0; /* nord7 */
-  --primary-foreground: #2e3440; /* nord0 */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #4c566a; /* nord3 */
   --muted-foreground: #81a1c1; /* nord9 */
   --accent: #d08770; /* nord12 */
@@ -130,7 +130,7 @@
   --border: #665c54; /* gruvbox bg3 */
   --input: #3c3836; /* gruvbox bg1 */
   --primary: #fe8019; /* gruvbox orange */
-  --primary-foreground: #282828; /* gruvbox bg0 */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #665c54; /* gruvbox bg3 */
   --muted-foreground: #a89984; /* gruvbox gray */
   --accent: #fabd2f; /* gruvbox yellow */
@@ -154,7 +154,7 @@
   --border: #565f89; /* tokyo-night comment */
   --input: #24283b; /* tokyo-night bg_highlight */
   --primary: #7aa2f7; /* tokyo-night blue */
-  --primary-foreground: #1a1b26; /* tokyo-night bg */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #565f89; /* tokyo-night comment */
   --muted-foreground: #9aa5ce; /* tokyo-night fg_dark */
   --accent: #ff9e64; /* tokyo-night orange */
@@ -178,7 +178,7 @@
   --border: #6c7086; /* catppuccin overlay0 */
   --input: #313244; /* catppuccin surface0 */
   --primary: #cba6f7; /* catppuccin mauve */
-  --primary-foreground: #1e1e2e; /* catppuccin base */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #6c7086; /* catppuccin overlay0 */
   --muted-foreground: #a6adc8; /* catppuccin subtext0 */
   --accent: #fab387; /* catppuccin peach */
@@ -202,7 +202,7 @@
   --border: #6e6a86; /* rose-pine muted */
   --input: #26233a; /* rose-pine surface */
   --primary: #c4a7e7; /* rose-pine iris */
-  --primary-foreground: #191724; /* rose-pine base */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #6e6a86; /* rose-pine muted */
   --muted-foreground: #908caa; /* rose-pine subtle */
   --accent: #f6c177; /* rose-pine gold */
@@ -226,7 +226,7 @@
   --border: #5c6370; /* one-dark bg3 */
   --input: #3e4451; /* one-dark bg1 */
   --primary: #61afef; /* one-dark blue */
-  --primary-foreground: #282c34; /* one-dark bg */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #5c6370; /* one-dark bg3 */
   --muted-foreground: #828997; /* one-dark gray */
   --accent: #e06c75; /* one-dark red */
@@ -250,7 +250,7 @@
   --border: #3c3c3c; /* material outline */
   --input: #1e1e1e; /* material surface */
   --primary: #bb86fc; /* material primary */
-  --primary-foreground: #121212; /* material bg */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #3c3c3c; /* material outline */
   --muted-foreground: #b3b3b3; /* material on-surface-variant */
   --accent: #ffab40; /* material secondary */
@@ -274,7 +274,7 @@
   --border: #586e75; /* solarized base01 */
   --input: #073642; /* solarized base02 */
   --primary: #268bd2; /* solarized blue */
-  --primary-foreground: #002b36; /* solarized base03 */
+  --primary-foreground: #ffffff; /* white for contrast */
   --muted: #586e75; /* solarized base01 */
   --muted-foreground: #657b83; /* solarized base00 */
   --accent: #b58900; /* solarized yellow */

src/app/ui-showcase/page.tsx

@@ -0,0 +1,5 @@
+import { UIShowcaseClient } from '@/components/ui-showcase/UIShowcaseClient';
+
+export default function UIShowcasePage() {
+  return <UIShowcaseClient />;
+}