npm - chart-factory - Versions diffs - 0.1.2 - Mend

chart-factory 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/LICENSE +21 -0
package/README.md +162 -0
package/dist/chart-factory-table.js +1400 -0
package/dist/chart-factory.css +2368 -0
package/dist/chart-factory.js +11398 -0
package/dist/chart-factory.min.js +7 -0
package/docs/API.md +1815 -0
package/docs/chart-guide.md +872 -0
package/docs/color-guide.md +134 -0
package/docs/conformance-matrix.md +864 -0
package/docs/theming.md +107 -0
package/index.d.ts +10453 -0
package/package.json +83 -0
package/src/core/base.css +508 -0
package/src/core/builder-metadata.generated.mjs +406 -0
package/src/core/d3-base.js +249 -0
package/src/core/d3-chart-factory.js +18547 -0
package/src/core/d3-data.js +0 -0
package/src/core/d3-suggest.js +565 -0
package/src/core/example-nav.css +62 -0
package/src/core/example-nav.js +249 -0
package/src/core/palettes.js +310 -0
package/src/core/theme-toggle.js +126 -0
package/src/core/tokens.css +792 -0
package/src/table/d3-table.js +1570 -0
package/src/table/table.css +899 -0
package/src/table/tokens.css +157 -0

package/src/core/tokens.css ADDED Viewed

@@ -0,0 +1,792 @@
+/**
+ * Chart Factory - Shared Design Tokens
+ *
+ * These CSS custom properties define the visual foundation for all D3 components.
+ * Override these in your own stylesheet to customize the appearance.
+ *
+ * Usage:
+ *   @import 'chart-factory/core/tokens.css';
+ *
+ *   :root {
+ *     --font-family: 'Your Font', sans-serif;
+ *     --color-text-primary: #222;
+ *   }
+ */
+:root {
+  /* ===========================
+     SPACING
+     =========================== */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 15px;
+  --space-5: 20px;
+  --space-6: 25px;
+  --space-7: 35px;
+  --space-8: 40px;
+  /* ===========================
+     TYPOGRAPHY
+     =========================== */
+  /* Default: System font stack */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  /* Alternative: Open Sans (uncomment and add Google Font import to use)
+   * Add to <head>: <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+   * --font-family: 'Open Sans', sans-serif;
+   */
+  /* Font Sizes */
+  --font-size-xs: 9px;
+  --font-size-sm: 10px;
+  --font-size-base: 11px;
+  --font-size-md: 12px;
+  --font-size-lg: 13px;
+  --font-size-xl: 14px;
+  --font-size-title: 28px;
+  --font-size-subtitle: 13px;
+  /* Chart-shell text hierarchy (decided from live mockups 2026-07-18):
+     card tier 15/11 (ratio 1.36), featured tier 20/14 (ratio 1.43).
+     Title size tracks reading context, not chart size. */
+  --shell-title-size: 15px;
+  --shell-subtitle-size: var(--font-size-base);
+  --shell-featured-title-size: 20px;
+  --shell-featured-subtitle-size: 14px;
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.3px;
+  --letter-spacing-wide: 0.8px;
+  --letter-spacing-wider: 1px;
+  /* Line Height */
+  --line-height-normal: 1.6;
+  /* ===========================
+     COLORS
+     =========================== */
+  /* Text Colors */
+  --color-black: #000;
+  --color-text-primary: #333;
+  --color-text-muted: #666;
+  --color-text-subtle: #767676;
+  --color-text-faint: #999;
+  --color-text-disabled: #aaa;
+  /* Background Colors */
+  --color-bg-body: #f8f8f8;
+  --color-bg-container: white;
+  --color-bg-hover: #fafafa;
+  --color-bg-highlight: #f0f0f0;
+  /* Border Colors */
+  --color-border-header: #000;
+  --color-border-row: #f0f0f0;
+  --color-border-light: #e5e5e5; /* light axis/grid strokes */
+  --color-border-footer: #e8e8e8;
+  --color-border-tooltip: #ddd;
+  /* Shadows */
+  --shadow-container: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* ===========================
+     ANIMATIONS
+     =========================== */
+  --animation-duration-fast: 200ms;
+  --animation-duration-normal: 500ms;
+  --animation-duration-slow: 1000ms;
+  --animation-stagger-delay: 50ms;
+  /* ===========================
+     TOOLTIPS
+     =========================== */
+  --tooltip-z-index: 9999; /* above typical host-page modals/sticky chrome */
+  --tooltip-font-size: 12px;       /* tooltip body (independent of chart axis text) */
+  --tooltip-title-font-size: 15px; /* ~1.25x body for clear title dominance */
+  --tooltip-row-gap: 4px;  /* vertical rhythm between shell rows */
+  --tooltip-padding: 10px 13px;
+  --tooltip-border-radius: 6px;
+  --tooltip-min-width: 130px;
+  --tooltip-chart-height: 50px;
+  --tooltip-bar-gap: var(--space-1);
+  --tooltip-bar-min-width: var(--space-2);
+  --tooltip-bar-border-radius: 2px;
+  --tooltip-label-offset-y: 18px;
+  --tooltip-value-offset-y: 18px;
+  /* ===========================
+     CHART STORY (story: config — narrative summary module under the chart)
+     =========================== */
+  --story-font-size: var(--font-size-lg);   /* body text of all three variants */
+  --story-line-height: 1.6;
+  /* Accent drives the panel tint/border, the bold lead-in label, and band
+     <b>/<strong> emphasis. The per-chart `accent` option overrides it via an
+     inline custom property on the module. */
+  --story-accent: var(--chart-primary);
+  /* Accent share in the panel wash / hairline (color-mix percentages) */
+  --story-panel-bg-alpha: 7%;
+  --story-panel-border-alpha: 25%;
+  /* Band variant: full-width dark lede strip */
+  --story-band-bg: #1f2937;
+  --story-band-text: #e5e7eb;
+  --story-band-label: #9ca3af;              /* overline label tint on the band */
+  /* ===========================
+     RESPONSIVE
+     =========================== */
+  --container-padding: var(--space-8);          /* .d3-container inner padding — the one knob for card breathing room */
+  --container-padding-mobile: var(--space-6) var(--space-5);
+  --title-font-size-mobile: 22px;
+  /* ===========================
+     CHART SHARED
+     =========================== */
+  /* Primary chart color — single-series default (line/area/bar/scatter,
+     forecast/actual lines, series-3). Brand blue, kept distinct from the Set2
+     categorical palette used for multi-series charts. */
+  --chart-primary: #3b82f6;
+  --chart-primary-light: rgba(59, 130, 246, 0.3);
+  --chart-primary-faint: rgba(59, 130, 246, 0.1);
+  /* Secondary chart colors */
+  --chart-secondary: #22c55e;  /* line palette slot 2 (getLineColors) */
+  --chart-tertiary: #f97316;   /* line palette slot 3 (getLineColors) */
+  --chart-green: #22c55e;
+  --chart-lime: #84cc16;  /* mid-tier threshold color (progress bars) */
+  --chart-orange: #f97316;
+  --chart-purple: #a855f7;
+  --chart-purple-light: rgba(168, 85, 247, 0.4);
+  --chart-purple-faint: rgba(168, 85, 247, 0.05);
+  --chart-red: #ef4444;
+  /* Multi-series palette (for YoY, comparisons) */
+  --chart-series-1: #94a3b8;
+  --chart-series-2: #64748b;
+  --chart-series-3: var(--chart-primary);
+  /* Semantic chart colors */
+  --chart-trend-up: var(--chart-green);
+  --chart-trend-down: var(--chart-red);
+  --chart-anomaly: var(--chart-red);
+  --chart-forecast: var(--chart-primary);
+  --chart-actual: var(--chart-primary);
+  --chart-budget: var(--chart-green);
+  /* Neutral/gray for cumulative/baseline lines */
+  --chart-neutral: #6b7280;
+  --chart-neutral-light: rgba(107, 114, 128, 0.4);
+  --chart-neutral-faint: rgba(107, 114, 128, 0.05);
+  /* Axes */
+  --axis-color: var(--color-text-muted);
+  --axis-font-size: var(--font-size-xs);
+  --axis-label-font-size: var(--font-size-sm);
+  --axis-tick-size: 5px;
+  --axis-tick-padding: 3px;
+  /* Grid */
+  --grid-color: var(--color-border-row);
+  --grid-opacity: 0.5;
+  --grid-stroke-opacity: 0.5;
+  /* Hover states */
+  --hover-stroke-color: var(--color-text-primary);
+  --hover-stroke-width: 1;
+  --hover-dash-pattern: 3, 3;
+  --link-dot-radius: 3.5; /* snapped dot size on linked-crosshair (linkGroup) charts */
+  --brush-selection-opacity: 0.08; /* fill opacity of the brush selection window */
+  --brush-veil-opacity: 0.65; /* opacity of the outside-selection veil on linked charts */
+  /* Lines */
+  --line-stroke-width: 2;
+  --line-stroke-width-thin: 1;
+  --line-stroke-width-hover: 3;
+  --line-opacity: 1;
+  --line-opacity-muted: 0.3;
+  --line-dot-stroke-width: 2;
+  --line-transition-duration: 150;
+  /* Areas */
+  --area-opacity: 0.15;
+  --area-opacity-light: 0.1;
+  --area-gradient-start: 0.3;
+  --area-gradient-end: 0.02;
+  /* Points */
+  --point-radius: 4px;
+  --point-radius-small: 3px;
+  --point-radius-hover: 6px;
+  --point-stroke-width: 2px;
+  /* Confidence bands */
+  --band-opacity: 0.15;
+  --band-border-opacity: 0.3;
+  /* Anomaly indicators */
+  --anomaly-pulse-radius: 4;
+  --anomaly-dot-radius: 3;
+  /* Legend */
+  --legend-swatch-size: 12px;
+  --legend-line-width: 24px;
+  --legend-line-height: 2px;
+  --legend-gap: var(--space-4);
+  --legend-font-size: var(--font-size-sm);
+  /* Interactive legend: opacity of non-highlighted series when one is
+     hovered/isolated (chosen treatment: dim others, highlighted unchanged). */
+  --legend-dim-opacity: 0.18;
+  /* Trend indicators (legacy aliases) */
+  --trend-up-color: var(--chart-trend-up);
+  --trend-down-color: var(--chart-trend-down);
+  --trend-neutral-color: var(--color-text-muted);
+  /* Animation */
+  --chart-animation-duration: 2s;
+  --chart-pulse-min-opacity: 0;
+  --chart-pulse-max-opacity: 0.6;
+  /* Annotations: fade-in (ms) when an annotation waits for its anchor
+     mark's entrance animation before appearing */
+  --annotation-fade-duration: 200;
+  /* Event annotations (type: 'event'): tick + label band below the x-axis */
+  --annotation-event-band-offset: 22;      /* px from plot bottom to the event ticks */
+  --annotation-event-tick-height: 8;       /* event tick length */
+  --annotation-event-font-size: 10px;      /* event label size */
+  --annotation-event-guide-color: #d1d5db; /* dotted in-plot guide (guide: true) */
+  /* Point/callout annotations: editorial two-line callouts + leader lines */
+  --annotation-title-size: 13px;           /* titled callout value line (`title`) */
+  --annotation-leader-threshold: 14;       /* px dot-to-label gap before an auto leader draws */
+  /* ===========================
+     SLOPE CHART SPECIFIC
+     =========================== */
+  /* Slope line widths */
+  --slope-line-width: var(--line-stroke-width);
+  --slope-line-width-hover: 3;
+  /* Slope point sizing */
+  --slope-point-radius: var(--point-radius);
+  --slope-point-radius-hover: 7px;
+  --slope-gap-radius: 6px;
+  /* Slope interaction states */
+  --slope-dimmed-opacity: 0.2;
+  --slope-transition-duration: 0.2s;
+  /* Slope animation */
+  --slope-animation-duration: 800ms;
+  --slope-stagger-delay: 80ms;
+  --slope-fade-duration: 300ms;
+  /* Slope highlight mode */
+  --slope-highlight-color: var(--chart-orange);
+  --slope-muted-color: #94a3b8;
+  /* Slope label dodge: minimum vertical gap between stacked side labels */
+  --slope-label-min-gap: 15;
+  /* Two-line right labels (createIndexed) need roughly double the gap */
+  --slope-label-min-gap-stacked: 34;
+  /* Indexed slope: hairline at the origin/no-change value */
+  --slope-baseline-color: var(--color-border-light);
+  /* Dodged-label leader lines (defaults to the hairline border color) */
+  --slope-leader-color: var(--color-border-light);
+  /* Slope band colors (quartiles, from bottom to top) */
+  --slope-band-1: #fef2f2;
+  --slope-band-2: #fefce8;
+  --slope-band-3: #f0fdf4;
+  --slope-band-4: #eff6ff;
+  /* ===========================
+     AREA CHART SPECIFIC
+     =========================== */
+  /* Area fill opacity */
+  --area-fill-opacity: 0.35;
+  --area-fill-opacity-hover: 0.5;
+  --area-fill-opacity-muted: 0.15;
+  /* Area stroke */
+  --area-stroke-width: 1.5;
+  --area-stroke-opacity: 1;
+  /* Categorical series palette — Set2 (house default, CVD-safe, muted).
+     Drives getAreaColors()/getLineColors(): stacked areas, multi-line, grouped/
+     stacked bars, donut, dot, scatter categories. Single-series charts use
+     --chart-primary, not these. Override any of these to restyle every
+     multi-series chart at once. */
+  --area-color-1: #66c2a5;
+  --area-color-2: #fc8d62;
+  --area-color-3: #8da0cb;
+  --area-color-4: #e78ac3;
+  --area-color-5: #a6d854;
+  --area-color-6: #ffd92f;
+  --area-color-7: #e5c494;
+  --area-color-8: #b3b3b3;
+  /* Area interaction */
+  --area-transition-duration: 0.2s;
+  --area-dimmed-opacity: 0.2;
+  /* Area animation */
+  --area-animation-duration: 1000ms;
+  --area-stagger-delay: 100ms;
+  /* Area gradient (for single-series with gradient fill) */
+  --area-gradient-opacity-top: 0.3;
+  --area-gradient-opacity-bottom: 0.02;
+  /* Smoothing curve tension (0 = linear, 1 = very smooth) */
+  --area-curve-tension: 0.4;
+  /* ===========================
+     STREAMGRAPH SPECIFIC
+     =========================== */
+  /* Stream layer fill */
+  --stream-fill-opacity: 1;
+  --stream-stroke-color: #fff;
+  --stream-stroke-width: 1;
+  /* Stream interaction */
+  --stream-dimmed-opacity: 0.25;
+  /* Stream labels */
+  --stream-label-size: 11;
+  /* ===========================
+     DOT CHART SPECIFIC
+     =========================== */
+  /* Dot sizing */
+  --dot-radius: 5px;
+  --dot-radius-hover: 7px;
+  /* Connector line (dumbbell) */
+  --dot-connector-width: 2.5;
+  --dot-connector-color: var(--color-text-disabled);
+  /* Row spacing */
+  --dot-row-height: 36px;
+  --dot-row-padding: 0.3;
+  /* Header positioning */
+  --dot-header-offset: 12px;
+  /* ===========================
+     COLOR TEMPERATURE PALETTE
+     =========================== */
+  /* Based on Kelvin color temperature scale
+   * Cold (blue) → Warm (amber)
+   * Useful for percentile bands, heat maps, diverging scales */
+  --temp-cold-10: #7AB8FF;    /* 10000K - deep cold blue */
+  --temp-cold-9: #9CCAFF;     /* 9000K - cold blue */
+  --temp-cold-8: #B8D9FF;     /* 8000K - sky blue */
+  --temp-cold-7: #D6E8FF;     /* 7000K - pale blue */
+  --temp-neutral: #F2F7FF;    /* 6000K - cool white */
+  --temp-warm-5: #FFF1C1;     /* 5000K - neutral daylight */
+  --temp-warm-4: #FFD27F;     /* 4000K - warm white */
+  --temp-warm-3: #FFB347;     /* 3000K - tungsten */
+  --temp-warm-2: #FF8C1A;     /* 2000K - warm orange */
+  --temp-warm-1: #FF6A00;     /* 1000K - deep amber */
+  /* ===========================
+     SCATTER PLOT / TRAJECTORY
+     =========================== */
+  /* Trail length (number of time units to show in trail) */
+  --scatter-trail-length: 5;
+  /* Trail styling */
+  --scatter-trail-width: 3;
+  --scatter-trail-width-hover: 4;
+  --scatter-trail-opacity: 0.7;
+  --scatter-trail-opacity-dimmed: 0.08;
+  /* Trail gradient (fade from start to end) */
+  --scatter-trail-gradient-start: 0.1;
+  --scatter-trail-gradient-end: 0.9;
+  /* Dot sizing */
+  --scatter-dot-radius: 6;
+  --scatter-dot-radius-hover: 10;
+  --scatter-dot-stroke-width: 2;
+  /* Start dot (trail origin marker) */
+  --scatter-start-dot-radius: 4;
+  --scatter-start-dot-stroke-width: 1.5;
+  --scatter-start-dot-opacity: 0.8;
+  /* Animation timing */
+  --scatter-animation-speed: 1000;
+  /* Quadrant chart */
+  --quadrant-line-width: 1.5;
+  --quadrant-bg-opacity: 0.08;
+  /* Density contour / KDE outlines (dark theme flips these to white-based) */
+  --contour-line-color: rgba(0, 0, 0, 0.15);
+  --kde-contour-line-color: rgba(0, 0, 0, 0.1);
+  /* ===========================
+     VOCABULARY FAMILIES (Release C)
+     =========================== */
+  /* Histogram */
+  --histogram-bar-gap: 1;              /* px gap between bin bars */
+  --histogram-overlay-opacity: 0.55;   /* overlay-series fill opacity */
+  /* Donut */
+  --donut-inner-ratio: 0.62;           /* inner radius share; 0 = pie */
+  --donut-pad-angle: 0.008;            /* radians between slices */
+  --donut-corner-radius: 2;            /* px slice corner rounding */
+  /* Box plot */
+  --box-fill-opacity: 0.35;            /* box body fill vs stroke */
+  --box-median-width: 2.5;             /* median line stroke width */
+  --box-outlier-radius: 3;             /* px outlier ring radius */
+  /* Calendar heatmap */
+  --calendar-cell-radius: 2;           /* px cell corner rounding */
+  --calendar-month-gap: 3;             /* px extra gutter at month starts */
+  --calendar-max-cell: 22;             /* px step cap for the 7-col vertical layout */
+  /* Sankey */
+  --sankey-node-width: 12;             /* px node bar width */
+  --sankey-node-padding: 12;           /* px vertical gap between nodes */
+  --sankey-link-opacity: 0.3;          /* link ribbon opacity (hover +0.25) */
+  --sankey-anim-duration: 900;         /* ms each column's links take to draw */
+  --sankey-anim-pause: 300;            /* ms the flow rests at a node before flowing on */
+  /* ===========================
+     BUMP CHART SPECIFIC
+     =========================== */
+  /* Layout */
+  --bump-margin-top: 30;
+  --bump-margin-bottom: 40;
+  --bump-label-gap: 10;
+  --bump-label-padding: 5;
+  --bump-axis-offset: 15;
+  /* Line styling */
+  --bump-line-width: 2.5;
+  --bump-line-width-hover: 3.5;
+  /* Dot styling */
+  --bump-dot-radius: 8;
+  --bump-dot-radius-hover: 10;
+  --bump-dot-stroke-width: 2;
+  --bump-rank-font-size: 10px;
+  /* Interaction states */
+  --bump-dimmed-opacity: 0.15;
+  --bump-transition-duration: 0.2s;
+  /* Animation */
+  --bump-animation-duration: 800;
+  --bump-stagger-delay: 100;
+  --bump-dot-fade-duration: 300;
+  /* ===========================
+     SEQUENTIAL COLOR SCALES (bars/heatmaps — createColorScale)
+     =========================== */
+  --scale-orange-lo: #fff5eb;
+  --scale-orange-hi: #ff6b35;
+  --scale-orange-red-hi: #d7191c;
+  --scale-blue-lo: #e0f3f8;
+  --scale-blue-hi: #4575b4;
+  --scale-teal-hi: #1a9988;
+  --scale-aqua-1: #a4d7e1;
+  --scale-aqua-2: #4ec1d4;
+  --scale-aqua-3: #0095b7;
+  --scale-aqua-4: #005e8b;
+  --scale-gray-lo: #f5f5f5;
+  --scale-gray-hi: #333333;
+  --scale-purple-1: #f3e5f5;
+  --scale-purple-2: #ce93d8;
+  --scale-purple-3: #ab47bc;
+  --scale-purple-4: #7b1fa2;
+  --scale-green-1: #e8f5e9;
+  --scale-green-2: #a5d6a7;
+  --scale-green-3: #66bb6a;
+  --scale-green-4: #2e7d32;
+  /* Diagonal band scales (Scatter.createDiagonal) — white center outward */
+  --scale-diag-green-1: #ffffff;
+  --scale-diag-green-2: #c6f6d5;
+  --scale-diag-green-3: #68d391;
+  --scale-diag-green-4: #38a169;
+  --scale-diag-red-1: #ffffff;
+  --scale-diag-red-2: #fed7d7;
+  --scale-diag-red-3: #fc8181;
+  --scale-diag-red-4: #e53e3e;
+  /* ===========================
+     BAR CHART SPECIFIC
+     =========================== */
+  /* Bar sizing */
+  --bar-height: 24px;
+  --bar-height-mini: 18px;
+  --bar-gap: 8px;
+  --bar-border-radius: 3px;
+  /* Zero baseline on mixed-sign bar charts (tracks the dark theme via the
+     underlying text token) */
+  --bar-zero-line-color: var(--color-text-primary);
+  --bar-zero-line-width: 1.5;
+  /* Gantt */
+  --gantt-bar-height: 18px;
+  --gantt-bar-gap: 6px;
+  --gantt-border-radius: 2px;
+  /* Waterfall connector hairlines (between consecutive bars) */
+  --waterfall-connector-color: rgba(0, 0, 0, 0.18);
+  /* Container */
+  --container-max-width: 660px;
+  /* Bar track (background) */
+  --bar-track-color: var(--color-border-row);
+  --bar-track-opacity: 0.5;
+  /* Label positioning */
+  --bar-label-gap: 8px;
+  --bar-value-padding: 6px;
+  --bar-inline-threshold: 0.35;
+  /* Lollipop variant */
+  --lollipop-stem-width: 2px;
+  --lollipop-dot-radius: 6px;
+  --lollipop-dot-radius-hover: 8px;
+  /* Bullet chart */
+  --bullet-range-opacity: 0.25;
+  --bullet-measure-height: 8px;
+  --bullet-marker-width: 3px;
+  --bullet-marker-height: 16px;
+  /* Animation */
+  --bar-animation-duration: 800ms;
+  --bar-stagger-delay: 50ms;
+  /* Row layout */
+  --bar-row-height: 32px;
+  --bar-category-width: 100px;
+  /* ===========================
+     STAT FORMATTING OPTIONS
+     =========================== */
+  /* Baseball batting average format: .345 instead of 0.345
+   * Use formatBaseballAvg() helper or set data-format="baseball-avg"
+   *
+   * JavaScript helper:
+   * function formatBaseballAvg(value) {
+   *     return value.toFixed(3).replace(/^0\./, '.');
+   * }
+   */
+}
+/* ===========================
+   INSTAGRAM EXPORT TIER
+   ===========================
+   Opt-in via <html data-size="instagram">, paired with `size: 'instagram'`
+   in chart config (the SIZE_PRESETS geometry). Scales the text, stroke,
+   marker, and annotation tokens for 1080px social-feed posters that are
+   viewed at phone size — roughly 2.4x the screen-reading defaults. Colors
+   are untouched, so it composes with the dark theme. Same runtime contract
+   as dark mode: builders resolve tokens at render, so flipping the
+   attribute needs a re-render (ChartFactory.rerenderAll()). */
+:root[data-size="instagram"] {
+  /* Typography */
+  --font-size-xs: 22px;
+  --font-size-sm: 25px;
+  --font-size-base: 27px;
+  --font-size-md: 29px;
+  --font-size-lg: 32px;
+  --font-size-xl: 35px;
+  --font-size-title: 64px;
+  --font-size-subtitle: 32px;
+  --shell-title-size: 38px;
+  /* Marks */
+  --line-stroke-width: 5;
+  --area-stroke-width: 4;
+  --line-dot-stroke-width: 4;
+  --bar-height: 56;
+  --bar-gap: 18;
+  /* Annotations */
+  --annotation-title-size: 34px;
+  --annotation-event-font-size: 24px;
+  --annotation-event-band-offset: 48;
+  --annotation-event-tick-height: 18;
+  --annotation-leader-threshold: 30;
+  /* Slope label dodge gaps track the scaled label text */
+  --slope-label-min-gap: 34;
+  --slope-label-min-gap-stacked: 72;
+  /* Bump chart marks at poster weight */
+  --bump-line-width: 6;
+  --bump-line-width-hover: 8;
+  --bump-dot-radius: 17;
+  --bump-dot-radius-hover: 20;
+  --bump-dot-stroke-width: 4;
+  --bump-rank-font-size: 20px;
+  --bump-label-gap: 16;
+  --bump-axis-offset: 26;
+  --bump-margin-top: 40;
+  --bump-margin-bottom: 60;
+}
+/* ===========================
+   DARK THEME
+   ===========================
+   Opt-in via <html data-theme="dark">. Only color-bearing tokens are
+   overridden; spacing, sizing, and opacity tokens carry over.
+   Builders resolve tokens live at render time (getCSSVar reads
+   documentElement), so switching themes at runtime requires a re-render:
+   call chart.rerender() on each chart facade (tables: table.update(data)).
+   CSS-styled surfaces (table chrome, tooltip shell, containers) restyle
+   immediately without one. */
+:root[data-theme="dark"] {
+  /* Text — --color-black is the strongest ink, not literal black */
+  --color-black: #f4f4f5;
+  --color-text-primary: #e4e4e7;
+  --color-text-muted: #a1a1aa;
+  --color-text-subtle: #8b8b93;
+  --color-text-faint: #71717a;
+  --color-text-disabled: #52525b;
+  /* Backgrounds */
+  --color-bg-body: #101012;
+  --color-bg-container: #1b1b1e;
+  --color-bg-hover: #232327;
+  --color-bg-highlight: #2a2a2f;
+  /* Borders */
+  --color-border-header: #e4e4e7;
+  --color-border-row: #2a2a2e;
+  --color-border-light: #333338;
+  --color-border-footer: #2f2f34;
+  --color-border-tooltip: #3f3f46;
+  /* Shadows */
+  --shadow-container: 0 1px 3px rgba(0, 0, 0, 0.6);
+  --shadow-tooltip: 0 4px 14px rgba(0, 0, 0, 0.6);
+  /* Chart palette — brightened for dark surfaces */
+  --chart-primary: #60a5fa;
+  --chart-primary-light: rgba(96, 165, 250, 0.35);
+  --chart-primary-faint: rgba(96, 165, 250, 0.12);
+  --chart-secondary: #4ade80;
+  --chart-tertiary: #fb923c;
+  --chart-green: #4ade80;
+  --chart-lime: #a3e635;
+  --chart-orange: #fb923c;
+  --chart-purple: #c084fc;
+  --chart-purple-light: rgba(192, 132, 252, 0.4);
+  --chart-purple-faint: rgba(192, 132, 252, 0.08);
+  --chart-red: #f87171;
+  /* Multi-series palette — lighter gray is the more prominent one on dark */
+  --chart-series-1: #64748b;
+  --chart-series-2: #94a3b8;
+  /* Neutral/gray for cumulative/baseline lines */
+  --chart-neutral: #9ca3af;
+  --chart-neutral-light: rgba(156, 163, 175, 0.4);
+  --chart-neutral-faint: rgba(156, 163, 175, 0.08);
+  /* Slope */
+  --slope-muted-color: #52525b;
+  --slope-band-1: #2c1d1d;
+  --slope-band-2: #2b2717;
+  --slope-band-3: #16281c;
+  --slope-band-4: #17222f;
+  /* Misc structural strokes */
+  --stream-stroke-color: #1b1b1e;
+  --waterfall-connector-color: #52525b;
+  --dot-connector-color: #3f3f46;
+  --annotation-event-guide-color: #52525b;
+  --contour-line-color: rgba(255, 255, 255, 0.15);
+  --kde-contour-line-color: rgba(255, 255, 255, 0.12);
+  /* Categorical series palette — Set2, lifted for dark backgrounds */
+  --area-color-1: #74d0b3;
+  --area-color-2: #ff9e78;
+  --area-color-3: #a2b3dc;
+  --area-color-4: #ef9dd0;
+  --area-color-5: #b6e268;
+  --area-color-6: #ffe45c;
+  --area-color-7: #ecd2a8;
+  --area-color-8: #c6c6c6;
+  /* Temperature palette — extremes stay bright, middle fades to surface */
+  --temp-cold-10: #3f7fd1;
+  --temp-cold-9: #38689f;
+  --temp-cold-8: #2f5377;
+  --temp-cold-7: #263e52;
+  --temp-neutral: #26262b;
+  --temp-warm-5: #4a3a20;
+  --temp-warm-4: #6e4f22;
+  --temp-warm-3: #9c6a25;
+  --temp-warm-2: #d07f1f;
+  --temp-warm-1: #ff8a3d;
+  /* Sequential scales — lo ends re-anchor from near-white to surface-tinted
+     darks so low values fade into the background, high values stay vivid */
+  --scale-orange-lo: #2e2018;
+  --scale-orange-hi: #ff8a5c;
+  --scale-orange-red-hi: #e35d5d;
+  --scale-blue-lo: #16202c;
+  --scale-blue-hi: #6ea8dc;
+  --scale-teal-hi: #34b3a0;
+  --scale-aqua-1: #1a3a42;
+  --scale-aqua-2: #16606e;
+  --scale-aqua-3: #1d92ab;
+  --scale-aqua-4: #5cc6da;
+  --scale-gray-lo: #232326;
+  --scale-gray-hi: #d4d4d8;
+  --scale-purple-1: #241a2b;
+  --scale-purple-2: #4a3357;
+  --scale-purple-3: #7b57a0;
+  --scale-purple-4: #b58ae0;
+  --scale-green-1: #16241a;
+  --scale-green-2: #2f5138;
+  --scale-green-3: #4f8c58;
+  --scale-green-4: #7ac47f;
+  --scale-diag-green-1: #1b1b1e;
+  --scale-diag-green-2: #1d3524;
+  --scale-diag-green-3: #2f6b40;
+  --scale-diag-green-4: #4caf6d;
+  --scale-diag-red-1: #1b1b1e;
+  --scale-diag-red-2: #3a2023;
+  --scale-diag-red-3: #7a3b3b;
+  --scale-diag-red-4: #c25959;
+  /* Chart story — band lifts off the dark container surface; accent follows
+     --chart-primary automatically, and the panel wash re-mixes from it */
+  --story-band-bg: #2a2a2f;
+  --story-band-text: #e4e4e7;
+  --story-band-label: #a1a1aa;
+}