fix(theme-studio): make the color picker stand out from the page

The picker panel's background (#161412) sat a few shades off the page background (#0d0b0a), so it was hard to tell apart from the page. I gave it the studio's gold accent border (#e8bd30) and lifted the background to #1f1c19, both already used in the toolbar chrome, so the panel reads as a distinct surface. The #pickertest gate asserts the accent border and a per-channel background lift of at least 12 over the page, so the distinction can't quietly regress.

1 files changed, 16 insertions, 1 deletions

diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index d64316c11..6459960dd 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -98,7 +98,7 @@
  .palctl input[type=text]::placeholder{color:#b4b1a2;opacity:1}
  .palctl{position:relative}
  .swatch{width:128px;height:58px;border:1px solid #555;border-radius:6px;cursor:pointer;background:#888}
- .picker{display:none;position:absolute;top:66px;left:0;z-index:60;background:#161412;border:1px solid #3a3a3a;border-radius:8px;padding:12px;box-shadow:0 10px 30px #000b;width:470px}
+ .picker{display:none;position:absolute;top:66px;left:0;z-index:60;background:#1f1c19;border:1px solid #e8bd30;border-radius:8px;padding:12px;box-shadow:0 10px 30px #000b;width:470px}
  .picker .prow{display:flex;gap:10px}
  .sv{position:relative;width:400px;height:320px;border-radius:4px;cursor:crosshair}
  .svmask{position:absolute;inset:0;pointer-events:none;border-radius:4px}
@@ -3549,6 +3549,21 @@ if(location.hash==='#gnustest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c
   A(used.includes(f),'preview includes '+f);
  document.title='GNUSTEST '+(ok?'PASS':'FAIL');
  const d=document.createElement('div');d.id='gnustest';d.textContent='GNUSTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
+// picker-distinct gate (open with #pickertest): the color picker panel must stand
+// out from the page background. It carries a highlighted gold accent border, and its
+// background is meaningfully lighter than the body so the two are easy to tell apart.
+if(location.hash==='#pickertest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ const pk=document.getElementById('picker');A(!!pk,'picker element exists');
+ if(pk){const cs=getComputedStyle(pk),body=getComputedStyle(document.body);
+  const bc=(cs.borderTopColor.match(/\d+/g)||[]).slice(0,3).map(Number);
+  const pkbg=(cs.backgroundColor.match(/\d+/g)||[]).slice(0,3).map(Number);
+  const bdbg=(body.backgroundColor.match(/\d+/g)||[]).slice(0,3).map(Number);
+  A(bc.join(',')==='232,189,48','picker carries the gold accent border (got '+cs.borderTopColor+')');
+  const lift=pkbg.map((c,i)=>c-bdbg[i]);
+  A(lift.every(d=>d>=12),'picker background is clearly lighter than the page (per-channel lift '+lift.join(',')+')');
+ }
+ document.title='PICKERTEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='pickertest';d.textContent='PICKERTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
 // Box-cluster gate (open with #boxtest): the box control is a 2x2 cluster of
 // four radio buttons (none / line / pressed / raised); the color swatch shows
 // only while a box style is active.