aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/panel-widget-gallery.html
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-07-12 19:25:31 -0500
committerCraig Jennings <c@cjennings.net>2026-07-12 19:25:31 -0500
commitfa37b46e5c8a62f28199e3561f7c9408e8a25f09 (patch)
treecac61f69fcd1f53a7a9c8a4202597f888d9034f5 /docs/prototypes/panel-widget-gallery.html
parent4ce6e6a9401015d05551a2e101737b08e6581139 (diff)
downloadarchsetup-fa37b46e5c8a62f28199e3561f7c9408e8a25f09.tar.gz
archsetup-fa37b46e5c8a62f28199e3561f7c9408e8a25f09.zip
feat(gallery): palette as named instrument colors at the page bottom, default size M
The palette stops being a token dump: 36 named colors grouped by role (materials, faces and inks, lamps and jewels, phosphors, needles), each naming where it appears on the instruments. No hex codes render anywhere on the page, and page chrome is deliberately excluded — the card documents what the widgets are made of, not how the page is styled. Default widget size drops to M.
Diffstat (limited to 'docs/prototypes/panel-widget-gallery.html')
-rw-r--r--docs/prototypes/panel-widget-gallery.html100
1 files changed, 69 insertions, 31 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 839d479..87d7d89 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -73,7 +73,10 @@ body[data-size="2"] .wrap,body[data-size="3"] .wrap{max-width:none}
.swatch .sw.txt{display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:.62rem;
background:var(--well);padding:0 6px;text-align:center;overflow:hidden}
.swatch .swn{color:var(--cream);font-size:.8rem}
-.swatch .swv{color:var(--dim);font-size:.74rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
+.swatch .swv{color:var(--dim);font-size:.72rem;line-height:1.35}
+.palhead{grid-column:1/-1;color:var(--steel);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
+ margin-top:.8rem;display:flex;align-items:center;gap:12px}
+.palhead::after{content:"";height:1px;background:var(--wash);flex:1}
h2{color:var(--steel);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
margin:2.2rem 0 .2rem;display:flex;align-items:center;gap:12px}
h2::after{content:"";height:1px;background:var(--wash);flex:1}
@@ -599,7 +602,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
-<body data-size="3">
+<body data-size="2">
<div class="wrap">
<header class="masthead">
<div class="eyebrow">archsetup · dupre panel family · live kit</div>
@@ -613,17 +616,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
a live signal; the pointer types drive from your drag.</p>
<div class="szbar"><span class="lab">widget size</span>
<button class="key" data-sz="1">S</button>
- <button class="key" data-sz="2">M</button>
- <button class="key on" data-sz="3">L</button>
+ <button class="key on" data-sz="2">M</button>
+ <button class="key" data-sz="3">L</button>
</div>
</header>
-<h2>Palette — design tokens</h2>
-<p class="secnote">Read live from the generated :root block (tokens.json via gen_tokens.py), so this section always shows
- exactly what the widgets render with. Hex tokens get a swatch; the glow entries are rgb triples used inside
- rgba() glows; mono and pulse-rate are the non-color tokens.</p>
-<div class="palgrid" id="palette"></div>
-
<h2>Controls — take input</h2>
<div class="grid" id="controls"></div>
@@ -633,6 +630,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
<h2>Indicators &amp; readouts — state or number</h2>
<div class="grid" id="indicators"></div>
+<h2>Palette — the instrument colors</h2>
+<p class="secnote">Every named color the instruments are built from — markers, hands, faces, lamps, phosphors,
+ materials — with where it appears. Page chrome (background, body text) is deliberately absent.</p>
+<div class="palgrid" id="palette"></div>
+
</div>
<script>
const $ = id => document.getElementById(id);
@@ -644,29 +646,65 @@ document.querySelectorAll('.szbar .key').forEach(b=>b.addEventListener('click',(
/* boost the intrinsically tiny widgets (audit: content under 10% of the stage) */
const BOOST=['01','07','08','12','13','N14','18'];
-/* ---- palette section: read the generated :root block live ---- */
+/* ---- palette: the named instrument colors, grouped by role. No codes shown — names and uses. ---- */
+const PALETTE=[
+ ['Materials',[
+ ['Brass','#b8944a','comfort-meter bezel and knurl'],
+ ['Copper','#ad7a43','knife-switch blades, jaws and hinge'],
+ ['Chrome silver','var(--silver)','needles, ball lever, fader caps, chrome handles'],
+ ['Machined steel','var(--steel)','engraved captions, scale furniture, printed panel lines'],
+ ['Aluminum','#c9c4b8','timer hub, lever shafts, counter bezels'],
+ ['Rubber & bakelite','#2c2824','knob bodies, rocker pad, stomp switch'],
+ ]],
+ ['Faces & inks',[
+ ['Cream dial','var(--cream)','tick marks, scale numerals, dial faces, flag windows'],
+ ['Chart paper','#efe9da','day-date disc, circular chart, comfort face, telegraph dial'],
+ ['Face ink','#14110e','numerals and printing on the paper faces'],
+ ['CRT face green','#b9d8c0','round-scope face tint'],
+ ['Sky slate','var(--slate-hi)','attitude-indicator sky'],
+ ['Earth brown','#5c4630','attitude-indicator ground'],
+ ['Instrument black','#17140f','bezels, plates and housings'],
+ ]],
+ ['Lamps, LEDs & jewels',[
+ ['Lit amber','var(--gold-hi)','lit keys, sweep line, fixed indexes, blinkenlight lamps'],
+ ['Panel amber','var(--gold)','key gradients, bearing rings, seated pins, heading bug'],
+ ['Warning amber','var(--amber-warn)','warn cells, tripped collars, gear-transit lamps'],
+ ['Run green','var(--pass)','run lamps, gear greens, monitor bars, LIVE lamps'],
+ ['Fail terracotta','var(--fail)','muted keys, fault cells, TRIP button'],
+ ['LED green','var(--sevgrn)','seven-segment digits, battery cells'],
+ ['LED red','var(--sevred)','red seven-segment variant'],
+ ['Matrix red','#ff4a30','dot-matrix LEDs'],
+ ['Jewel red','var(--jewel-r)','pilot-lamp lens'],
+ ['Jewel amber','var(--jewel-a)','pilot-lamp lens, four-way corner lamps'],
+ ['Jewel green','var(--jewel-g)','pilot-lamp lens'],
+ ['Neon orange','#ff9a4c','nixie digits, dekatron glow, red screen family'],
+ ['Flip-disc yellow','#e3d44f','flip-dot faces'],
+ ['PDP magenta','#3a1420','blinkenlights panel skin'],
+ ]],
+ ['Screens & phosphors',[
+ ['Phosphor green','var(--phos)','oscilloscope traces, green screen family'],
+ ['Phosphor dim','var(--phos-dim)','phosphor afterglow and dark screen grounds'],
+ ['VFD cyan','var(--vfd)','marquee, filter-bank arrows, vfd screen family'],
+ ['Graticule green','#3d5c46','CRT graticule rulings'],
+ ['LCD white','#f2f4f2','waveform-editor ink, white screen family'],
+ ['P4 blue-white','#cfe4ff','blue screen family'],
+ ]],
+ ['Needles & controls',[
+ ['Needle red','#c23a28','comfort-meter needles, red hands'],
+ ['Control red','#e0523a','stop knobs, telegraph pointer, palm buttons, OFF marks'],
+ ['Pointer yellow','#e8cf4a','day-date read hand'],
+ ]],
+];
(function buildPalette(){
const host=$('palette'); if(!host)return;
- let rootRule=null;
- for(const sh of document.styleSheets){
- for(const r of sh.cssRules){ if(r.selectorText===':root'){rootRule=r;break;} }
- if(rootRule)break;
- }
- if(!rootRule)return;
- const st=rootRule.style;
- for(let i=0;i<st.length;i++){
- const name=st[i]; if(!name.startsWith('--'))continue;
- const val=st.getPropertyValue(name).trim();
- const isHex=/^#[0-9a-f]{3,8}$/i.test(val);
- const isTriple=/^\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}$/.test(val);
- const esc=val.replace(/&/g,'&amp;').replace(/</g,'&lt;');
- const sw=isHex?`<div class="sw" style="background:${val}"></div>`
- :isTriple?`<div class="sw" style="background:rgb(${val})"></div>`
- :`<div class="sw txt">${esc}</div>`;
- const tile=document.createElement('div'); tile.className='swatch';
- tile.innerHTML=`${sw}<div class="swn">${name}</div><div class="swv">${isTriple?esc+' (glow rgb)':esc}</div>`;
- host.appendChild(tile);
- }
+ for(const [group,colors] of PALETTE){
+ const h=document.createElement('div'); h.className='palhead'; h.textContent=group;
+ host.appendChild(h);
+ for(const [name,val,used] of colors){
+ const tile=document.createElement('div'); tile.className='swatch';
+ tile.innerHTML=`<div class="sw" style="background:${val}"></div>`+
+ `<div class="swn">${name}</div><div class="swv">${used}</div>`;
+ host.appendChild(tile);}}
})();
/* ---- screen-color families: period-authentic alternates for the screen widgets ----