Function buildColorControl

packages/sdk-playground/src/main.ts:409–430

(row: HTMLElement, prop: string, currentVal: string)

}

function buildColorControl(row: HTMLElement, prop: string, currentVal: string) {
  const picker = document.createElement("input");
  picker.type = "color";
  picker.className = "prop-color prop-input";
  const text = document.createElement("input");
  text.type = "text";
  text.className = "prop-input";
  text.style.flex = "1";
  const normalized = currentVal.trim();
  trySetValue(picker, normalized);
  text.value = normalized;
  picker.addEventListener("input", () => {
    text.value = picker.value;
    commitStyle(prop, picker.value);
  });
  text.addEventListener("blur", () => {
    commitStyle(prop, text.value.trim() || null);
    trySetValue(picker, text.value);
  });
  row.appendChild(picker);
  row.appendChild(text);
}

// Only valid hex colors assign to a <input type=color>; ignore anything else.
function trySetValue(picker: HTMLInputElement, value: string) {