From d0cf30bfa37864db12009c2f561c87f96bd66989 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sat, 13 Jun 2026 18:12:09 -0500 Subject: Sort theme studio dropdown colors by lightness --- scripts/theme-studio/theme-studio.html | 10 ++++++---- 1 file changed, 6 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 b980f800..70726afa 100644 --- a/scripts/theme-studio/theme-studio.html +++ b/scripts/theme-studio/theme-studio.html @@ -694,10 +694,12 @@ function stepRepointPlan(oldRanked,newMembers){ // columns are emitted in first-seen palette order. No color sorting happens here. function sortColumnMembers(column){return Object.assign({},column,{members:[...column.members]});} function sortColumns(columns){return columns.map(sortColumnMembers);} +function lightestFirstMembers(members){return [...members].sort((a,b)=>oklchOf(b.hex).L-oklchOf(a.hex).L);} // Dropdown order for color selection mirrors the visual palette organization: -// ground first, then structural columns in display order. Stored palette order -// stays untouched; this is selection-only organization. +// bg/fg first, then structural columns in display order. Within each group, +// choices run lightest-to-darkest. Stored palette order stays untouched; this is +// selection-only organization. function paletteOptionList(cur,palette,ground){ const have=cur===''||palette.some(p=>p[0]===cur)||[ground&&ground.bg,ground&&ground.fg].filter(Boolean).includes(cur); const out=[['','— default —']],seen=new Set(); @@ -706,8 +708,8 @@ function paletteOptionList(cur,palette,ground){ const grouped=columnsFromPalette(palette,ground||{}); const groundMembers=grouped.ground.map(g=>({hex:g.hex,name:g.name||g.role})) .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))); + groundMembers.forEach(m=>add(m.hex,m.name)); + sortColumns(grouped.columns).forEach(f=>lightestFirstMembers(f.members).forEach(m=>add(m.hex,m.name))); return out; } // Pure color/UI-boundary helpers (normHex, ratingColor, textOn), inlined from -- cgit v1.2.3