Set theme studio default picker color

3 files changed, 14 insertions, 12 deletions

diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index d22524cc..db544e33 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -321,8 +321,9 @@ function updateColor(){
   }
   closePicker();renderPalette();buildTable();buildUITable();renderCode();applyGround();notify('updated "'+newName+'"',false);
 }
-function curHex(){return normHex(document.getElementById('newhexstr').value)||'#888888';}
-let pkH=0,pkS=0,pkV=0.5,pickerOn=false;
+const DEFAULT_PICKER_HEX='#67809c';
+let [pkH,pkS,pkV]=rgb2hsv(...hex2rgb(DEFAULT_PICKER_HEX)),pickerOn=false;
+function curHex(){return normHex(document.getElementById('newhexstr').value)||DEFAULT_PICKER_HEX;}
 let pkMode='any';   // contrast mask: any / aa / aaa (what constraint to mask)
 let pkModel='hsv';  // color model for editing: hsv / oklch (orthogonal to pkMode)
 const OKLCH_CMAX=0.4; // chroma axis range for the C×L plane (and the C dial); past sRGB at most hues, so the gamut grey shows the reachable region
@@ -383,7 +384,7 @@ function setOklchInputs(L,C,H){
   const put=(id,v)=>{const e=document.getElementById(id);if(e)e.value=v;};
   put('okL',L.toFixed(3));put('okLn',L.toFixed(3));put('okC',C.toFixed(3));put('okCn',C.toFixed(3));
   const h=String(Math.round(H));put('okH',h);put('okHn',h);}
-function oklchInputsFromHex(hex){const lch=oklab2oklch(srgb2oklab(normHex(hex)||'#888888'));setOklchInputs(lch.L,lch.C,lch.H);}
+function oklchInputsFromHex(hex){const lch=oklab2oklch(srgb2oklab(normHex(hex)||DEFAULT_PICKER_HEX));setOklchInputs(lch.L,lch.C,lch.H);}
 function readOklch(){return [parseFloat(document.getElementById('okL').value)||0,parseFloat(document.getElementById('okC').value)||0,parseFloat(document.getElementById('okH').value)||0];}
 function pkClampStatus(on){const s=document.getElementById('pkclamp');if(!s)return;s.classList.toggle('show',on);s.textContent=on?'chroma clamped to sRGB':'';}
 function pkOklchSet(){const [L,C,H]=readOklch();const {hex,clamped}=oklch2hex(L,C,H);
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index edea254c..0a1a576d 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -111,7 +111,7 @@
   <h1>palette</h1>
   <div class="palctl">
    <div id="swatch" class="swatch" title="open color picker"></div>
-   <input type="text" id="newhexstr" placeholder="#rrggbb" value="#888888" oninput="syncHex()" onkeydown="if(event.key==='Enter')applyEdit()" style="width:110px">
+   <input type="text" id="newhexstr" placeholder="#rrggbb" value="#67809c" oninput="syncHex()" onkeydown="if(event.key==='Enter')applyEdit()" style="width:110px">
    <input type="text" id="newname" placeholder="name" onkeydown="if(event.key==='Enter')applyEdit()">
    <button onclick="addColor()">+ add color</button>
    <button onclick="updateColor()">&#8635; update selected</button>
@@ -129,7 +129,7 @@
      <div class="ocrow"><label title="hue angle, degrees">H</label><input type="range" id="okH" min="0" max="360" step="1"><input type="number" id="okHn" min="0" max="360" step="1"></div>
      <div class="pclamp" id="pkclamp"></div>
     </div>
-    <div class="pinfo"><span id="pkhex">#888888</span><span id="pkcon"></span></div>
+    <div class="pinfo"><span id="pkhex">#67809c</span><span id="pkcon"></span></div>
     <div class="pinfo2"><span id="pkoklch" title="OKLCH perceptual coordinates: lightness L (0..1), chroma C, hue H in degrees"></span><span id="pkapca"></span></div>
     <div class="pmode">limit <button data-m="any" class="on">any</button><button data-m="aa">AA+</button><button data-m="aaa">AAA</button></div>
     <div id="pkchips" class="pkchips"></div>
@@ -954,8 +954,9 @@ function updateColor(){
   }
   closePicker();renderPalette();buildTable();buildUITable();renderCode();applyGround();notify('updated "'+newName+'"',false);
 }
-function curHex(){return normHex(document.getElementById('newhexstr').value)||'#888888';}
-let pkH=0,pkS=0,pkV=0.5,pickerOn=false;
+const DEFAULT_PICKER_HEX='#67809c';
+let [pkH,pkS,pkV]=rgb2hsv(...hex2rgb(DEFAULT_PICKER_HEX)),pickerOn=false;
+function curHex(){return normHex(document.getElementById('newhexstr').value)||DEFAULT_PICKER_HEX;}
 let pkMode='any';   // contrast mask: any / aa / aaa (what constraint to mask)
 let pkModel='hsv';  // color model for editing: hsv / oklch (orthogonal to pkMode)
 const OKLCH_CMAX=0.4; // chroma axis range for the C×L plane (and the C dial); past sRGB at most hues, so the gamut grey shows the reachable region
@@ -1016,7 +1017,7 @@ function setOklchInputs(L,C,H){
   const put=(id,v)=>{const e=document.getElementById(id);if(e)e.value=v;};
   put('okL',L.toFixed(3));put('okLn',L.toFixed(3));put('okC',C.toFixed(3));put('okCn',C.toFixed(3));
   const h=String(Math.round(H));put('okH',h);put('okHn',h);}
-function oklchInputsFromHex(hex){const lch=oklab2oklch(srgb2oklab(normHex(hex)||'#888888'));setOklchInputs(lch.L,lch.C,lch.H);}
+function oklchInputsFromHex(hex){const lch=oklab2oklch(srgb2oklab(normHex(hex)||DEFAULT_PICKER_HEX));setOklchInputs(lch.L,lch.C,lch.H);}
 function readOklch(){return [parseFloat(document.getElementById('okL').value)||0,parseFloat(document.getElementById('okC').value)||0,parseFloat(document.getElementById('okH').value)||0];}
 function pkClampStatus(on){const s=document.getElementById('pkclamp');if(!s)return;s.classList.toggle('show',on);s.textContent=on?'chroma clamped to sRGB':'';}
 function pkOklchSet(){const [L,C,H]=readOklch();const {hex,clamped}=oklch2hex(L,C,H);
@@ -1959,4 +1960,4 @@ if(location.hash==='#roundtriptest'){let ok=true;const notes=[];const A=(c,n)=>{
  PALETTE=saveP;for(const k in MAP)delete MAP[k];Object.assign(MAP,saveM);
  document.title='ROUNDTRIPTEST '+(ok?'PASS':'FAIL');
  const d=document.createElement('div');d.id='roundtriptest';d.textContent='ROUNDTRIPTEST '+(ok?'PASS':'FAIL')+(notes.length?' | '+notes.join(' ; '):'');document.body.appendChild(d);}
-</script>
\ No newline at end of file
+</script>
diff --git a/scripts/theme-studio/theme-studio.template.html b/scripts/theme-studio/theme-studio.template.html
index 7f3e99c0..7ad576da 100644
--- a/scripts/theme-studio/theme-studio.template.html
+++ b/scripts/theme-studio/theme-studio.template.html
@@ -18,7 +18,7 @@ STYLES_CSS</style>
   <h1>palette</h1>
   <div class="palctl">
    <div id="swatch" class="swatch" title="open color picker"></div>
-   <input type="text" id="newhexstr" placeholder="#rrggbb" value="#888888" oninput="syncHex()" onkeydown="if(event.key==='Enter')applyEdit()" style="width:110px">
+   <input type="text" id="newhexstr" placeholder="#rrggbb" value="#67809c" oninput="syncHex()" onkeydown="if(event.key==='Enter')applyEdit()" style="width:110px">
    <input type="text" id="newname" placeholder="name" onkeydown="if(event.key==='Enter')applyEdit()">
    <button onclick="addColor()">+ add color</button>
    <button onclick="updateColor()">&#8635; update selected</button>
@@ -36,7 +36,7 @@ STYLES_CSS</style>
      <div class="ocrow"><label title="hue angle, degrees">H</label><input type="range" id="okH" min="0" max="360" step="1"><input type="number" id="okHn" min="0" max="360" step="1"></div>
      <div class="pclamp" id="pkclamp"></div>
     </div>
-    <div class="pinfo"><span id="pkhex">#888888</span><span id="pkcon"></span></div>
+    <div class="pinfo"><span id="pkhex">#67809c</span><span id="pkcon"></span></div>
     <div class="pinfo2"><span id="pkoklch" title="OKLCH perceptual coordinates: lightness L (0..1), chroma C, hue H in degrees"></span><span id="pkapca"></span></div>
     <div class="pmode">limit <button data-m="any" class="on">any</button><button data-m="aa">AA+</button><button data-m="aaa">AAA</button></div>
     <div id="pkchips" class="pkchips"></div>
@@ -84,4 +84,4 @@ STYLES_CSS</style>
  </section>
 </div>
 <script>
-APP_JS</script>
\ No newline at end of file
+APP_JS</script>