@opendata-ai/openchart-core 7.1.4 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-core",
-  "version": "7.1.4",
+  "version": "7.2.0",
   "description": "Types, theme, colors, accessibility, and utilities for openchart",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",

package/src/colors/palettes.ts

@@ -50,6 +50,9 @@ export const ACHROMATIC_RAMP = {
  * -> sRGB pipeline. Documented OKLCH source values are the contract; if
  * the conversion math changes, regenerate from the source rather than
  * editing hex literals directly.
+ *
+ * Tuned at L≈0.65, C≈0.20 (vs prior L≈0.70, C≈0.15) for more vivid,
+ * saturated color on dark backgrounds where the lighter pastels read soft.
  */
 // Order interleaves hues so adjacent slots sit at least ~70° apart on the
 // OKLCH wheel. Cyan and teal differ by only ~10° and read as the same color
@@ -57,14 +60,14 @@ export const ACHROMATIC_RAMP = {
 // teal slot is pushed deep into the ramp where it won't neighbor cyan.
 export const CATEGORICAL_PALETTE = [
   '#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)
+  '#ee4a73', // rose     — oklch(65% 0.20 10)
+  '#00b054', // emerald  — oklch(65% 0.20 155)
+  '#a46bf5', // violet   — oklch(65% 0.20 300)
+  '#e07d00', // amber    — oklch(68% 0.19 70)
+  '#0091ff', // sky      — oklch(65% 0.20 250)
+  '#f36000', // orange   — oklch(67% 0.20 45)
+  '#6f7dff', // indigo   — oklch(65% 0.20 275)
+  '#00afbf', // teal     — oklch(65% 0.20 200)
 ] as const;
 
 export type CategoricalPalette = typeof CATEGORICAL_PALETTE;

package/src/theme/__tests__/resolve.test.ts

@@ -83,6 +83,26 @@ describe('resolveTheme', () => {
     expect(resolved.fonts.family).toBe(DEFAULT_THEME.fonts.family);
     expect(resolved.spacing.padding).toBe(DEFAULT_THEME.spacing.padding);
   });
+
+  it('fonts.sizes overrides propagate to chrome element fontSizes', () => {
+    const resolved = resolveTheme({
+      fonts: { sizes: { title: 40, subtitle: 20, small: 16, axisTick: 16 } },
+    });
+    expect(resolved.chrome.title.fontSize).toBe(40);
+    expect(resolved.chrome.subtitle.fontSize).toBe(20);
+    expect(resolved.chrome.source.fontSize).toBe(16);
+    expect(resolved.chrome.byline.fontSize).toBe(16);
+    expect(resolved.chrome.footer.fontSize).toBe(16);
+    expect(resolved.chrome.eyebrow.fontSize).toBe(DEFAULT_THEME.chrome.eyebrow.fontSize);
+    expect(resolved.fonts.sizes.body).toBe(DEFAULT_THEME.fonts.sizes.body);
+  });
+
+  it('fonts.sizes partial override only changes specified sizes', () => {
+    const resolved = resolveTheme({ fonts: { sizes: { title: 36 } } });
+    expect(resolved.chrome.title.fontSize).toBe(36);
+    expect(resolved.chrome.subtitle.fontSize).toBe(DEFAULT_THEME.chrome.subtitle.fontSize);
+    expect(resolved.chrome.source.fontSize).toBe(DEFAULT_THEME.chrome.source.fontSize);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/theme/defaults.ts

@@ -56,6 +56,8 @@ export const DEFAULT_THEME: Theme = {
     chromeToChart: 8,
     chartToFooter: 8,
     axisMargin: 6,
+    xAxisHeight: 26,
+    xAxisLabelPadding: 14,
   },
   borderRadius: 2,
   chrome: {

package/src/theme/resolve.ts

@@ -72,6 +72,7 @@ function themeConfigToPartial(config: ThemeConfig): Partial<Theme> {
     const fonts: Partial<Theme['fonts']> = {};
     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 as Theme['fonts']['sizes'];
     partial.fonts = fonts as Theme['fonts'];
   }
 
@@ -79,6 +80,9 @@ function themeConfigToPartial(config: ThemeConfig): Partial<Theme> {
     const spacing: Partial<Theme['spacing']> = {};
     if (config.spacing.padding !== undefined) spacing.padding = config.spacing.padding;
     if (config.spacing.chromeGap !== undefined) spacing.chromeGap = config.spacing.chromeGap;
+    if (config.spacing.xAxisHeight !== undefined) spacing.xAxisHeight = config.spacing.xAxisHeight;
+    if (config.spacing.xAxisLabelPadding !== undefined)
+      spacing.xAxisLabelPadding = config.spacing.xAxisLabelPadding;
     partial.spacing = spacing as Theme['spacing'];
   }
 
@@ -198,6 +202,30 @@ function adjustOpacity(hex: string, opacity: number): string {
 export function resolveTheme(userTheme?: ThemeConfig, base: Theme = DEFAULT_THEME): ResolvedTheme {
   let merged: Theme = userTheme ? deepMerge(base, themeConfigToPartial(userTheme)) : { ...base };
 
+  // Propagate fonts.sizes overrides onto the chrome element fontSizes.
+  // The chrome defaults hard-code fontSize independently from fonts.sizes,
+  // so we sync them here after merging so a single sizes override applies everywhere.
+  if (userTheme?.fonts?.sizes) {
+    const s = userTheme.fonts.sizes;
+    merged = {
+      ...merged,
+      chrome: {
+        ...merged.chrome,
+        ...(s.title !== undefined && {
+          title: { ...merged.chrome.title, fontSize: s.title },
+        }),
+        ...(s.subtitle !== undefined && {
+          subtitle: { ...merged.chrome.subtitle, fontSize: s.subtitle },
+        }),
+        ...(s.small !== undefined && {
+          source: { ...merged.chrome.source, fontSize: s.small },
+          byline: { ...merged.chrome.byline, fontSize: s.small },
+          footer: { ...merged.chrome.footer, fontSize: s.small },
+        }),
+      },
+    };
+  }
+
   // Auto-adapt chrome for dark backgrounds
   const dark = isDarkBackground(merged.colors.background);
   if (dark) {

package/src/types/spec.ts

@@ -246,6 +246,8 @@ export interface AxisConfig {
   labelPadding?: number;
   /** Color override for axis tick labels and title. Useful in dual-axis charts to match axis color to its series. */
   labelColor?: string;
+  /** Literal string appended to every formatted tick label. e.g. "B" gives "$4.5B" when format is "$,.1~f". */
+  labelSuffix?: string;
   /** Secondary data field to display alongside each tick label. Renders in lighter weight/color. Only effective on categorical y-axis labels (horizontal bar charts). */
   labelField?: string;
   /**
@@ -810,6 +812,19 @@ export interface ThemeConfig {
     family?: string;
     /** Monospace font family (for tabular numbers). */
     mono?: string;
+    /** Font size overrides in pixels. Partial — only specified keys are overridden. */
+    sizes?: {
+      /** Chart title. Default: 26. */
+      title?: number;
+      /** Subtitle below the title. Default: 14. */
+      subtitle?: number;
+      /** Body text (tooltips, legend labels). Default: 13. */
+      body?: number;
+      /** Small text (source line, footer). Default: 11. */
+      small?: number;
+      /** Axis tick labels. Default: 11. */
+      axisTick?: number;
+    };
   };
   /** Spacing overrides in pixels. */
   spacing?: {
@@ -817,6 +832,10 @@ export interface ThemeConfig {
     padding?: number;
     /** Gap between chrome elements (title to subtitle, etc.). */
     chromeGap?: number;
+    /** Height reserved below chart area for x-axis tick labels. Increase when large axisTick font sizes cause label clipping. */
+    xAxisHeight?: number;
+    /** Gap in pixels between the x-axis line and tick label text. Increase when larger axisTick fonts sit too close to the axis line. */
+    xAxisLabelPadding?: number;
   };
   /** Border radius for chart container and tooltips. */
   borderRadius?: number;
@@ -863,10 +882,14 @@ export interface LabelConfig {
   format?: string;
   /** Literal string prepended to each formatted label value (e.g. "-" or "$"). */
   prefix?: string;
+  /** Literal string appended to each formatted label value (e.g. "%" or "x"). */
+  suffix?: string;
   /** Fixed CSS color for all labels. Overrides the default fill-derived color. */
   color?: string;
   /** Per-series pixel offsets for fine-tuning label positions, keyed by series name. */
   offsets?: Record<string, AnnotationOffset>;
+  /** Font size in pixels for bar/column value labels. */
+  fontSize?: number;
 }
 
 /** Shorthand: `false` disables all labels, `true` uses defaults, or pass a full config object. */

package/src/types/theme.ts

@@ -93,6 +93,10 @@ export interface ThemeSpacing {
   chartToFooter: number;
   /** Internal padding within the chart area (axes margins). */
   axisMargin: number;
+  /** Height reserved below the chart area for x-axis tick labels (and optional axis title). */
+  xAxisHeight: number;
+  /** Gap in pixels between the x-axis line and the top of non-rotated tick label text. */
+  xAxisLabelPadding: number;
 }
 
 // ---------------------------------------------------------------------------