From fa37b46e5c8a62f28199e3561f7c9408e8a25f09 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 19:25:31 -0500 Subject: feat(gallery): palette as named instrument colors at the page bottom, default size M MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- docs/prototypes/panel-widget-gallery.html | 100 +++++++++++++++++++++--------- 1 file changed, 69 insertions(+), 31 deletions(-) (limited to 'docs') 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}} - +

Palette — design tokens

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.

Controls — take input

@@ -633,6 +630,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}

Indicators & readouts — state or number

Palette — the instrument colors

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.