peter/daybook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework surface colors into a layered greyscale

Browse source 
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>
This commit is contained in:
peter 2026-09-03 12:49:18 +01:00
parent e257464e7c
commit 38f3d0f902
1 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
static/daybook.css
View file

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