@opendata-ai/openchart-core 7.6.0 → 7.7.0

package/dist/index.js

@@ -1337,7 +1337,8 @@ var DEFAULT_THEME = {
       color: "#71717a",
       lineHeight: 1.4
     }
-  }
+  },
+  seriesStrategy: "palette"
 };
 
 // src/theme/dark-mode.ts
@@ -1393,17 +1394,18 @@ function _luminanceFromHex(color2) {
   return (0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) / 255;
 }
 function adaptTheme(theme) {
+  const pairs = theme._tokenPairs;
   const inputBg = theme.colors.background;
   const isTransparent = inputBg === "transparent";
   const alreadyDark = isTransparent || _luminanceFromHex(inputBg) < 0.2;
-  const darkBg = alreadyDark ? inputBg : DARK_BG;
+  const darkBg = pairs?.["colors.background"] ? pairs["colors.background"].dark : alreadyDark ? inputBg : DARK_BG;
   const darkMuted = ACHROMATIC_RAMP.fgMuted;
   const light = DEFAULT_THEME.colors;
   const lightChrome = DEFAULT_THEME.chrome;
   const overridden = (current, lightDefault, darkDefault) => current === lightDefault ? darkDefault : current;
-  const darkText = overridden(theme.colors.text, light.text, DARK_TEXT);
-  const darkGridline = overridden(theme.colors.gridline, light.gridline, "rgba(255,255,255,0.05)");
-  const darkAxis = overridden(theme.colors.axis, light.axis, "#a1a1aa");
+  const darkText = pairs?.["colors.text"] ? pairs["colors.text"].dark : overridden(theme.colors.text, light.text, DARK_TEXT);
+  const darkGridline = pairs?.["colors.gridline"] ? pairs["colors.gridline"].dark : overridden(theme.colors.gridline, light.gridline, "rgba(255,255,255,0.05)");
+  const darkAxis = pairs?.["colors.axis"] ? pairs["colors.axis"].dark : overridden(theme.colors.axis, light.axis, "#a1a1aa");
   const categorical = theme.colors.categorical;
   return {
     ...theme,
@@ -1414,48 +1416,103 @@ function adaptTheme(theme) {
       text: darkText,
       gridline: darkGridline,
       axis: darkAxis,
-      annotationFill: overridden(
-        theme.colors.annotationFill,
-        light.annotationFill,
-        "rgba(255,255,255,0.06)"
-      ),
-      annotationText: overridden(theme.colors.annotationText, light.annotationText, darkMuted),
+      annotationFill: pairs?.["colors.annotationFill"] ? pairs["colors.annotationFill"].dark : overridden(theme.colors.annotationFill, light.annotationFill, "rgba(255,255,255,0.06)"),
+      annotationText: pairs?.["colors.annotationText"] ? pairs["colors.annotationText"].dark : overridden(theme.colors.annotationText, light.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"
+      positive: pairs?.["colors.positive"] ? pairs["colors.positive"].dark : theme.colors.positive !== "#16a34a" ? theme.colors.positive : "#34d399",
+      negative: pairs?.["colors.negative"] ? pairs["colors.negative"].dark : 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.
-      // Each color only adapts if the spec left it at the light default,
-      // so explicit chrome color overrides survive dark-mode adaptation.
-      eyebrow: theme.chrome.eyebrow,
+      // Eyebrow keeps its accent tint (cyan in both modes) unless the user
+      // gave an explicit dark value; the other chrome elements desaturate
+      // to a muted gray on the dark canvas. Each color only adapts if the
+      // spec left it at the light default, so explicit chrome color
+      // overrides survive dark-mode adaptation. When a TokenValue pair has
+      // an explicit dark value, use it directly.
+      eyebrow: pairs?.["chrome.eyebrow.color"] ? { ...theme.chrome.eyebrow, color: pairs["chrome.eyebrow.color"].dark } : theme.chrome.eyebrow,
       title: {
         ...theme.chrome.title,
-        color: overridden(theme.chrome.title.color, lightChrome.title.color, darkText)
+        color: pairs?.["chrome.title.color"] ? pairs["chrome.title.color"].dark : overridden(theme.chrome.title.color, lightChrome.title.color, darkText)
       },
       subtitle: {
         ...theme.chrome.subtitle,
-        color: overridden(theme.chrome.subtitle.color, lightChrome.subtitle.color, darkMuted)
+        color: pairs?.["chrome.subtitle.color"] ? pairs["chrome.subtitle.color"].dark : overridden(theme.chrome.subtitle.color, lightChrome.subtitle.color, darkMuted)
       },
       source: {
         ...theme.chrome.source,
-        color: overridden(theme.chrome.source.color, lightChrome.source.color, darkMuted)
+        color: pairs?.["chrome.source.color"] ? pairs["chrome.source.color"].dark : overridden(theme.chrome.source.color, lightChrome.source.color, darkMuted)
       },
       byline: {
         ...theme.chrome.byline,
-        color: overridden(theme.chrome.byline.color, lightChrome.byline.color, darkMuted)
+        color: pairs?.["chrome.byline.color"] ? pairs["chrome.byline.color"].dark : overridden(theme.chrome.byline.color, lightChrome.byline.color, darkMuted)
       },
       footer: {
         ...theme.chrome.footer,
-        color: overridden(theme.chrome.footer.color, lightChrome.footer.color, darkMuted)
+        color: pairs?.["chrome.footer.color"] ? pairs["chrome.footer.color"].dark : overridden(theme.chrome.footer.color, lightChrome.footer.color, darkMuted)
       }
     }
   };
 }
+function adaptForLightLineStroke(color2) {
+  if (rgb(color2) == null) return color2;
+  const c = hsl(color2);
+  if (c == null) return color2;
+  if (Number.isNaN(c.h) || c.s < 0.1) return color2;
+  if (c.l <= 0.4) return color2;
+  c.l = Math.max(0, c.l - 0.12);
+  return c.formatHex();
+}
+
+// src/theme/presets.ts
+var editorial = {};
+var essay = {
+  colors: {
+    background: { light: "#faf8f5", dark: "#1a1816" },
+    text: { light: "#1c1917", dark: "#e7e5e4" },
+    gridline: { light: "rgba(0,0,0,0.08)", dark: "rgba(255,255,255,0.06)" },
+    axis: { light: "#78716c", dark: "#a8a29e" }
+  },
+  fonts: {
+    family: '"Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif',
+    sizes: { title: 28, subtitle: 15, body: 14, small: 12 },
+    weights: { normal: 400, medium: 500, semibold: 600, bold: 700 }
+  },
+  spacing: {
+    padding: 24,
+    chromeGap: 6,
+    chromeToChart: 12,
+    chartToFooter: 12
+  },
+  chrome: {
+    title: { fontWeight: 600, lineHeight: 1.2 },
+    subtitle: { fontWeight: 400, lineHeight: 1.5 }
+  },
+  borderRadius: 0
+};
+var wire = {
+  colors: {
+    background: { light: "#ffffff", dark: "#0a0a0a" },
+    text: { light: "#171717", dark: "#ededed" },
+    gridline: { light: "rgba(0,0,0,0.06)", dark: "rgba(255,255,255,0.06)" },
+    axis: { light: "#737373", dark: "#a3a3a3" }
+  },
+  fonts: {
+    family: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
+    sizes: { title: 16, subtitle: 12, body: 11, small: 10, axisTick: 10 },
+    weights: { normal: 400, medium: 500, semibold: 600, bold: 700 }
+  },
+  spacing: {
+    padding: 12,
+    chromeGap: 2,
+    chromeToChart: 4,
+    chartToFooter: 4
+  },
+  chrome: {
+    title: { fontWeight: 600, lineHeight: 1.25 },
+    subtitle: { fontWeight: 400, lineHeight: 1.3 }
+  },
+  borderRadius: 2
+};
 
 // src/theme/resolve.ts
 function deepMerge(target, source) {
@@ -1471,6 +1528,9 @@ function deepMerge(target, source) {
   }
   return result;
 }
+function resolveTokenLight(v) {
+  return typeof v === "string" ? v : v.light;
+}
 function themeConfigToPartial(config) {
   const partial = {};
   if (config.colors) {
@@ -1481,10 +1541,16 @@ function themeConfigToPartial(config) {
       if (config.colors.categorical) colors.categorical = config.colors.categorical;
       if (config.colors.sequential) colors.sequential = config.colors.sequential;
       if (config.colors.diverging) colors.diverging = config.colors.diverging;
-      if (config.colors.background) colors.background = config.colors.background;
-      if (config.colors.text) colors.text = config.colors.text;
-      if (config.colors.gridline) colors.gridline = config.colors.gridline;
-      if (config.colors.axis) colors.axis = config.colors.axis;
+      if (config.colors.background) colors.background = resolveTokenLight(config.colors.background);
+      if (config.colors.text) colors.text = resolveTokenLight(config.colors.text);
+      if (config.colors.gridline) colors.gridline = resolveTokenLight(config.colors.gridline);
+      if (config.colors.axis) colors.axis = resolveTokenLight(config.colors.axis);
+      if (config.colors.annotationFill)
+        colors.annotationFill = resolveTokenLight(config.colors.annotationFill);
+      if (config.colors.annotationText)
+        colors.annotationText = resolveTokenLight(config.colors.annotationText);
+      if (config.colors.positive) colors.positive = resolveTokenLight(config.colors.positive);
+      if (config.colors.negative) colors.negative = resolveTokenLight(config.colors.negative);
     }
     partial.colors = colors;
   }
@@ -1493,12 +1559,18 @@ function themeConfigToPartial(config) {
     if (config.fonts.family) fonts.family = config.fonts.family;
     if (config.fonts.mono) fonts.mono = config.fonts.mono;
     if (config.fonts.sizes) fonts.sizes = config.fonts.sizes;
+    if (config.fonts.weights) fonts.weights = config.fonts.weights;
     partial.fonts = fonts;
   }
   if (config.spacing) {
     const spacing = {};
     if (config.spacing.padding !== void 0) spacing.padding = config.spacing.padding;
     if (config.spacing.chromeGap !== void 0) spacing.chromeGap = config.spacing.chromeGap;
+    if (config.spacing.chromeToChart !== void 0)
+      spacing.chromeToChart = config.spacing.chromeToChart;
+    if (config.spacing.chartToFooter !== void 0)
+      spacing.chartToFooter = config.spacing.chartToFooter;
+    if (config.spacing.axisMargin !== void 0) spacing.axisMargin = config.spacing.axisMargin;
     if (config.spacing.xAxisHeight !== void 0) spacing.xAxisHeight = config.spacing.xAxisHeight;
     if (config.spacing.xAxisLabelPadding !== void 0)
       spacing.xAxisLabelPadding = config.spacing.xAxisLabelPadding;
@@ -1509,13 +1581,56 @@ function themeConfigToPartial(config) {
   }
   if (config.chrome) {
     const chrome = {};
-    for (const [element, color2] of Object.entries(config.chrome)) {
-      if (color2 !== void 0) chrome[element] = { color: color2 };
+    for (const [element, value] of Object.entries(config.chrome)) {
+      if (value === void 0) continue;
+      if (typeof value === "string") {
+        chrome[element] = { color: value };
+      } else {
+        const override = {};
+        const obj = value;
+        if (obj.color !== void 0) override.color = resolveTokenLight(obj.color);
+        if (obj.fontSize !== void 0) override.fontSize = obj.fontSize;
+        if (obj.fontWeight !== void 0) override.fontWeight = obj.fontWeight;
+        if (obj.lineHeight !== void 0) override.lineHeight = obj.lineHeight;
+        chrome[element] = override;
+      }
     }
     partial.chrome = chrome;
   }
+  if (config.seriesStrategy) {
+    partial.seriesStrategy = config.seriesStrategy;
+  }
   return partial;
 }
+function collectTokenPairs(config) {
+  const pairs = {};
+  if (config.colors && !Array.isArray(config.colors)) {
+    const colorFields = [
+      "background",
+      "text",
+      "gridline",
+      "axis",
+      "annotationFill",
+      "annotationText",
+      "positive",
+      "negative"
+    ];
+    for (const field of colorFields) {
+      const v = config.colors[field];
+      if (v && typeof v === "object" && "light" in v) {
+        pairs[`colors.${field}`] = v;
+      }
+    }
+  }
+  if (config.chrome) {
+    for (const [element, value] of Object.entries(config.chrome)) {
+      if (value && typeof value === "object" && "color" in value && value.color && typeof value.color === "object" && "light" in value.color) {
+        pairs[`chrome.${element}.color`] = value.color;
+      }
+    }
+  }
+  return Object.keys(pairs).length > 0 ? pairs : void 0;
+}
 function relativeLuminance2(hex2) {
   const m = /^#?([0-9a-f]{6})$/i.exec(hex2.trim());
   if (!m) return 0;
@@ -1597,7 +1712,8 @@ function resolveTheme(userTheme, base = DEFAULT_THEME) {
   }
   return {
     ...merged,
-    isDark: dark
+    isDark: dark,
+    _tokenPairs: userTheme ? collectTokenPairs(userTheme) : void 0
   };
 }
 
@@ -3369,6 +3485,7 @@ function tileMap(data, options) {
     data,
     ...options?.encoding && { encoding: options.encoding },
     ...options?.palette && { palette: options.palette },
+    ...options?.colors && { colors: options.colors },
     ...options?.chrome && { chrome: options.chrome },
     ...options?.legend && { legend: options.legend },
     ...options?.theme && { theme: options.theme },
@@ -3379,6 +3496,7 @@ function tileMap(data, options) {
   };
 }
 export {
+  ACHROMATIC_RAMP,
   AXIS_TITLE_GAP,
   AXIS_TITLE_OFFSET_COMPACT,
   AXIS_TITLE_OFFSET_DEFAULT,
@@ -3421,6 +3539,7 @@ export {
   X_AXIS_TITLE_BAND_ROTATED,
   abbreviateNumber,
   adaptColorForDarkMode,
+  adaptForLightLineStroke,
   adaptTheme,
   areaChart,
   axisTitleOffset,
@@ -3437,7 +3556,9 @@ export {
   detectCollision,
   donutChart,
   dotChart,
+  editorial,
   elementRef,
+  essay,
   estimateTextWidth,
   findAccessibleColor,
   formatDate,
@@ -3479,6 +3600,7 @@ export {
   simulateColorBlindness,
   textAscent,
   tileMap,
+  wire,
   wrapText
 };
 //# sourceMappingURL=index.js.map