Hartmut
5afc6c8c94
Replace hardcoded blue-shifted rgba values and slate-* classes with neutral CSS variable references in timeline resource/project panels, tooltips, constants, and heatmap mono palette. Change utilization row tint from blue to green. Replace slate-950 open demand backgrounds with --surface-card. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
3.0 KiB
TypeScript
62 lines
3.0 KiB
TypeScript
import type { HeatmapColorScheme } from "~/hooks/useAppPreferences.js";
|
|
|
|
// ─── Heatmap colour palettes ───────────────────────────────────────────────────
|
|
// Each palette is [minPct, overlayRgba, barRgba] — overlay is semi-transparent
|
|
// (for heatmap mode strips), bar is more opaque (for bar-mode project view).
|
|
export const HEATMAP_PALETTES: Record<HeatmapColorScheme, [number, string, string][]> = {
|
|
"green-red": [
|
|
[0, "rgba(34,197,94,0.18)", "rgba(34,197,94,0.70)"],
|
|
[25, "rgba(132,204,22,0.25)", "rgba(132,204,22,0.75)"],
|
|
[50, "rgba(250,204,21,0.32)", "rgba(250,204,21,0.80)"],
|
|
[75, "rgba(249,115,22,0.40)", "rgba(249,115,22,0.82)"],
|
|
[90, "rgba(239,68,68,0.48)", "rgba(239,68,68,0.85)"],
|
|
[100, "rgba(185,28,28,0.58)", "rgba(185,28,28,0.88)"],
|
|
[125, "rgba(109,40,217,0.64)", "rgba(109,40,217,0.88)"],
|
|
],
|
|
"blue-orange": [
|
|
[0, "rgba(56,189,248,0.22)", "rgba(56,189,248,0.70)"],
|
|
[25, "rgba(59,130,246,0.28)", "rgba(59,130,246,0.75)"],
|
|
[50, "rgba(251,191,36,0.35)", "rgba(251,191,36,0.80)"],
|
|
[75, "rgba(249,115,22,0.42)", "rgba(249,115,22,0.82)"],
|
|
[90, "rgba(239,68,68,0.50)", "rgba(239,68,68,0.85)"],
|
|
[100, "rgba(185,28,28,0.58)", "rgba(185,28,28,0.88)"],
|
|
[125, "rgba(109,40,217,0.64)", "rgba(109,40,217,0.88)"],
|
|
],
|
|
"purple-yellow": [
|
|
[0, "rgba(167,139,250,0.22)", "rgba(167,139,250,0.70)"],
|
|
[25, "rgba(139,92,246,0.28)", "rgba(139,92,246,0.75)"],
|
|
[50, "rgba(250,204,21,0.35)", "rgba(250,204,21,0.80)"],
|
|
[75, "rgba(245,158,11,0.42)", "rgba(245,158,11,0.82)"],
|
|
[90, "rgba(239,68,68,0.50)", "rgba(239,68,68,0.85)"],
|
|
[100, "rgba(185,28,28,0.58)", "rgba(185,28,28,0.88)"],
|
|
[125, "rgba(109,40,217,0.64)", "rgba(109,40,217,0.88)"],
|
|
],
|
|
"mono": [
|
|
[0, "rgba(160,160,160,0.18)", "rgba(160,160,160,0.60)"],
|
|
[25, "rgba(115,115,115,0.25)", "rgba(115,115,115,0.68)"],
|
|
[50, "rgba(85,85,85,0.30)", "rgba(85,85,85,0.74)"],
|
|
[75, "rgba(65,65,65,0.36)", "rgba(65,65,65,0.80)"],
|
|
[90, "rgba(42,42,42,0.42)", "rgba(42,42,42,0.85)"],
|
|
[100, "rgba(24,24,24,0.52)", "rgba(24,24,24,0.88)"],
|
|
[125, "rgba(0,0,0,0.60)", "rgba(0,0,0,0.90)"],
|
|
],
|
|
};
|
|
|
|
// pct = (totalHoursPerDay / 8) * 100. Returns rgba string or null for 0%.
|
|
// mode: "overlay" for heatmap strips, "bar" for solid bar fill.
|
|
export function heatmapColor(pct: number, scheme: HeatmapColorScheme, mode: "overlay" | "bar" = "overlay"): string | null {
|
|
if (pct <= 0) return null;
|
|
const palette = HEATMAP_PALETTES[scheme] ?? HEATMAP_PALETTES["green-red"];
|
|
let entry = palette[0]!;
|
|
for (const row of palette) {
|
|
if (pct > row[0]) entry = row;
|
|
else break;
|
|
}
|
|
return mode === "bar" ? entry[2] : entry[1];
|
|
}
|
|
|
|
// Legacy alias used by heatmap overlay (overlay mode, green-red default)
|
|
export function heatmapBgColor(pct: number, scheme: HeatmapColorScheme = "green-red"): string | null {
|
|
return heatmapColor(pct, scheme, "overlay");
|
|
}
|