Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Revert "Merge pull request #22 from griffemi/fem-orchid-palette"

Browse source 
This reverts commit f7d16238f2, reversing
changes made to 34e4fed1f0.
This commit is contained in:
Emi Griffith 2026-07-11 01:06:30 -07:00
parent f7d16238f2
commit 4b23fda4ec
4 changed files with 55 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/app.js
View file

@ -319,12 +319,12 @@ function scrollTableToToday(host, today, hasFc) {
// Tier css class -> literal color (mirrors style.css; needed because the chart is // Tier css class -> literal color (mirrors style.css; needed because the chart is
// rasterized to PNG, where CSS variables aren't available). // rasterized to PNG, where CSS variables aren't available).
const TIER_COLORS = { const TIER_COLORS = {
"rec-hot": "#7d1a49", "very-hot": "#db2777", "hot": "#f472b6", "warm": "#f9a8d4", "rec-hot": "#8f0e20", "very-hot": "#dd6b52", "hot": "#ef9351", "warm": "#f6c18a",
"normal": "#f0dce8", "normal": "#4a9d5b",
"cool": "#cbb6f7", "cold": "#9b6ef0", "very-cold": "#6d28d9", "rec-cold": "#3b0764", "cool": "#92c5de", "cold": "#4393c3", "very-cold": "#2166ac", "rec-cold": "#0a2f6b",
"dry": "#cbb26a", "dry": "#c9a24a",
"wet-1": "#f3e8ff", "wet-2": "#e9d5ff", "wet-3": "#d8b4fe", "wet-4": "#c084fc", "wet-5": "#a855f7", "wet-1": "#d9f0d3", "wet-2": "#b7e2b1", "wet-3": "#8fd18f", "wet-4": "#5cba9f", "wet-5": "#35a1c0",
"wet-6": "#9333ea", "wet-7": "#7e22ce", "wet-8": "#6b21a8", "wet-9": "#4c1d95", "wet-6": "#2b8cbe", "wet-7": "#226bb3", "wet-8": "#164a97", "wet-9": "#08306b",
}; };
// Percentile grade scale, low -> high. Names are deliberately *relative* to each // Percentile grade scale, low -> high. Names are deliberately *relative* to each
@ -370,18 +370,18 @@ function chartPalette() {
const css = getComputedStyle(document.documentElement); const css = getComputedStyle(document.documentElement);
const v = (name, f) => (css.getPropertyValue(name).trim() || f); const v = (name, f) => (css.getPropertyValue(name).trim() || f);
const dark = matchMedia("(prefers-color-scheme: dark)").matches; const dark = matchMedia("(prefers-color-scheme: dark)").matches;
const hi = v("--very-hot", "#db2777"); // daily-high series = warm tier magenta const hi = v("--very-hot", "#dd6b52"); // daily-high series = warm tier red
const lo = v("--cold", "#9b6ef0"); // daily-low series = cool tier violet const lo = v("--cold", "#4393c3"); // daily-low series = cool tier blue
return { return {
surface: v("--surface-2", dark ? "#1e242c" : "#eef1f5"), surface: v("--surface-2", dark ? "#1e242c" : "#eef1f5"),
ink: v("--text", dark ? "#e7ecf2" : "#1a2029"), ink: v("--text", dark ? "#e7ecf2" : "#1a2029"),
muted: v("--muted", dark ? "#9aa6b2" : "#5b6673"), muted: v("--muted", dark ? "#9aa6b2" : "#5b6673"),
grid: v("--border", dark ? "#2a323c" : "#dde3ea"), grid: v("--border", dark ? "#2a323c" : "#dde3ea"),
accent: v("--accent", "#ec4899"), accent: v("--accent", "#f0803c"),
hi, lo, hi, lo,
// Distinct line/point accents for the three added series; the graded fan // Distinct line/point accents for the three added series; the graded fan
// behind them still uses the shared diverging tier colors (same as temps). // behind them still uses the shared diverging tier colors (same as temps).
feels: v("--accent", "#ec4899"), // "feels like" = magenta accent feels: v("--accent", "#f0803c"), // "feels like" = orange accent
humid: "#2ea9bf", // humidity = cyan humid: "#2ea9bf", // humidity = cyan
wind: "#5aa9a3", // wind speed = teal wind: "#5aa9a3", // wind speed = teal
gust: "#8f86d8", // wind gust = periwinkle gust: "#8f86d8", // wind gust = periwinkle
@ -633,11 +633,11 @@ function precipChart(days, n, xFor, C) {
// "Days since last rain" dry-streak color: rain days are blue; each dry day warms // "Days since last rain" dry-streak color: rain days are blue; each dry day warms
// from a light base toward dark red, saturating at 14 consecutive dry days. // from a light base toward dark red, saturating at 14 consecutive dry days.
// (Mirrors the calendar's dry-streak ramp.) // (Mirrors the calendar's dry-streak ramp.)
const DRY_BASE = [247, 214, 226], DRY_MAX = [125, 26, 73], DRY_CAP = 14; const DRY_BASE = [247, 217, 176], DRY_MAX = [122, 13, 26], DRY_CAP = 14;
const lerpRgb = (a, b, t) => `rgb(${a.map((x, i) => Math.round(x + (b[i] - x) * t)).join(",")})`; const lerpRgb = (a, b, t) => `rgb(${a.map((x, i) => Math.round(x + (b[i] - x) * t)).join(",")})`;
function drynessColor(dsr) { function drynessColor(dsr) {
if (dsr == null) return ""; if (dsr == null) return "";
if (dsr === 0) return "#6d28d9"; // measurable rain that day if (dsr === 0) return "#2b7bba"; // measurable rain that day
return lerpRgb(DRY_BASE, DRY_MAX, Math.min(dsr, DRY_CAP) / DRY_CAP); return lerpRgb(DRY_BASE, DRY_MAX, Math.min(dsr, DRY_CAP) / DRY_CAP);
} }

18
static/calendar.js
View file

@ -4,26 +4,26 @@
// intentionally re-declares the small shared tier constants so it stays independent // intentionally re-declares the small shared tier constants so it stays independent
// of app.js (the map page). // of app.js (the map page).
// 9-step diverging temperature scale ("Orchid Sunset": violet -> blush -> magenta). // 9-step diverging temperature scale (cold navy -> green -> hot red).
const TIER_COLORS = { const TIER_COLORS = {
"rec-hot": "#7d1a49", "very-hot": "#db2777", "hot": "#f472b6", "warm": "#f9a8d4", "rec-hot": "#8f0e20", "very-hot": "#dd6b52", "hot": "#ef9351", "warm": "#f6c18a",
"normal": "#f0dce8", "normal": "#4a9d5b",
"cool": "#cbb6f7", "cold": "#9b6ef0", "very-cold": "#6d28d9", "rec-cold": "#3b0764", "cool": "#92c5de", "cold": "#4393c3", "very-cold": "#2166ac", "rec-cold": "#0a2f6b",
}; };
// 9-step rain-intensity ramp (rain-day percentile): light lilac -> orchid -> deep violet. // 9-step rain-intensity ramp (rain-day percentile): light green -> teal -> dark navy.
const PRECIP_COLORS = { const PRECIP_COLORS = {
"wet-1": "#f3e8ff", "wet-2": "#e9d5ff", "wet-3": "#d8b4fe", "wet-4": "#c084fc", "wet-5": "#a855f7", "wet-1": "#d9f0d3", "wet-2": "#b7e2b1", "wet-3": "#8fd18f", "wet-4": "#5cba9f", "wet-5": "#35a1c0",
"wet-6": "#9333ea", "wet-7": "#7e22ce", "wet-8": "#6b21a8", "wet-9": "#4c1d95", "wet-6": "#2b8cbe", "wet-7": "#226bb3", "wet-8": "#164a97", "wet-9": "#08306b",
}; };
// "Days since last rain" dry-streak color: rain days are blue; each dry day warms // "Days since last rain" dry-streak color: rain days are blue; each dry day warms
// from a light base toward dark red, saturating at 14 consecutive dry days. // from a light base toward dark red, saturating at 14 consecutive dry days.
const DRY_BASE = [247, 214, 226], DRY_MAX = [125, 26, 73], DRY_CAP = 14; const DRY_BASE = [247, 217, 176], DRY_MAX = [122, 13, 26], DRY_CAP = 14;
const lerpRgb = (a, b, t) => const lerpRgb = (a, b, t) =>
`rgb(${a.map((x, i) => Math.round(x + (b[i] - x) * t)).join(",")})`; `rgb(${a.map((x, i) => Math.round(x + (b[i] - x) * t)).join(",")})`;
function drynessColor(dsr) { function drynessColor(dsr) {
if (dsr == null) return ""; if (dsr == null) return "";
if (dsr === 0) return "#6d28d9"; // measurable rain that day if (dsr === 0) return "#2b7bba"; // measurable rain that day
return lerpRgb(DRY_BASE, DRY_MAX, Math.min(dsr, DRY_CAP) / DRY_CAP); return lerpRgb(DRY_BASE, DRY_MAX, Math.min(dsr, DRY_CAP) / DRY_CAP);
} }
// low -> high percentile scale, per metric (temp vs precip use different classes) // low -> high percentile scale, per metric (temp vs precip use different classes)

12
static/day.js
View file

@ -6,15 +6,15 @@
// so the page stays independent of app.js. // so the page stays independent of app.js.
const TIER_COLORS = { const TIER_COLORS = {
"rec-hot": "#7d1a49", "very-hot": "#db2777", "hot": "#f472b6", "warm": "#f9a8d4", "rec-hot": "#8f0e20", "very-hot": "#dd6b52", "hot": "#ef9351", "warm": "#f6c18a",
"normal": "#f0dce8", "normal": "#4a9d5b",
"cool": "#cbb6f7", "cold": "#9b6ef0", "very-cold": "#6d28d9", "rec-cold": "#3b0764", "cool": "#92c5de", "cold": "#4393c3", "very-cold": "#2166ac", "rec-cold": "#0a2f6b",
}; };
const PRECIP_COLORS = { const PRECIP_COLORS = {
"wet-1": "#f3e8ff", "wet-2": "#e9d5ff", "wet-3": "#d8b4fe", "wet-4": "#c084fc", "wet-5": "#a855f7", "wet-1": "#d9f0d3", "wet-2": "#b7e2b1", "wet-3": "#8fd18f", "wet-4": "#5cba9f", "wet-5": "#35a1c0",
"wet-6": "#9333ea", "wet-7": "#7e22ce", "wet-8": "#6b21a8", "wet-9": "#4c1d95", "wet-6": "#2b8cbe", "wet-7": "#226bb3", "wet-8": "#164a97", "wet-9": "#08306b",
}; };
const DRY_COLOR = "#cbb26a"; const DRY_COLOR = "#c9a24a";
const fmtTemp = (v) => (v == null ? "—" : `${Math.round(v)}°`); const fmtTemp = (v) => (v == null ? "—" : `${Math.round(v)}°`);
const fmtPrecip = (v) => (v == null ? "—" : `${v.toFixed(2)}"`); const fmtPrecip = (v) => (v == null ? "—" : `${v.toFixed(2)}"`);

62
static/style.css
View file

@ -5,32 +5,31 @@
--border: #2a323c; --border: #2a323c;
--text: #e7ecf2; --text: #e7ecf2;
--muted: #9aa6b2; --muted: #9aa6b2;
--accent: #ec4899; --accent: #f0803c;
/* temperature grades: 9-step diverging cold -> neutral -> hot ("Orchid Sunset"). /* temperature grades: 9-step diverging cold -> green -> hot (colorblind-safe).
Cool end = violet/lavender, warm end = rose/magenta; rec-* are the "Near Record" rec-* are the "Near Record" danger tiers — deliberately dark/saturated. */
danger tiers — deliberately dark/saturated. */ --rec-cold: #0a2f6b;
--rec-cold: #3b0764; --very-cold: #2166ac;
--very-cold: #6d28d9; --cold: #4393c3;
--cold: #9b6ef0; --cool: #92c5de;
--cool: #cbb6f7; --normal: #4a9d5b; /* middle of the diverging temp scale = green */
--normal: #f0dce8; /* middle of the diverging temp scale = soft blush (see light-theme override) */ --warm: #f6c18a;
--warm: #f9a8d4; --hot: #ef9351;
--hot: #f472b6; --very-hot: #dd6b52;
--very-hot: #db2777; --rec-hot: #8f0e20;
--rec-hot: #7d1a49;
/* precipitation: "dry" + 9 rain-intensity tiers, light lilac -> orchid -> deep violet */ /* precipitation: "dry" + 9 rain-intensity tiers, light green -> teal -> dark navy */
--dry: #cbb26a; --dry: #c9a24a;
--wet-1: #f3e8ff; --wet-1: #d9f0d3;
--wet-2: #e9d5ff; --wet-2: #b7e2b1;
--wet-3: #d8b4fe; --wet-3: #8fd18f;
--wet-4: #c084fc; --wet-4: #5cba9f;
--wet-5: #a855f7; /* middle of the rain scale */ --wet-5: #35a1c0; /* middle of the rain scale */
--wet-6: #9333ea; --wet-6: #2b8cbe;
--wet-7: #7e22ce; --wet-7: #226bb3;
--wet-8: #6b21a8; --wet-8: #164a97;
--wet-9: #4c1d95; --wet-9: #08306b;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -41,11 +40,6 @@
--border: #dde3ea; --border: #dde3ea;
--text: #1a2029; --text: #1a2029;
--muted: #5b6673; --muted: #5b6673;
/* The soft-blush middle tiers vanish on a white surface — darken them just
enough to stay legible as swatches, cell fills, and grade text. */
--normal: #c05a8a;
--warm: #ef7fbe;
--cool: #a98bf0;
} }
} }
@ -167,12 +161,12 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
display: flex; align-items: center; gap: 13px; display: flex; align-items: center; gap: 13px;
width: 100%; margin: 0 0 20px; padding: 14px 16px; min-height: 60px; width: 100%; margin: 0 0 20px; padding: 14px 16px; min-height: 60px;
border: none; border-radius: 13px; text-decoration: none; border: none; border-radius: 13px; text-decoration: none;
color: #2a0716; background: linear-gradient(135deg, #f472b6, #db2777); color: #1a1206; background: linear-gradient(135deg, #f79556, #ea722c);
box-shadow: 0 4px 16px rgba(219, 39, 119, .3); box-shadow: 0 4px 16px rgba(240, 128, 60, .3);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
} }
.cta-cal:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(219, 39, 119, .42); filter: brightness(1.04); } .cta-cal:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(240, 128, 60, .42); filter: brightness(1.04); }
.cta-cal:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(219, 39, 119, .34); } .cta-cal:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(240, 128, 60, .34); }
.cta-cal:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; } .cta-cal:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.cta-cal-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } .cta-cal-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cta-cal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cta-cal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@ -200,7 +194,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.chart-toggle button.active[data-metric="wind"] { background: #5aa9a3; color: #08201e; } .chart-toggle button.active[data-metric="wind"] { background: #5aa9a3; color: #08201e; }
.chart-toggle button.active[data-metric="gust"] { background: #8f86d8; color: #100c26; } .chart-toggle button.active[data-metric="gust"] { background: #8f86d8; color: #100c26; }
.chart-toggle button.active[data-metric="precip"] { background: var(--wet-6); color: #fff; } .chart-toggle button.active[data-metric="precip"] { background: var(--wet-6); color: #fff; }
.chart-toggle button.active[data-metric="dry"] { background: #cbb26a; color: #241a04; } .chart-toggle button.active[data-metric="dry"] { background: #c9a24a; color: #241a04; }
.chart-legend { .chart-legend {
display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px;
} }