@bongos/core 1.24.49 → 1.24.50

package/modules/status-ui/public/status.js

@@ -643,6 +643,10 @@ async function loadCosts() {
 
   if (!window.Chart) return; // Chart.js failed to load — skip
 
+  // The chart paints with the page's own tokens (task 1005089): a canvas cannot
+  // read var(), so the resolved values are read once per draw, in whichever mode
+  // the page is in. Spend is ink, value the --info tone; the faces are the pack's.
+  const t = chartTokens();
   const ctx = els.costChart.getContext('2d');
   if (costChart) costChart.destroy();
   costChart = new Chart(ctx, {
@@ -654,23 +658,23 @@ async function loadCosts() {
           label: `${curLabel()} spent`,
           data: cumCost,
           fill: true,
-          borderColor: '#2a2110',
-          backgroundColor: 'rgba(139, 111, 44, 0.16)',
+          borderColor: t.ink,
+          backgroundColor: t.inkWash,
           tension: 0.2,
           pointRadius: 2.5,
-          pointBackgroundColor: '#2a2110',
+          pointBackgroundColor: t.ink,
           borderWidth: 1.5,
         },
         {
           label: 'value wrought',
           data: cumValue,
           fill: false,
-          borderColor: '#2f5a3f',
-          backgroundColor: 'rgba(74, 125, 92, 0.18)',
+          borderColor: t.info,
+          backgroundColor: t.info,
           borderDash: [5, 4],
           tension: 0.2,
           pointRadius: 2.5,
-          pointBackgroundColor: '#2f5a3f',
+          pointBackgroundColor: t.info,
           borderWidth: 1.5,
         },
       ],
@@ -678,7 +682,7 @@ async function loadCosts() {
     options: {
       responsive: true,
       maintainAspectRatio: false,
-      font: { family: '"EB Garamond", Georgia, serif' },
+      font: { family: t.body },
       plugins: {
         legend: {
           display: true,
@@ -686,14 +690,16 @@ async function loadCosts() {
           labels: {
             boxWidth: 22,
             padding: 18,
-            font: { family: '"EB Garamond", Georgia, serif', size: 13, style: 'italic' },
-            color: '#6e5b3a',
+            font: { family: t.body, size: 13 },
+            color: t.inkSoft,
           },
         },
         tooltip: {
-          backgroundColor: 'rgba(42, 33, 16, 0.92)',
-          titleFont: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
-          bodyFont: { family: '"EB Garamond", Georgia, serif', size: 13 },
+          backgroundColor: t.ink,
+          titleColor: t.card,
+          bodyColor: t.card,
+          titleFont: { family: t.body, size: 12, weight: '500' },
+          bodyFont: { family: t.body, size: 13 },
           padding: 10,
           callbacks: {
             label: (c) => `${c.dataset.label}: ${c.parsed.y.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} dr.`,
@@ -706,28 +712,28 @@ async function loadCosts() {
           title: {
             display: true,
             text: `${curLabel()} (cumulative)`,
-            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
-            color: '#735f3d',
+            font: { family: t.body, size: 12, weight: '500' },
+            color: t.inkSoft,
           },
           ticks: {
             callback: (v) => `${v} dr.`,
-            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
-            color: '#6e5b3a',
+            font: { family: t.body, size: 12 },
+            color: t.inkSoft,
           },
-          grid: { color: 'rgba(139, 111, 44, 0.18)', drawBorder: false },
+          grid: { color: t.rule, drawBorder: false },
         },
         x: {
           title: {
             display: true,
             text: 'date',
-            font: { family: '"Cinzel", Georgia, serif', size: 11, weight: '500' },
-            color: '#735f3d',
+            font: { family: t.body, size: 12, weight: '500' },
+            color: t.inkSoft,
           },
           grid: { display: false },
           ticks: {
             maxTicksLimit: 10,
-            font: { family: '"EB Garamond", Georgia, serif', size: 12 },
-            color: '#6e5b3a',
+            font: { family: t.body, size: 12 },
+            color: t.inkSoft,
           },
         },
       },
@@ -735,6 +741,23 @@ async function loadCosts() {
   });
 }
 
+// The resolved values of the tokens the cost chart paints with, read from the
+// page (a canvas cannot take var()). An unset token reads '' and Chart.js keeps
+// its own default for it.
+function chartTokens() {
+  const cs = window.getComputedStyle(document.body);
+  const v = (name) => cs.getPropertyValue(name).trim();
+  return {
+    ink: v('--ink'),
+    inkSoft: v('--ink-soft'),
+    inkWash: v('--glass-strong'),
+    info: v('--info'),
+    rule: v('--rule-soft'),
+    card: v('--bg-card'),
+    body: v('--font-body') || 'sans-serif',
+  };
+}
+
 function toDayKey(d) {
   // Postgres returns 'YYYY-MM-DD' as a string OR an ISO timestamp depending
   // on transport — normalise to YYYY-MM-DD so dedupe works across formats.
@@ -1050,7 +1073,7 @@ function stampRefreshTime() {
 // kinds-of-work fingerprint. Fed by /api/bongos/public/analytics/ecosystem.
 // Inline SVG sparklines — no chart library for this tile.
 
-function foundrySparkline(values, color) {
+function foundrySparkline(values, tone) {
   const W = 320, H = 54, pad = 4;
   const nums = (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
   if (nums.length === 0) return '';
@@ -1060,9 +1083,12 @@ function foundrySparkline(values, color) {
   const y = (v) => H - pad - ((v - min) / span) * (H - 2 * pad);
   const line = nums.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
   const area = `${pad},${H - pad} ${line} ${(W - pad)},${H - pad}`;
-  return `<svg class="foundry-spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend">
-    <polyline class="foundry-spark__area" points="${area}" fill="${color}" />
-    <polyline class="foundry-spark__line" points="${line}" fill="none" stroke="${color}" />
+  // The colour is the sheet's (.foundry-spark, and --ink for the ink tone): a
+  // token, never a literal handed in from here (task 1005089).
+  const cls = tone === 'ink' ? 'foundry-spark foundry-spark--ink' : 'foundry-spark';
+  return `<svg class="${cls}" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend">
+    <polyline class="foundry-spark__area" points="${area}" />
+    <polyline class="foundry-spark__line" points="${line}" />
   </svg>`;
 }
 
@@ -1095,8 +1121,8 @@ async function loadEcosystem() {
   const shipVals = (data.ship_rate || []).map((r) => Number(r.n));
   const durVals = (data.duration_trend || []).map((r) => Number(r.avg_actual));
   chartsEl.innerHTML =
-    `<div class="foundry__chart"><div class="foundry__chart-title">Works shipped / day</div>${foundrySparkline(shipVals, '#2f5a3f') || '<p class="empty">no data</p>'}</div>` +
-    `<div class="foundry__chart"><div class="foundry__chart-title">Avg time per work (min)</div>${foundrySparkline(durVals, '#2d6e7e') || '<p class="empty">no data</p>'}</div>`;
+    `<div class="foundry__chart"><div class="foundry__chart-title">Works shipped / day</div>${foundrySparkline(shipVals, 'ink') || '<p class="empty">no data</p>'}</div>` +
+    `<div class="foundry__chart"><div class="foundry__chart-title">Avg time per work (min)</div>${foundrySparkline(durVals, 'info') || '<p class="empty">no data</p>'}</div>`;
 
   const kinds = (data.top_kinds || []).slice(0, 6);
   if (kindsEl) {