From e6bf0247295ecd33650c1340a680028b2404ad79 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sun, 21 Jun 2026 11:42:11 -0700
Subject: [PATCH] light mode support for onboarding

---
 js/desktop/src/features/onboarding/hold-step.tsx |  2 +-
 .../features/onboarding/onboarding-keyboard.tsx  | 12 +++++++-----
 .../features/onboarding/onboarding-overlay.tsx   | 16 ++++++++--------
 .../src/features/onboarding/onboarding-step.tsx  |  8 +++++---
 .../src/features/onboarding/permission-step.tsx  |  4 ++--
 js/desktop/src/features/onboarding/tap-step.tsx  |  4 ++--
 .../src/features/onboarding/toggle-step.tsx      |  6 +++---
 7 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/js/desktop/src/features/onboarding/hold-step.tsx b/js/desktop/src/features/onboarding/hold-step.tsx
index a915372..c92b4a7 100644
--- a/js/desktop/src/features/onboarding/hold-step.tsx
+++ b/js/desktop/src/features/onboarding/hold-step.tsx
@@ -34,7 +34,7 @@ export function HoldStep({ onAdvance }: { onAdvance: () => void }) {
       }
       status={
         done ? (
-          <span className="inline-flex items-center gap-1.5 text-emerald-300">
+          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
             <Check className="size-4" /> Nice.
           </span>
         ) : state === 'holding' ? (
diff --git a/js/desktop/src/features/onboarding/onboarding-keyboard.tsx b/js/desktop/src/features/onboarding/onboarding-keyboard.tsx
index 8d31893..ef3764c 100644
--- a/js/desktop/src/features/onboarding/onboarding-keyboard.tsx
+++ b/js/desktop/src/features/onboarding/onboarding-keyboard.tsx
@@ -30,20 +30,22 @@ function KeyCap({
       className={cn(
         'relative flex select-none items-center justify-center overflow-hidden rounded-lg border text-sm font-medium',
         hero ? 'h-14 w-14 text-xl' : 'h-14',
-        !hero && 'border-white/10 bg-white/5 text-white/30',
+        !hero && 'border-border bg-muted text-muted-foreground/70',
         hero &&
           state === 'idle' &&
-          'border-white/25 bg-white/10 text-white motion-safe:animate-pulse',
-        hero && state === 'active' && 'border-white/50 bg-white/20 text-white',
+          'border-primary/40 bg-primary/10 text-foreground motion-safe:animate-pulse',
+        hero &&
+          state === 'active' &&
+          'border-primary/60 bg-primary/20 text-foreground',
         hero &&
           state === 'success' &&
-          'border-emerald-400/50 bg-emerald-500/20 text-emerald-200',
+          'border-emerald-500/50 bg-emerald-500/15 text-emerald-700 dark:text-emerald-200',
         className,
       )}
     >
       {hero && state !== 'success' && progress > 0 && (
         <span
-          className="pointer-events-none absolute inset-x-0 bottom-0 bg-white/25"
+          className="pointer-events-none absolute inset-x-0 bottom-0 bg-primary/25"
           style={{ height: `${progress * 100}%` }}
         />
       )}
diff --git a/js/desktop/src/features/onboarding/onboarding-overlay.tsx b/js/desktop/src/features/onboarding/onboarding-overlay.tsx
index cee5ffd..c9aee9a 100644
--- a/js/desktop/src/features/onboarding/onboarding-overlay.tsx
+++ b/js/desktop/src/features/onboarding/onboarding-overlay.tsx
@@ -62,14 +62,14 @@ export function OnboardingOverlay({ onComplete }: { onComplete: () => void }) {
   }, [onComplete, goNext, step, goBack]);
 
   return (
-    <div className="flex h-screen flex-col bg-background text-white">
-      <div className="drag-region flex items-center justify-between border-b border-white/10 px-3 py-1">
+    <div className="flex h-screen flex-col bg-background text-foreground">
+      <div className="drag-region flex items-center justify-between border-b border-border px-3 py-1">
         <WindowControls />
         <KeyHint
           keys="Esc"
           onClick={onComplete}
           title="Skip onboarding (or press Esc)"
-          className="no-drag text-xs text-white/40"
+          className="no-drag text-xs text-muted-foreground"
         >
           to skip
         </KeyHint>
@@ -81,7 +81,7 @@ export function OnboardingOverlay({ onComplete }: { onComplete: () => void }) {
           tabIndex={-1}
           role="dialog"
           aria-label="Welcome to llink"
-          className="flex w-full max-w-md flex-col items-center gap-8 rounded-2xl border border-white/10 bg-white/5 p-10 outline-none"
+          className="flex w-full max-w-md flex-col items-center gap-8 rounded-2xl border border-border bg-card p-10 outline-none"
         >
           {step === 'welcome' && (
             <OnboardingStep
@@ -103,16 +103,16 @@ export function OnboardingOverlay({ onComplete }: { onComplete: () => void }) {
                 className={cn(
                   'h-1.5 rounded-full transition-all',
                   i === index
-                    ? 'w-6 bg-white/80'
+                    ? 'w-6 bg-foreground'
                     : i < index
-                      ? 'w-1.5 bg-white/40'
-                      : 'w-1.5 bg-white/15',
+                      ? 'w-1.5 bg-foreground/40'
+                      : 'w-1.5 bg-foreground/15',
                 )}
               />
             ))}
           </div>
 
-          <div className="flex min-h-5 items-center justify-center gap-4 text-xs text-white/40">
+          <div className="flex min-h-5 items-center justify-center gap-4 text-xs text-muted-foreground">
             {index > 0 && (
               <KeyHint
                 keys="←"
diff --git a/js/desktop/src/features/onboarding/onboarding-step.tsx b/js/desktop/src/features/onboarding/onboarding-step.tsx
index 33447ca..49598c7 100644
--- a/js/desktop/src/features/onboarding/onboarding-step.tsx
+++ b/js/desktop/src/features/onboarding/onboarding-step.tsx
@@ -25,17 +25,19 @@ export function OnboardingStep({
   return (
     <div className="flex flex-col items-center gap-6 text-center">
       <div className="space-y-2">
-        <h2 className="text-2xl font-semibold tracking-tight text-white">
+        <h2 className="text-2xl font-semibold tracking-tight text-foreground">
           {title}
         </h2>
         {subtitle && (
-          <p className="mx-auto max-w-xs text-sm text-white/50">{subtitle}</p>
+          <p className="mx-auto max-w-xs text-sm text-muted-foreground">
+            {subtitle}
+          </p>
         )}
       </div>
       {children && (
         <div className="flex flex-col items-center gap-4 py-2">{children}</div>
       )}
-      <p aria-live="polite" className="min-h-5 text-sm text-white/60">
+      <p aria-live="polite" className="min-h-5 text-sm text-muted-foreground">
         {status}
       </p>
       {footer && (
diff --git a/js/desktop/src/features/onboarding/permission-step.tsx b/js/desktop/src/features/onboarding/permission-step.tsx
index a3cbd1f..9dfe2e1 100644
--- a/js/desktop/src/features/onboarding/permission-step.tsx
+++ b/js/desktop/src/features/onboarding/permission-step.tsx
@@ -28,11 +28,11 @@ export function PermissionStep({ onAdvance }: { onAdvance: () => void }) {
       subtitle="llink records audio and video. Grant access once so recording just works."
       status={
         granted ? (
-          <span className="inline-flex items-center gap-1.5 text-emerald-300">
+          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
             <Check className="size-4" /> Access granted.
           </span>
         ) : denied ? (
-          <span className="text-white/60">
+          <span className="text-muted-foreground">
             No access yet. You can enable it later in System Settings.
           </span>
         ) : null
diff --git a/js/desktop/src/features/onboarding/tap-step.tsx b/js/desktop/src/features/onboarding/tap-step.tsx
index 9122364..ab25268 100644
--- a/js/desktop/src/features/onboarding/tap-step.tsx
+++ b/js/desktop/src/features/onboarding/tap-step.tsx
@@ -36,11 +36,11 @@ export function TapStep({ onAdvance }: { onAdvance: () => void }) {
       }
       status={
         satisfied ? (
-          <span className="inline-flex items-center gap-1.5 text-emerald-300">
+          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
             <Check className="size-4" /> Done.
           </span>
         ) : recording ? (
-          <span className="inline-flex items-center gap-2 text-white/70">
+          <span className="inline-flex items-center gap-2 text-muted-foreground">
             <span className="size-2.5 rounded-full bg-red-500 motion-safe:animate-pulse" />
             Recording
           </span>
diff --git a/js/desktop/src/features/onboarding/toggle-step.tsx b/js/desktop/src/features/onboarding/toggle-step.tsx
index 5ca3684..0b60727 100644
--- a/js/desktop/src/features/onboarding/toggle-step.tsx
+++ b/js/desktop/src/features/onboarding/toggle-step.tsx
@@ -41,16 +41,16 @@ export function ToggleStep({ onAdvance }: { onAdvance: () => void }) {
       }
       status={
         satisfied ? (
-          <span className="inline-flex items-center gap-1.5 text-emerald-300">
+          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
             <Check className="size-4" />{' '}
             {isVideo ? 'Back to video.' : 'Audio it is.'}
           </span>
         ) : null
       }
     >
-      <div className="flex size-32 flex-col items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/5 text-white">
+      <div className="flex size-32 flex-col items-center justify-center gap-2 rounded-2xl border border-border bg-muted text-foreground">
         {isVideo ? <Video className="size-9" /> : <Mic className="size-9" />}
-        <span className="text-sm text-white/70">
+        <span className="text-sm text-muted-foreground">
           {isVideo ? 'Video' : 'Audio'}
         </span>
       </div>