tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 20:17:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): reorganize theme colors and add dev script

Browse Source 
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.
This commit is contained in:
kaitranntt
2025-12-07 15:54:38 -05:00
parent b5f22e415b
commit 235bd6b36a
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -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",
ui/src/index.css
+28 -23
View File
@@ -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 {