From 361b8bdaa80dc381575f8c98b50aa122807813e4 Mon Sep 17 00:00:00 2001
From: Waters Church <info@waterschurch.org>
Date: Sun, 13 Sep 2026 14:14:11 -0400
Subject: [PATCH] Themes: text on the accent is its own variable; white on
 Daylight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Primary buttons hardcoded the dark text that reads on a mint accent. On
Daylight the accent is a deep green, and dark text on it manages 3.6:1 —
squinting territory. The colour that sits on the accent is now
`--accent-text`: dark on the four themes where that reads best (7–10:1),
white on Daylight (4.4:1, the better of the two). Modules can use it too;
the guide lists it with the palette.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 docs/MODULE-GUIDE.md | 4 +++-
 public/style.css     | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/MODULE-GUIDE.md b/docs/MODULE-GUIDE.md
index 699bfab..7593f1a 100644
--- a/docs/MODULE-GUIDE.md
+++ b/docs/MODULE-GUIDE.md
@@ -377,7 +377,9 @@ own in `stop()` anyway.
 
 2. **Style with the shell's CSS variables — no hardcoded colors.** The
    palette: `--bg` (page), `--panel` (tile), `--border`, `--text`,
-   `--muted`, `--accent`, `--danger`, `--warn`. Derive tints with
+   `--muted`, `--accent`, `--accent-text` (text that sits on the accent —
+   dark on most themes, white where the accent is deep), `--danger`,
+   `--warn`. Derive tints with
    `color-mix(in srgb, var(--accent) 20%, transparent)`. This is what makes
    every module look native — and what makes the dashboard's **themes**
    (Admin → Theme) reach into every tile: a theme swaps those variables and
diff --git a/public/style.css b/public/style.css
index 78b18b2..b48b1da 100644
--- a/public/style.css
+++ b/public/style.css
@@ -10,6 +10,7 @@
   --text: #e6edf3;
   --muted: #8b98a5;
   --accent: #2ee59a;
+  --accent-text: #06281a; /* text that sits on --accent (buttons, badges) */
   --danger: #f4433c;
   --warn: #f0b429;
   /* grid geometry (shell.js reads these) */
@@ -762,7 +763,7 @@ body.fullscreen #grid { padding-bottom: 0; }
 .btn.primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #06281a;
+  color: var(--accent-text);
   font-weight: 600;
 }
 
@@ -866,6 +867,7 @@ html[data-theme="daylight"] {
   --text: #14181f;
   --muted: #5b6675;
   --accent: #0b8a5f;
+  --accent-text: #ffffff; /* dark text drowns on this accent */
   --danger: #d1242f;
   --warn: #b26a00;
 }