feat(/designs): hue swatches 14px → 20px for tap-friendly mobile + subtle shadow + hex tooltip on hover; min-height:32px gets the chip to WCAG 2.5.5 touch target threshold

f757e73fdaa56df4933e03d9186796b66314afa8 · 2026-05-14 11:05:24 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit f757e73fdaa56df4933e03d9186796b66314afa8
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 11:05:24 2026 -0700

    feat(/designs): hue swatches 14px → 20px for tap-friendly mobile + subtle shadow + hex tooltip on hover; min-height:32px gets the chip to WCAG 2.5.5 touch target threshold
---
 server.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index f2e39e1..ddd1679 100644
--- a/server.js
+++ b/server.js
@@ -3556,8 +3556,8 @@ ${cat === 'mural-scenic' ? `
         if (motifQ) qs.push('motif=' + encodeURIComponent(motifQ));
         qs.push('hue=' + encodeURIComponent(k));
         const href = '/designs?' + qs.join('&');
-        return `<a href="${href}" class="hue-chip${on?' is-on':''}" style="display:inline-flex;align-items:center;gap:6px;font:11px var(--sans);padding:4px 11px 4px 4px;border:1px solid ${on?'var(--accent)':'var(--line)'};background:${on?'var(--accent)':'transparent'};color:${on?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none">
-          <span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:${hex};border:1px solid rgba(0,0,0,.15)"></span>
+        return `<a href="${href}" class="hue-chip${on?' is-on':''}" title="Filter by ${k} (${hex.toUpperCase()})" style="display:inline-flex;align-items:center;gap:7px;font:11px var(--sans);padding:4px 12px 4px 5px;border:1px solid ${on?'var(--accent)':'var(--line)'};background:${on?'var(--accent)':'transparent'};color:${on?'var(--bg)':'var(--ink-soft)'};border-radius:999px;text-decoration:none;min-height:32px">
+          <span aria-hidden="true" style="display:inline-block;width:20px;height:20px;border-radius:50%;background:${hex};border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 2px rgba(0,0,0,.08)"></span>
           ${k} <span style="opacity:.55">·${hueCounts[k]||0}</span>
         </a>`;
       }).join('')}

← 5733155 feat(/designs): floating scroll-to-top button (↑) appears af · back to Wallco Ai · feat(a11y): visible focus ring on design cards via :focus-vi 8a9c08f →