diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js index 21e626f..1b822ea 100644 --- a/assets/js/components/DayTabs.js +++ b/assets/js/components/DayTabs.js @@ -303,6 +303,9 @@ export function DayTabs({ // point in each band, not the same absolute degree. const isHot = dayHi !== null && dayHi >= (isPetsProfile ? 35 : 27); // Hot band and above const isDanger = tBand.solid === true; + // Extreme band gets a less pastelised gradient so it reads as a + // clear step between Caution and the pulsing Danger tier. + const isExtreme = tBand.label === 'Extreme'; // Home/indoor/vehicle tabs show a modelled temperature, not the // outdoor sky, so the tab shade should track that temperature only @@ -336,17 +339,33 @@ export function DayTabs({ // Clear & mild/warm: a plain sunny yellow. rgb = hexToRgb('#f8e554'); } + // Extreme tabs lean toward Danger's crimson as the daily high climbs + // through the band (32→41°C human, 40→52°C pet) — so a day peaking + // near 40° visibly edges into danger-red without becoming Danger. + if (isExtreme) { + const floor = isPetsProfile ? 40 : 32; + const ceil = isPetsProfile ? 52 : 41; + const t = Math.max(0, Math.min(1, (dayHi - floor) / (ceil - floor))); + rgb = mixRgb(rgb, [136, 0, 0], t * 0.55); + } const [wR, wG, wB] = rgb; const wBgNeutral = isDanger ? weatherGradientNeutral(wR, wG, wB, 0.15, 0.72) - : weatherGradientNeutral(wR, wG, wB); + : isExtreme + ? weatherGradientNeutral(wR, wG, wB, 0.20, 0.66) + : weatherGradientNeutral(wR, wG, wB); const wBgActive = isDanger ? weatherGradientActive(wR, wG, wB, 0.12, 0.72) - : weatherGradientActive(wR, wG, wB); + : isExtreme + ? weatherGradientActive(wR, wG, wB, 0.16, 0.66) + : weatherGradientActive(wR, wG, wB); const wText = '#2a1d10'; // Active-tab outline: the day's weather colour, 20% darker. const wOutline = `rgb(${Math.round(wR * 0.8)},${Math.round(wG * 0.8)},${Math.round(wB * 0.8)})`; + // Extreme tabs get a strong red border so the tier pops even when + // the tab is not selected — a firmer warning than the tan default. + const wBorder = isExtreme ? '#c22f1a' : '#c9b08a'; return html`