From b21c2f7f1d781bc4a24a086fbc8d7ebd83876b72 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Mon, 8 Jun 2026 03:09:16 -0500 Subject: style(theme-selector): 12pt previews and assignment-table refinements Every preview surface (code samples, live buffer, package previews) now renders at 12pt instead of the earlier mix of 10, 15, and 19px. The code/color assignments table leads with the elements column before color. I dropped the redundant normal style button: toggling bold or italic off already returns a row to normal. --- scripts/theme-selector/generate.py | 26 +++++++++++++------------- scripts/theme-selector/theme-selector.html | 26 +++++++++++++------------- 2 files changed, 26 insertions(+), 26 deletions(-) (limited to 'scripts/theme-selector') diff --git a/scripts/theme-selector/generate.py b/scripts/theme-selector/generate.py index 5ca54c63..facbdb2f 100644 --- a/scripts/theme-selector/generate.py +++ b/scripts/theme-selector/generate.py @@ -192,7 +192,7 @@ HTML = """theme-selector h2{font-size:10pt;color:#8a9496;font-weight:normal;margin:0 0 4px} .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:10px} .col{flex:0 0 auto;width:460px} - pre{background:#0d0b0a;border:1px solid #252321;border-radius:8px;padding:14px 16px;font-size:10pt;overflow:auto;white-space:pre} + pre{background:#0d0b0a;border:1px solid #252321;border-radius:8px;padding:14px 16px;font-size:12pt;overflow:auto;white-space:pre} table.leg{border-collapse:collapse} table.leg td{padding:4px 12px;vertical-align:middle} table.leg th{cursor:pointer;color:#b4b1a2;text-align:left;padding:4px 12px;user-select:none;font-weight:normal} table.leg th:hover{color:#e8bd30} @@ -237,7 +237,7 @@ HTML = """theme-selector .hstep{background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:3px 4px;font:10pt monospace;width:56px} #pkgbody td{padding:3px 8px} #codepre{width:100%;box-sizing:border-box} - .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:10pt/1.7 monospace;display:flex;flex-direction:column} + .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:12pt/1.7 monospace;display:flex;flex-direction:column} .mock .mbuf{flex:1} .mock .ln{display:flex;align-items:stretch;white-space:pre} .mock .fr{width:14px;flex:0 0 auto;border-right:1px solid #ffffff14} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre} @@ -287,7 +287,7 @@ HTML = """theme-selector

code/color assignments

-
color △styleelements △examplecontrast
+
elements △color △styleexamplecontrast
@@ -366,16 +366,16 @@ function buildTable(){ sel.onchange=()=>{MAP[kind]=sel.value;styleChip();styleEx();styleCr();renderCode();if(kind==='bg'){applyGround();buildTable();}}; // style buttons const stTd=document.createElement('td'); - if(kind!=='bg'){const defs=[['N','a','normal'],['B','a','bold'],['I','a','italic']]; + if(kind!=='bg'){const defs=[['B','a','bold'],['I','a','italic']]; const btns={}; defs.forEach(([id,ch,mode])=>{const b=document.createElement('button');b.className='sbtn';b.style.fontWeight=mode==='bold'?'bold':'normal';b.style.fontStyle=mode==='italic'?'italic':'normal';b.textContent=ch; - b.onclick=()=>{if(mode==='normal'){BOLD[kind]=false;ITALIC[kind]=false;}else if(mode==='bold'){BOLD[kind]=!BOLD[kind];}else{ITALIC[kind]=!ITALIC[kind];}refresh();renderCode();styleEx();}; + b.onclick=()=>{if(mode==='bold'){BOLD[kind]=!BOLD[kind];}else{ITALIC[kind]=!ITALIC[kind];}refresh();renderCode();styleEx();}; btns[mode]=b;stTd.appendChild(b);}); - function refresh(){btns.normal.classList.toggle('on',!BOLD[kind]&&!ITALIC[kind]);btns.bold.classList.toggle('on',!!BOLD[kind]);btns.italic.classList.toggle('on',!!ITALIC[kind]);} + function refresh(){btns.bold.classList.toggle('on',!!BOLD[kind]);btns.italic.classList.toggle('on',!!ITALIC[kind]);} refresh();} const c0=document.createElement('td');c0.appendChild(sel); const c2=document.createElement('td');c2.className='cat';c2.textContent=label;c2.style.cursor='pointer';c2.title='flash this category in the code';c2.onclick=()=>flashTokens(kind); - tr.appendChild(c0);tr.appendChild(stTd);tr.appendChild(c2);tr.appendChild(exTd);tr.appendChild(crTd); + tr.appendChild(c2);tr.appendChild(c0);tr.appendChild(stTd);tr.appendChild(exTd);tr.appendChild(crTd); tb.appendChild(tr);} } let dragFrom=null,selectedIdx=null; @@ -580,7 +580,7 @@ function renderOrgPreview(){const a='org-mode',L=[]; L.push(' '+os(a,'org-table-header','| name | hex |')); L.push(' '+os(a,'org-table','|------+---------|')); L.push(' '+os(a,'org-table','| blue | #67809c |')); - return `
${L.join('\\n')}
`; + return `
${L.join('\\n')}
`; } function renderMagitPreview(){const a='magit',L=[]; L.push(os(a,'magit-head','Head:')+' '+os(a,'magit-branch-local','main')+' '+os(a,'magit-diff-revision-summary','Ship the tool')); @@ -601,7 +601,7 @@ function renderMagitPreview(){const a='magit',L=[]; L.push(os(a,'magit-hash','b5b1869f')+' '+os(a,'magit-log-author','Craig')+' enlarge the picker'); L.push(os(a,'magit-hash','4fa5e995')+' '+os(a,'magit-log-author','Craig')+' '+os(a,'magit-keyword','feat')+' color picker'); L.push(os(a,'magit-hash','de07e01a')+' '+os(a,'magit-log-author','Craig')+' '+os(a,'magit-tag','v0.3')+' relative height'); - return `
${L.join('\\n')}
`;} + return `
${L.join('\\n')}
`;} function renderElfeedPreview(){const a='elfeed',L=[]; L.push(os(a,'elfeed-search-filter-face','@6-months-ago +unread')+' '+os(a,'elfeed-search-unread-count-face','3/120')); L.push(''); @@ -612,8 +612,8 @@ function renderElfeedPreview(){const a='elfeed',L=[]; L.push(os(a,'elfeed-log-date-face','02:24:01')+' '+os(a,'elfeed-log-info-level-face','INFO ')+' updated 12 feeds'); L.push(os(a,'elfeed-log-date-face','02:24:02')+' '+os(a,'elfeed-log-warn-level-face','WARN ')+' slow feed: example.com'); L.push(os(a,'elfeed-log-date-face','02:24:03')+' '+os(a,'elfeed-log-error-level-face','ERROR')+' failed: bad.example'); - return `
${L.join('\\n')}
`;} -function genericPreview(app){let h='
';for(const [face,label,def] of APPS[app].faces){const f=PKGMAP[app][face],efg=pkgEffFg(app,face)||MAP['p'],ebg=pkgEffBg(app,face);h+=`
${esc(label)}
`;}return h+'
';} + return `
${L.join('\\n')}
`;} +function genericPreview(app){let h='
';for(const [face,label,def] of APPS[app].faces){const f=PKGMAP[app][face],efg=pkgEffFg(app,face)||MAP['p'],ebg=pkgEffBg(app,face);h+=`
${esc(label)}
`;}return h+'
';} function buildPkgPreview(){const app=curApp(),p=document.getElementById('pkgpreview');if(!p)return;const pv=APPS[app].preview;const bespoke=pv==='org'||pv==='magit'||pv==='elfeed';p.innerHTML=pv==='org'?renderOrgPreview():pv==='magit'?renderMagitPreview():pv==='elfeed'?renderElfeedPreview():genericPreview(app);p.style.background=MAP['bg'];const lbl=document.getElementById('pkgprevlabel');if(lbl)lbl.textContent=bespoke?(APPS[app].label+' preview'):'preview (generic — face names in their own colors)';} function resetApp(){const app=curApp();PKGMAP[app]={};for(const [face,label,d] of APPS[app].faces)PKGMAP[app][face]=seedFace(d);pkgChanged();} function syncPkgHeight(){const t=document.getElementById('pkgtable'),m=document.getElementById('pkgpreview');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';} @@ -631,8 +631,8 @@ function buildUITable(){ } let D={}; function srt(c){const tb=document.getElementById('legbody');const r=[...tb.rows];D[c]=!D[c]; - r.sort((a,b)=>{const x=(c===0?a.querySelector('select').value:a.cells[2].innerText).toLowerCase(), - y=(c===0?b.querySelector('select').value:b.cells[2].innerText).toLowerCase(); + r.sort((a,b)=>{const x=(c===0?a.querySelector('select').value:a.cells[0].innerText).toLowerCase(), + y=(c===0?b.querySelector('select').value:b.cells[0].innerText).toLowerCase(); return (xy?1:0)*(D[c]?1:-1);});r.forEach(x=>tb.appendChild(x));} buildLangSel();buildAppSel();renderPalette();buildTable();buildUITable();renderCode();applyGround();updateTitle();initPicker();buildPkgTable();buildPkgPreview();syncMockHeight();syncPkgHeight(); addEventListener('resize',()=>{syncMockHeight();syncPkgHeight();}); diff --git a/scripts/theme-selector/theme-selector.html b/scripts/theme-selector/theme-selector.html index 060e8392..7f0fcfeb 100644 --- a/scripts/theme-selector/theme-selector.html +++ b/scripts/theme-selector/theme-selector.html @@ -5,7 +5,7 @@ h2{font-size:10pt;color:#8a9496;font-weight:normal;margin:0 0 4px} .wrap{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:10px} .col{flex:0 0 auto;width:460px} - pre{background:#0d0b0a;border:1px solid #252321;border-radius:8px;padding:14px 16px;font-size:10pt;overflow:auto;white-space:pre} + pre{background:#0d0b0a;border:1px solid #252321;border-radius:8px;padding:14px 16px;font-size:12pt;overflow:auto;white-space:pre} table.leg{border-collapse:collapse} table.leg td{padding:4px 12px;vertical-align:middle} table.leg th{cursor:pointer;color:#b4b1a2;text-align:left;padding:4px 12px;user-select:none;font-weight:normal} table.leg th:hover{color:#e8bd30} @@ -50,7 +50,7 @@ .hstep{background:#161412;border:1px solid #252321;color:#cdced1;border-radius:4px;padding:3px 4px;font:10pt monospace;width:56px} #pkgbody td{padding:3px 8px} #codepre{width:100%;box-sizing:border-box} - .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:10pt/1.7 monospace;display:flex;flex-direction:column} + .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:12pt/1.7 monospace;display:flex;flex-direction:column} .mock .mbuf{flex:1} .mock .ln{display:flex;align-items:stretch;white-space:pre} .mock .fr{width:14px;flex:0 0 auto;border-right:1px solid #ffffff14} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre} @@ -100,7 +100,7 @@

code/color assignments

-
color △styleelements △examplecontrast
+
elements △color △styleexamplecontrast
@@ -179,16 +179,16 @@ function buildTable(){ sel.onchange=()=>{MAP[kind]=sel.value;styleChip();styleEx();styleCr();renderCode();if(kind==='bg'){applyGround();buildTable();}}; // style buttons const stTd=document.createElement('td'); - if(kind!=='bg'){const defs=[['N','a','normal'],['B','a','bold'],['I','a','italic']]; + if(kind!=='bg'){const defs=[['B','a','bold'],['I','a','italic']]; const btns={}; defs.forEach(([id,ch,mode])=>{const b=document.createElement('button');b.className='sbtn';b.style.fontWeight=mode==='bold'?'bold':'normal';b.style.fontStyle=mode==='italic'?'italic':'normal';b.textContent=ch; - b.onclick=()=>{if(mode==='normal'){BOLD[kind]=false;ITALIC[kind]=false;}else if(mode==='bold'){BOLD[kind]=!BOLD[kind];}else{ITALIC[kind]=!ITALIC[kind];}refresh();renderCode();styleEx();}; + b.onclick=()=>{if(mode==='bold'){BOLD[kind]=!BOLD[kind];}else{ITALIC[kind]=!ITALIC[kind];}refresh();renderCode();styleEx();}; btns[mode]=b;stTd.appendChild(b);}); - function refresh(){btns.normal.classList.toggle('on',!BOLD[kind]&&!ITALIC[kind]);btns.bold.classList.toggle('on',!!BOLD[kind]);btns.italic.classList.toggle('on',!!ITALIC[kind]);} + function refresh(){btns.bold.classList.toggle('on',!!BOLD[kind]);btns.italic.classList.toggle('on',!!ITALIC[kind]);} refresh();} const c0=document.createElement('td');c0.appendChild(sel); const c2=document.createElement('td');c2.className='cat';c2.textContent=label;c2.style.cursor='pointer';c2.title='flash this category in the code';c2.onclick=()=>flashTokens(kind); - tr.appendChild(c0);tr.appendChild(stTd);tr.appendChild(c2);tr.appendChild(exTd);tr.appendChild(crTd); + tr.appendChild(c2);tr.appendChild(c0);tr.appendChild(stTd);tr.appendChild(exTd);tr.appendChild(crTd); tb.appendChild(tr);} } let dragFrom=null,selectedIdx=null; @@ -393,7 +393,7 @@ function renderOrgPreview(){const a='org-mode',L=[]; L.push(' '+os(a,'org-table-header','| name | hex |')); L.push(' '+os(a,'org-table','|------+---------|')); L.push(' '+os(a,'org-table','| blue | #67809c |')); - return `
${L.join('\n')}
`; + return `
${L.join('\n')}
`; } function renderMagitPreview(){const a='magit',L=[]; L.push(os(a,'magit-head','Head:')+' '+os(a,'magit-branch-local','main')+' '+os(a,'magit-diff-revision-summary','Ship the tool')); @@ -414,7 +414,7 @@ function renderMagitPreview(){const a='magit',L=[]; L.push(os(a,'magit-hash','b5b1869f')+' '+os(a,'magit-log-author','Craig')+' enlarge the picker'); L.push(os(a,'magit-hash','4fa5e995')+' '+os(a,'magit-log-author','Craig')+' '+os(a,'magit-keyword','feat')+' color picker'); L.push(os(a,'magit-hash','de07e01a')+' '+os(a,'magit-log-author','Craig')+' '+os(a,'magit-tag','v0.3')+' relative height'); - return `
${L.join('\n')}
`;} + return `
${L.join('\n')}
`;} function renderElfeedPreview(){const a='elfeed',L=[]; L.push(os(a,'elfeed-search-filter-face','@6-months-ago +unread')+' '+os(a,'elfeed-search-unread-count-face','3/120')); L.push(''); @@ -425,8 +425,8 @@ function renderElfeedPreview(){const a='elfeed',L=[]; L.push(os(a,'elfeed-log-date-face','02:24:01')+' '+os(a,'elfeed-log-info-level-face','INFO ')+' updated 12 feeds'); L.push(os(a,'elfeed-log-date-face','02:24:02')+' '+os(a,'elfeed-log-warn-level-face','WARN ')+' slow feed: example.com'); L.push(os(a,'elfeed-log-date-face','02:24:03')+' '+os(a,'elfeed-log-error-level-face','ERROR')+' failed: bad.example'); - return `
${L.join('\n')}
`;} -function genericPreview(app){let h='
';for(const [face,label,def] of APPS[app].faces){const f=PKGMAP[app][face],efg=pkgEffFg(app,face)||MAP['p'],ebg=pkgEffBg(app,face);h+=`
${esc(label)}
`;}return h+'
';} + return `
${L.join('\n')}
`;} +function genericPreview(app){let h='
';for(const [face,label,def] of APPS[app].faces){const f=PKGMAP[app][face],efg=pkgEffFg(app,face)||MAP['p'],ebg=pkgEffBg(app,face);h+=`
${esc(label)}
`;}return h+'
';} function buildPkgPreview(){const app=curApp(),p=document.getElementById('pkgpreview');if(!p)return;const pv=APPS[app].preview;const bespoke=pv==='org'||pv==='magit'||pv==='elfeed';p.innerHTML=pv==='org'?renderOrgPreview():pv==='magit'?renderMagitPreview():pv==='elfeed'?renderElfeedPreview():genericPreview(app);p.style.background=MAP['bg'];const lbl=document.getElementById('pkgprevlabel');if(lbl)lbl.textContent=bespoke?(APPS[app].label+' preview'):'preview (generic — face names in their own colors)';} function resetApp(){const app=curApp();PKGMAP[app]={};for(const [face,label,d] of APPS[app].faces)PKGMAP[app][face]=seedFace(d);pkgChanged();} function syncPkgHeight(){const t=document.getElementById('pkgtable'),m=document.getElementById('pkgpreview');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';} @@ -444,8 +444,8 @@ function buildUITable(){ } let D={}; function srt(c){const tb=document.getElementById('legbody');const r=[...tb.rows];D[c]=!D[c]; - r.sort((a,b)=>{const x=(c===0?a.querySelector('select').value:a.cells[2].innerText).toLowerCase(), - y=(c===0?b.querySelector('select').value:b.cells[2].innerText).toLowerCase(); + r.sort((a,b)=>{const x=(c===0?a.querySelector('select').value:a.cells[0].innerText).toLowerCase(), + y=(c===0?b.querySelector('select').value:b.cells[0].innerText).toLowerCase(); return (xy?1:0)*(D[c]?1:-1);});r.forEach(x=>tb.appendChild(x));} buildLangSel();buildAppSel();renderPalette();buildTable();buildUITable();renderCode();applyGround();updateTitle();initPicker();buildPkgTable();buildPkgPreview();syncMockHeight();syncPkgHeight(); addEventListener('resize',()=>{syncMockHeight();syncPkgHeight();}); -- cgit v1.2.3