Add shadow and tweak dark/light logic

math.js

@@ -11,7 +11,9 @@ const clamp = (mn, v, mx) => Math.min(Math.max(v, mn), mx);
 // Contrast
 const getContrastingTextColor = (hex) => {
   const { r, g, b } = d3.color(hex);
-  return vectorDot([r, g, b], [0.3, 0.6, 0.1]) >= 128 ? "#222" : "#ddd";
+  return vectorDot([r, g, b], [0.3, 0.6, 0.1]) >= 128
+    ? "var(--color-dark)"
+    : "var(--color-light)";
 };
 
 // "Visual Importance"

script.js

@@ -81,7 +81,9 @@ const getColorButtonStyle = (hex) => {
 targetColor.subscribe((hex, { previous }) => {
   const style = document.querySelector(":root").style;
   style.setProperty("--background", hex);
-  style.setProperty("--highlight", getContrastingTextColor(hex));
+  const highlight = getContrastingTextColor(hex);
+  style.setProperty("--highlight", highlight);
+  style.setProperty("--shadow-component", highlight.includes("light") ? "255" : "0");
 
   if (previous) {
     const prevButton = document.createElement("button");

styles.css

@@ -44,8 +44,15 @@ select {
 
 :root {
   /* separated since these are used by the actual script */
-  --highlight: #ddd;
-  --background: #222;
+  --highlight: var(--color-light);
+  --background: var(--color-dark);
+  --shadow-component: 255;
+  --shadow: rgb(
+    var(--shadow-component),
+    var(--shadow-component),
+    var(--shadow-component),
+    0.2
+  );
 }
 
 /* Font */