From aa9b3e5dd5f5122f7bbfe6e0867b62837e3faf1a Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 9 Jun 2026 19:23:05 -0500 Subject: feat(theme-studio): show the hex under each ramp preview tile Each ramp step tile showed only its derived name. It now shows the hex underneath too, matching the palette chips, so you can read the generated value without hovering for the title. The #ramptest gate asserts every tile carries its hex line. --- scripts/theme-studio/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scripts/theme-studio/app.js') diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js index dc5b44bd6..ff6d7c47d 100644 --- a/scripts/theme-studio/app.js +++ b/scripts/theme-studio/app.js @@ -309,7 +309,7 @@ function renderRamp(){ rampNote(r.adjusted.length?('adjusted: '+r.adjusted.join(', ')):'',false); r.steps.forEach(s=>{const nm=rampStepName(s.offset);const c=document.createElement('div');c.className='rchip';c.style.background=s.hex;c.style.color=textOn(s.hex); c.title=nm+' '+s.hex+(s.clamped?' (gamut-clamped)':''); - c.innerHTML=`${esc(nm)}${s.clamped?'!':''}`; + c.innerHTML=`${esc(nm)}${s.hex}${s.clamped?'!':''}`; c.onclick=()=>addRampStep(s);prev.appendChild(c);}); } // Insert a step adjacent to the source swatch, keeping the ramp siblings in @@ -1012,6 +1012,7 @@ if(location.hash==='#ramptest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c selectedIdx=PALETTE.findIndex(p=>p[1]==='blue');document.getElementById('newhexstr').value='#67809c';document.getElementById('newname').value='blue'; openRamp();document.getElementById('rampn').value='2';document.getElementById('rampstepl').value='0.08';document.getElementById('rampce').value='0.5';renderRamp(); A(document.querySelectorAll('#rampprev .rchip').length===4,'expected 4 step chips, got '+document.querySelectorAll('#rampprev .rchip').length); + A(document.querySelectorAll('#rampprev .rchip .rhex').length===4,'each step tile shows its hex'); addAllRampSteps(); const names=PALETTE.map(p=>p[1]),bi=names.indexOf('blue'); A(names.slice(bi,bi+5).join(',')==='blue,blue-2,blue-1,blue+1,blue+2','order after blue: '+names.slice(bi,bi+5).join(',')); -- cgit v1.2.3