@opendata-ai/openchart-core 7.1.3 → 7.2.0

package/dist/index.d.ts

@@ -334,6 +334,8 @@ 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;
     /**
@@ -847,6 +849,19 @@ 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?: {
@@ -854,9 +869,33 @@ 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;
+    /**
+     * Per-element chrome text color overrides. Font sizes and weights come
+     * from the typography scale and are not overridable here; only color is.
+     * An override survives dark-mode adaptation (adaptTheme preserves any
+     * chrome color the spec set explicitly).
+     */
+    chrome?: {
+        /** Eyebrow (kicker) text color. */
+        eyebrow?: string;
+        /** Title text color. */
+        title?: string;
+        /** Subtitle text color. */
+        subtitle?: string;
+        /** Source/attribution text color. */
+        source?: string;
+        /** Byline text color. */
+        byline?: string;
+        /** Footer text color. */
+        footer?: string;
+    };
 }
 /**
  * Label density mode controlling how many data labels are shown.
@@ -874,10 +913,14 @@ 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. */
 type LabelSpec = boolean | LabelConfig;
@@ -2200,6 +2243,10 @@ 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;
 }
 /** Default style configuration for a chrome text element. */
 interface ChromeDefaults {
@@ -3587,12 +3634,6 @@ declare function simulateColorBlindness(color: string, type: ColorBlindnessType)
  */
 declare function checkPaletteDistinguishability(colors: string[], type: ColorBlindnessType, minDistance?: number): boolean;
 
-/**
- * WCAG contrast ratio utilities.
- *
- * Uses d3-color for color space parsing and manipulation.
- * All functions accept CSS color strings (hex, rgb, hsl, named colors).
- */
 /**
  * Compute the WCAG contrast ratio between two colors.
  * Returns a value between 1 (identical) and 21 (black on white).
@@ -3601,13 +3642,23 @@ declare function contrastRatio(fg: string, bg: string): number;
 /**
  * Pick a legible label color (white or near-black) for text placed on top of `bg`.
  *
- * Returns white when white clears 4.5:1 against `bg`, dark otherwise.
- * Simpler and more reliable than `findAccessibleColor` for "label on filled bar."
+ * Uses a perceptual luminance threshold rather than a strict 4.5:1 contrast
+ * gate. WCAG's 4.5:1 ratio is calibrated for body text on a page; bold value
+ * labels sitting on a saturated filled bar read fine at lower ratios. A pure
+ * contrast-ratio gate sends mid-tone fills (e.g. slate `#94a3b8`, L≈0.36) to
+ * dark text even though white reads cleaner on them.
+ *
+ * The threshold is mode-dependent because of simultaneous contrast: the same
+ * bar fill looks lighter against a dark canvas than against a white page, so
+ * dark text reads more grounded on it. Dark mode therefore uses a lower
+ * threshold (L < 0.30) to pivot mid-tone fills to dark text sooner.
  *
- * Note: mid-gray backgrounds (~#707070–#8a8a8a) fall in a WCAG gap where
- * neither white nor dark clears 4.5:1. Default palettes don't produce these.
+ * - Light mode (L < 0.42 → white): white on saturated and mid-tone fills;
+ *   dark text only on genuinely light fills (`#b0b0b0` and lighter).
+ * - Dark mode (L < 0.30 → white): saturated fills keep white; mid-tone fills
+ *   (slate `#94a3b8`, cyan `#06b6d4`, mid-grey) pivot to dark text.
  */
-declare function pickLabelColor(bg: string): string;
+declare function pickLabelColor(bg: string, darkMode?: boolean): string;
 /**
  * Check if two colors meet WCAG AA contrast requirements.
  * Normal text: 4.5:1, large text (18px+ bold or 24px+): 3:1.
@@ -3629,8 +3680,11 @@ declare function findAccessibleColor(baseColor: string, bg: string, targetRatio?
  * -> 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.
  */
-declare const CATEGORICAL_PALETTE: readonly ["#06b6d4", "#eb7289", "#3bb974", "#ad87ed", "#e69c3a", "#4ba3f7", "#eb8656", "#8494fa", "#00b9c3"];
+declare const CATEGORICAL_PALETTE: readonly ["#06b6d4", "#ee4a73", "#00b054", "#a46bf5", "#e07d00", "#0091ff", "#f36000", "#6f7dff", "#00afbf"];
 type CategoricalPalette = typeof CATEGORICAL_PALETTE;
 /** Sequential palette definition: an array of color stops from light to dark. */
 interface SequentialPalette {
@@ -3835,6 +3889,16 @@ declare const TICK_LABEL_OFFSET = 6;
  * standard (non-compact) viewports. Omitted on compact viewports to save space.
  */
 declare const AXIS_TITLE_TRAILING_PAD = 4;
+/**
+ * Breathing room between the widest tick label's far edge and the rotated
+ * y-axis title center. The title glyph extends ~halfGlyph (ceil(bodyFontSize/2))
+ * from its center toward the tick labels, so visible clearance is
+ * AXIS_TITLE_GAP - halfGlyph (~7px at default body size 13).
+ *
+ * Used in both the engine (dimensions.ts margin reservation) and the renderer
+ * (axes.ts title placement). Both must agree on this value.
+ */
+declare const AXIS_TITLE_GAP = 14;
 /**
  * Width below which "narrow" adjustments apply: extra iOS Safari top padding and
  * tighter category label gaps. Sits between compact (< 400) and medium (400–700).
@@ -4221,4 +4285,4 @@ interface TileMapBuilderOptions {
  */
 declare function tileMap(data: Record<string, number | null> | DataRow[], options?: TileMapBuilderOptions): TileMapSpec;
 
-export { type A11yMetadata, AXIS_TITLE_OFFSET_COMPACT, AXIS_TITLE_OFFSET_DEFAULT, AXIS_TITLE_TRAILING_PAD, type AggregateOp, type AggregateTransform, type AnimationConfig, type AnimationEase, type AnimationPhaseConfig, type AnimationSpec, type AnimationStagger, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcEncoding, type ArcMark, type AreaEncoding, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, BRAND_FONT_SIZE, BRAND_MIN_WIDTH, BRAND_RESERVE_WIDTH, BREAKPOINT_COMPACT_MAX, BREAKPOINT_MEDIUM_MAX, type BarColumnConfig, type BarEncoding, type BarListEncoding, type BarListLayout, type BarListRowMark, type BarListSpec, type BarListSpecWithoutData, type BarTableCell, type BaseLegendLayout, type BinParams, type BinTransform, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, COMPACT_WIDTH, type CalculateExpression, type CalculateTransform, type CategoricalLegendLayout, type CategoricalPalette, type CategoryColorsConfig, type CategoryTableCell, type CellStyle, type ChannelRule, type ChartBuilderOptions, type ChartEventHandlers, type ChartLayout, type ChartSpec, type ChartSpecOverride, type ChartSpecWithoutData, type ChartType, type Chrome, type ChromeDefaults, type ChromeKey, type ChromeMode, type ChromeText, type ChromeTextStyle, type CircleEncoding, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, type Condition, type ConditionalValueDef, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type Display, type DivergingPalette, EXTENDED_OFFSET_STRATEGIES, type ElementEdit, type ElementRef, type Encoding, type EncodingChannel, type EncodingRule, type EndpointLabelEntry, type EndpointLabelsConfig, type EndpointLabelsLayout, type FieldPredicate, type FieldRef, type FieldType, type FilterPredicate, type FilterTransform, type FlagTableCell, type FoldTransform, GRAPH_ENCODING_RULES, type GradientColorStop, type GradientDef, type GradientLegendLayout, type GradientStop, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, HEIGHT_CRAMPED_MAX, HEIGHT_SHORT_MAX, HPAD_COMPACT_FRACTION, HPAD_COMPACT_MIN, type HeatmapColumnConfig, type HeatmapTableCell, type HeightClass, type ImageColumnConfig, type ImageTableCell, LABEL_GAP_COMPACT, LABEL_GAP_DEFAULT, LABEL_GAP_NARROW_MAX, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LabelSpec, type LayerSpec, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineEncoding, type LineMark, type LinearGradient, type LogicalAnd, type LogicalNot, type LogicalOr, type LollipopEncoding, MARK_DISPLAY_NAMES, MARK_ENCODING_RULES, MARK_TYPES, MAX_LEFT_LABEL_FRACTION_COMPACT, MAX_LEFT_LABEL_FRACTION_DEFAULT, MAX_LEFT_LABEL_FRACTION_MEDIUM, MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX, type Margins, type Mark, type MarkAria, type MarkDef, type MarkEvent, type MarkType, type MeasureTextFn, type Metric, NARROW_VIEWPORT_MAX, type NodeOverride, OFFSET_STRATEGIES, type OffsetStrategy, type PaginationState, type Point, type PointEncoding, type PointMark, type RadialGradient, type RangeAnnotation, type Rect, type RectEncoding, type RectMark, type RefLineAnnotation, type RelativeTimeRef, type ResolveConfig, type ResolveMode, type ResolvedAnimation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedMetricBar, type ResolvedMetricCell, type ResolvedTheme, type RuleMarkLayout, SEQUENTIAL_PALETTES, type SankeyEncoding, type SankeyLayout, type SankeyLinkColor, type SankeyLinkMark, type SankeyNodeAlign, type SankeyNodeMark, type SankeySpec, type SankeySpecWithoutData, type ScaleConfig, type ScaleType, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, TICK_LABEL_OFFSET, TOP_PAD_EXTRA_NARROW, TOP_PAD_NARROW_MAX, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextEncoding, type TextMarkLayout, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TickEncoding, type TickMarkLayout, type TileMapBuilderOptions, type TileMapEncoding, type TileMapLayout, type TileMapPalette, type TileMapSpec, type TileMapSpecWithoutData, type TileMapTileMark, type TimeUnit, type TimeUnitTransform, type TooltipContent, type TooltipField, type Transform, type VizSpec, type WindowFieldDef, type WindowOp, type WindowSortField, type WindowTransform, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, buildTemporalFormatter, checkPaletteDistinguishability, columnChart, computeChrome, computeLabelBounds, contrastRatio, dataTable, detectCollision, donutChart, dotChart, elementRef, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getAxisTitleOffset, getBreakpoint, getHeightClass, getLayoutStrategy, getRepresentativeColor, inferFieldType, isBarListSpec, isChartSpec, isConditionalDef, isEncodingChannel, isGradientDef, isGraphSpec, isLayerSpec, isRangeAnnotation, isRefLineAnnotation, isSankeySpec, isTableSpec, isTextAnnotation, isTileMapSpec, lineChart, meetsAA, pickLabelColor, pieChart, resolveCollisions, resolveMarkDef, resolveMarkType, resolveTheme, scatterChart, simulateColorBlindness, tileMap, wrapText };
+export { type A11yMetadata, AXIS_TITLE_GAP, AXIS_TITLE_OFFSET_COMPACT, AXIS_TITLE_OFFSET_DEFAULT, AXIS_TITLE_TRAILING_PAD, type AggregateOp, type AggregateTransform, type AnimationConfig, type AnimationEase, type AnimationPhaseConfig, type AnimationSpec, type AnimationStagger, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcEncoding, type ArcMark, type AreaEncoding, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, BRAND_FONT_SIZE, BRAND_MIN_WIDTH, BRAND_RESERVE_WIDTH, BREAKPOINT_COMPACT_MAX, BREAKPOINT_MEDIUM_MAX, type BarColumnConfig, type BarEncoding, type BarListEncoding, type BarListLayout, type BarListRowMark, type BarListSpec, type BarListSpecWithoutData, type BarTableCell, type BaseLegendLayout, type BinParams, type BinTransform, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, COMPACT_WIDTH, type CalculateExpression, type CalculateTransform, type CategoricalLegendLayout, type CategoricalPalette, type CategoryColorsConfig, type CategoryTableCell, type CellStyle, type ChannelRule, type ChartBuilderOptions, type ChartEventHandlers, type ChartLayout, type ChartSpec, type ChartSpecOverride, type ChartSpecWithoutData, type ChartType, type Chrome, type ChromeDefaults, type ChromeKey, type ChromeMode, type ChromeText, type ChromeTextStyle, type CircleEncoding, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, type Condition, type ConditionalValueDef, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type Display, type DivergingPalette, EXTENDED_OFFSET_STRATEGIES, type ElementEdit, type ElementRef, type Encoding, type EncodingChannel, type EncodingRule, type EndpointLabelEntry, type EndpointLabelsConfig, type EndpointLabelsLayout, type FieldPredicate, type FieldRef, type FieldType, type FilterPredicate, type FilterTransform, type FlagTableCell, type FoldTransform, GRAPH_ENCODING_RULES, type GradientColorStop, type GradientDef, type GradientLegendLayout, type GradientStop, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, HEIGHT_CRAMPED_MAX, HEIGHT_SHORT_MAX, HPAD_COMPACT_FRACTION, HPAD_COMPACT_MIN, type HeatmapColumnConfig, type HeatmapTableCell, type HeightClass, type ImageColumnConfig, type ImageTableCell, LABEL_GAP_COMPACT, LABEL_GAP_DEFAULT, LABEL_GAP_NARROW_MAX, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LabelSpec, type LayerSpec, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineEncoding, type LineMark, type LinearGradient, type LogicalAnd, type LogicalNot, type LogicalOr, type LollipopEncoding, MARK_DISPLAY_NAMES, MARK_ENCODING_RULES, MARK_TYPES, MAX_LEFT_LABEL_FRACTION_COMPACT, MAX_LEFT_LABEL_FRACTION_DEFAULT, MAX_LEFT_LABEL_FRACTION_MEDIUM, MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX, type Margins, type Mark, type MarkAria, type MarkDef, type MarkEvent, type MarkType, type MeasureTextFn, type Metric, NARROW_VIEWPORT_MAX, type NodeOverride, OFFSET_STRATEGIES, type OffsetStrategy, type PaginationState, type Point, type PointEncoding, type PointMark, type RadialGradient, type RangeAnnotation, type Rect, type RectEncoding, type RectMark, type RefLineAnnotation, type RelativeTimeRef, type ResolveConfig, type ResolveMode, type ResolvedAnimation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedMetricBar, type ResolvedMetricCell, type ResolvedTheme, type RuleMarkLayout, SEQUENTIAL_PALETTES, type SankeyEncoding, type SankeyLayout, type SankeyLinkColor, type SankeyLinkMark, type SankeyNodeAlign, type SankeyNodeMark, type SankeySpec, type SankeySpecWithoutData, type ScaleConfig, type ScaleType, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, TICK_LABEL_OFFSET, TOP_PAD_EXTRA_NARROW, TOP_PAD_NARROW_MAX, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextEncoding, type TextMarkLayout, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TickEncoding, type TickMarkLayout, type TileMapBuilderOptions, type TileMapEncoding, type TileMapLayout, type TileMapPalette, type TileMapSpec, type TileMapSpecWithoutData, type TileMapTileMark, type TimeUnit, type TimeUnitTransform, type TooltipContent, type TooltipField, type Transform, type VizSpec, type WindowFieldDef, type WindowOp, type WindowSortField, type WindowTransform, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, buildTemporalFormatter, checkPaletteDistinguishability, columnChart, computeChrome, computeLabelBounds, contrastRatio, dataTable, detectCollision, donutChart, dotChart, elementRef, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getAxisTitleOffset, getBreakpoint, getHeightClass, getLayoutStrategy, getRepresentativeColor, inferFieldType, isBarListSpec, isChartSpec, isConditionalDef, isEncodingChannel, isGradientDef, isGraphSpec, isLayerSpec, isRangeAnnotation, isRefLineAnnotation, isSankeySpec, isTableSpec, isTextAnnotation, isTileMapSpec, lineChart, meetsAA, pickLabelColor, pieChart, resolveCollisions, resolveMarkDef, resolveMarkType, resolveTheme, scatterChart, simulateColorBlindness, tileMap, wrapText };

package/dist/index.js

@@ -661,10 +661,11 @@ function contrastRatio(fg, bg) {
   const darker2 = Math.min(l1, l2);
   return (lighter + 0.05) / (darker2 + 0.05);
 }
-function pickLabelColor(bg) {
+function pickLabelColor(bg, darkMode = false) {
   const WHITE = "#ffffff";
   const DARK = "#111111";
-  return contrastRatio(WHITE, bg) >= 4.5 ? WHITE : DARK;
+  const threshold = darkMode ? 0.3 : 0.42;
+  return relativeLuminance(bg) < threshold ? WHITE : DARK;
 }
 function meetsAA(fg, bg, largeText = false) {
   const ratio = contrastRatio(fg, bg);
@@ -725,22 +726,22 @@ var ACHROMATIC_RAMP = {
 var 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)
 ];
 var SEQUENTIAL_BLUE = {
   name: "blue",
@@ -812,6 +813,91 @@ var DIVERGING_PALETTES = {
   brownTeal: [...DIVERGING_BROWN_TEAL.stops]
 };
 
+// src/theme/defaults.ts
+var DEFAULT_THEME = {
+  colors: {
+    categorical: [...CATEGORICAL_PALETTE],
+    sequential: SEQUENTIAL_PALETTES,
+    diverging: DIVERGING_PALETTES,
+    background: "transparent",
+    text: "#09090b",
+    gridline: "rgba(0,0,0,0.1)",
+    // 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: "#71717a",
+    positive: "#16a34a",
+    negative: "#dc2626"
+  },
+  fonts: {
+    family: '"Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
+    sizes: {
+      title: 26,
+      subtitle: 14,
+      body: 13,
+      small: 11,
+      axisTick: 11
+    },
+    weights: {
+      normal: 450,
+      medium: 550,
+      semibold: 590,
+      bold: 700
+    }
+  },
+  spacing: {
+    padding: 20,
+    chromeGap: 4,
+    chromeToChart: 8,
+    chartToFooter: 8,
+    axisMargin: 6,
+    xAxisHeight: 26,
+    xAxisLabelPadding: 14
+  },
+  borderRadius: 2,
+  chrome: {
+    eyebrow: {
+      fontSize: 11,
+      fontWeight: 510,
+      color: "#06b6d4",
+      lineHeight: 1.4
+    },
+    title: {
+      fontSize: 26,
+      fontWeight: 590,
+      color: "#09090b",
+      lineHeight: 1.15
+    },
+    subtitle: {
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#71717a",
+      lineHeight: 1.45
+    },
+    source: {
+      fontSize: 11,
+      fontWeight: 400,
+      color: "#71717a",
+      lineHeight: 1.4
+    },
+    byline: {
+      fontSize: 11,
+      fontWeight: 400,
+      color: "#71717a",
+      lineHeight: 1.4
+    },
+    footer: {
+      fontSize: 11,
+      fontWeight: 400,
+      color: "#71717a",
+      lineHeight: 1.4
+    }
+  }
+};
+
 // src/theme/dark-mode.ts
 var DARK_BG = ACHROMATIC_RAMP.bg;
 var DARK_TEXT = ACHROMATIC_RAMP.fg;
@@ -869,10 +955,13 @@ function adaptTheme(theme) {
   const isTransparent = inputBg === "transparent";
   const alreadyDark = isTransparent || _luminanceFromHex(inputBg) < 0.2;
   const darkBg = alreadyDark ? inputBg : DARK_BG;
-  const darkText = DARK_TEXT;
-  const darkGridline = "rgba(255,255,255,0.05)";
-  const darkAxis = "#a1a1aa";
   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 categorical = theme.colors.categorical;
   return {
     ...theme,
@@ -883,8 +972,12 @@ function adaptTheme(theme) {
       text: darkText,
       gridline: darkGridline,
       axis: darkAxis,
-      annotationFill: "rgba(255,255,255,0.06)",
-      annotationText: darkMuted,
+      annotationFill: overridden(
+        theme.colors.annotationFill,
+        light.annotationFill,
+        "rgba(255,255,255,0.06)"
+      ),
+      annotationText: 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.
@@ -895,99 +988,33 @@ function adaptTheme(theme) {
     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,
-      title: { ...theme.chrome.title, color: darkText },
-      subtitle: { ...theme.chrome.subtitle, color: darkMuted },
-      source: { ...theme.chrome.source, color: darkMuted },
-      byline: { ...theme.chrome.byline, color: darkMuted },
-      footer: { ...theme.chrome.footer, color: darkMuted }
+      title: {
+        ...theme.chrome.title,
+        color: overridden(theme.chrome.title.color, lightChrome.title.color, darkText)
+      },
+      subtitle: {
+        ...theme.chrome.subtitle,
+        color: overridden(theme.chrome.subtitle.color, lightChrome.subtitle.color, darkMuted)
+      },
+      source: {
+        ...theme.chrome.source,
+        color: overridden(theme.chrome.source.color, lightChrome.source.color, darkMuted)
+      },
+      byline: {
+        ...theme.chrome.byline,
+        color: overridden(theme.chrome.byline.color, lightChrome.byline.color, darkMuted)
+      },
+      footer: {
+        ...theme.chrome.footer,
+        color: overridden(theme.chrome.footer.color, lightChrome.footer.color, darkMuted)
+      }
     }
   };
 }
 
-// src/theme/defaults.ts
-var DEFAULT_THEME = {
-  colors: {
-    categorical: [...CATEGORICAL_PALETTE],
-    sequential: SEQUENTIAL_PALETTES,
-    diverging: DIVERGING_PALETTES,
-    background: "transparent",
-    text: "#09090b",
-    gridline: "rgba(0,0,0,0.1)",
-    // 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: "#71717a",
-    positive: "#16a34a",
-    negative: "#dc2626"
-  },
-  fonts: {
-    family: '"Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    mono: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',
-    sizes: {
-      title: 26,
-      subtitle: 14,
-      body: 13,
-      small: 11,
-      axisTick: 11
-    },
-    weights: {
-      normal: 450,
-      medium: 550,
-      semibold: 590,
-      bold: 700
-    }
-  },
-  spacing: {
-    padding: 20,
-    chromeGap: 4,
-    chromeToChart: 8,
-    chartToFooter: 8,
-    axisMargin: 6
-  },
-  borderRadius: 2,
-  chrome: {
-    eyebrow: {
-      fontSize: 11,
-      fontWeight: 510,
-      color: "#06b6d4",
-      lineHeight: 1.4
-    },
-    title: {
-      fontSize: 26,
-      fontWeight: 590,
-      color: "#09090b",
-      lineHeight: 1.15
-    },
-    subtitle: {
-      fontSize: 14,
-      fontWeight: 400,
-      color: "#71717a",
-      lineHeight: 1.45
-    },
-    source: {
-      fontSize: 11,
-      fontWeight: 400,
-      color: "#71717a",
-      lineHeight: 1.4
-    },
-    byline: {
-      fontSize: 11,
-      fontWeight: 400,
-      color: "#71717a",
-      lineHeight: 1.4
-    },
-    footer: {
-      fontSize: 11,
-      fontWeight: 400,
-      color: "#71717a",
-      lineHeight: 1.4
-    }
-  }
-};
-
 // src/theme/resolve.ts
 function deepMerge(target, source) {
   const result = { ...target };
@@ -1023,17 +1050,28 @@ function themeConfigToPartial(config) {
     const 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;
     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.xAxisHeight !== void 0) spacing.xAxisHeight = config.spacing.xAxisHeight;
+    if (config.spacing.xAxisLabelPadding !== void 0)
+      spacing.xAxisLabelPadding = config.spacing.xAxisLabelPadding;
     partial.spacing = spacing;
   }
   if (config.borderRadius !== void 0) {
     partial.borderRadius = config.borderRadius;
   }
+  if (config.chrome) {
+    const chrome = {};
+    for (const [element, color2] of Object.entries(config.chrome)) {
+      if (color2 !== void 0) chrome[element] = { color: color2 };
+    }
+    partial.chrome = chrome;
+  }
   return partial;
 }
 function relativeLuminance2(hex2) {
@@ -1091,6 +1129,26 @@ function adjustOpacity(hex2, opacity) {
 }
 function resolveTheme(userTheme, base = DEFAULT_THEME) {
   let merged = userTheme ? deepMerge(base, themeConfigToPartial(userTheme)) : { ...base };
+  if (userTheme?.fonts?.sizes) {
+    const s = userTheme.fonts.sizes;
+    merged = {
+      ...merged,
+      chrome: {
+        ...merged.chrome,
+        ...s.title !== void 0 && {
+          title: { ...merged.chrome.title, fontSize: s.title }
+        },
+        ...s.subtitle !== void 0 && {
+          subtitle: { ...merged.chrome.subtitle, fontSize: s.subtitle }
+        },
+        ...s.small !== void 0 && {
+          source: { ...merged.chrome.source, fontSize: s.small },
+          byline: { ...merged.chrome.byline, fontSize: s.small },
+          footer: { ...merged.chrome.footer, fontSize: s.small }
+        }
+      }
+    };
+  }
   const dark = isDarkBackground(merged.colors.background);
   if (dark) {
     merged = adaptChromeForDarkBg(merged, merged.colors.text);
@@ -1520,6 +1578,7 @@ var HPAD_COMPACT_FRACTION = 0.5;
 var HPAD_COMPACT_MIN = 4;
 var TICK_LABEL_OFFSET = 6;
 var AXIS_TITLE_TRAILING_PAD = 4;
+var AXIS_TITLE_GAP = 14;
 var NARROW_VIEWPORT_MAX = 500;
 var TOP_PAD_EXTRA_NARROW = 10;
 var TOP_PAD_NARROW_MAX = NARROW_VIEWPORT_MAX;
@@ -2987,6 +3046,7 @@ function tileMap(data, options) {
   };
 }
 export {
+  AXIS_TITLE_GAP,
   AXIS_TITLE_OFFSET_COMPACT,
   AXIS_TITLE_OFFSET_DEFAULT,
   AXIS_TITLE_TRAILING_PAD,