const targetColor = U.obs();
const randomizeTargetColor = () => {
  targetColor.value = d3
    .hsl(Math.random() * 360, Math.random(), Math.random())
    .formatHex();
};

U.element("colorSelect", ({ randomButton }, form) => {
  U.field(form.elements.colorText, { obs: targetColor });
  U.field(form.elements.colorPicker, { obs: targetColor });
  U.form(form);
  randomButton.addEventListener("click", randomizeTargetColor);
});

randomizeTargetColor();

U.reactive(() => {
  const contrast = getContrastingTextColor(targetColor.value);
  const style = document.querySelector(":root").style;
  style.setProperty("--background", targetColor.value);
  style.setProperty("--highlight", contrast);
});