UI: Refine Dashboard styling, fully integrate Memos-style flat UI and oklch palette

app/dashboard/src/layouts/DashboardLayout.vue

@@ -23,8 +23,9 @@ import { useDark, useToggle } from '@vueuse/core'
 const DISABLE_AUTH = import.meta.env.VITE_DISABLE_AUTH === 'true'
 const route = useRoute()
 
-// Default to LIGHT mode — set dark only if user explicitly toggled it
-const isDark = useDark({ initialValue: false })
+// Force LIGHT mode as default — useDark expects string values internally
+const isDark = useDark()
+isDark.value = false          // ← clear any cached dark from localStorage
 const toggleDark = useToggle(isDark)
 
 // ─── SVG Icon definitions ────────────────────────────

app/dashboard/src/style.css

@@ -63,72 +63,61 @@
    ══════════════════════════════════════════════════════════════════════════ */
 :root {
   color-scheme: light;
-
-  /* ── Page background: very subtle warm off-white ── */
-  --background:         oklch(0.975 0.004 80);
-  --foreground:         oklch(0.145 0.012 260);
-
-  /* ── Card: pure white with faint shadow-based depth ── */
-  --card:               oklch(1.000 0.000 0);
-  --card-foreground:    oklch(0.145 0.012 260);
-
-  /* ── Popover ── */
-  --popover:            oklch(1.000 0.000 0);
-  --popover-foreground: oklch(0.145 0.012 260);
-
-  /* ── Primary: Canifa Amber-Gold ── */
-  --primary:            oklch(0.680 0.165 55);   /* rich amber */
-  --primary-foreground: oklch(0.980 0.005 80);
-
-  /* ── Secondary ── */
-  --secondary:          oklch(0.960 0.006 248);
-  --secondary-foreground: oklch(0.280 0.010 260);
-
-  /* ── Muted: subtle grey fill ── */
-  --muted:              oklch(0.960 0.004 240);
-  --muted-foreground:   oklch(0.520 0.012 258);
-
-  /* ── Accent: very light amber tint ── */
-  --accent:             oklch(0.955 0.018 80);
-  --accent-foreground:  oklch(0.220 0.015 60);
-
-  /* ── Destructive: strong red ── */
-  --destructive:        oklch(0.577 0.245 27.3);
-  --destructive-foreground: oklch(0.980 0.005 0);
-
-  /* ── Structural ── */
-  --border:             oklch(0.912 0.006 248);
-  --input:              oklch(0.912 0.006 248);
-  --ring:               oklch(0.680 0.165 55);
-
-  /* ── Radius ── */
-  --radius: 0.625rem;
-
-  /* ── Shadows (softer, more depth) ── */
-  --shadow-2xs: 0 1px 2px 0 hsl(215 16% 47% / 0.06);
-  --shadow-xs:  0 1px 3px 0 hsl(215 16% 47% / 0.08), 0 1px 2px -1px hsl(215 16% 47% / 0.05);
-  --shadow-sm:  0 1px 4px 0 hsl(215 16% 47% / 0.1),  0 1px 3px -1px hsl(215 16% 47% / 0.06);
-  --shadow:     0 2px 8px -2px hsl(215 16% 47% / 0.1),  0 1px 3px -1px hsl(215 16% 47% / 0.08);
-  --shadow-md:  0 4px 12px -2px hsl(215 16% 47% / 0.1), 0 2px 6px -2px  hsl(215 16% 47% / 0.08);
-  --shadow-lg:  0 8px 24px -4px hsl(215 16% 47% / 0.12), 0 4px 10px -3px hsl(215 16% 47% / 0.08);
-  --shadow-xl:  0 16px 40px -6px hsl(215 16% 47% / 0.14), 0 8px 16px -5px hsl(215 16% 47% / 0.08);
-  --shadow-2xl: 0 30px 60px -12px hsl(215 16% 47% / 0.22);
+  
+  /* ── Memos Note Platform Colors (oklch) ── */
+  --background: oklch(0.9818 0.0054 95.0986);
+  --foreground: oklch(0.2438 0.0269 95.7226);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1908 0.002 106.5859);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2671 0.0196 98.939);
+  
+  --primary: oklch(0.45 0.08 250);
+  --primary-foreground: oklch(0.9818 0.0054 95.0986);
+  --secondary: oklch(0.9245 0.0138 92.9892);
+  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
+  --muted: oklch(0.9341 0.0153 90.239);
+  --muted-foreground: oklch(0.5559 0.0075 97.4233);
+  --accent: oklch(0.9245 0.0138 92.9892);
+  --accent-foreground: oklch(0.2671 0.0196 98.939);
+  
+  --destructive: oklch(0.35 0.02 250);
+  --destructive-foreground: oklch(0.95 0.005 250);
+  
+  --border: oklch(0.8847 0.0069 97.3627);
+  --input: oklch(0.7621 0.0156 98.3528);
+  --ring: oklch(0.45 0.08 250);
+  
+  /* ── Sidebar ── */
+  --sidebar: oklch(0.9663 0.008 98.8792);
+  --sidebar-foreground: oklch(0.359 0.0051 106.6524);
+  --sidebar-primary: oklch(0.45 0.08 250);
+  --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986);
+  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
+  --sidebar-accent-foreground: oklch(0.325 0 0);
+  --sidebar-border: oklch(0.9401 0 0);
+  --sidebar-ring: oklch(0.7731 0 0);
+
+  /* ── Radius & Spacing ── */
+  --radius: 0.5rem;
+  --spacing: 0.25rem;
+
+  /* ── Memos Distinct Flat Shadows ── */
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
 
   /* ── Fonts ── */
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-               "Liberation Mono", "Courier New", monospace;
-
-  /* ── Sidebar — clean white, shadcn/ui style ── */
-  --sidebar:                     oklch(0.992 0.002 240);
-  --sidebar-foreground:          oklch(0.200 0.012 260);
-  --sidebar-primary:             oklch(0.680 0.165 55);
-  --sidebar-primary-foreground:  oklch(0.980 0.005 80);
-  --sidebar-accent:              oklch(0.960 0.006 248);
-  --sidebar-accent-foreground:   oklch(0.200 0.012 260);
-  --sidebar-border:              oklch(0.920 0.006 248);
-  --sidebar-ring:                oklch(0.680 0.165 55);
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /* ══════════════════════════════════════════════════════════════════════════
@@ -307,12 +296,20 @@ input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px oklch(0.680 0.165 55 / 0.4);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
 }
 
 /* ── Badge size fix ── */
 .badge-xs { @apply text-[9px] px-1.5 py-0.5 leading-none font-bold uppercase tracking-wider rounded-full; }
 
+/* ── Memos Style: Form Transitions globally ── */
+button, a, .section-menu-item {
+  transition: all 0.15s ease;
+}
+input, textarea, select, .search-bar input {
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
 /* ── Fade transition for toasts / alerts ── */
 .fade-enter-active, .fade-leave-active { transition: opacity 0.25s, transform 0.25s; }
 .fade-enter-from { opacity: 0; transform: translateY(6px); }
@@ -320,9 +317,19 @@ select:focus-visible {
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-none ring-0;
   }
   body {
     @apply bg-background text-foreground;
   }
+
+  /* ── Overriding scrollbar thumb properly for Hex variables ── */
+  ::-webkit-scrollbar-thumb {
+    background: var(--input); 
+    border-radius: 99px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
 }
+