From 5d584b389847a71ae00ea4598c56ca2d93432df0 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sun, 12 Jul 2026 19:55:00 -0500
Subject: feat(gallery): per-state color choices on the slide toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two chip groups next to the readout: the ON track picks amber or green, the OFF track picks dark or red (red gets cream engraving for contrast). Track colors ride CSS variables with the shipped look as fallback; the thumb never changes — state lives in the revealed track, like the hardware.
---
 docs/prototypes/panel-widget-gallery.html | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

(limited to 'docs/prototypes')

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 410e559..42aa5e3 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -122,14 +122,16 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
    Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
 .switch{display:inline-flex;vertical-align:middle;align-items:center;justify-content:space-between;
   width:52px;height:23px;border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
-  background:linear-gradient(180deg,#15130f,#242019);border:1px solid var(--slate);
+  background:var(--sw-off-bg,linear-gradient(180deg,#15130f,#242019));
+  border:1px solid var(--sw-off-brd,var(--slate));
   box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
 .switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
-  font-family:var(--mono);color:var(--dim)}
+  font-family:var(--mono);color:var(--sw-off-ink,var(--dim))}
 .switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
   background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a);
   box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
-.switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);
+.switch.on{background:var(--sw-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));
+  border-color:var(--sw-on-brd,var(--gold-hi));
   padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
 .switch.on::before{content:"ON";order:1;color:var(--panel)}
 .switch.on::after{order:2}
@@ -4192,6 +4194,28 @@ screenChips('R31',$('radar'),['amber','green','red','blue','vfd'],'amber');
 screenChips('N11',$('scopep').closest('.scope'),['green','amber','red','blue','vfd'],'green');
 BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no);
   if(rd)rd.closest('.card').querySelector('.stagew').classList.add('boost');});
+
+/* slide-toggle color choices: track color per state, thumb never changes */
+(function(){const sw=document.querySelector('.switch');if(!sw)return;
+  const cardEl=sw.closest('.card');
+  const ON_OPTS={amber:{dot:'var(--gold-hi)',vars:{'--sw-on-bg':'linear-gradient(180deg,var(--amber-grad-top),var(--gold))','--sw-on-brd':'var(--gold-hi)'}},
+    green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f'}}};
+  const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)','--sw-off-ink':'var(--dim)'}},
+    red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)','--sw-off-ink':'var(--cream)'}}};
+  const row=document.createElement('div'); row.className='famchips';
+  const group=(label,opts,def)=>{
+    const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab);
+    const chips=[];
+    for(const [name,o] of Object.entries(opts)){
+      const b=document.createElement('span'); b.className='fc'+(name===def?' on':'');
+      b.style.background=o.dot; b.title=name; chips.push(b);
+      b.addEventListener('click',()=>{
+        for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v);
+        chips.forEach(x=>x.classList.toggle('on',x===b));});
+      row.appendChild(b);}};
+  group('on',ON_OPTS,'amber');
+  group('off',OFF_OPTS,'dark');
+  cardEl.insertBefore(row,cardEl.querySelector('.wrd'));})();
 </script>
 </body>
 </html>
-- 
cgit v1.2.3