refactor(gallery): slide-toggle style options become GW.slideToggle opts

The four style axes (on/off track, off engraving, thumb) move from a page-side chip rig into named constructor opts backed by GW.slideToggle.STYLES, with a setStyle handle method for live restyling. The gallery chips stay as a demo rig driving that method. Defaults match the stylesheet fallbacks, so a bare GW.slideToggle renders unchanged.

1 files changed, 37 insertions, 2 deletions

diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js
index 72bb107..c01972e 100644
--- a/docs/prototypes/widgets.js
+++ b/docs/prototypes/widgets.js
@@ -114,15 +114,50 @@ const SCREEN_FAMS = {
 
 const noop = () => {};
 
-/* 01 slide toggle — on/off pill. State colors ride CSS vars (--sw-*). */
+/* 01 slide toggle — on/off pill. State colors ride CSS vars (--sw-*).
+   opts.onStyle / offStyle / offText / thumb pick a named style per axis from
+   GW.slideToggle.STYLES; defaults match the stylesheet fallbacks. The handle's
+   setStyle(axis, name) restyles a live instance (the gallery chips use it). */
 GW.slideToggle = function (host, opts = {}) {
   const onChange = opts.onChange || noop;
   const sw = document.createElement('span'); sw.className = 'switch'; host.appendChild(sw);
+  const setStyle = (axis, name) => {
+    const o = (GW.slideToggle.STYLES[axis] || {})[name];
+    if (!o) return;
+    for (const [k, v] of Object.entries(o.vars)) sw.style.setProperty(k, v);
+  };
+  setStyle('on', opts.onStyle || 'amber');
+  setStyle('off', opts.offStyle || 'dark');
+  setStyle('offText', opts.offText || 'white');
+  setStyle('thumb', opts.thumb || 'light');
   let on;
   const set = v => { on = !!v; sw.classList.toggle('on', on); onChange(on, on ? 'ON' : 'OFF'); };
   sw.addEventListener('click', () => set(!on));
   set(opts.on !== undefined ? opts.on : true);
-  return { el: sw, get: () => on, set };
+  return { el: sw, get: () => on, set, setStyle };
+};
+/* named styles per axis: dot = swatch color for pickers, vars = --sw-* overrides */
+GW.slideToggle.STYLES = {
+  on: {
+    amber: { dot: 'var(--gold-hi)', vars: { '--sw-on-bg': 'linear-gradient(180deg,var(--amber-grad-top),var(--gold))', '--sw-on-brd': 'var(--gold-hi)', '--sw-on-ink': 'var(--panel)' } },
+    green: { dot: '#8fb944', vars: { '--sw-on-bg': 'linear-gradient(180deg,#a9c95f,var(--pass))', '--sw-on-brd': '#a9c95f', '--sw-on-ink': 'var(--panel)' } },
+    dark: { dot: '#242019', vars: { '--sw-on-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-on-brd': 'var(--slate)', '--sw-on-ink': 'var(--cream)' } },
+  },
+  off: {
+    dark: { dot: '#242019', vars: { '--sw-off-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-off-brd': 'var(--slate)' } },
+    red: { dot: 'var(--fail)', vars: { '--sw-off-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--sw-off-brd': 'var(--fail)' } },
+  },
+  offText: {
+    white: { dot: 'var(--cream)', vars: { '--sw-off-ink': 'var(--cream)' } },
+    red: { dot: '#e0523a', vars: { '--sw-off-ink': '#e0523a' } },
+    black: { dot: '#14110e', vars: { '--sw-off-ink': '#14110e' } },
+  },
+  thumb: {
+    light: { dot: '#d8d2c4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)' } },
+    dark: { dot: '#2c2824', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#4a453e,#16130f)' } },
+    chrome: { dot: '#9aa2b4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)' } },
+    brass: { dot: '#b8944a', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)' } },
+  },
 };
 
 /* 02 console keys — mutually exclusive push buttons; {label, red} per key */