fix(launcher): improve test mode popup contrast for light/dark mode
- 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
This commit is contained in:
Scott Idem
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user