Use CSS variables to make the math border match text color

nearest.css

@@ -1,7 +1,14 @@
+:root {
+    --highlight: #ddd;
+    --background: #222;
+}
+
 body {
     width: 99%;
     padding-top: 4px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    color: var(--highlight);
+    background-color: var(--background);
 }
 
 .hide {
@@ -91,7 +98,7 @@ body {
 }
 
 .math-section {
-    border: 4px solid #222;
+    border: 2px solid var(--highlight);
     padding: 0.3em;
     align-self: stretch;
 }

nearest.js

@@ -291,7 +291,7 @@ const renderCluster = ({
     <div class="pkmn_tile-cluster-stat_label" style="grid-area: dl;">δ =</div>
     <div class="pkmn_tile-cluster-stat_label" style="grid-area: ph;">ϕ =</div>
     <div style="grid-area: mux">${hex}</div>
-    <div style="grid-area: muv; justify-self: center;">(${vector})</div>
+    <div style="grid-area: muv; justify-self: center;">(${vector.map(c => c.toFixed(2)).join(", ")})</div>
     <div style="grid-area: piv">${(pi * 100).toFixed(1)}%</div>
     <div style="grid-area: thv">${theta.toFixed(2)}°</div>
     <div style="grid-area: dlv">${delta.toFixed(2)}</div>
@@ -299,7 +299,7 @@ const renderCluster = ({
   </div>
 `;
 
-const getPokemonRenderer = targetList =>  (name, stats, q, score, vectorDecimals, idPostfix) => {
+const getPokemonRenderer = targetList =>  (name, stats, q, score, idPostfix) => {
   let sigma, metrics, kMeanInfo, kMeanResults;
   if (q) {
     sigma = Math.sqrt(stats.inertia - 2 * vectorDot(stats.trueMean.vector, q.vector) + q.magSq)
@@ -350,7 +350,7 @@ const getPokemonRenderer = targetList =>  (name, stats, q, score, vectorDecimals
               <div class="pkmn_tile-true_mean-mu_label">μ =</div>
               <div class="pkmn_tile-true_mean-mu_hex">${stats.trueMean.hex}</div>
               <div class="pkmn_tile-true_mean-mu_vec">
-                (${stats.trueMean.vector.map(c => c.toFixed(vectorDecimals)).join(", ")})
+                (${stats.trueMean.vector.map(c => c.toFixed(2)).join(", ")})
               </div>
           </div>
           <div class="pkmn_tile-true_mean-stat pkmn_tile-true_mean-inertia">
@@ -372,11 +372,10 @@ const getPokemonRenderer = targetList =>  (name, stats, q, score, vectorDecimals
       ${stats.kMeans.map((data, index) => renderCluster({
           index,
           ...kMeanInfo,
-          vectorDecimals,
           pi: stats.kWeights[index],
           ...kMeanResults[index],
           hex: data.hex,
-          vector: data.vector.map(c => c.toFixed(vectorDecimals)).join(", "),
+          vector: data.vector,
       })).join("\n")}
     </div>
   `;
@@ -389,8 +388,8 @@ const renderSearch = () => {
   const append = getPokemonRenderer(resultsNode);
   clearNodeContents(resultsNode);
   const argMapper = state.searchSpace === "RGB"
-    ? pkmn => [pkmn.rgbStats, state.targetColor?.rgbData, state.targetColor ? scorePokemon(pkmn).rgb : 0, 2]
-    : pkmn => [pkmn.jabStats, state.targetColor?.jabData, state.targetColor ? scorePokemon(pkmn).jab : 0, 2]
+    ? pkmn => [pkmn.rgbStats, state.targetColor?.rgbData, state.targetColor ? scorePokemon(pkmn).rgb : 0]
+    : pkmn => [pkmn.jabStats, state.targetColor?.jabData, state.targetColor ? scorePokemon(pkmn).jab : 0]
   state.searchResults?.forEach(pkmn => append(
     pkmn.name, ...argMapper(pkmn), "search"
   ));
@@ -416,7 +415,7 @@ const rescore = () => {
     .slice(0, state.numPoke);
   clearNodeContents(jabList);
   bestJAB.forEach(data => appendJAB(
-    data.name, data.jabStats, state.targetColor.jabData, data.scores.jab, 2, "jab"
+    data.name, data.jabStats, state.targetColor.jabData, data.scores.jab, "jab"
   ));
 
   // extract best RGB results
@@ -425,7 +424,7 @@ const rescore = () => {
     .slice(0, state.numPoke);
   clearNodeContents(rgbList);
   bestRGB.forEach(data => appendRGB(
-    data.name, data.rgbStats, state.targetColor.rgbData, data.scores.rgb, 2, "rgb"
+    data.name, data.rgbStats, state.targetColor.rgbData, data.scores.rgb, "rgb"
   ));
 
   // update the rendered search results as well
@@ -441,9 +440,10 @@ const onColorChanged = skipScore => {
     renderQVec(state.targetColor.jabData.vector.map(c => c.toFixed(3)), getQJABDisplay(), "Jab");
     renderQVec(state.targetColor.rgbData.vector.map(c => c.toFixed()), getQRGBDisplay(), "RGB");
 
-    const textColor = getContrastingTextColor(state.targetColor.rgbData.vector);
-    document.querySelector("body").setAttribute("style", `background: ${state.targetColor.rgbData.hex}; color: ${textColor}`);
-    state.targetColor
+    const rootElem = document.querySelector(":root");
+    rootElem.style.setProperty("--background", state.targetColor.rgbData.hex);
+    rootElem.style.setProperty("--highlight", getContrastingTextColor(state.targetColor.rgbData.vector));
+
     if (!skipScore) {
       rescore();
     }