redesign & refinements for sticky layouting

3 files changed, 40 insertions, 37 deletions

diff --git a/src/util/colors.js b/src/util/colors.js
index a0cc7486..dea67123 100644
--- a/src/util/colors.js
+++ b/src/util/colors.js
@@ -1,44 +1,36 @@
 // Color and theming utility functions! Handy.
 
-// Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
-// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
-export function rgb2hsl(r, g, b) {
-  let a = Math.max(r, g, b),
-      n = a - Math.min(r, g, b),
-      f = 1 - Math.abs(a + a - n - 1);
-
-  let h =
-    n &&
-      a == r
-        ? (g - b) / n
-        : a == g
-          ? 2 + (b - r) / n
-          : 4 + (r - g) / n;
-
-  return [
-    60 * (h < 0 ? h + 6 : h),
-    f ? n / f : 0,
-    (a + a - n) / 2
-  ];
-}
+export function getColors(themeColor, {
+  // chroma.js external dependency (https://gka.github.io/chroma.js/)
+  chroma,
+} = {}) {
+  if (!chroma) {
+    throw new Error('chroma.js library must be passed or bound for color manipulation');
+  }
+
+  const primary = chroma(themeColor);
 
-export function getColors(primary) {
-  const [r, g, b] = primary
-    .slice(1)
-    .match(/[0-9a-fA-F]{2,2}/g)
-    .slice(0, 3)
-    .map((val) => parseInt(val, 16) / 255);
+  const dark = primary.luminance(0.02);
+  const dim = primary.desaturate(2).darken(1.5);
 
-  const [h, s, l] = rgb2hsl(r, g, b);
+  const bg = primary.luminance(0.008).desaturate(3.5).alpha(0.8);
+  const bgBlack = primary.saturate(1).luminance(0.0025).alpha(0.8);
+  const shadow = primary.desaturate(4).set('hsl.l', 0.05).alpha(0.8);
 
-  const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
-  const bg = `hsla(${Math.round(h)}deg, ${Math.round(s * 15)}%, 12%, 0.80)`;
+  const hsl = primary.hsl();
+  if (isNaN(hsl[0])) hsl[0] = 0;
 
   return {
-    primary,
-    dim,
-    bg,
-    rgb: [r, g, b],
-    hsl: [h, s, l],
+    primary: primary.hex(),
+
+    dark: dark.hex(),
+    dim: dim.hex(),
+
+    bg: bg.hex(),
+    bgBlack: bgBlack.hex(),
+    shadow: shadow.hex(),
+
+    rgb: primary.rgb(),
+    hsl,
   };
 }
diff --git a/src/util/html.js b/src/util/html.js
index 0a586223..6c429b92 100644
--- a/src/util/html.js
+++ b/src/util/html.js
@@ -72,6 +72,10 @@ export function tag(tagName, ...args) {
   }
 
   if (Array.isArray(content)) {
+    if (content.some(item => Array.isArray(item))) {
+      throw new Error(`Found array instead of string (tag) or null/falsey, did you forget to \`...\` spread an array or fragment?`);
+    }
+
     const joiner = attrs?.[joinChildren];
     content = content.filter(Boolean).join(
       (joiner
diff --git a/src/util/link.js b/src/util/link.js
index 9de4c95a..41ac9131 100644
--- a/src/util/link.js
+++ b/src/util/link.js
@@ -10,7 +10,6 @@
 // gener8ting just a8out any link on the site.
 
 import * as html from './html.js';
-import {getColors} from './colors.js';
 
 import {
   Album,
@@ -23,7 +22,9 @@ import {
   Track,
 } from '../data/things.js';
 
-export function getLinkThemeString(color) {
+export function unbound_getLinkThemeString(color, {
+  getColors,
+}) {
   if (!color) return '';
 
   const {primary, dim} = getColors(color);
@@ -38,7 +39,9 @@ const linkHelper =
     attr = null,
   } = {}) =>
   (thing, {
+    getLinkThemeString,
     to,
+
     text = '',
     attributes = null,
     class: className = '',
@@ -187,4 +190,8 @@ const link = {
   },
 };
 
+export {
+  unbound_getLinkThemeString as getLinkThemeString,
+};
+
 export default link;