From 637c701101241e5e27982f1a436704bbc07509ea Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 3 Jul 2026 17:42:53 +0000
Subject: [PATCH] fix: dark-mode contrast bugs from the Studio light-mode
 rollout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SliderRow: the "default: X" helper text used dark:text-slate-700,
  which gets darker on the dark shell instead of lighter — swap to
  dark:text-slate-400 so it stays readable.
- CheatsheetPanel, HomePanel, ThemesPanel: search/save inputs were
  missing a dark:placeholder variant, staying at the light-only
  placeholder:text-slate-600 against the new dark input background.
- ThemesPanel: the "No saved themes yet" empty state had no dark:
  variant at all.

Found by CodeRabbit review on SLASHED-Plugins#154.
---
 configurator/src/components/inputs/SliderRow.svelte       | 2 +-
 configurator/src/components/panels/CheatsheetPanel.svelte | 2 +-
 configurator/src/components/panels/HomePanel.svelte       | 2 +-
 configurator/src/components/panels/ThemesPanel.svelte     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/configurator/src/components/inputs/SliderRow.svelte b/configurator/src/components/inputs/SliderRow.svelte
index a6c9c0ab..784d9060 100644
--- a/configurator/src/components/inputs/SliderRow.svelte
+++ b/configurator/src/components/inputs/SliderRow.svelte
@@ -90,7 +90,7 @@
   {:else}
     <RangeWithNumber {value} {min} {max} {step} {unit} {onChange} />
     {#if rawDefault && !overridden}
-      <p class="text-[9px] font-mono text-slate-300 dark:text-slate-700 mt-0.5 leading-none">default: {rawDefault}</p>
+      <p class="text-[9px] font-mono text-slate-300 dark:text-slate-400 mt-0.5 leading-none">default: {rawDefault}</p>
     {/if}
   {/if}
 
diff --git a/configurator/src/components/panels/CheatsheetPanel.svelte b/configurator/src/components/panels/CheatsheetPanel.svelte
index 6ee5d5e2..010465e9 100644
--- a/configurator/src/components/panels/CheatsheetPanel.svelte
+++ b/configurator/src/components/panels/CheatsheetPanel.svelte
@@ -89,7 +89,7 @@
       type="search"
       bind:value={query}
       placeholder="Search classes, tokens, descriptions…"
-      class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+      class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 dark:placeholder:text-slate-400 focus:outline-none focus:border-indigo-500"
     />
     <!-- Tab switcher -->
     <div class="flex bg-black/4 dark:bg-white/4 border border-black/8 dark:border-white/8 rounded-lg p-0.5 gap-0.5">
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 48218a06..6edb5ffc 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -155,7 +155,7 @@
         bind:value={newName}
         placeholder="Save current as…"
         onkeydown={(e) => { if (e.key === "Enter") handleQuickSave(); }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 dark:placeholder:text-slate-400 focus:outline-none focus:border-indigo-500"
       />
       <button
         onclick={handleQuickSave}
diff --git a/configurator/src/components/panels/ThemesPanel.svelte b/configurator/src/components/panels/ThemesPanel.svelte
index d06e78c0..21556b8b 100644
--- a/configurator/src/components/panels/ThemesPanel.svelte
+++ b/configurator/src/components/panels/ThemesPanel.svelte
@@ -50,7 +50,7 @@
         bind:value={newName}
         placeholder="Theme name"
         onkeydown={(e) => { if (e.key === "Enter") handleSave(); }}
-        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+        class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 dark:placeholder:text-slate-400 focus:outline-none focus:border-indigo-500"
       />
       <button
         onclick={handleSave}
@@ -74,7 +74,7 @@
   <div class="space-y-2">
     {#if themes.length === 0}
       <div class="rounded-xl border border-dashed border-black/10 dark:border-white/10 p-6 text-center">
-        <p class="text-[11px] text-slate-500">No saved themes yet.</p>
+        <p class="text-[11px] text-slate-500 dark:text-slate-400">No saved themes yet.</p>
         <p class="text-[10px] text-slate-400 dark:text-slate-600 mt-1">Configure your tokens, then save them above.</p>
       </div>
     {:else}