From 6364ce0c8c4157b929240a300ba09b220d39f043 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Sat, 19 Sep 2026 15:22:20 -0400
Subject: [PATCH] Make the toolbar section labels readable

LAYOUT / ROWS / COLUMNS were 10px text-gray-400: about 2.5:1 on white,
where WCAG wants 4.5:1 at that size. Their own class rather than a darker
grey utility, because in dark mode text-gray-400 and text-gray-500 both
resolve to --text-muted (#61656e, nearer 2:1 on the panel) -- swapping the
utility would have fixed light mode and left dark exactly as it was.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/src/components/DepthButtons.jsx |  2 +-
 ui/src/components/LayoutMenu.jsx   |  2 +-
 ui/src/index.css                   | 14 ++++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/DepthButtons.jsx b/ui/src/components/DepthButtons.jsx
index c6fbd2b..b4cb4f5 100644
--- a/ui/src/components/DepthButtons.jsx
+++ b/ui/src/components/DepthButtons.jsx
@@ -9,7 +9,7 @@
 export default function DepthButtons({ label, levels, depth, onPick, totalLabel = 'Total' }) {
   return (
     <div className="flex items-center gap-1.5">
-      <span className="text-gray-400 uppercase tracking-wide" style={{fontSize:'10px'}}>{label}</span>
+      <span className="pf-section-label">{label}</span>
       {Array.from({ length: levels.length + 1 }, (_, n) => (
         <button key={n} onClick={() => onPick(n)}
           title={n === 0
diff --git a/ui/src/components/LayoutMenu.jsx b/ui/src/components/LayoutMenu.jsx
index c43dd20..ea310bd 100644
--- a/ui/src/components/LayoutMenu.jsx
+++ b/ui/src/components/LayoutMenu.jsx
@@ -116,7 +116,7 @@ export default function LayoutMenu({
 
   return (
     <div ref={boxRef} className="relative flex items-center gap-1.5">
-      <span className="text-gray-400 uppercase tracking-wide" style={{fontSize:'10px'}}>Layout</span>
+      <span className="pf-section-label">Layout</span>
 
       <button onClick={() => setOpen(o => !o)}
         className={`flex items-center gap-1 border rounded px-2 py-0.5 max-w-[14rem] transition-colors
diff --git a/ui/src/index.css b/ui/src/index.css
index f9799ec..e5b397a 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -37,6 +37,20 @@ body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary
 .dark .bg-gray-100 { background-color: var(--bg-tertiary); }
 .dark .bg-gray-200 { background-color: var(--bg-tertiary); }
 .dark .bg-gray-300 { background-color: var(--bg-tertiary); }
+/* Toolbar section labels (LAYOUT / ROWS / COLUMNS). Their own class rather than
+   a grey utility: in dark mode text-gray-400 and text-gray-500 both collapse to
+   --text-muted, so changing the utility would have fixed light mode only. At
+   10px/gray-400 these sat near 2.5:1 on white and 2:1 on the dark panel, under
+   the 4.5:1 WCAG wants for text this size. */
+.pf-section-label {
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #6b7280;
+}
+.dark .pf-section-label { color: #9aa0aa; }
+
 .dark .text-gray-300 { color: var(--text-muted); }
 .dark .text-gray-400 { color: var(--text-muted); }
 .dark .text-gray-500 { color: var(--text-muted); }