1.1.4 - Design tweaks

frontend/src/lib/components/ui/button/Button.svelte

@@ -6,22 +6,22 @@
   const dispatch = createEventDispatcher()
 
   const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 active:scale-[0.97]',
     {
       variants: {
         variant: {
-          default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-          secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-          outline: 'border border-input bg-background hover:bg-accent/10 hover:text-foreground',
-          ghost: 'hover:bg-accent/10 hover:text-foreground',
-          link: 'text-primary underline-offset-4 hover:underline',
-          destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          default:     'bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_1px_3px_rgba(0,0,0,0.3)]',
+          secondary:   'bg-secondary text-secondary-foreground border border-border hover:bg-bg-hover hover:text-foreground',
+          outline:     'border border-border bg-transparent hover:bg-white/5 hover:text-foreground',
+          ghost:       'hover:bg-white/6 hover:text-foreground',
+          link:        'text-accent underline-offset-4 hover:underline',
+          destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/85 shadow-[0_1px_3px_rgba(0,0,0,0.3)]',
         },
         size: {
           default: 'h-10 px-4 py-2',
-          sm: 'h-9 px-3',
-          lg: 'h-11 px-6',
-          icon: 'h-10 w-10',
+          sm:      'h-8 px-3 text-xs rounded-lg',
+          lg:      'h-11 px-6',
+          icon:    'h-10 w-10',
         },
       },
       defaultVariants: {

frontend/src/lib/components/ui/card/Card.svelte

@@ -22,7 +22,7 @@
 
 <div
   class={cn(
-    'rounded-lg border border-border bg-card text-card-foreground shadow-sm',
+    'rounded-xl border border-border bg-card text-card-foreground shadow-[0_2px_8px_rgba(0,0,0,0.3),0_0_0_1px_rgba(255,255,255,0.04)]',
     showSkeleton ? 'relative overflow-hidden' : '',
     className,
     restClass
@@ -31,6 +31,6 @@
 >
   <slot />
   {#if showSkeleton}
-    <div class="pointer-events-none absolute inset-0 bg-[color:var(--bg-hover)] opacity-40 animate-pulse"></div>
+    <div class="pointer-events-none absolute inset-0 bg-[color:var(--bg-hover)] opacity-30 animate-pulse rounded-xl"></div>
   {/if}
 </div>

frontend/src/lib/themeStore.js

@@ -2,28 +2,28 @@ import { writable } from 'svelte/store'
 
 export const themes = {
   oled: {
-    name: 'OLED',
+    name: 'Midnight',
     colors: {
-      // Backgrounds (true OLED but layered)
-      'bg-primary': '#000000',
-      'bg-secondary': '#1a1a1a',
-      'bg-card': '#0b0b0b',
-      'bg-hover': '#2a2a2a',
+      // Midnight backgrounds — sophisticated dark, not pure black
+      'bg-primary': '#0d0e11',
+      'bg-secondary': '#13141a',
+      'bg-card': '#17181f',
+      'bg-hover': '#1e2028',
 
-      // Text
-      'text-primary': '#ffffff',
-      'text-secondary': '#b0b0b0',
-      'text-tertiary': '#7a7a7a',
+      // Text — slightly warm off-white with clear hierarchy
+      'text-primary': '#edeef3',
+      'text-secondary': '#888ba8',
+      'text-tertiary': '#50526b',
 
       // UI chrome
       'border': 'rgba(255, 255, 255, 0.08)',
 
       // Accents & interaction
-      'accent': '#3b82f6',                 // restrained blue
-      'button-bg': '#0f0f0f',
-      'button-hover': '#1a1a1a',
-      'button-text': '#ffffff',
-      'focus-ring': 'rgba(255, 255, 255, 0.25)',
+      'accent': '#a5b4fc',              // soft indigo for links/highlights
+      'button-bg': '#1a1b22',
+      'button-hover': '#1e2028',
+      'button-text': '#edeef3',
+      'focus-ring': 'rgba(165, 180, 252, 0.35)',
     }
   },
 
@@ -42,36 +42,36 @@ export const themes = {
       'text-tertiary': '#6f8fb6',
 
       // Borders
-      'border': 'rgba(120, 170, 220, 0.18)',
+      'border': 'rgba(120, 170, 220, 0.15)',
 
-      // Accents & interaction (this is the magic)
+      // Accents & interaction
       'accent': '#5fa8ff',                  // beautiful ocean blue
       'button-bg': '#132646',
       'button-hover': '#1b3560',
       'button-text': '#eaf3ff',
-      'focus-ring': 'rgba(95, 168, 255, 0.45)',
+      'focus-ring': 'rgba(95, 168, 255, 0.4)',
     }
   },
 
   light: {
     name: 'Light',
     colors: {
-      'bg-primary': '#f8f9fa',
-      'bg-secondary': '#f1f3f5',
+      'bg-primary': '#f6f7f9',
+      'bg-secondary': '#eef0f3',
       'bg-card': '#ffffff',
-      'bg-hover': '#e9ecef',
+      'bg-hover': '#e8eaee',
 
-      'text-primary': '#1a1a1a',
-      'text-secondary': '#5c5f66',
-      'text-tertiary': '#868e96',
+      'text-primary': '#111318',
+      'text-secondary': '#5c5f73',
+      'text-tertiary': '#9094aa',
 
-      'border': '#dee2e6',
+      'border': 'rgba(0, 0, 0, 0.08)',
 
-      'accent': '#2563eb',
+      'accent': '#4f46e5',               // indigo accent
       'button-bg': '#ffffff',
-      'button-hover': '#f1f3f5',
-      'button-text': '#1a1a1a',
-      'focus-ring': 'rgba(37, 99, 235, 0.35)',
+      'button-hover': '#f0f1f5',
+      'button-text': '#111318',
+      'focus-ring': 'rgba(79, 70, 229, 0.3)',
     }
   }
 }