5.0.8

Day tab colour update
Cleanup event banner and add close

assets/js/utils.js

@@ -56,6 +56,58 @@ export function utciCategory(u) {
   }
 }
 
+// -------------------------------------------------------------------
+// BAND COLOUR RAMP - continuous version of the banded palette.
+// -------------------------------------------------------------------
+// utciCategory()/petCategory() hand back ONE flat colour per band, which
+// is right for table cells (a cell states which band you are in) but wrong
+// for anything that should read as a temperature gradient: every day from
+// 27 -C to 31.9 -C is the same "Caution" swatch, so the only visible change
+// is the hard jump at the next threshold.
+//
+// bandRampRgb() anchors each band's colour at the BOTTOM of that band's
+// range and interpolates toward the next band's colour across the band. So
+// a temperature sitting exactly on a threshold still gets that band's own
+// published colour (32 -C is still the Extreme orange), and every degree
+// above it slides proportionally toward the next tier - 30 -C lands 60% of
+// the way from Caution to Extreme instead of being identical to 27 -C.
+//
+// The solid Danger band is left out of the ramp: it's a flat stop-everything
+// alarm colour, not part of the gradient, so the ramp clamps at the last
+// graded band and callers keep handling Danger separately.
+// -------------------------------------------------------------------
+const rampAnchorCache = new WeakMap();
+
+function rampAnchors(bands) {
+  let anchors = rampAnchorCache.get(bands);
+  if (anchors) return anchors;
+  anchors = [];
+  let lower = null;
+  for (const band of bands) {
+    if (band.solid) break;
+    // The first band is open-ended downward; give it a nominal 10 -C span so
+    // it still has an anchor below its own threshold.
+    anchors.push({ at: lower === null ? band.max - 10 : lower, rgb: hexToRgb(band.bg) });
+    if (band.max === undefined) break;
+    lower = band.max;
+  }
+  rampAnchorCache.set(bands, anchors);
+  return anchors;
+}
+
+export function bandRampRgb(t, bands) {
+  const anchors = rampAnchors(bands);
+  if (t === null || !isFinite(t)) return anchors[0].rgb.slice();
+  if (t <= anchors[0].at) return anchors[0].rgb.slice();
+  const last = anchors[anchors.length - 1];
+  if (t >= last.at) return last.rgb.slice();
+  for (let i = 1; i < anchors.length; i++) {
+    const a = anchors[i - 1], b = anchors[i];
+    if (t <= b.at) return mixRgb(a.rgb, b.rgb, (t - a.at) / (b.at - a.at));
+  }
+  return last.rgb.slice();
+}
+
 // -------------------------------------------------------------------
 // WEATHER TINT PALETTE - single source of truth for "what colour is
 // this weather", shared by the day tabs (components/DayTabs.js) and the