aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): light/dark theme toggle and light mode color support

Browse Source 
Add ThemeContext with localStorage persistence and FOUC-preventing
inline script. Add theme toggle button in sidebar. Update status
badges, toast notifications, live indicators, and approval cards
with dark: prefixed classes for proper light mode rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-26 16:33:29 -06:00
parent e2c5b6698c
commit 5cd12dec89
13 changed files with 245 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
ui/src/lib/status-colors.ts
View File

@@ -12,12 +12,12 @@
/** StatusIcon circle: text + border classes */
export const issueStatusIcon: Record<string, string> = {
backlog: "text-muted-foreground border-muted-foreground",
todo: "text-blue-400 border-blue-400",
in_progress: "text-yellow-400 border-yellow-400",
in_review: "text-violet-400 border-violet-400",
done: "text-green-400 border-green-400",
todo: "text-blue-600 border-blue-600 dark:text-blue-400 dark:border-blue-400",
in_progress: "text-yellow-600 border-yellow-600 dark:text-yellow-400 dark:border-yellow-400",
in_review: "text-violet-600 border-violet-600 dark:text-violet-400 dark:border-violet-400",
done: "text-green-600 border-green-600 dark:text-green-400 dark:border-green-400",
cancelled: "text-neutral-500 border-neutral-500",
blocked: "text-red-400 border-red-400",
blocked: "text-red-600 border-red-600 dark:text-red-400 dark:border-red-400",
};
export const issueStatusIconDefault = "text-muted-foreground border-muted-foreground";
@@ -25,12 +25,12 @@ export const issueStatusIconDefault = "text-muted-foreground border-muted-foregr
/** Text-only color for issue statuses (dropdowns, labels) */
export const issueStatusText: Record<string, string> = {
backlog: "text-muted-foreground",
todo: "text-blue-400",
in_progress: "text-yellow-400",
in_review: "text-violet-400",
done: "text-green-400",
todo: "text-blue-600 dark:text-blue-400",
in_progress: "text-yellow-600 dark:text-yellow-400",
in_review: "text-violet-600 dark:text-violet-400",
done: "text-green-600 dark:text-green-400",
cancelled: "text-neutral-500",
blocked: "text-red-400",
blocked: "text-red-600 dark:text-red-400",
};
export const issueStatusTextDefault = "text-muted-foreground";
@@ -41,42 +41,42 @@ export const issueStatusTextDefault = "text-muted-foreground";
export const statusBadge: Record<string, string> = {
// Agent statuses
active: "bg-green-900/50 text-green-300",
running: "bg-cyan-900/50 text-cyan-300",
paused: "bg-orange-900/50 text-orange-300",
idle: "bg-yellow-900/50 text-yellow-300",
archived: "bg-neutral-800 text-neutral-400",
active: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
running: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300",
paused: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300",
idle: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
archived: "bg-muted text-muted-foreground",
// Goal statuses
planned: "bg-neutral-800 text-neutral-400",
achieved: "bg-green-900/50 text-green-300",
completed: "bg-green-900/50 text-green-300",
planned: "bg-muted text-muted-foreground",
achieved: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
completed: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
// Run statuses
failed: "bg-red-900/50 text-red-300",
timed_out: "bg-orange-900/50 text-orange-300",
succeeded: "bg-green-900/50 text-green-300",
error: "bg-red-900/50 text-red-300",
terminated: "bg-red-900/50 text-red-300",
pending: "bg-yellow-900/50 text-yellow-300",
failed: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
timed_out: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300",
succeeded: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
error: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
terminated: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
pending: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
// Approval statuses
pending_approval: "bg-amber-900/50 text-amber-300",
revision_requested: "bg-amber-900/50 text-amber-300",
approved: "bg-green-900/50 text-green-300",
rejected: "bg-red-900/50 text-red-300",
pending_approval: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
revision_requested: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
approved: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
rejected: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
// Issue statuses — consistent hues with issueStatusIcon above
backlog: "bg-neutral-800 text-neutral-400",
todo: "bg-blue-900/50 text-blue-300",
in_progress: "bg-yellow-900/50 text-yellow-300",
in_review: "bg-violet-900/50 text-violet-300",
blocked: "bg-red-900/50 text-red-300",
done: "bg-green-900/50 text-green-300",
cancelled: "bg-neutral-800 text-neutral-500",
backlog: "bg-muted text-muted-foreground",
todo: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300",
in_progress: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300",
in_review: "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300",
blocked: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
done: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
cancelled: "bg-muted text-muted-foreground",
};
export const statusBadgeDefault = "bg-neutral-800 text-neutral-400";
export const statusBadgeDefault = "bg-muted text-muted-foreground";
// ---------------------------------------------------------------------------
// Agent status dot — solid background for small indicator dots
@@ -99,10 +99,10 @@ export const agentStatusDotDefault = "bg-neutral-400";
// ---------------------------------------------------------------------------
export const priorityColor: Record<string, string> = {
critical: "text-red-400",
high: "text-orange-400",
medium: "text-yellow-400",
low: "text-blue-400",
critical: "text-red-600 dark:text-red-400",
high: "text-orange-600 dark:text-orange-400",
medium: "text-yellow-600 dark:text-yellow-400",
low: "text-blue-600 dark:text-blue-400",
};
export const priorityColorDefault = "text-yellow-400";
export const priorityColorDefault = "text-yellow-600 dark:text-yellow-400";