aboutsummaryrefslogtreecommitdiff
path: root/scripts/theme-studio/theme-studio.html
diff options
context:
space:
mode:
Diffstat (limited to 'scripts/theme-studio/theme-studio.html')
-rw-r--r--scripts/theme-studio/theme-studio.html64
1 files changed, 43 insertions, 21 deletions
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index 9cdf58ed..9386ea82 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -551,10 +551,27 @@ function lMax(hue,chroma,fgSet,target){
// assignment re-point across a regenerate.
function oklchOf(hex){return oklab2oklch(srgb2oklab(hex));}
-function nameOfHex(palette,hex){const p=palette.find(p=>p[0].toLowerCase()===hex.toLowerCase());return p?p[1]:null;}
function columnStem(name){name=name||'color';if(/^color-\d+$/.test(name))return name;name=name.replace(/[+-]\d+$/,'');return name.replace(/\d+$/,'')||'color';}
function columnOffset(name){const m=(name||'').match(/([+-]\d+)$/);return m?parseInt(m[1],10):0;}
function columnIdOf(entry){return (entry&&entry[2])||columnStem(entry&&entry[1]);}
+function groundRoleOfEntry(entry,ground){
+ if(!entry)return null;
+ const [hex,name]=entry,col=entry[2],n=(name||'').toLowerCase(),h=(hex||'').toLowerCase();
+ const bg=(ground&&ground.bg||'').toLowerCase(),fg=(ground&&ground.fg||'').toLowerCase();
+ if(/^ground-\d+$/i.test(name||''))return 'step';
+ if(col==='ground'){
+ if(bg&&h===bg)return 'bg';
+ if(fg&&h===fg)return 'fg';
+ return 'step';
+ }
+ if(bg&&h===bg&&(n==='bg'||n==='ground'))return 'bg';
+ if(fg&&h===fg&&n==='fg')return 'fg';
+ return null;
+}
+function nameOfGroundRole(palette,ground,role){
+ const found=palette.find(entry=>groundRoleOfEntry(entry,ground)===role);
+ return found?found[1]:null;
+}
// Group a flat palette into the ground strip plus structural columns. ground is
// {bg,fg}; those endpoint hexes form the pinned ground column even when absent
@@ -563,15 +580,13 @@ function columnIdOf(entry){return (entry&&entry[2])||columnStem(entry&&entry[1])
// Legacy two-field entries fall back to their generated-name stem until edited.
function columnsFromPalette(palette,ground){
const bg=ground&&ground.bg,fg=ground&&ground.fg;
- const gset=new Set([bg,fg].filter(Boolean).map(h=>h.toLowerCase()));
const groundStrip=[];
- if(bg)groundStrip.push({hex:bg,role:'bg',name:nameOfHex(palette,bg)});
- if(fg)groundStrip.push({hex:fg,role:'fg',name:nameOfHex(palette,fg)});
+ if(bg)groundStrip.push({hex:bg,role:'bg',name:nameOfGroundRole(palette,ground,'bg')});
+ if(fg)groundStrip.push({hex:fg,role:'fg',name:nameOfGroundRole(palette,ground,'fg')});
const byColumn=new Map(),columns=[];
for(const entry of palette){
const [hex,name]=entry;
- if(gset.has(hex.toLowerCase()))continue;
- if(/^ground-\d+$/i.test(name||''))continue;
+ if(groundRoleOfEntry(entry,ground))continue;
const column=columnIdOf(entry);
if(!byColumn.has(column))byColumn.set(column,{column,members:[]});
byColumn.get(column).members.push({hex,name,offset:columnOffset(name),column});
@@ -633,7 +648,7 @@ function paletteOptionList(cur,palette,ground){
const add=(hex,name)=>{if(!hex)return;const key=hex.toLowerCase()+'|'+(name||'');if(seen.has(key))return;seen.add(key);out.push([hex,name||hex]);};
const grouped=columnsFromPalette(palette,ground||{});
const groundMembers=grouped.ground.map(g=>({hex:g.hex,name:g.name||g.role}))
- .concat(palette.filter(([,name])=>/^ground-\d+$/i.test(name||'')).map(([hex,name])=>({hex,name})));
+ .concat(palette.filter(entry=>groundRoleOfEntry(entry,ground)==='step').map(([hex,name])=>({hex,name})));
sortColumnMembers({base:(ground&&ground.bg)||'',members:groundMembers}).members.forEach(m=>add(m.hex,m.name));
sortColumns(grouped.columns).forEach(f=>f.members.forEach(m=>add(m.hex,m.name)));
return out;
@@ -803,12 +818,12 @@ function normalizePalette(){PALETTE=PALETTE.map(normalizePaletteEntry);}
// endpoint, and generated ground-N steps live between them.
function groundColumnMembers(){
const members=[];
- for(const [hex,name] of PALETTE)if(hex.toLowerCase()===MAP['bg'].toLowerCase()||hex.toLowerCase()===MAP['p'].toLowerCase()||/^ground-\d+$/i.test(name||''))members.push({hex,name});
- if(!members.some(m=>m.hex.toLowerCase()===MAP['bg'].toLowerCase()))members.push({hex:MAP['bg'],name:'bg'});
- if(!members.some(m=>m.hex.toLowerCase()===MAP['p'].toLowerCase()))members.push({hex:MAP['p'],name:'fg'});
+ for(const entry of PALETTE)if(groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']}))members.push({hex:entry[0],name:entry[1]});
+ if(!PALETTE.some(entry=>groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']})==='bg'))members.push({hex:MAP['bg'],name:'bg'});
+ if(!PALETTE.some(entry=>groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']})==='fg'))members.push({hex:MAP['p'],name:'fg'});
return members.sort((a,b)=>oklab2oklch(srgb2oklab(a.hex)).L-oklab2oklch(srgb2oklab(b.hex)).L);
}
-function groundSpanCount(){return PALETTE.filter(([,name])=>/^ground-\d+$/i.test(name||'')).length;}
+function groundSpanCount(){return PALETTE.filter(entry=>groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']})==='step').length;}
function groundSpanControl(){
const d=document.createElement('div');d.className='fcount';
d.innerHTML=`<span title="number of ground colors between bg and fg">span <input type="number" min="0" max="8" value="${groundSpanCount()}"></span>`;
@@ -816,7 +831,7 @@ function groundSpanControl(){
return d;
}
function setGroundSpan(n){
- const old=PALETTE.filter(([,name])=>/^ground-\d+$/i.test(name||''));
+ const old=PALETTE.filter(entry=>groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']})==='step');
const bg=srgb2oklab(MAP['bg']),fg=srgb2oklab(MAP['p']);
const entries=[];
for(let i=1;i<=n;i++){
@@ -828,8 +843,8 @@ function setGroundSpan(n){
const next=entries.find(([,name])=>name===oldName);
if(next&&next[0].toLowerCase()!==oldHex.toLowerCase())repointHex(oldHex,next[0]);
}
- for(let i=PALETTE.length-1;i>=0;i--)if(/^ground-\d+$/i.test(PALETTE[i][1]||''))PALETTE.splice(i,1);
- let at=PALETTE.findIndex(([hex])=>hex.toLowerCase()===MAP['bg'].toLowerCase());
+ for(let i=PALETTE.length-1;i>=0;i--)if(groundRoleOfEntry(PALETTE[i],{bg:MAP['bg'],fg:MAP['p']})==='step')PALETTE.splice(i,1);
+ let at=PALETTE.findIndex(entry=>groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']})==='bg');
if(at<0)at=0; else at+=1;
PALETTE.splice(Math.min(at,PALETTE.length),0,...entries);
selectedIdx=null;renderPalette();buildTable();buildUITable();renderCode();applyGround();
@@ -850,10 +865,11 @@ function renderPaletteWarnings(warnings,overflow){
// Families sort deterministically, so the old move-arrow / drag reordering is gone.
function paletteChip(i,nearest){
const [hex,name]=PALETTE[i],tc=textOn(hex),nde=nearest[i];
- const locked=(hex===MAP['bg']||hex===MAP['p']);
+ const role=groundRoleOfEntry(PALETTE[i],{bg:MAP['bg'],fg:MAP['p']});
+ const locked=(role==='bg'||role==='fg');
const d=document.createElement('div');d.className='pchip'+(i===selectedIdx?' sel':'');d.style.background=hex;
d.title=name+' '+hex+(nde===Infinity||nde===undefined?'':' — nearest ΔE '+nde.toFixed(3));
- const rm=locked?`<span class="lock" title="${hex===MAP['bg']?'background':'foreground'} — can't remove" style="color:${tc}">&#128274;</span>`:`<button class="rm" title="remove" style="color:${tc}">×</button>`;
+ const rm=locked?`<span class="lock" title="${role==='bg'?'background':'foreground'} — can't remove" style="color:${tc}">&#128274;</span>`:`<button class="rm" title="remove" style="color:${tc}">×</button>`;
d.innerHTML=`${rm}<input class="nm" value="${name}" style="color:${tc}"><div class="hx" style="color:${tc}">${hex}</div>`;
if(!locked)d.querySelector('.rm').onclick=(e)=>{e.stopPropagation();if(name)lastGone[name.toLowerCase()]=hex;PALETTE.splice(i,1);if(selectedIdx===i)selectedIdx=null;renderPalette();buildTable();buildUITable();};
d.querySelector('.nm').onchange=(e)=>{PALETTE[i][1]=e.target.value;buildTable();buildUITable();};
@@ -870,9 +886,7 @@ function selectColumnBase(f){
if(i>=0)selectColor(i);
}
function isGroundEntry(entry){
- const [hex,name]=entry;
- const lower=(hex||'').toLowerCase();
- return lower===MAP['bg'].toLowerCase()||lower===MAP['p'].toLowerCase()||/^ground-\d+$/i.test(name||'');
+ return !!groundRoleOfEntry(entry,{bg:MAP['bg'],fg:MAP['p']});
}
function moveColumn(columnId,dir){
normalizePalette();
@@ -983,7 +997,7 @@ function applyEdit(){if(selectedIdx!==null)updateColor();else addColor();}
function selectColor(i){selectedIdx=i;const [hex,name]=PALETTE[i];setHex(hex);document.getElementById('newname').value=name;renderPalette();notify('editing "'+name+'" — change the value, then Enter (or Update selected) to save',false);}
function updateColor(){
if(selectedIdx===null){notify('click a palette color to select it first',true);return;}
- const i=selectedIdx,oldHex=PALETTE[i][0];
+ const i=selectedIdx,oldHex=PALETTE[i][0],oldRole=groundRoleOfEntry(PALETTE[i],{bg:MAP['bg'],fg:MAP['p']});
const newHex=curHex();
const newName=(document.getElementById('newname').value.trim())||PALETTE[i][1];
if(PALETTE.some((p,j)=>j!==i&&p[1].toLowerCase()===newName.toLowerCase())){notify('another color is already named "'+newName+'" — names must be unique',true);return;}
@@ -993,7 +1007,9 @@ function updateColor(){
const count=column?Math.max(0,...rankByLightness(column.members.map(m=>m.hex),column.base).map(m=>Math.abs(m.offset))):0;
const columnId=PALETTE[i][2]||columnStem(PALETTE[i][1]);
PALETTE[i]=[newHex,newName,columnId];
- repointHex(oldHex,newHex);
+ const duplicateOldHex=PALETTE.some((p,j)=>j!==i&&p[0].toLowerCase()===oldHex.toLowerCase());
+ if(oldRole==='bg'||oldRole==='fg')repointHex(oldHex,newHex);
+ else if(!duplicateOldHex&&oldHex!==MAP['bg']&&oldHex!==MAP['p'])repointHex(oldHex,newHex);
if(column&&count>0){
const oldHexes=column.members.map(m=>m.hex.toLowerCase()===oldHex.toLowerCase()?newHex:m.hex);
regenColumnInPlace(oldHexes,newHex,newName,count,column.column||columnId);
@@ -1936,6 +1952,12 @@ if(location.hash==='#columntest'||location.hash==='#familytest'){let ok=true;con
const ri=PALETTE.findIndex(p=>p[1]==='red');PALETTE[ri][1]='zztop-absurd';renderPalette();
const renamed=[...document.querySelectorAll('#pals .pchip')].find(c=>c.querySelector('.nm')&&c.querySelector('.nm').value==='zztop-absurd');
A(!!renamed&&renamed.closest('.fstrip').dataset.column===redColumn,'a renamed color stays in the same strip');
+ PALETTE=[['#0d0b0a','bg','ground'],['#f0fef0','fg','ground'],['#0d0b0a','bg2'],['#0d0b0a','bg-alt']];MAP['bg']='#0d0b0a';MAP['p']='#f0fef0';selectedIdx=null;renderPalette();
+ const bg2Chip=[...document.querySelectorAll('#pals .pchip')].find(c=>c.querySelector('.nm')&&c.querySelector('.nm').value==='bg2');
+ A(!!bg2Chip&&bg2Chip.closest('.fstrip').dataset.column==='bg'&&!!bg2Chip.querySelector('.rm')&&!bg2Chip.querySelector('.lock'),'same-hex bg2 remains a normal removable color column chip');
+ if(bg2Chip){bg2Chip.click();document.getElementById('newhexstr').value='#101820';document.getElementById('newname').value='bg2';updateColor();}
+ A(MAP['bg']==='#0d0b0a','editing same-hex bg2 does not repoint the real bg assignment');
+ A(PALETTE.some(p=>p[1]==='bg2'&&p[0]==='#101820'),'editing same-hex bg2 updates only that palette tile');
PALETTE=saveP;for(const k in MAP)delete MAP[k];Object.assign(MAP,saveM);selectedIdx=saveSel;renderPalette();
document.title='COLUMNTEST '+(ok?'PASS':'FAIL');
const d=document.createElement('div');d.id='columntest';d.textContent='COLUMNTEST '+(ok?'PASS':'FAIL')+(notes.length?' | '+notes.join(' ; '):'');document.body.appendChild(d);}