From 9e99749de911ffc5b375bc79ee664d498e4d76d6 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 16 Jun 2026 06:11:15 -0500 Subject: feat(theme-studio): move the contrast verdict into a hover The contrast column showed "5.4 PASS". The number's color already encodes the tier (green AAA, grey AA, red fail), so the PASS/FAIL word was redundant. I dropped it and put the WCAG meaning in the cell's hover via a pure contrastTitle helper. crHtml now renders just the colored number. verdictFor stays for the covered-overlay worst-case readout, which is unchanged. --- scripts/theme-studio/theme-studio.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) (limited to 'scripts/theme-studio/theme-studio.html') diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html index fdc5be974..c4dd7149d 100644 --- a/scripts/theme-studio/theme-studio.html +++ b/scripts/theme-studio/theme-studio.html @@ -964,6 +964,16 @@ function ratingColor(r){return r>=7?'#5d9b86':r>=4.5?'#a9b2bb':'#cb6b4d';} // Pick black or white text for a background hex, by WCAG relative luminance. function textOn(h){const L=rl(h);return ((L+0.05)/0.05)>(1.05/(L+0.05))?'#000':'#fff';} + +// Hover text for a contrast ratio. The number's color already encodes the tier +// (ratingColor: green AAA, grey AA, red fail), so the cell drops the PASS/FAIL +// word and this explains the color on hover. +function contrastTitle(r){ + const n=r.toFixed(1)+':1'; + if(r>=7) return n+' (green): passes WCAG AA and AAA'; + if(r>=4.5) return n+' (grey): passes WCAG AA, not AAA'; + return n+' (red): fails WCAG AA'; +} // Pure palette-generator planner and browser-side generator panel. // Pure palette-generator planner. It depends on the shared palette-column model // from app-core.js, but owns candidate hue selection, naming, contrast filtering, @@ -1382,7 +1392,7 @@ function initGeneratorControls(){ // The contrast-cell readout shared by every table: a WCAG ratio colored by its // table verdict. Callers compute r for their own fg/bg. function verdictFor(r,target=4.5){return r>=target?'PASS':'FAIL';} -function crHtml(r,target=4.5){const v=verdictFor(r,target);return `${r.toFixed(1)} ${v}`;} +function crHtml(r){return `${r.toFixed(1)}`;} // Effective fg/bg with the standard fallback: an unset foreground reads as the // default fg (MAP['p']), an unset background as the ground (MAP['bg']). All three // tiers resolve their raw value through these before measuring or rendering. @@ -3369,6 +3379,17 @@ if(location.hash==='#ndtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ PKGMAP[app][face]=seedFace(row[2]||{});buildPkgTable(); document.title='NDTEST '+(ok?'PASS':'FAIL'); const d=document.createElement('div');d.id='ndtest';d.textContent='NDTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);} +// Contrast-cell gate (open with #crtest): the per-face contrast column shows a +// bare colored number (no PASS/FAIL word); the WCAG verdict lives in the hover. +if(location.hash==='#crtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}}; + const app=curApp(),face=APPS[app].faces[0][0];buildPkgTable(); + const cell=document.querySelector('#pkgbody tr[data-face="'+face+'"]').cells[5]; + const span=cell&&cell.querySelector('span'); + A(span&&/^\d+\.\d$/.test(span.textContent.trim()),'contrast cell is a bare number: '+(span&&span.textContent)); + A(span&&!/PASS|FAIL/.test(span.textContent),'no PASS/FAIL word in the contrast cell'); + A(span&&span.title&&/(passes|fails) WCAG/i.test(span.title),'contrast cell carries a WCAG hover: '+(span&&span.title)); + document.title='CRTEST '+(ok?'PASS':'FAIL'); + const d=document.createElement('div');d.id='crtest';d.textContent='CRTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);} // Box-cluster gate (open with #boxtest): the box control is a 2x2 cluster of // four radio buttons (none / line / pressed / raised); the color swatch shows // only while a box style is active. -- cgit v1.2.3