fix: use dark text on blue accent step-number badges across all flow types

#60a5fa (electric blue) is a light colour — near-white and muted-foreground
text on it produced ~1.9–2.1:1 contrast, well below WCAG AA.

- TreeNavigationPage: option number badges + timer badge → text-[#0e1016]
- StepChecklist: active step was blue badge on blue row (invisible); now
  inverts to navy circle with blue number when current, dark-on-blue otherwise
- StepDetail: step number circle → text-[#0e1016] (was near-white on light blue)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-01 06:14:51 +00:00
parent 67a28664a9
commit bf494bb043
3 changed files with 7 additions and 4 deletions

View File

@@ -687,7 +687,7 @@ export function TreeNavigationPage() {
<div className="flex items-center gap-3">
<h1 className="text-xl font-bold font-heading text-foreground">{tree.name}</h1>
{timerDisplay && (
<span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-muted-foreground">
<span className="flex items-center gap-1.5 rounded-full bg-accent px-2 py-0.5 text-[0.6875rem] font-sans text-xs text-[#0e1016]">
<Clock className="h-4 w-4" />
{timerDisplay}
</span>
@@ -874,7 +874,7 @@ export function TreeNavigationPage() {
<Spinner size="sm" className="h-4 w-4 border-t-foreground" />
</span>
) : (
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-muted-foreground">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-accent text-xs font-medium text-[#0e1016]">
{index + 1}
</span>
)