From b455fe56bbb1abfbf0b11f906b53aeae9206cea0 Mon Sep 17 00:00:00 2001
From: peter <peter@cygnus.systems>
Date: Thu, 11 Jun 2026 15:27:34 +0100
Subject: [PATCH] Apply neutral light AgentFeed theme

---
 static/daybook.css | 144 ++++++++++++++++++++++++---------------------
 1 file changed, 78 insertions(+), 66 deletions(-)

diff --git a/static/daybook.css b/static/daybook.css
index 9e5ad67..bfc4b6d 100644
--- a/static/daybook.css
+++ b/static/daybook.css
@@ -1,11 +1,20 @@
 :root {
   --pane-bar-height: 2.75rem;
-  --pane-bar-bg: #e8dcc8;
-  --grid-line: rgba(104, 84, 59, 0.16);
+  --app-bg: #f6f7f9;
+  --surface: #ffffff;
+  --surface-alt: #f8f9fb;
+  --pane-bar-bg: #ffffff;
+  --grid-line: #dde1e7;
+  --text: #2f343d;
+  --muted: #7b8491;
+  --selected-day-bg: #3d4552;
+  --selected-artifact-bg: #eaf3ff;
+  --selected-artifact-rail: #dcecff;
+  --control-border: #d9dee6;
   color-scheme: light;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: #f4f1ea;
-  color: #1d2528;
+  background: var(--app-bg);
+  color: var(--text);
 }
 
 html,
@@ -22,8 +31,9 @@ body {
 
 .topbar {
   align-items: center;
-  background: #17313b;
-  color: #fffaf0;
+  background: var(--surface-alt);
+  border-bottom: 1px solid var(--grid-line);
+  color: var(--text);
   display: grid;
   flex: 0 0 auto;
   gap: 0;
@@ -39,7 +49,7 @@ body {
 }
 
 .eyebrow {
-  color: #e2b66a;
+  color: var(--muted);
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.14em;
@@ -56,7 +66,7 @@ h1 {
 .toolbar {
   align-items: center;
   align-self: stretch;
-  background: #d9c9ad;
+  background: var(--surface-alt);
   display: flex;
   gap: 0.45rem;
   min-width: 0;
@@ -70,7 +80,7 @@ h1 {
 }
 
 .filter label {
-  color: #304149;
+  color: var(--muted);
   display: grid;
   font-size: 0.68rem;
   gap: 0.08rem;
@@ -78,8 +88,10 @@ h1 {
 
 .filter select,
 .filter input {
-  border: 0;
-  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--control-border);
+  border-radius: 4px;
+  color: var(--text);
   font: inherit;
   padding: 0.32rem 0.62rem;
 }
@@ -89,10 +101,10 @@ h1 {
 }
 
 .filter button {
-  background: #17313b;
-  border: 0;
-  border-radius: 999px;
-  color: #fffaf0;
+  background: #3d4552;
+  border: 1px solid #343b46;
+  border-radius: 4px;
+  color: #ffffff;
   cursor: pointer;
   font: inherit;
   font-weight: 700;
@@ -100,24 +112,24 @@ h1 {
 }
 
 .view-toggle {
-  background: rgba(23, 49, 59, 0.12);
-  border: 1px solid rgba(23, 49, 59, 0.18);
-  border-radius: 999px;
+  background: #f0f2f5;
+  border: 1px solid var(--control-border);
+  border-radius: 4px;
   display: flex;
   padding: 0.12rem;
 }
 
 .view-toggle a {
-  border-radius: 999px;
-  color: #17313b;
+  border-radius: 3px;
+  color: var(--text);
   font-size: 0.76rem;
   padding: 0.3rem 0.58rem;
   text-decoration: none;
 }
 
 .view-toggle a.selected {
-  background: #17313b;
-  color: #fffaf0;
+  background: #3d4552;
+  color: #ffffff;
 }
 
 .feed {
@@ -169,7 +181,7 @@ h1 {
 
 .day-sidebar:hover .day-list,
 .artifact-sidebar:hover .artifact-list {
-  scrollbar-color: rgba(23, 49, 59, 0.35) transparent;
+  scrollbar-color: rgba(61, 69, 82, 0.35) transparent;
   scrollbar-width: thin;
 }
 
@@ -185,7 +197,7 @@ h1 {
 
 .day-list::-webkit-scrollbar-thumb,
 .artifact-list::-webkit-scrollbar-thumb {
-  background: rgba(23, 49, 59, 0.35);
+  background: rgba(61, 69, 82, 0.35);
   border-radius: 999px;
 }
 
@@ -195,11 +207,11 @@ h1 {
 }
 
 .day-sidebar {
-  background: #ebe4d5;
+  background: var(--surface-alt);
 }
 
 .artifact-sidebar {
-  background: #f8f2e7;
+  background: var(--surface);
 }
 
 .preview-pane {
@@ -212,7 +224,7 @@ h1 {
 }
 
 .splitter {
-  background: #d9c9ad;
+  background: var(--grid-line);
   cursor: col-resize;
   position: relative;
   touch-action: none;
@@ -230,7 +242,7 @@ h1 {
 
 .splitter:hover,
 .is-resizing .splitter {
-  background: #a98d5e;
+  background: #b8c0cc;
 }
 
 .is-resizing {
@@ -240,7 +252,7 @@ h1 {
 
 .day-sidebar h2,
 .pane-heading h2 {
-  color: #68543b;
+  color: var(--text);
   font-size: 0.68rem;
   letter-spacing: 0.1em;
   margin: 0;
@@ -274,39 +286,39 @@ h1 {
 
 .day-link:hover,
 .day-link.selected {
-  background: #fffaf0;
-  box-shadow: 0 10px 24px rgba(57, 44, 28, 0.08);
+  background: var(--surface);
+  box-shadow: none;
 }
 
 .day-link:focus-visible {
-  outline: 2px solid #e2b66a;
+  outline: 2px solid #8ab4f8;
   outline-offset: 2px;
 }
 
 .day-link.selected {
-  background: #17313b;
-  color: #fffaf0;
+  background: var(--selected-day-bg);
+  color: #ffffff;
 }
 
 .day-link.selected span,
 .day-link.selected strong {
-  color: #fffaf0;
+  color: #ffffff;
 }
 
 .day-link.selected .today-badge {
-  background: #b9e8bf;
-  color: #17313b;
+  background: #d8f1df;
+  color: #28583a;
 }
 
 .day-link span,
 .pane-heading span,
 .artifact-time {
-  color: #7b6b55;
+  color: var(--muted);
   font-size: 0.7rem;
 }
 
 .today-badge {
-  background: #cfe9cf;
+  background: #d8f1df;
   border-radius: 999px;
   color: #245238;
   display: inline-block;
@@ -318,7 +330,7 @@ h1 {
 }
 
 .day-link strong {
-  color: #17313b;
+  color: var(--text);
   font-size: 0.82rem;
 }
 
@@ -338,7 +350,7 @@ h1 {
 
 .pane-heading,
 .preview-actions {
-  border-bottom: 1px solid #c7b48f;
+  border-bottom: 1px solid var(--grid-line);
 }
 
 .day-sidebar .pane-bar,
@@ -354,10 +366,10 @@ h1 {
 }
 
 .new-artifacts-banner {
-  background: #245238;
+  background: #eaf3ff;
   border: 0;
   border-radius: 999px;
-  color: #f6fff2;
+  color: #315a8a;
   cursor: pointer;
   display: block;
   font: inherit;
@@ -374,7 +386,7 @@ h1 {
 }
 
 .new-artifacts-banner:hover {
-  background: #17313b;
+  background: #dcecff;
 }
 
 .artifact-list {
@@ -384,7 +396,7 @@ h1 {
 
 .artifact-row {
   align-items: stretch;
-  background: #fffaf0;
+  background: var(--surface);
   border: 0;
   border-bottom: 1px solid var(--grid-line);
   border-radius: 0;
@@ -397,38 +409,38 @@ h1 {
 }
 
 .artifact-row:hover {
-  background: #fff6e5;
+  background: #f6f9fd;
   box-shadow: none;
 }
 
 .artifact-row:focus-visible {
   outline: 0;
-  box-shadow: inset 0 0 0 1px #e2b66a;
+  box-shadow: inset 0 0 0 1px #8ab4f8;
 }
 
 .artifact-row.selected {
-  background: #17313b;
-  color: #fffaf0;
+  background: var(--selected-artifact-bg);
+  color: var(--text);
 }
 
 .artifact-row.selected .artifact-time {
-  background: #10262f;
+  background: var(--selected-artifact-rail);
 }
 
 .artifact-row.selected .artifact-row-main span,
 .artifact-row.selected .artifact-time {
-  color: #fffaf0;
+  color: var(--text);
 }
 
 .artifact-row.selected .kind-icon {
-  background: rgba(255, 250, 240, 0.12);
-  color: #fffaf0;
+  background: #dbeaff;
+  color: #315a8a;
 }
 
 .kind-icon {
   align-items: center;
-  background: rgba(23, 49, 59, 0.035);
-  color: #657173;
+  background: #f1f3f6;
+  color: #5f6875;
   display: inline-flex;
   font-size: 0.56rem;
   font-weight: 800;
@@ -466,7 +478,7 @@ h1 {
 .artifact-row-main span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  color: #17313b;
+  color: var(--text);
   display: -webkit-box;
   font-size: 0.86rem;
   overflow: hidden;
@@ -474,7 +486,7 @@ h1 {
 
 .artifact-time {
   align-items: center;
-  background: #efe5d3;
+  background: #f3f5f7;
   border-right: 1px solid var(--grid-line);
   display: flex;
   justify-content: flex-end;
@@ -486,7 +498,7 @@ h1 {
 }
 
 .empty {
-  background: #fffaf0;
+  background: var(--surface);
   border-radius: 16px;
   padding: 1.2rem;
 }
@@ -505,10 +517,10 @@ h1 {
 }
 
 kbd {
-  background: #ebe4d5;
-  border: 1px solid #d3c3a7;
+  background: #f0f2f5;
+  border: 1px solid var(--control-border);
   border-radius: 4px;
-  color: #17313b;
+  color: var(--text);
   font: 0.85em ui-monospace, SFMono-Regular, Consolas, monospace;
   padding: 0.08rem 0.28rem;
 }
@@ -545,7 +557,7 @@ kbd {
 }
 
 .preview-title {
-  color: #17313b;
+  color: var(--text);
   flex: 1 1 auto;
   font-size: 0.78rem;
   font-weight: 700;
@@ -568,10 +580,10 @@ kbd {
 
 .artifact-action-links a,
 .artifact-action-links button {
-  background: #fffaf0;
-  border: 1px solid rgba(23, 49, 59, 0.14);
-  border-radius: 999px;
-  color: #17313b;
+  background: var(--surface);
+  border: 1px solid var(--control-border);
+  border-radius: 4px;
+  color: var(--text);
   cursor: pointer;
   font: inherit;
   font-size: 0.76rem;