@opendata-ai/openchart-core 6.28.6 → 7.0.2

package/dist/index.js

@@ -699,27 +699,43 @@ function findAccessibleColor(baseColor, bg, targetRatio = 4.5) {
 }
 
 // src/colors/palettes.ts
+var ACHROMATIC_RAMP = {
+  fg: "#f7f8f8",
+  // primary text
+  fg2: "#d0d6e0",
+  // body text
+  fgMuted: "#a1a1aa",
+  // secondary series (zinc-400)
+  fgSubtle: "#71717a",
+  // tertiary series (zinc-500)
+  fgFaint: "#52525b",
+  // quaternary series (zinc-600)
+  secondary: "#27272a",
+  // hover / raised surface
+  card: "#111113",
+  // card surface
+  bg: "#09090b"
+  // canvas
+};
 var CATEGORICAL_PALETTE = [
-  "#1b7fa3",
-  // teal-blue (primary)
-  "#c44e52",
-  // warm red (secondary)
-  "#6a9f58",
-  // softer green (tertiary)
-  "#d47215",
-  // orange
-  "#507e79",
-  // muted teal
-  "#9a6a8d",
-  // purple
-  "#c4636b",
-  // rose
-  "#9c755f",
-  // brown
-  "#a88f22",
-  // olive gold
-  "#858078"
-  // warm gray
+  "#06b6d4",
+  // cyan,    primary accent (sRGB literal, ~205°)
+  "#eb7289",
+  // rose     — oklch(70% 0.15 10)
+  "#3bb974",
+  // emerald  — oklch(70% 0.15 155)
+  "#ad87ed",
+  // violet   — oklch(70% 0.15 300)
+  "#e69c3a",
+  // amber    — oklch(75% 0.14 70)
+  "#4ba3f7",
+  // sky      — oklch(70% 0.15 250)
+  "#eb8656",
+  // orange   — oklch(72% 0.14 45)
+  "#8494fa",
+  // indigo   — oklch(70% 0.15 275)
+  "#00b9c3"
+  // teal     — oklch(70% 0.15 200)
 ];
 var SEQUENTIAL_BLUE = {
   name: "blue",
@@ -792,9 +808,17 @@ var DIVERGING_PALETTES = {
 };
 
 // src/theme/dark-mode.ts
-var DARK_BG = "#1a1a2e";
-var DARK_TEXT = "#e0e0e0";
+var DARK_BG = ACHROMATIC_RAMP.bg;
+var DARK_TEXT = ACHROMATIC_RAMP.fg;
 function adaptColorForDarkMode(color2, lightBg, darkBg) {
+  if (rgb(color2) == null) {
+    if (typeof console !== "undefined" && console.warn) {
+      console.warn(
+        `[openchart] adaptColorForDarkMode: unparseable color "${color2}", returning unchanged. Use precomputed sRGB hex.`
+      );
+    }
+    return color2;
+  }
   const originalRatio = contrastRatio(color2, lightBg);
   const c = hsl(color2);
   if (c == null || Number.isNaN(c.h)) {
@@ -840,9 +864,10 @@ function adaptTheme(theme) {
   const alreadyDark = inputBg === "transparent" || _luminanceFromHex(inputBg) < 0.2;
   const darkBg = alreadyDark ? inputBg : DARK_BG;
   const darkText = alreadyDark ? theme.colors.text : DARK_TEXT;
-  const darkGridline = alreadyDark ? theme.colors.gridline : "#333344";
-  const darkAxis = alreadyDark ? theme.colors.axis : "#888899";
-  const categorical = alreadyDark ? theme.colors.categorical : theme.colors.categorical.map((c) => adaptColorForDarkMode(c, inputBg, darkBg));
+  const darkGridline = alreadyDark ? theme.colors.gridline : "rgba(255,255,255,0.05)";
+  const darkAxis = alreadyDark ? theme.colors.axis : "#a1a1aa";
+  const darkMuted = ACHROMATIC_RAMP.fgMuted;
+  const categorical = theme.colors.categorical;
   return {
     ...theme,
     isDark: true,
@@ -852,16 +877,24 @@ function adaptTheme(theme) {
       text: darkText,
       gridline: darkGridline,
       axis: darkAxis,
-      annotationFill: "rgba(255,255,255,0.08)",
-      annotationText: "#bbbbcc",
-      categorical
+      annotationFill: "rgba(255,255,255,0.06)",
+      annotationText: darkMuted,
+      categorical,
+      // Sparkline trend colors tuned for dark surfaces: teal-leaning green
+      // and coral red read better than the saturated light-mode tokens.
+      // Any non-default value is treated as a user override and preserved.
+      positive: theme.colors.positive !== "#16a34a" ? theme.colors.positive : "#34d399",
+      negative: theme.colors.negative !== "#dc2626" ? theme.colors.negative : "#f87171"
     },
     chrome: {
+      // Eyebrow keeps its accent tint (cyan in both modes); the other
+      // chrome elements desaturate to a muted gray on the dark canvas.
+      eyebrow: theme.chrome.eyebrow,
       title: { ...theme.chrome.title, color: darkText },
-      subtitle: { ...theme.chrome.subtitle, color: "#aaaaaa" },
-      source: { ...theme.chrome.source, color: "#888888" },
-      byline: { ...theme.chrome.byline, color: "#888888" },
-      footer: { ...theme.chrome.footer, color: "#888888" }
+      subtitle: { ...theme.chrome.subtitle, color: darkMuted },
+      source: { ...theme.chrome.source, color: darkMuted },
+      byline: { ...theme.chrome.byline, color: darkMuted },
+      footer: { ...theme.chrome.footer, color: darkMuted }
     }
   };
 }
@@ -873,26 +906,31 @@ var DEFAULT_THEME = {
     sequential: SEQUENTIAL_PALETTES,
     diverging: DIVERGING_PALETTES,
     background: "#ffffff",
-    text: "#1d1d1d",
-    gridline: "#e8e8e8",
-    axis: "#888888",
+    text: "#09090b",
+    gridline: "rgba(0,0,0,0.06)",
+    // Used for axis lines/ticks AND axis tick label fill. Must clear WCAG AA
+    // contrast (4.5:1) on white because tick labels are rendered with this
+    // color. Zinc-500 hits ~5.7:1.
+    axis: "#71717a",
     annotationFill: "rgba(0,0,0,0.04)",
-    annotationText: "#555555"
+    annotationText: "#71717a",
+    positive: "#16a34a",
+    negative: "#dc2626"
   },
   fonts: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    family: '"Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     mono: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
     sizes: {
-      title: 22,
-      subtitle: 15,
+      title: 26,
+      subtitle: 14,
       body: 13,
       small: 11,
       axisTick: 11
     },
     weights: {
       normal: 400,
-      medium: 500,
-      semibold: 600,
+      medium: 510,
+      semibold: 590,
       bold: 700
     }
   },
@@ -903,37 +941,43 @@ var DEFAULT_THEME = {
     chartToFooter: 8,
     axisMargin: 6
   },
-  borderRadius: 4,
+  borderRadius: 2,
   chrome: {
+    eyebrow: {
+      fontSize: 11,
+      fontWeight: 510,
+      color: "#06b6d4",
+      lineHeight: 1.4
+    },
     title: {
-      fontSize: 22,
-      fontWeight: 700,
-      color: "#333333",
-      lineHeight: 1.3
+      fontSize: 26,
+      fontWeight: 590,
+      color: "#09090b",
+      lineHeight: 1.15
     },
     subtitle: {
-      fontSize: 15,
+      fontSize: 14,
       fontWeight: 400,
-      color: "#666666",
-      lineHeight: 1.4
+      color: "#71717a",
+      lineHeight: 1.45
     },
     source: {
-      fontSize: 12,
+      fontSize: 11,
       fontWeight: 400,
-      color: "#999999",
-      lineHeight: 1.3
+      color: "#71717a",
+      lineHeight: 1.4
     },
     byline: {
-      fontSize: 12,
+      fontSize: 11,
       fontWeight: 400,
-      color: "#999999",
-      lineHeight: 1.3
+      color: "#71717a",
+      lineHeight: 1.4
     },
     footer: {
-      fontSize: 12,
+      fontSize: 11,
       fontWeight: 400,
-      color: "#999999",
-      lineHeight: 1.3
+      color: "#71717a",
+      lineHeight: 1.4
     }
   }
 };
@@ -1003,6 +1047,8 @@ function adaptChromeForDarkBg(theme, textColor) {
   return {
     ...theme,
     chrome: {
+      // Eyebrow keeps its accent tint regardless of surface mode.
+      eyebrow: theme.chrome.eyebrow,
       title: {
         ...theme.chrome.title,
         color: theme.chrome.title.color === light.title.color ? textColor : theme.chrome.title.color
@@ -1153,7 +1199,7 @@ function estimateLineCount(text, style, maxWidth, measureText) {
   }
   return lines;
 }
-function computeChrome(chrome, theme, width, measureText, chromeMode = "full", padding, watermark = true) {
+function computeChrome(chrome, theme, width, measureText, chromeMode = "full", padding, watermark = true, bottomLegendHeight = 0) {
   if (!chrome || chromeMode === "hidden") {
     return { topHeight: 0, bottomHeight: 0 };
   }
@@ -1164,6 +1210,26 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
   const fontFamily = theme.fonts.family;
   let topY = pad2;
   const topElements = {};
+  const eyebrowNorm = chromeMode === "compact" ? null : normalizeChromeText(chrome.eyebrow);
+  if (eyebrowNorm) {
+    const style = buildTextStyle(
+      theme.chrome.eyebrow,
+      fontFamily,
+      theme.chrome.eyebrow.color,
+      width,
+      eyebrowNorm.style
+    );
+    const lineCount = estimateLineCount(eyebrowNorm.text, style, maxWidth, measureText);
+    const element = {
+      text: eyebrowNorm.text,
+      x: pad2 + (eyebrowNorm.offset?.dx ?? 0),
+      y: topY + (eyebrowNorm.offset?.dy ?? 0),
+      maxWidth,
+      style
+    };
+    topElements.eyebrow = element;
+    topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
+  }
   const titleNorm = normalizeChromeText(chrome.title);
   if (titleNorm) {
     const style = buildTextStyle(
@@ -1204,14 +1270,16 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
     topElements.subtitle = element;
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
-  const hasTopChrome = titleNorm || subtitleNorm;
+  const hasTopChrome = eyebrowNorm || titleNorm || subtitleNorm;
   const chromeToChart = width < COMPACT_WIDTH ? Math.min(theme.spacing.chromeToChart, 2) : theme.spacing.chromeToChart;
   const topHeight = hasTopChrome ? topY - pad2 + chromeToChart - chromeGap : 0;
   if (chromeMode === "compact") {
     let compactBottom = 0;
     if (watermark && width >= BRAND_MIN_WIDTH) {
       const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
-      compactBottom = theme.spacing.chartToFooter + brandHeight + pad2;
+      compactBottom = theme.spacing.chartToFooter + brandHeight + pad2 + bottomLegendHeight;
+    } else if (bottomLegendHeight > 0) {
+      compactBottom = bottomLegendHeight;
     }
     return {
       topHeight,
@@ -1219,7 +1287,9 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
       ...topElements
     };
   }
-  const shouldReserveBrandWidth = watermark && width >= BRAND_MIN_WIDTH;
+  const brandNorm = normalizeChromeText(chrome.brand);
+  const showWatermark = watermark && !brandNorm;
+  const shouldReserveBrandWidth = (showWatermark || !!brandNorm) && width >= BRAND_MIN_WIDTH;
   const bottomMaxWidth = maxWidth - (shouldReserveBrandWidth ? BRAND_RESERVE_WIDTH : 0);
   const bottomElements = {};
   let bottomHeight = 0;
@@ -1250,6 +1320,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
   }
   if (bottomItems.length > 0) {
     bottomHeight += theme.spacing.chartToFooter;
+    bottomHeight += bottomLegendHeight;
     for (const item of bottomItems) {
       const style = buildTextStyle(
         item.defaults,
@@ -1271,7 +1342,7 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
       bottomHeight += height + chromeGap;
     }
     bottomHeight -= chromeGap;
-    if (watermark && width >= BRAND_MIN_WIDTH) {
+    if (showWatermark && width >= BRAND_MIN_WIDTH) {
       const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
       const contentBelowFirstItem = bottomHeight - theme.spacing.chartToFooter;
       if (brandHeight > contentBelowFirstItem) {
@@ -1279,15 +1350,41 @@ function computeChrome(chrome, theme, width, measureText, chromeMode = "full", p
       }
     }
     bottomHeight += pad2;
-  } else if (watermark && width >= BRAND_MIN_WIDTH) {
+  } else if (showWatermark && width >= BRAND_MIN_WIDTH) {
     const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
-    bottomHeight = theme.spacing.chartToFooter + brandHeight + pad2;
+    bottomHeight = theme.spacing.chartToFooter + brandHeight + pad2 + bottomLegendHeight;
+  } else if (bottomLegendHeight > 0) {
+    bottomHeight = bottomLegendHeight;
+  }
+  let brandElement;
+  if (brandNorm && width >= BRAND_MIN_WIDTH) {
+    const brandStyle = buildTextStyle(
+      theme.chrome.footer,
+      fontFamily,
+      theme.chrome.footer.color,
+      width,
+      brandNorm.style
+    );
+    brandStyle.textAnchor = "end";
+    const brandY = bottomItems.length > 0 ? theme.spacing.chartToFooter : theme.spacing.chartToFooter;
+    brandElement = {
+      text: brandNorm.text,
+      x: width - pad2 + (brandNorm.offset?.dx ?? 0),
+      y: brandY + (brandNorm.offset?.dy ?? 0),
+      maxWidth: BRAND_RESERVE_WIDTH,
+      style: brandStyle
+    };
+    if (bottomItems.length === 0) {
+      const brandHeight = estimateTextHeight(brandStyle.fontSize, 1, brandStyle.lineHeight);
+      bottomHeight = theme.spacing.chartToFooter + brandHeight + pad2;
+    }
   }
   return {
     topHeight,
     bottomHeight,
     ...topElements,
-    ...bottomElements
+    ...bottomElements,
+    ...brandElement ? { brand: brandElement } : {}
   };
 }