From a9ae7c65c387bcf144de8df0a13dbbfd7496cc1e Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 15:21:27 -0800
Subject: Restyle UI with light/dark theme support

- Add light/dark theme toggle with localStorage persistence
- Add 'Claude Flow' wordmark in header
- Switch to monospace font (SF Mono, Cascadia Code, etc.)
- Update accent colors (lighter blue)
- Add theme-aware CodeMirror styling (oneDark vs defaultHighlightStyle)
- Update window title to 'Claude Flow'
- Refine spacing and visual polish throughout
- Add .claude-flow/ artifacts from self-restyling session
---
 renderer/src/styles/globals.css | 259 +++++++++++++++++++++++++++-------------
 1 file changed, 178 insertions(+), 81 deletions(-)

(limited to 'renderer/src/styles')

diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 7ad199e..97b7bb8 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -4,25 +4,44 @@
   padding: 0;
 }
 
+/* ── Dark theme (default) ────────────────────────────────────── */
 :root {
-  --bg-primary: #1a1a1a;
-  --bg-secondary: #252525;
-  --bg-tertiary: #333;
-  --border: #444;
-  --text-primary: #e0e0e0;
+  --bg-primary:     #1a1a1a;
+  --bg-secondary:   #252525;
+  --bg-tertiary:    #333;
+  --border:         #444;
+  --text-primary:   #e0e0e0;
   --text-secondary: #888;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-  --success: #10b981;
-  --warning: #f59e0b;
-  --danger: #ef4444;
-}
-
+  --accent:         #60a5fa;
+  --accent-hover:   #93c5fd;
+  --success:        #10b981;
+  --warning:        #f59e0b;
+  --danger:         #ef4444;
+}
+
+/* ── Light theme overrides ───────────────────────────────────── */
+html[data-theme="light"] {
+  --bg-primary:     #f4f4f2;
+  --bg-secondary:   #e8e8e5;
+  --bg-tertiary:    #d8d8d4;
+  --border:         #b4b4b0;
+  --text-primary:   #1a1a18;
+  --text-secondary: #5a5a56;
+  --accent:         #2563eb;
+  --accent-hover:   #1d4ed8;
+  --success:        #059669;
+  --warning:        #d97706;
+  --danger:         #dc2626;
+}
+
+/* ── Base ────────────────────────────────────────────────────── */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code",
+    Monaco, "Courier New", monospace;
   background: var(--bg-primary);
   color: var(--text-primary);
   overflow: hidden;
+  font-size: 13px;
 }
 
 .app {
@@ -31,12 +50,12 @@ body {
   height: 100vh;
 }
 
-/* Header */
+/* ── Header ──────────────────────────────────────────────────── */
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
+  padding: 10px 16px;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
   -webkit-app-region: drag;
@@ -50,15 +69,30 @@ body {
   -webkit-app-region: no-drag;
 }
 
+/* App wordmark */
+.app-wordmark {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  padding-right: 12px;
+  border-right: 1px solid var(--border);
+  margin-right: 4px;
+  user-select: none;
+  white-space: nowrap;
+}
+
 .header select,
 .header button {
-  padding: 6px 12px;
+  padding: 5px 10px;
   background: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 2px;
   color: var(--text-primary);
   cursor: pointer;
-  font-size: 13px;
+  font-size: 12px;
+  font-family: inherit;
 }
 
 .header button:hover {
@@ -68,8 +102,8 @@ body {
 .header button.btn-delete {
   background: transparent;
   border: 1px solid var(--border);
-  padding: 6px 8px;
-  font-size: 14px;
+  padding: 5px 8px;
+  font-size: 13px;
 }
 
 .header button.btn-delete:hover {
@@ -77,15 +111,32 @@ body {
   border-color: var(--danger);
 }
 
+/* Theme toggle */
+.theme-toggle {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.theme-toggle:hover {
+  opacity: 1;
+  background: var(--bg-tertiary) !important;
+}
+
+/* Phase indicator */
 .phase-indicator {
   display: flex;
   gap: 4px;
 }
 
 .phase-step {
-  padding: 4px 12px;
-  font-size: 12px;
-  border-radius: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  border-radius: 2px;
   background: var(--bg-tertiary);
   color: var(--text-secondary);
 }
@@ -100,14 +151,14 @@ body {
   color: white;
 }
 
-/* Main Content */
+/* ── Main Content ─────────────────────────────────────────────── */
 .main-content {
   flex: 1;
   display: flex;
   overflow: hidden;
 }
 
-/* Document Pane */
+/* ── Document Pane ───────────────────────────────────────────── */
 .document-pane {
   flex: 1;
   display: flex;
@@ -121,21 +172,29 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 16px;
+  padding: 7px 16px;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
-  font-size: 14px;
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
   color: var(--text-secondary);
 }
 
 .document-header button {
-  padding: 4px 8px;
+  padding: 3px 8px;
   background: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 2px;
   color: var(--text-primary);
   cursor: pointer;
-  font-size: 12px;
+  font-size: 11px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+}
+
+.document-header button:hover {
+  background: var(--border);
 }
 
 .document-content {
@@ -145,8 +204,8 @@ body {
 }
 
 .document-content.editing {
-  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
-  font-size: 14px;
+  font-family: inherit;
+  font-size: 13px;
   line-height: 1.6;
   background: var(--bg-primary);
   border: none;
@@ -179,16 +238,19 @@ body {
 }
 
 .document-content.rendered h1 {
-  font-size: 28px;
+  font-size: 22px;
   margin: 24px 0 16px;
+  letter-spacing: -0.01em;
 }
 .document-content.rendered h2 {
-  font-size: 22px;
+  font-size: 17px;
   margin: 20px 0 12px;
   color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .document-content.rendered h3 {
-  font-size: 18px;
+  font-size: 14px;
   margin: 16px 0 8px;
 }
 .document-content.rendered p {
@@ -198,14 +260,14 @@ body {
 .document-content.rendered code {
   background: var(--bg-tertiary);
   padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  border-radius: 2px;
+  font-size: 12px;
+  font-family: inherit;
 }
 .document-content.rendered pre {
   background: var(--bg-tertiary);
   padding: 16px;
-  border-radius: 8px;
+  border-radius: 2px;
   overflow-x: auto;
   margin: 16px 0;
 }
@@ -238,17 +300,20 @@ body {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0;
-  font-size: 14px;
+  font-size: 12px;
 }
 .document-content.rendered th,
 .document-content.rendered td {
-  padding: 10px 12px;
+  padding: 8px 12px;
   text-align: left;
   border: 1px solid var(--border);
 }
 .document-content.rendered th {
   background: var(--bg-tertiary);
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 11px;
 }
 .document-content.rendered tr:nth-child(even) td {
   background: var(--bg-secondary);
@@ -280,11 +345,13 @@ body {
   background: var(--accent);
   color: white;
   padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
+  border-radius: 2px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-/* Chat Pane */
+/* ── Chat Pane ───────────────────────────────────────────────── */
 .chat-pane {
   width: 380px;
   display: flex;
@@ -299,11 +366,11 @@ body {
 }
 
 .message {
-  margin-bottom: 12px;
-  padding: 10px 14px;
-  border-radius: 8px;
+  margin-bottom: 10px;
+  padding: 9px 13px;
+  border-radius: 4px;
   max-width: 90%;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.5;
   white-space: pre-wrap;
 }
@@ -311,6 +378,7 @@ body {
 .message.user {
   background: var(--accent);
   margin-left: auto;
+  color: white;
 }
 
 .message.assistant {
@@ -331,27 +399,38 @@ body {
 
 .chat-input input {
   flex: 1;
-  padding: 10px 14px;
+  padding: 9px 13px;
   background: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 2px;
   color: var(--text-primary);
-  font-size: 14px;
+  font-size: 13px;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .chat-input input:focus {
   outline: none;
   border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+}
+
+html[data-theme="light"] .chat-input input:focus {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
 }
 
 .chat-input button {
-  padding: 10px 16px;
+  padding: 9px 15px;
   background: var(--accent);
   border: none;
-  border-radius: 8px;
+  border-radius: 2px;
   color: white;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  transition: background 0.15s;
 }
 
 .chat-input button:hover:not(:disabled) {
@@ -359,16 +438,16 @@ body {
 }
 
 .chat-input button:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
-/* Action Bar */
+/* ── Action Bar ──────────────────────────────────────────────── */
 .action-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
+  padding: 10px 16px;
   background: var(--bg-secondary);
   border-top: 1px solid var(--border);
 }
@@ -388,9 +467,9 @@ body {
 
 .token-bar {
   width: 100px;
-  height: 6px;
+  height: 4px;
   background: var(--bg-tertiary);
-  border-radius: 3px;
+  border-radius: 1px;
   overflow: hidden;
 }
 
@@ -400,7 +479,9 @@ body {
 }
 
 .token-label {
-  font-size: 12px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
   color: var(--text-secondary);
 }
 
@@ -408,7 +489,9 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
   color: var(--text-secondary);
   cursor: pointer;
 }
@@ -418,13 +501,16 @@ body {
 }
 
 .btn-secondary {
-  padding: 8px 16px;
+  padding: 6px 14px;
   background: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 2px;
   color: var(--text-primary);
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.05em;
+  transition: background 0.15s;
 }
 
 .btn-secondary:hover:not(:disabled) {
@@ -432,19 +518,23 @@ body {
 }
 
 .btn-secondary:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .btn-primary {
-  padding: 8px 20px;
+  padding: 6px 18px;
   background: var(--accent);
   border: none;
-  border-radius: 6px;
+  border-radius: 2px;
   color: white;
   cursor: pointer;
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 600;
+  font-size: 12px;
+  font-family: inherit;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  transition: background 0.15s;
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -452,16 +542,18 @@ body {
 }
 
 .btn-primary:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .implementing-status {
   color: var(--success);
-  font-size: 14px;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
-/* Error Bar */
+/* ── Error Bar ───────────────────────────────────────────────── */
 .error-bar {
   display: flex;
   justify-content: space-between;
@@ -469,14 +561,15 @@ body {
   padding: 8px 16px;
   background: var(--danger);
   color: white;
-  font-size: 14px;
+  font-size: 12px;
+  letter-spacing: 0.03em;
 }
 
 .error-bar button {
   background: none;
   border: none;
   color: white;
-  font-size: 18px;
+  font-size: 16px;
   cursor: pointer;
   padding: 0 4px;
 }
@@ -485,17 +578,21 @@ body {
   opacity: 0.8;
 }
 
-/* Onboarding */
+/* ── Onboarding ──────────────────────────────────────────────── */
 .onboarding h1 {
-  font-size: 32px;
+  font-size: 24px;
   margin-bottom: 8px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
 .onboarding h2 {
-  font-size: 20px;
+  font-size: 13px;
   margin-top: 28px;
   margin-bottom: 12px;
   color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
 }
 
 .onboarding p {
@@ -515,13 +612,13 @@ body {
 .onboarding pre {
   background: var(--bg-tertiary);
   padding: 12px 16px;
-  border-radius: 6px;
+  border-radius: 2px;
   margin: 12px 0;
 }
 
 .onboarding code {
-  font-family: "SF Mono", Monaco, monospace;
-  font-size: 13px;
+  font-family: inherit;
+  font-size: 12px;
 }
 
 .onboarding a {
@@ -538,5 +635,5 @@ body {
   padding: 16px;
   background: var(--bg-tertiary);
   border-left: 3px solid var(--accent);
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 2px 2px 0;
 }
-- 
cgit v1.2.3