pt/pf_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the toolbar section labels readable

Browse Source 
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>
This commit is contained in:
Paul Trowbridge 2026-09-19 15:22:20 -04:00
parent cc5de46b9e
commit 6364ce0c8c
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/DepthButtons.jsx
View File

@ -9,7 +9,7 @@
export default function DepthButtons({ label, levels, depth, onPick, totalLabel = 'Total' }) { export default function DepthButtons({ label, levels, depth, onPick, totalLabel = 'Total' }) {
return ( return (
<div className="flex items-center gap-1.5"> <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) => ( {Array.from({ length: levels.length + 1 }, (_, n) => (
<button key={n} onClick={() => onPick(n)} <button key={n} onClick={() => onPick(n)}
title={n === 0 title={n === 0

2
ui/src/components/LayoutMenu.jsx
View File

@ -116,7 +116,7 @@ export default function LayoutMenu({
return ( return (
<div ref={boxRef} className="relative flex items-center gap-1.5"> <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)} <button onClick={() => setOpen(o => !o)}
className={`flex items-center gap-1 border rounded px-2 py-0.5 max-w-[14rem] transition-colors className={`flex items-center gap-1 border rounded px-2 py-0.5 max-w-[14rem] transition-colors

14
ui/src/index.css
View File

@ -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-100 { background-color: var(--bg-tertiary); }
.dark .bg-gray-200 { background-color: var(--bg-tertiary); } .dark .bg-gray-200 { background-color: var(--bg-tertiary); }
.dark .bg-gray-300 { 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-300 { color: var(--text-muted); }
.dark .text-gray-400 { color: var(--text-muted); } .dark .text-gray-400 { color: var(--text-muted); }
.dark .text-gray-500 { color: var(--text-muted); } .dark .text-gray-500 { color: var(--text-muted); }