From 89c222086a20ee4988d718cd3ed23dedc53d0a72 Mon Sep 17 00:00:00 2001
From: Codeman maintainer <noreply@anthropic.com>
Date: Sun, 18 Oct 2026 13:46:21 +0200
Subject: [PATCH] fix(story-mode): text contrast of at least 4.5:1 in both
 skins
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

From review round 6 (accessibility): in the paper skin the accents were
used as text colours, and yellow, light green and pink on white fell to
1.42 to 4.48:1 (the "running" tag, the pencils' "Claude is working…",
diff markers, ok/error tags, +N/−N counts, "You approved it", LIVE); in
the dark skin the panel's LIVE tag (white on pink, 3.09) and the note
balloon's "Notice" label (2.74) were under too.

Text now takes its own tokens (--story-go-text, -bad-text, -wait-text,
-pencil-text, the LIVE tag's pair, -note-ink): the accents themselves in
the dark skin, darker ones in the paper skin. Fills and borders keep the
accents. Every pair measured 4.87:1 or better, the tinted diff rows
included.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/web/public/story-mode.css | 42 ++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/web/public/story-mode.css b/src/web/public/story-mode.css
index 22ca88fb..962d3ac6 100644
--- a/src/web/public/story-mode.css
+++ b/src/web/public/story-mode.css
@@ -54,6 +54,16 @@
   --story-balloon-ink: #121016;
   --story-cap: #ffd43d;
   --story-cap-ink: #121016;
+  /* Accents as TEXT (tags, counts, labels): the accents themselves where they read on the sheet,
+     darker ones in the paper skin, where yellow or light green text on white fell under 4.5:1. */
+  --story-go-text: #3ec27c;
+  --story-bad-text: #ff4e97;
+  --story-wait-text: #ffd43d;
+  --story-pencil-text: #6f9fcc;
+  --story-live-bg: #ff4e97;
+  --story-live-ink: #121016;
+  /* Text on a balloon (always light): a magenta dark enough for it. */
+  --story-note-ink: #b8125f;
   --story-display: 'Codeman Story Display', Impact, 'Arial Black', sans-serif;
   --story-letter: 'Codeman Story Letter', 'Comic Sans MS', 'Chalkboard SE', cursive;
   --story-body: 'Manrope', system-ui, sans-serif;
@@ -90,6 +100,12 @@
   --story-balloon-ink: #18151d;
   --story-cap: #ffd019;
   --story-cap-ink: #18151d;
+  --story-go-text: #0f6e3c;
+  --story-bad-text: #b8125f;
+  --story-wait-text: #8a6100;
+  --story-pencil-text: #2f6fa8;
+  --story-live-bg: #b8125f;
+  --story-live-ink: #ffffff;
   color-scheme: light;
 }
 .story-overlay[hidden] {
@@ -200,7 +216,7 @@ body.story-open {
   gap: 7px;
   font: 600 12px/1 var(--story-mono);
   letter-spacing: 0.1em;
-  color: var(--story-magenta);
+  color: var(--story-bad-text);
 }
 .story-live[hidden] {
   display: none;
@@ -459,7 +475,7 @@ body.story-open .toast-container {
   font: 600 10px/1 var(--story-mono);
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: var(--story-magenta);
+  color: var(--story-note-ink);
 }
 .story-balloon--note::after {
   display: none;
@@ -486,7 +502,7 @@ body.story-open .toast-container {
   padding: 5px 9px 4px;
   font: 13px/1.2 var(--story-display);
   letter-spacing: 0.03em;
-  color: var(--story-go);
+  color: var(--story-go-text);
   background: var(--story-panel);
   border: 3px solid var(--story-go);
   transform: rotate(-4deg);
@@ -504,8 +520,8 @@ body.story-open .toast-container {
   padding: 3px 7px 2px;
   font: 600 10.5px/1 var(--story-mono);
   letter-spacing: 0.1em;
-  color: #fff;
-  background: var(--story-magenta);
+  color: var(--story-live-ink);
+  background: var(--story-live-bg);
 }
 
 .story-splash {
@@ -571,7 +587,7 @@ body.story-open .toast-container {
   place-content: center;
   gap: 4px;
   text-align: center;
-  color: var(--story-pencil);
+  color: var(--story-pencil-text);
   border: 2.5px dashed var(--story-pencil);
 }
 .story-pencils span {
@@ -727,13 +743,13 @@ body.story-open .toast-container {
   border-radius: 3px;
 }
 .story-tag--bad {
-  color: var(--story-magenta);
+  color: var(--story-bad-text);
 }
 .story-tag--ok {
-  color: var(--story-go);
+  color: var(--story-go-text);
 }
 .story-tag--pending {
-  color: var(--story-yellow);
+  color: var(--story-wait-text);
 }
 
 /* Drawer */
@@ -855,10 +871,10 @@ body.story-open .toast-container {
   font: 500 12.5px/1 var(--story-mono);
 }
 .story-cnt-a {
-  color: var(--story-go);
+  color: var(--story-go-text);
 }
 .story-cnt-d {
-  color: var(--story-magenta);
+  color: var(--story-bad-text);
 }
 .story-code {
   font: 12px/1.65 var(--story-mono);
@@ -890,13 +906,13 @@ body.story-open .toast-container {
   background: color-mix(in srgb, var(--story-go) 17%, transparent);
 }
 .story-ln--add .story-ln-mk {
-  color: var(--story-go);
+  color: var(--story-go-text);
 }
 .story-ln--del {
   background: color-mix(in srgb, var(--story-magenta) 15%, transparent);
 }
 .story-ln--del .story-ln-mk {
-  color: var(--story-magenta);
+  color: var(--story-bad-text);
 }
 .story-ln--hunk {
   display: block;