From 6c7381218764a0318d1196e9d140d10d09a0e783 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 12 May 2026 12:40:39 -0400
Subject: [PATCH] fix(launcher): improve test mode popup contrast for
 light/dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Warning text in cfg_app_modes: replace text-yellow-400/70 with
  preset-tonal-warning badge (theme-aware, readable in both modes).
- Popup dialog: bg-surface-900 → bg-surface-50/95 dark:bg-surface-900/95
  so the card adapts to light/dark instead of being locked dark.
- Code blocks: bg-black/30 → bg-surface-500/10 (neutral opacity).
- Header title: text-warning-400 → text-warning-600 dark:text-warning-400.
- Semantic text colors: all -300 variants → 500-level equivalents:
  text-green-300/400 → text-success-600 dark:text-success-400
  text-primary-300 → text-primary-500
  text-yellow-300/400 → text-warning-500
  text-purple-300 → text-purple-500
---
 .../launcher_cfg_app_modes.svelte             |  2 +-
 .../(launcher)/launcher_file_cont.svelte      | 38 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte b/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
index 3ac70139..09d81cc3 100644
--- a/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
+++ b/src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
@@ -250,7 +250,7 @@ function apply_mode(mode: 'poster' | 'oral') {
                     </span>
                 </label>
                 {#if $events_loc.launcher.native_test_mode}
-                    <p class="ml-1 text-[8px] leading-tight italic text-yellow-400/70">
+                    <p class="badge preset-tonal-warning ml-1 text-[8px] leading-tight italic">
                         ⚠ Active: Open buttons will simulate native launch and
                         show a debug popup instead of running commands.
                     </p>
diff --git a/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte b/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
index fcdc2a10..187ee6fa 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
@@ -648,7 +648,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
         onclick={() => (test_mode_popup_open = false)}>
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
         <div
-            class="bg-surface-900 border-warning-500/40 relative flex max-h-[90vh] w-full max-w-2xl flex-col gap-0 overflow-hidden rounded-xl border shadow-2xl"
+            class="bg-surface-50/95 dark:bg-surface-900/95 border-warning-500/40 relative flex max-h-[90vh] w-full max-w-2xl flex-col gap-0 overflow-hidden rounded-xl border shadow-2xl"
             role="dialog"
             aria-modal="true"
             aria-label="Native Test Mode Debug Info"
@@ -657,7 +657,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
 
             <!-- Header -->
             <div class="bg-warning-500/10 border-warning-500/30 flex items-center gap-2 border-b px-4 py-3">
-                <span class="text-warning-400 font-mono text-xs font-bold uppercase tracking-wider">
+                <span class="text-warning-600 dark:text-warning-400 font-mono text-xs font-bold uppercase tracking-wider">
                     🧪 Native Test Mode — What would run on Mac
                 </span>
                 <button
@@ -674,31 +674,31 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 <!-- File info -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">File</span>
-                    <div class="rounded bg-black/30 px-3 py-2 leading-relaxed">
+                    <div class="rounded bg-surface-500/10 px-3 py-2 leading-relaxed">
                         <div><span class="opacity-50">filename: </span>{test_mode_popup_data.filename}</div>
                         <div><span class="opacity-50">extension: </span>{test_mode_popup_data.extension}</div>
                         <div><span class="opacity-50">hash: </span><span class="opacity-60">{test_mode_popup_data.hash_sha256}</span></div>
-                        <div><span class="opacity-50">temp path: </span><span class="text-green-400">{test_mode_popup_data.simulated_temp_path}</span></div>
+                        <div><span class="opacity-50">temp path: </span><span class="text-success-600 dark:text-success-400">{test_mode_popup_data.simulated_temp_path}</span></div>
                     </div>
                 </div>
 
                 <!-- Cache / copy -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">Steps 1–2</span>
-                    <div class="rounded bg-black/30 px-3 py-2 leading-relaxed">
-                        <div><span class="opacity-50">check_hash_file_cache: </span><span class="text-green-400">{test_mode_popup_data.cache_check}</span></div>
-                        <div><span class="opacity-50">copy_from_cache_to_temp: </span><span class="text-green-400">{test_mode_popup_data.copy_to_temp}</span></div>
+                    <div class="rounded bg-surface-500/10 px-3 py-2 leading-relaxed">
+                        <div><span class="opacity-50">check_hash_file_cache: </span><span class="text-success-600 dark:text-success-400">{test_mode_popup_data.cache_check}</span></div>
+                        <div><span class="opacity-50">copy_from_cache_to_temp: </span><span class="text-success-600 dark:text-success-400">{test_mode_popup_data.copy_to_temp}</span></div>
                     </div>
                 </div>
 
                 <!-- Resolved profile -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">Resolved LaunchProfile</span>
-                    <div class="rounded bg-black/30 px-3 py-2 leading-relaxed">
-                        <div><span class="opacity-50">app: </span><span class="text-primary-300">{test_mode_popup_data.profile.app}</span></div>
-                        <div><span class="opacity-50">display_mode: </span><span class:text-primary-300={test_mode_popup_data.profile.display_mode === 'extend'} class:text-yellow-300={test_mode_popup_data.profile.display_mode === 'mirror'} class:opacity-40={test_mode_popup_data.profile.display_mode === 'none'}>{test_mode_popup_data.profile.display_mode}</span></div>
+                    <div class="rounded bg-surface-500/10 px-3 py-2 leading-relaxed">
+                        <div><span class="opacity-50">app: </span><span class="text-primary-500">{test_mode_popup_data.profile.app}</span></div>
+                        <div><span class="opacity-50">display_mode: </span><span class:text-primary-500={test_mode_popup_data.profile.display_mode === 'extend'} class:text-warning-500={test_mode_popup_data.profile.display_mode === 'mirror'} class:opacity-40={test_mode_popup_data.profile.display_mode === 'none'}>{test_mode_popup_data.profile.display_mode}</span></div>
                         {#if test_mode_popup_data.display_override}
-                            <div><span class="text-yellow-400 opacity-80">display_override (cfg_json): </span><span class="text-yellow-300">{test_mode_popup_data.display_override}</span></div>
+                            <div><span class="text-warning-500 opacity-80">display_override (cfg_json): </span><span class="text-warning-500">{test_mode_popup_data.display_override}</span></div>
                         {/if}
                         <div><span class="opacity-50">post_delay_ms: </span>{test_mode_popup_data.profile.post_delay_ms ?? 2000}</div>
                     </div>
@@ -707,9 +707,9 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 <!-- Step 3: set_display_layout -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">Step 3 — set_display_layout</span>
-                    <div class="rounded bg-black/30 px-3 py-2">
+                    <div class="rounded bg-surface-500/10 px-3 py-2">
                         {#if test_mode_popup_data.profile.display_mode !== 'none'}
-                            <span class="text-primary-300">native.set_display_layout({{ mode: '{test_mode_popup_data.profile.display_mode}' }})</span>
+                            <span class="text-primary-500">native.set_display_layout({{ mode: '{test_mode_popup_data.profile.display_mode}' }})</span>
                         {:else}
                             <span class="opacity-40">skipped (display_mode: none)</span>
                         {/if}
@@ -719,13 +719,13 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 <!-- Step 4: open command -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">Step 4 — Open File</span>
-                    <div class="rounded bg-black/30 px-3 py-2">
+                    <div class="rounded bg-surface-500/10 px-3 py-2">
                         {#if test_mode_popup_data.open_cmd_resolved}
                             <div class="mb-1 opacity-50 text-[9px]">native.run_cmd()</div>
-                            <pre class="whitespace-pre-wrap break-all text-green-300">{test_mode_popup_data.open_cmd_resolved}</pre>
+                            <pre class="whitespace-pre-wrap break-all text-success-600 dark:text-success-400">{test_mode_popup_data.open_cmd_resolved}</pre>
                         {:else}
                             <div class="opacity-50 text-[9px]">native.open_local_file_v2()</div>
-                            <span class="text-yellow-300">{test_mode_popup_data.simulated_temp_path}</span>
+                            <span class="text-warning-500">{test_mode_popup_data.simulated_temp_path}</span>
                             <span class="ml-2 opacity-40">(OS default handler)</span>
                         {/if}
                     </div>
@@ -734,15 +734,15 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
                 <!-- Step 5: post-script -->
                 <div class="flex flex-col gap-1">
                     <span class="text-[9px] font-bold uppercase opacity-50">Steps 5–6 — Wait + Post-Script</span>
-                    <div class="rounded bg-black/30 px-3 py-2">
+                    <div class="rounded bg-surface-500/10 px-3 py-2">
                         <div class="mb-1 opacity-50">sleep({test_mode_popup_data.profile.post_delay_ms ?? 2000}ms)</div>
                         {#if test_mode_popup_data.profile.post_script}
                             {#if test_mode_popup_data.profile.post_script.startsWith('shell:')}
                                 <div class="mb-1 opacity-50 text-[9px]">native.run_cmd() [shell prefix]</div>
-                                <pre class="whitespace-pre-wrap break-all text-yellow-300">{test_mode_popup_data.profile.post_script.slice(6)}</pre>
+                                <pre class="whitespace-pre-wrap break-all text-warning-500">{test_mode_popup_data.profile.post_script.slice(6)}</pre>
                             {:else}
                                 <div class="mb-1 opacity-50 text-[9px]">native.run_osascript() [AppleScript]</div>
-                                <pre class="whitespace-pre-wrap text-purple-300">{test_mode_popup_data.profile.post_script}</pre>
+                                <pre class="whitespace-pre-wrap text-purple-500">{test_mode_popup_data.profile.post_script}</pre>
                             {/if}
                         {:else}
                             <span class="opacity-40">no post_script</span>