From 38f3d0f90294dc9b186cdfb535058da5767d2a73 Mon Sep 17 00:00:00 2001
From: peter <peter@cygnus.systems>
Date: Thu, 3 Sep 2026 12:49:18 +0100
Subject: [PATCH] Rework surface colors into a layered greyscale

Establishes a clearer background hierarchy across the app chrome:
- Top bar: its own slightly darker grey (--topbar-bg).
- Both sidebar headers (pane-bars) and the content control bar: grey
  (--pane-bar-bg now matches the sidebar grey instead of white).
- Artifact sidebar: grey background like the source sidebar; the rows
  themselves stay white so they read as cards floating on grey.
- Preview/content area: a light off-white (--content-bg), distinct from
  both the grey chrome and the white rows.

New --topbar-bg and --content-bg vars added to both light and dark
palettes. Also fixes a pre-existing bug from the dark-mode commit where
--scrollbar-thumb and --focus-ring had become self-referential (a
too-broad replace_all had clobbered their own definitions), so scrollbar
and focus-ring colors resolve correctly again. Verified both modes render
coherently.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 static/daybook.css | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/static/daybook.css b/static/daybook.css
index 1efe90b..8f391b2 100644
--- a/static/daybook.css
+++ b/static/daybook.css
@@ -3,7 +3,9 @@
   --app-bg: #f6f7f9;
   --surface: #ffffff;
   --surface-alt: #f8f9fb;
-  --pane-bar-bg: #ffffff;
+  --pane-bar-bg: #f8f9fb;
+  --topbar-bg: #eaecf0;
+  --content-bg: #faf9f6;
   --grid-line: #dde1e7;
   --text: #2f343d;
   --muted: #7b8491;
@@ -21,8 +23,8 @@
   --row-hover: #f6f9fd;
   --time-rail-bg: #f3f5f7;
   --splitter-hover: #b8c0cc;
-  --scrollbar-thumb: var(--scrollbar-thumb);
-  --focus-ring: var(--focus-ring);
+  --scrollbar-thumb: rgba(61, 69, 82, 0.35);
+  --focus-ring: #8ab4f8;
   /* Semantic accents (success = kept, info = shared, today, danger). */
   --success-bg: #eaf7ed;
   --success-text: #28583a;
@@ -45,7 +47,9 @@
   --app-bg: #15171c;
   --surface: #1d2026;
   --surface-alt: #242832;
-  --pane-bar-bg: #1d2026;
+  --pane-bar-bg: #242832;
+  --topbar-bg: #191c21;
+  --content-bg: #16181d;
   --grid-line: #333842;
   --text: #e3e6eb;
   --muted: #99a2b0;
@@ -62,7 +66,7 @@
   --time-rail-bg: #22262e;
   --splitter-hover: #4a525f;
   --scrollbar-thumb: rgba(160, 170, 190, 0.35);
-  --focus-ring: var(--focus-ring);
+  --focus-ring: #8ab4f8;
   --success-bg: #1e3a2a;
   --success-text: #7fce9c;
   --success-border: #2f5a40;
@@ -91,7 +95,7 @@ body {
 
 .topbar {
   align-items: center;
-  background: var(--surface-alt);
+  background: var(--topbar-bg);
   border-bottom: 1px solid var(--grid-line);
   color: var(--text);
   display: grid;
@@ -198,7 +202,7 @@ h1 {
 .toolbar {
   align-items: center;
   align-self: stretch;
-  background: var(--surface-alt);
+  background: var(--topbar-bg);
   display: flex;
   gap: 0.45rem;
   justify-content: center;
@@ -354,8 +358,10 @@ h1 {
   background: var(--surface-alt);
 }
 
+/* Grey like the source sidebar; the artifact rows themselves stay white
+   (they set --surface), so they read as cards floating on the grey. */
 .artifact-sidebar {
-  background: var(--surface);
+  background: var(--surface-alt);
 }
 
 .preview-pane {
@@ -738,6 +744,7 @@ kbd {
 
 .preview-body {
   align-items: stretch;
+  background: var(--content-bg);
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;