From 235bd6b36a28e63661123344c983f5d06ee1b3aa Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Sun, 7 Dec 2025 15:54:38 -0500
Subject: [PATCH] feat(ui): reorganize theme colors and add dev script

Move Crail from primary to accent color and promote neutral grey to primary.
Update all related color variables for both light and dark themes to maintain
visual consistency. Add new dev script to streamline development workflow.
---
 package.json     |  1 +
 ui/src/index.css | 51 ++++++++++++++++++++++++++----------------------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 773a63f2..245046e1 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "test:unit": "bun test tests/unit/",
     "test:npm": "bun test tests/npm/",
     "test:native": "bash tests/native/unix/edge-cases.sh",
+    "dev": "bun run ui:build && bun run build:server && bun dist/ccs.js config",
     "ui:dev": "cd ui && bun run dev",
     "ui:build": "cd ui && bun run build",
     "ui:preview": "cd ui && bun run preview",
diff --git a/ui/src/index.css b/ui/src/index.css
index 785b813a..91745e4a 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -4,14 +4,16 @@
 
 :root {
   /* CCS Brand Colors - Calculated from Crail, Pampas, White, Cloudy */
-  --primary: oklch(0.5971 0.1352 39.87); /* Crail */
-  --primary-foreground: oklch(1 0 0); /* White */
+  /* Primary: Neutral (Dark Warm Grey) - Demoted Crail from Primary */
+  --primary: oklch(0.2 0.02 40);
+  --primary-foreground: oklch(0.9635 0.0067 97.35); /* Pampas */
 
   --secondary: oklch(0.9 0.01 95); /* Light Cloudy */
   --secondary-foreground: oklch(0.2 0.02 40);
 
-  --accent: oklch(0.92 0.01 95); /* Soft warm accent */
-  --accent-foreground: oklch(0.2 0.02 40);
+  /* Accent: Crail (Moved from Primary) */
+  --accent: oklch(0.5971 0.1352 39.87); /* Crail */
+  --accent-foreground: oklch(1 0 0); /* White */
 
   --background: oklch(0.9635 0.0067 97.35); /* Pampas */
   --foreground: oklch(0.2 0.02 40); /* Dark warm grey */
@@ -22,26 +24,28 @@
   --border: oklch(0.85 0.015 91.6); /* Based on Cloudy */
   --input: oklch(0.85 0.015 91.6);
 
-  --ring: oklch(0.5971 0.1352 39.87); /* Crail */
+  --ring: oklch(0.2 0.02 40); /* Match primary */
   --radius: 0.5rem;
 
   /* Sidebar colors - Light */
   --sidebar: oklch(0.9635 0.0067 97.35); /* Pampas */
   --sidebar-foreground: oklch(0.2 0.02 40);
-  --sidebar-primary: oklch(0.5971 0.1352 39.87); /* Crail */
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.92 0.01 95);
-  --sidebar-accent-foreground: oklch(0.2 0.02 40);
+  --sidebar-primary: oklch(0.2 0.02 40); /* Neutral */
+  --sidebar-primary-foreground: oklch(0.9635 0.0067 97.35);
+  --sidebar-accent: oklch(0.5971 0.1352 39.87); /* Crail */
+  --sidebar-accent-foreground: oklch(1 0 0);
   --sidebar-border: oklch(0.85 0.015 91.6);
-  --sidebar-ring: oklch(0.5971 0.1352 39.87);
+  --sidebar-ring: oklch(0.2 0.02 40);
 }
 
 .dark {
-  /* Dark Theme - Complementary to Crail/Pampas */
-  --primary: oklch(0.65 0.14 39.87); /* Slightly lighter Crail for dark mode */
-  --primary-foreground: oklch(1 0 0);
+  /* Dark Theme */
+  /* Primary: Neutral (Pampas) */
+  --primary: oklch(0.9635 0.0067 97.35);
+  --primary-foreground: oklch(0.2 0.02 40);
 
-  --background: oklch(0.14 0.01 40); /* Deep warm charcoal */
+  /* Background: RGB(38, 38, 36) -> approx oklch(0.21 0.006 100) */
+  --background: oklch(0.21 0.006 100);
   --foreground: oklch(0.9635 0.0067 97.35); /* Pampas */
 
   --secondary: oklch(0.25 0.01 40);
@@ -50,23 +54,24 @@
   --muted: oklch(0.25 0.01 40);
   --muted-foreground: oklch(0.7 0.01 40);
 
-  --accent: oklch(0.25 0.01 40);
-  --accent-foreground: oklch(0.96 0.007 97);
+  /* Accent: Crail */
+  --accent: oklch(0.65 0.14 39.87);
+  --accent-foreground: oklch(1 0 0);
 
   --border: oklch(0.25 0.01 40);
   --input: oklch(0.25 0.01 40);
 
-  --ring: oklch(0.65 0.14 39.87);
+  --ring: oklch(0.9635 0.0067 97.35);
 
   /* Sidebar Dark Theme */
-  --sidebar: oklch(0.12 0.01 40); /* Slightly darker than bg */
+  --sidebar: oklch(0.21 0.006 100); /* Match bg */
   --sidebar-foreground: oklch(0.9635 0.0067 97.35);
-  --sidebar-primary: oklch(0.65 0.14 39.87);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.25 0.01 40);
-  --sidebar-accent-foreground: oklch(0.9635 0.0067 97.35);
+  --sidebar-primary: oklch(0.9635 0.0067 97.35);
+  --sidebar-primary-foreground: oklch(0.2 0.02 40);
+  --sidebar-accent: oklch(0.65 0.14 39.87);
+  --sidebar-accent-foreground: oklch(1 0 0);
   --sidebar-border: oklch(0.25 0.01 40);
-  --sidebar-ring: oklch(0.65 0.14 39.87);
+  --sidebar-ring: oklch(0.9635 0.0067 97.35);
 }
 
 @theme inline {