From d3b5df209db59d32ebb1f41d88574aedab054deb Mon Sep 17 00:00:00 2001 From: Adam Scerra Date: Tue, 18 Aug 2026 19:46:55 -0400 Subject: [PATCH 1/2] fix: align delivered-pr-types chart colors with bucket cards Resolve theme CSS tokens for the fix-filer line chart so Bot filed uses accent lime (not orange) and matches the summary cards. Signed-off-by: Adam Scerra Co-authored-by: Cursor --- docs/delivered-pr-types.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/docs/delivered-pr-types.js b/docs/delivered-pr-types.js index dedea7a..9d4ebc3 100644 --- a/docs/delivered-pr-types.js +++ b/docs/delivered-pr-types.js @@ -2,13 +2,28 @@ "use strict"; const PR_TYPE_KEYS = ["feat", "fix", "docs", "ci", "chore", "test", "perf", "other"]; - // Concrete hex — CSS vars are unreliable as SVG fill in some browsers + // Resolve theme tokens to concrete colors for SVG (CSS vars as fill attrs are unreliable). + function themeColor(name, fallback) { + const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + return v || fallback; + } const TYPE_COLORS = { - feat: "#6b93f7", fix: "#ff453a", docs: "#9775fa", ci: "#f5c842", - chore: "#8e8e93", test: "#4fbc6b", perf: "#f4845f", other: "#5c5c5e", + feat: themeColor("--chart-1", "#5cb3ff"), + fix: themeColor("--negative", "#f87171"), + docs: "#9775fa", + ci: themeColor("--chart-2", "#f5c842"), + chore: "#8e8e93", + test: themeColor("--positive", "#4ade80"), + perf: themeColor("--chart-3", "#ff8f5c"), + other: "#5c5c5e", }; const FIX_KEYS = ["core", "external", "bot"]; - const FIX_COLORS = { core: "#6b93f7", external: "#4fbc6b", bot: "#f4845f" }; + // Must match .fix-bucket.{core,external,bot} in style.css (chart-1 / chart-5 / accent). + const FIX_COLORS = { + core: themeColor("--chart-1", "#5cb3ff"), + external: themeColor("--chart-5", "#2dd4bf"), + bot: themeColor("--accent", "#c4ff0e"), + }; const FIX_LABELS = { core: "Core team filed", external: "External human filed", From a0564f038d49a7e78b9b522421f2d9a071484b84 Mon Sep 17 00:00:00 2001 From: Adam Scerra Date: Thu, 20 Aug 2026 07:37:50 -0400 Subject: [PATCH 2/2] fix: keep delivered-pr-types hero and charts theme-synced Re-resolve type/fix colors on each render and prefers-color-scheme change, drive hero stats from the same map, and theme docs/chore/other via CSS tokens so light/dark flips stay consistent without reload. Signed-off-by: Adam Scerra Co-authored-by: Cursor --- docs/delivered-pr-types.js | 58 ++++++++++++++++++++++++-------------- docs/style.css | 6 ++++ 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/docs/delivered-pr-types.js b/docs/delivered-pr-types.js index 9d4ebc3..cea842c 100644 --- a/docs/delivered-pr-types.js +++ b/docs/delivered-pr-types.js @@ -7,23 +7,28 @@ const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); return v || fallback; } - const TYPE_COLORS = { - feat: themeColor("--chart-1", "#5cb3ff"), - fix: themeColor("--negative", "#f87171"), - docs: "#9775fa", - ci: themeColor("--chart-2", "#f5c842"), - chore: "#8e8e93", - test: themeColor("--positive", "#4ade80"), - perf: themeColor("--chart-3", "#ff8f5c"), - other: "#5c5c5e", - }; + // Re-resolved on each render / color-scheme change so charts track live CSS tokens. + function resolveTypeColors() { + return { + feat: themeColor("--chart-1", "#5cb3ff"), + fix: themeColor("--negative", "#f87171"), + docs: themeColor("--type-docs", "#9775fa"), + ci: themeColor("--chart-2", "#f5c842"), + chore: themeColor("--type-chore", "#8e8e93"), + test: themeColor("--positive", "#4ade80"), + perf: themeColor("--chart-3", "#ff8f5c"), + other: themeColor("--type-other", "#5c5c5e"), + }; + } const FIX_KEYS = ["core", "external", "bot"]; // Must match .fix-bucket.{core,external,bot} in style.css (chart-1 / chart-5 / accent). - const FIX_COLORS = { - core: themeColor("--chart-1", "#5cb3ff"), - external: themeColor("--chart-5", "#2dd4bf"), - bot: themeColor("--accent", "#c4ff0e"), - }; + function resolveFixColors() { + return { + core: themeColor("--chart-1", "#5cb3ff"), + external: themeColor("--chart-5", "#2dd4bf"), + bot: themeColor("--accent", "#c4ff0e"), + }; + } const FIX_LABELS = { core: "Core team filed", external: "External human filed", @@ -222,7 +227,7 @@ }); } - function renderHero(t) { + function renderHero(t, typeColors) { const topType = PR_TYPE_KEYS.slice().sort((a, b) => t[b] - t[a])[0]; const topPct = t.merged ? (100 * t[topType] / t.merged).toFixed(1) : "0.0"; const typeBits = PR_TYPE_KEYS @@ -231,10 +236,12 @@ .slice(0, 4) .map(k => `${k} ${(100 * t[k] / (t.merged || 1)).toFixed(0)}%`) .join(" · "); + const fixColor = typeColors.fix; + const topColor = typeColors[topType] || typeColors.feat; document.getElementById("hero").innerHTML = `
${t.merged.toLocaleString()}
Merged PRs
-
${t.fix}
Fix PRs
-
${topPct}%
Top type: ${topType}
+
${t.fix}
Fix PRs
+
${topPct}%
Top type: ${topType}
${typeBits || "—"}
Mix in selected range
`; } @@ -251,6 +258,8 @@ } function render() { + const typeColors = resolveTypeColors(); + const fixColors = resolveFixColors(); const exact = filterDaily(false); const smoothed = filterDaily(true); const t = totals(exact); @@ -262,10 +271,10 @@ bot: d.fix_bot || 0, })).filter(d => d.core + d.external + d.bot > 0); - renderHero(t); + renderHero(t, typeColors); renderBuckets(t); - renderLineCounts("#chart-pr-type", smoothed, top4, TYPE_COLORS, null, 340); - renderLineCounts("#chart-fix-source", fixDaily, FIX_KEYS, FIX_COLORS, FIX_LABELS, 260); + renderLineCounts("#chart-pr-type", smoothed, top4, typeColors, null, 340); + renderLineCounts("#chart-fix-source", fixDaily, FIX_KEYS, fixColors, FIX_LABELS, 260); } document.querySelectorAll(".range-btn").forEach(btn => { @@ -294,5 +303,12 @@ }); window.addEventListener("resize", () => render()); + // Cards use live CSS vars; charts need a re-resolve + redraw when the scheme flips. + const colorScheme = window.matchMedia("(prefers-color-scheme: light)"); + if (typeof colorScheme.addEventListener === "function") { + colorScheme.addEventListener("change", () => render()); + } else if (typeof colorScheme.addListener === "function") { + colorScheme.addListener(() => render()); + } render(); })(); diff --git a/docs/style.css b/docs/style.css index 0fe5700..a96ed02 100644 --- a/docs/style.css +++ b/docs/style.css @@ -18,6 +18,9 @@ --chart-3: #ff8f5c; --chart-4: #c4ff0e; --chart-5: #2dd4bf; + --type-docs: #9775fa; + --type-chore: #8e8e93; + --type-other: #5c5c5e; --radius: 10px; } @@ -38,6 +41,9 @@ --chart-3: #f97316; --chart-4: #4d7c0f; --chart-5: #0d9488; + --type-docs: #7c3aed; + --type-chore: #6b7280; + --type-other: #9ca3af; } }