Pocket Palette — Dusk Remix

HTML

<main><header><h1>Pocket Palette <span>— Dusk Remix</span></h1><p>A small space to try four quiet colors.</p></header><div class="choices" aria-label="Palette colors"><button data-color="Sage">Sage</button><button data-color="Clay">Clay</button><button data-color="Sky">Sky</button><button data-color="Dusk">Dusk</button></div><div id="swatch" role="img" aria-label="Neutral color swatch"></div><p id="selection">Neutral · #E7E5E0</p><button id="reset">Reset palette</button><p class="small">Reset returns the swatch to Neutral and clears the private note.</p><label for="note">Private note</label><textarea id="note" rows="3" maxlength="1000" placeholder="Add a palette note…"></textarea><p id="save" class="small" role="status">Saved in widget state only.</p></main>

CSS

*{box-sizing:border-box}body{margin:0;background:#f5f4f0;color:#303b37;font:15px system-ui,sans-serif}main{max-width:460px;margin:0 auto;padding:26px}h1{font-size:28px;margin:9px 0}h1 span{display:block;font-size:18px;font-weight:400;margin-top:4px;color:#68716b}header p{color:#68716b;margin:0 0 22px}.choices{display:flex;flex-wrap:wrap;gap:9px}button{font:inherit;padding:10px 16px;border:1px solid #c8cec7;background:#fff;border-radius:9px;cursor:pointer;color:inherit}button:hover{background:#eeefea}button:focus-visible,textarea:focus-visible{outline:3px solid #657f92;outline-offset:3px}button[aria-pressed=true]{border-color:#354c3c;box-shadow:0 0 0 1px #354c3c}#swatch{height:118px;background:#e7e5e0;border-radius:12px;margin-top:16px;border:1px solid #00000012}#selection{font-size:13px;color:#647168}label{display:block;margin:20px 0 8px;font-weight:600}textarea{width:100%;resize:vertical;min-height:80px;font:inherit;padding:11px;border:1px solid #c8cec7;border-radius:9px;background:#fff;color:inherit}.small{font-size:12px;color:#68716b}

JavaScript

const palette={Neutral:"#E7E5E0",Sage:"#A6B69E",Clay:"#C9937A",Sky:"#A5BDCF",Dusk:"#8C819E"};
let state={color:"Neutral",note:""};
const note=document.getElementById("note"),status=document.getElementById("save");
WidgetCanvas.setControlsPosition("top-right");
WidgetCanvas.setSharingEnabled(false);
WidgetCanvas.setResetEnabled(false);
function restore(value){const s=value&&typeof value==="object"?value:{};state={color:Object.prototype.hasOwnProperty.call(palette,s.color)?s.color:"Neutral",note:typeof s.note==="string"?s.note.slice(0,1000):""};paint();}
function paint(){document.getElementById("swatch").style.background=palette[state.color];document.getElementById("swatch").setAttribute("aria-label",state.color+" color swatch");document.getElementById("selection").textContent=state.color+" · "+palette[state.color];note.value=state.note;document.querySelectorAll("[data-color]").forEach(b=>b.setAttribute("aria-pressed",String(b.dataset.color===state.color)));}
let saveQueue=Promise.resolve();
function save(){const snapshot={color:state.color,note:state.note};saveQueue=saveQueue.then(async()=>{try{await WidgetCanvas.setState(snapshot);status.textContent="Saved in widget state only.";}catch(e){status.textContent="Could not save: "+String(e.message||e);}});}
document.querySelectorAll("[data-color]").forEach(b=>b.addEventListener("click",()=>{state.color=b.dataset.color;paint();save();}));
note.addEventListener("input",()=>{state.note=note.value;save();});
document.getElementById("reset").addEventListener("click",()=>{state={color:"Neutral",note:""};paint();save();});
window.addEventListener("widgetcanvas:restore",e=>restore(e.detail));
(async()=>{try{restore(await WidgetCanvas.getState());}catch(e){paint();status.textContent="State unavailable; using neutral defaults.";}})();
paint();