5.0.7

Stronger Extreme Day Tab Shades

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`
             <button
@@ -367,10 +386,10 @@ export function DayTabs({
               style=${{
                 background: isActive ? wBgActive : wBgNeutral,
                 color: wText,
-                borderTop: '1px solid #c9b08a',
+                borderTop: `1px solid ${wBorder}`,
                 borderRight: 'none',
-                borderBottom: '1px solid #c9b08a',
-                borderLeft: i === 0 ? '1px solid #c9b08a' : 'none',
+                borderBottom: `1px solid ${wBorder}`,
+                borderLeft: i === 0 ? `1px solid ${wBorder}` : 'none',
                 opacity: locked ? 0.5 : 1,
                 cursor: locked ? 'not-allowed' : 'pointer',
                 position: 'relative',