init

frontend/src/lib/viz.ts

@@ -0,0 +1,57 @@
+/**
+ * Chart colours.
+ *
+ * These are the validated data-viz slots, not the Material theme's palette: the
+ * UI's accent can be anything, but a chart has to stay readable for colour-blind
+ * readers in both themes. Work/short/long are categorical slots 1–3 (validated
+ * all-pairs in both modes); magnitude charts use the single-hue blue ramp.
+ */
+
+export interface VizPalette {
+  work: string;
+  shortBreak: string;
+  longBreak: string;
+  sequential: string[];
+  grid: string;
+  axis: string;
+  surface: string;
+}
+
+const LIGHT: VizPalette = {
+  work: "#2a78d6",
+  shortBreak: "#eb6834",
+  longBreak: "#1baf7a",
+  // blue 100 → 600, light → dark: "more pomodoros" reads as "darker".
+  sequential: ["#cde2fb", "#9ec5f4", "#6da7ec", "#3987e5", "#256abf", "#184f95"],
+  grid: "rgba(0,0,0,0.08)",
+  axis: "rgba(0,0,0,0.45)",
+  surface: "#fcfcfb",
+};
+
+const DARK: VizPalette = {
+  work: "#3987e5",
+  shortBreak: "#d95926",
+  longBreak: "#199e70",
+  sequential: ["#104281", "#184f95", "#256abf", "#3987e5", "#6da7ec", "#9ec5f4"],
+  grid: "rgba(255,255,255,0.10)",
+  axis: "rgba(255,255,255,0.55)",
+  surface: "#1a1a19",
+};
+
+export function vizPalette(dark: boolean): VizPalette {
+  return dark ? DARK : LIGHT;
+}
+
+export function kindColor(kind: string, palette: VizPalette): string {
+  if (kind === "work") return palette.work;
+  if (kind === "long_break") return palette.longBreak;
+  return palette.shortBreak;
+}
+
+/** Pick a ramp step for a count, 0 meaning "empty". */
+export function rampStep(count: number, goal: number, palette: VizPalette): string | null {
+  if (count <= 0) return null;
+  const ratio = goal > 0 ? count / goal : count / 8;
+  const index = Math.min(palette.sequential.length - 1, Math.max(0, Math.round(ratio * (palette.sequential.length - 1))));
+  return palette.sequential[index];
+}