From 0ffd6f5a450e716e7ef3297d4bec2fda36649cdf Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Thu, 2 Jul 2026 23:50:27 -0400 Subject: feat(theme-studio): previews render the chosen face height heightCssValue maps a face's height to CSS from its stored kind: a relative multiplier renders as em, an absolute 1/10pt value as true pt, with legacy objects falling back to integer/fractional inference. uiCss feeds it to the mock editor, so the mode-line, mode-line-inactive, and line-number bars visibly thicken with an absolute height while the buffer text stays put; paintUI scales the UI row's sample text; the package-preview span builder swaps its em-only sizing for the same kind-aware value. faceCss now accepts a unit-carrying string for fontSize alongside the existing em number. --- scripts/theme-studio/theme-studio.html | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (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 ab3a273a..2f74bee9 100644 --- a/scripts/theme-studio/theme-studio.html +++ b/scripts/theme-studio/theme-studio.html @@ -628,7 +628,7 @@ function faceCss(face,fg,bg,opts){ parts.push('font-weight:'+cssWeight(face.weight), 'font-style:'+(face.slant||'normal'), 'text-decoration:'+faceDecoration(face)); - if(opts.fontSize!=null)parts.push('font-size:'+opts.fontSize+'em'); + if(opts.fontSize!=null)parts.push('font-size:'+opts.fontSize+(typeof opts.fontSize==='number'?'em':'')); const bx=boxCss(face.box,opts.boxBg); if(bx)parts.push('box-shadow:'+bx); return parts.join(';'); @@ -1162,6 +1162,15 @@ function parseHeightEntry(kind,raw){ } // The computed hint beside an absolute entry: 130 -> "= 13.0pt". function ptHint(height){return typeof height==='number'&&isFinite(height)?('= '+(height/10).toFixed(1)+'pt'):'';} +// CSS font-size for a face's height: a relative multiplier renders as em, an +// absolute 1/10pt value as true pt (the preview shows real size), unset or the +// identity 1 as null (inherit). The stored heightMode rules; a legacy object +// without one falls back to integer/fractional inference, same as the loader. +function heightCssValue(f){ + if(!f||typeof f.height!=='number'||!isFinite(f.height)||f.height===1)return null; + const kind=f.heightMode||(Number.isInteger(f.height)?'abs':'rel'); + return kind==='abs'?(f.height/10)+'pt':f.height+'em'; +} // Compose an element-hover tooltip: the face's docstring on top, the existing // hover text (e.g. the bare face name) below it, separated by a blank line. A @@ -2612,7 +2621,7 @@ function flashUiPreview(f){const sp=document.querySelectorAll(`#mockframe [data- function flashPkg(f){flashRow(document.querySelector(`#pkgbody tr[data-face="${f}"]`));} function flashPkgPreview(f){const sp=document.querySelectorAll(`#pkgpreview [data-face="${f}"]`);if(sp.length){flashEls(sp);return;}const row=document.querySelector(`#pkgbody tr[data-face="${f}"]`);if(row)flashEl(row.querySelector('.cat'));} function mockSpan(k,t){return `${esc(t)}`;} -function uiCss(o,fgv,bgv,opts={}){const fg=fgv===undefined?effFg(o.fg):fgv,bg=bgv===undefined?o.bg:bgv;return faceCss(o,fg,bg,{noBg:opts.noBg,boxBg:bg||MAP['bg']});} +function uiCss(o,fgv,bgv,opts={}){const fg=fgv===undefined?effFg(o.fg):fgv,bg=bgv===undefined?o.bg:bgv;return faceCss(o,fg,bg,{noBg:opts.noBg,fontSize:heightCssValue(o),boxBg:bg||MAP['bg']});} // Size a preview pane to its faces table, minus the label bar above it. Shared by // the UI mock and the package preview, which differ only in their element IDs. function syncPaneHeight(tableId,paneId){const t=document.getElementById(tableId),m=document.getElementById(paneId);if(!t||!m)return;const lb=m.previousElementSibling,lbh=lb?lb.getBoundingClientRect().height+10:30;m.style.height=Math.max(t.getBoundingClientRect().height-lbh,220)+'px';} @@ -2788,7 +2797,7 @@ function buildPkgTable(){ // app.js. Pure preview HTML builders (ofs/os/previewLines + renderXxxPreview); // they reference shared globals (PKGMAP, MAP, faceCss, effFg, ...) and are // inlined into the page's single script element via the PREVIEWS_J token in app.js. -function ofs(app,face){const f=PKGMAP[app][face]||{},fg=effFg(pkgEffFg(app,face)),bg=pkgEffBg(app,face);return faceCss(f,fg,bg,{fontSize:(f.height||1),boxBg:bg||MAP['bg']});} +function ofs(app,face){const f=PKGMAP[app][face]||{},fg=effFg(pkgEffFg(app,face)),bg=pkgEffBg(app,face);return faceCss(f,fg,bg,{fontSize:heightCssValue(f),boxBg:bg||MAP['bg']});} // The CSS for a UI-owned face rendered off any preview surface: effective fg // (floored to the default fg) and bg, following the built-in UI inherit chain so // the rendered color matches what the registry reports. The @ui counterpart to ofs. @@ -4067,7 +4076,7 @@ function worstCellHtml(face){ // Repaint every covered overlay face (their floors depend on the syntax palette, // so a syntax-color edit has to refresh them even though it doesn't rebuild the table). function repaintCovered(){COVERED_FACES.forEach(f=>{if(UIMAP[f]&&document.getElementById('uicr-'+f))paintUI(f);});} -function paintUI(face){const pv=document.getElementById('uiprev-'+face);if(!pv)return;const o=UIMAP[face];pv.style.color=effFg(o.fg);pv.style.background=effBg(o.bg);pv.style.fontWeight=cssWeight(o.weight);pv.style.fontStyle=o.slant||'normal';pv.style.textDecoration=(o.underline?'underline ':'')+(o.strike?'line-through':'')||'none';pv.style.boxShadow=boxCss(o.box,effBg(o.bg)); +function paintUI(face){const pv=document.getElementById('uiprev-'+face);if(!pv)return;const o=UIMAP[face];pv.style.color=effFg(o.fg);pv.style.background=effBg(o.bg);pv.style.fontWeight=cssWeight(o.weight);pv.style.fontStyle=o.slant||'normal';pv.style.fontSize=heightCssValue(o)||'';pv.style.textDecoration=(o.underline?'underline ':'')+(o.strike?'line-through':'')||'none';pv.style.boxShadow=boxCss(o.box,effBg(o.bg)); const report=coveredContrastReport(face); pv.title=''; const cr=document.getElementById('uicr-'+face);if(cr){cr.title='';const wc=worstCellHtml(face);if(wc!==null){cr.title=report.empty?'this overlay has no syntax foreground set yet':(failureTitle(report)||'all covered text clears '+WORST_TARGET.toFixed(1));cr.innerHTML=wc;}else{const efg=effFg(o.fg),ebg=effBg(o.bg),r=contrast(efg,ebg);cr.innerHTML=crHtml(r);}}} -- cgit v1.2.3