Style and button color logic cleanup

script.js

@@ -94,6 +94,15 @@ U.element("targetSelect", ({ randomButton }, form) => {
   randomButton.addEventListener("click", randomizeTargetColor);
 });
 
+const getColorButtonStyle = (hex) => {
+  const { h, s, l } = d3.hsl(hex);
+  return `
+    color: ${getContrastingTextColor(hex)}; 
+    --button-bg: ${hex};
+    --button-bg-hover: ${d3.hsl(h, s, clamp(0.25, l * 1.25, 0.9)).formatHex()};
+  `;
+};
+
 targetColor.subscribe((hex, { previous }) => {
   const style = document.querySelector(":root").style;
   style.setProperty("--background", hex);
@@ -102,19 +111,13 @@ targetColor.subscribe((hex, { previous }) => {
   if (previous) {
     const prevButton = document.createElement("button");
     prevButton.innerText = previous;
-    const { h, s, l } = d3.hsl(previous);
-    prevButton.style = `
-      color: ${getContrastingTextColor(previous)}; 
-      --button-bg: ${previous};
-      --button-bg-hover: ${d3.hsl(h, s, clamp(0.25, l * 1.25, 0.9)).formatHex()};
-    `;
+    prevButton.classList = "color-select";
+    prevButton.style = getColorButtonStyle(previous);
     prevButton.addEventListener("click", () => (targetColor.value = previous));
     document.getElementById("prevColors").prepend(prevButton);
   }
 });
 
-randomizeTargetColor();
-
 // ---- Metric Controls ----
 function addMetricForm(formName, legendText, initialKind, initialMetric, mountPoint) {
   const metricKind = U.obs(initialKind);
@@ -252,3 +255,5 @@ U.reactive(() => {
     sortUseInverseClusterSize.value,
   ].every((v) => !v);
 });
+
+randomizeTargetColor();

styles.css

@@ -93,7 +93,7 @@ body {
 
 .section {
   padding-block-start: var(--flow-space, 1rem);
-  padding-inline: calc(var(--flow-space, 1rem) / 2);
+  padding-inline: var(--flow-space-inline, 1ch);
 }
 
 /* Utility */
@@ -116,6 +116,15 @@ button {
   border-radius: 100vmax;
   padding-block: 0.25rem;
   border: 1px solid var(--highlight);
+  transition: background-color 100ms;
+}
+
+button.color-select {
+  background-color: var(--button-bg);
+}
+
+button.color-select:hover {
+  background-color: var(--button-bg-hover);
 }
 
 /* Block */
@@ -141,17 +150,10 @@ hr {
 #prevColors button {
   width: 100%;
   margin-block-end: 0.5ch;
-  background-color: var(--button-bg);
-  transition: background-color 100ms;
-}
-
-#prevColors button:hover {
-  background-color: var(--button-bg-hover);
 }
 
 #targetSelect input[type="text"] {
   border-radius: 100vmax;
-  padding-inline: 1rem;
   text-align: center;
   border: 1px solid var(--highlight);
   min-width: 0px;