From 4d747de218eb2bcf5befe6c4198dc604662f9de9 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 18:49:19 -0700
Subject: [PATCH] canvas/OnboardingWizard: theme-flip colors + fix hover traps
 + focus rings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five fixes for the first-time-user wizard. Every new user sees this,
so visual bugs here have outsized impact.

1. Action button hovered LIGHTER: bg-accent-strong/90 hover:bg-accent.
   accent is the LIGHTER variant — hovering to it on white text drops
   contrast below AA. Flipped the direction: bg-accent
   hover:bg-accent-strong, matching the same trap fixed in
   ConfirmDialog and ApprovalBanner.

2. "Next" button hover was a no-op (bg-surface-card on top of itself).
   Lift to surface-elevated, matching the Cancel pattern in
   ConfirmDialog.

3. Progress bar gradient was hardcoded from-blue-500 to-sky-400 —
   neither tone exists in the warm-paper light theme, so the bar lost
   brand color in light mode. Switched to the accent ramp so it stays
   brand-tinted in both.

4. Step indicator was hardcoded text-sky-400/80, same theme-flip
   issue. Switched to text-accent.

5. All three buttons (Skip / Action / Next) had no focus-visible
   rings. Added the accent ring pattern used across the rest of
   the canvas.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/OnboardingWizard.tsx | 23 ++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/canvas/src/components/OnboardingWizard.tsx b/canvas/src/components/OnboardingWizard.tsx
index 501fa957..b513636b 100644
--- a/canvas/src/components/OnboardingWizard.tsx
+++ b/canvas/src/components/OnboardingWizard.tsx
@@ -134,10 +134,12 @@ export function OnboardingWizard() {
       aria-label="Onboarding guide"
       className="fixed bottom-20 left-4 z-50 w-80 rounded-2xl border border-line/60 bg-surface-sunken/95 backdrop-blur-xl shadow-2xl shadow-black/40 overflow-hidden"
     >
-      {/* Progress bar */}
+      {/* Progress bar — was hardcoded from-blue-500 to-sky-400, neither
+          tone exists in warm-paper light theme. Switched to the accent
+          ramp so the gradient reads as brand color in both themes. */}
       <div className="h-1 bg-surface-card">
         <div
-          className="h-full bg-gradient-to-r from-blue-500 to-sky-400 transition-all duration-500"
+          className="h-full bg-gradient-to-r from-accent to-accent-strong transition-all duration-500"
           style={{ width: `${((currentStepIdx + 1) / STEPS.length) * 100}%` }}
         />
       </div>
@@ -155,14 +157,16 @@ export function OnboardingWizard() {
       <div className="p-4">
         {/* Step indicator */}
         <div className="flex items-center justify-between mb-2">
-          <span className="text-[9px] font-semibold uppercase tracking-widest text-sky-400/80">
+          {/* text-sky-400/80 was hardcoded; flip to text-accent so the
+              indicator stays brand-tinted in both themes. */}
+          <span className="text-[9px] font-semibold uppercase tracking-widest text-accent">
             Step {currentStepIdx + 1} of {STEPS.length}
           </span>
           <button
             type="button"
             onClick={dismiss}
             aria-label="Skip onboarding guide"
-            className="text-[10px] text-ink-mid hover:text-ink transition-colors"
+            className="text-[10px] text-ink-mid hover:text-ink transition-colors rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
           >
             Skip guide
           </button>
@@ -181,7 +185,11 @@ export function OnboardingWizard() {
           <button
             type="button"
             onClick={handleAction}
-            className="flex-1 px-3 py-1.5 bg-accent-strong/90 hover:bg-accent rounded-lg text-[11px] font-medium text-white transition-colors"
+            // Was bg-accent-strong/90 hover:bg-accent — accent is the
+            // LIGHTER variant, so this hovered lighter on white text and
+            // dropped contrast below AA. Same trap fixed in
+            // ConfirmDialog/ApprovalBanner. Hover the OTHER direction.
+            className="flex-1 px-3 py-1.5 bg-accent hover:bg-accent-strong rounded-lg text-[11px] font-medium text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/60 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
           >
             {step === "welcome"
               ? "Create Workspace"
@@ -199,7 +207,10 @@ export function OnboardingWizard() {
                 if (next) setStep(next.id);
                 else dismiss();
               }}
-              className="px-3 py-1.5 bg-surface-card hover:bg-surface-card rounded-lg text-[11px] text-ink-mid transition-colors"
+              // Was hover:bg-surface-card on top of bg-surface-card —
+              // silent no-op hover. Lift to surface-elevated, matching
+              // the Cancel pattern in ConfirmDialog.
+              className="px-3 py-1.5 bg-surface-card hover:bg-surface-elevated hover:text-ink rounded-lg text-[11px] text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-sunken"
             >
               Next
             </button>