@opendata-ai/openchart-core 8.0.0-rc.9 → 8.1.0

package/src/styles/tokens.css

@@ -1,156 +0,0 @@
-/* GENERATED FILE — do not edit. Source: packages/core/src/styles/token-definitions.ts. Regenerate: bun run generate:tokens */
-
-@layer oc.tokens {
-  /* ---------------------------------------------------------------------------
-   * Custom properties (light mode defaults)
-   *
-   * These are FALLBACK defaults. At runtime, the JS theme engine stamps the
-   * resolved theme as inline --oc-* custom properties on each .oc-root
-   * container (see packages/vanilla/src/theme-tokens.ts). These CSS values
-   * serve as fallbacks for contexts where JS hasn't mounted yet (SSR, static
-   * HTML examples).
-   * --------------------------------------------------------------------------- */
-
-  .oc-root,
-  .oc-chart-root,
-  .oc-table-wrapper,
-  .oc-table-root,
-  .oc-graph-wrapper,
-  .oc-graph-root,
-  .oc-sankey-root,
-  .oc-tilemap-root,
-  .oc-barlist-root,
-  .oc-map-root {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    /* Opt out of iOS text auto-inflation so measured widths match rendered text. */
-    -webkit-text-size-adjust: 100%;
-    text-size-adjust: 100%;
-
-    --oc-font-family:
-      "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    --oc-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
-
-    /* Animation easing presets via CSS linear() */
-    --oc-ease-smooth: linear(
-      0,
-      0.157,
-      0.438,
-      0.64,
-      0.766,
-      0.85,
-      0.906,
-      0.941,
-      0.964,
-      0.978,
-      0.988,
-      0.994,
-      0.998,
-      1
-    );
-    --oc-ease-snappy: linear(
-      0,
-      0.012,
-      0.048,
-      0.108,
-      0.194,
-      0.302,
-      0.426,
-      0.559,
-      0.69,
-      0.808,
-      0.905,
-      0.973,
-      1.013,
-      1.028,
-      1.023,
-      1.006,
-      0.984,
-      0.966,
-      0.957,
-      0.957,
-      0.964,
-      0.975,
-      0.986,
-      0.995,
-      1,
-      1.003,
-      1.002,
-      1,
-      0.998,
-      0.998,
-      0.999,
-      1
-    );
-
-    /* Animation timing defaults */
-    --oc-animation-duration: 500ms;
-    --oc-animation-stagger: 80ms;
-    --oc-annotation-delay: 200ms;
-
-    /* Typography scale (editorial design system) */
-    --oc-title-size: 26px;
-    --oc-title-weight: 590;
-    --oc-title-tracking: -0.022em;
-    --oc-subtitle-size: 14px;
-    --oc-subtitle-weight: 450;
-    --oc-source-size: 11px;
-    --oc-source-weight: 450;
-    --oc-body-size: 13px;
-    --oc-eyebrow-size: 11px;
-    --oc-eyebrow-weight: 550;
-    --oc-eyebrow-tracking: 0.08em;
-
-    /* Surfaces (light mode defaults) */
-    --oc-bg: #ffffff;
-    --oc-card: #ffffff;
-    --oc-secondary: #f4f4f5; /* zinc-100, raised surface */
-
-    /*
-   * Text levels. Names invert across modes: in light mode "muted" sits at
-   * a lighter zinc step than "subtle" because both are picked relative to
-   * the active background, not from a fixed lightness ladder. The intent
-   * is "muted = first step away from primary text"; "subtle = next step
-   * down"; etc.
-   *
-   *   Light mode: text=zinc-950, secondary=zinc-700, muted=zinc-500,
-   *               subtle=zinc-400, faint=zinc-300
-   *   Dark mode (dark.css): inverts the surface tokens but keeps the same
-   *               muted -> subtle -> faint progression away from primary.
-   */
-    --oc-text: #09090b;
-    --oc-text-secondary: #3f3f46;
-    --oc-text-muted: #71717a;
-    --oc-text-faint: #d4d4d8;
-
-    /* Lines */
-    --oc-gridline: rgba(0, 0, 0, 0.1);
-    --oc-axis: rgba(0, 0, 0, 0.1);
-    --oc-border: rgba(0, 0, 0, 0.08);
-    --oc-border-radius: 2px;
-
-    /* Brand and semantic */
-    --oc-accent: #06b6d4;
-    --oc-accent-strong: #0891b2; /* darker cyan for line strokes on light bg */
-    --oc-positive: #10b981;
-    --oc-negative: #e11d48;
-    --oc-focus: #3b82f6;
-    /* static, intentionally NOT derived from --oc-focus and NOT flipped in dark mode */
-    --oc-focus-ring: rgba(59, 130, 246, 0.1);
-    --oc-focus-ring-strong: rgba(59, 130, 246, 0.25);
-    --oc-editable-hover: rgba(79, 70, 229, 0.35); /* edit-mode hover outline, indigo one-off */
-
-    /* Spacing scale (4px base) — only --oc-space-2/4 are consumed (JS-stamped) */
-    --oc-space-2: 8px;
-    --oc-space-4: 16px;
-
-    /* Interactive states */
-    --oc-hover-bg: rgba(0, 0, 0, 0.025);
-    --oc-tooltip-bg: rgba(255, 255, 255, 0.88);
-    --oc-tooltip-border: rgba(0, 0, 0, 0.08);
-    --oc-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12);
-    --oc-tooltip-text: #09090b;
-    --oc-legend-text: #3f3f46;
-  }
-}

package/src/styles/tooltip.css

@@ -1,126 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * Tooltip
-   * Editorial card matching the new design system: zinc surface, cyan accent,
-   * Inter Variable, mono numerics. Sized for a slice tooltip that lists every
-   * series at the snapped x.
-   * --------------------------------------------------------------------------- */
-
-  .oc-tooltip {
-    position: absolute;
-    display: none;
-    pointer-events: none;
-    z-index: 1000;
-    background: var(--oc-tooltip-bg);
-    backdrop-filter: blur(14px);
-    border: 1px solid var(--oc-tooltip-border);
-    border-radius: var(--oc-border-radius, 2px);
-    box-shadow: var(--oc-tooltip-shadow);
-    color: var(--oc-tooltip-text);
-    font-family: var(--oc-font-family);
-    font-size: 12px;
-    padding: 0;
-    max-width: 280px;
-    min-width: 160px;
-    line-height: 1.4;
-    animation: oc-tooltip-in 120ms ease-out;
-    transition:
-      left 100ms ease-in-out,
-      top 100ms ease-in-out;
-
-    & .oc-tooltip-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px 6px;
-    }
-
-    & .oc-tooltip-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-
-    & .oc-tooltip-title {
-      font-weight: 590;
-      font-size: 11px;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      color: var(--oc-text-muted);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    & .oc-tooltip-body {
-      padding: 6px 12px 10px;
-      border-top: 1px solid var(--oc-tooltip-border);
-    }
-
-    /* No separator when body is the only child */
-    & .oc-tooltip-body:first-child {
-      border-top: none;
-      padding-top: 10px;
-    }
-
-    & .oc-tooltip-row {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 2px 0;
-    }
-
-    & .oc-tooltip-row-swatch {
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      margin-right: 6px;
-      flex-shrink: 0;
-      transform: translateY(-1px);
-    }
-
-    & .oc-tooltip-label {
-      color: var(--oc-text-secondary);
-      font-size: 12px;
-      font-weight: 400;
-      white-space: nowrap;
-      flex-shrink: 0;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    & .oc-tooltip-value {
-      font-weight: 510;
-      font-size: 12px;
-      font-variant-numeric: tabular-nums;
-      color: var(--oc-tooltip-text);
-      text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Crosshair guideline + per-series snap dots (line/area charts)
-   * Animate the snap between adjacent points so the indicator slides instead
-   * of jumping. ~50ms ease-in-out keeps the motion crisp without lagging.
-   * --------------------------------------------------------------------------- */
-
-  .oc-crosshair {
-    pointer-events: none;
-    transition:
-      x1 50ms ease-in-out,
-      x2 50ms ease-in-out;
-  }
-
-  .oc-snap-dots circle {
-    pointer-events: none;
-    transition:
-      cx 50ms ease-in-out,
-      cy 50ms ease-in-out;
-  }
-}

package/src/styles/you-draw-it.css

@@ -1,126 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * You draw it (youDrawIt)
-   *
-   * NYT-style draw-then-reveal. SVG-space elements (hatched region, guess path,
-   * reveal clip) render inside the chart SVG; the prompt + skip-to-reveal button
-   * are an absolutely-positioned HTML overlay the vanilla adapter sizes over the
-   * drawing region (inline left/top/width/height). All colors come from --oc-*
-   * tokens so they flip in .oc-dark.
-   * --------------------------------------------------------------------------- */
-
-  /* Hatched "draw here" region. Fill comes from an SVG <pattern> (line color =
-   * the target series color); this only governs overall opacity + fade-out. */
-  .oc-ydi-region {
-    opacity: 0.35;
-    transition: opacity 0.4s ease;
-  }
-
-  .oc-ydi-region[data-ydi-hidden="true"] {
-    opacity: 0;
-  }
-
-  /* The vertical rule at `from` where drawing begins. */
-  .oc-ydi-boundary {
-    stroke: var(--oc-text-muted);
-    stroke-width: 1;
-    stroke-dasharray: 3 3;
-    stroke-opacity: 0.6;
-  }
-
-  /* Reader's guess: a distinct pen-like stroke that reads as "yours" against the
-   * solid real line. Dashed + focus-blue so it stays legible in both modes. */
-  .oc-ydi-guess {
-    stroke: var(--oc-focus);
-    stroke-width: 2.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-dasharray: 1 6;
-  }
-
-  /* Host-supplied comparison line ("what everyone else guessed"). Muted so it
-   * sits behind the reader's guess and the real line. */
-  .oc-ydi-comparison {
-    stroke: var(--oc-text-muted);
-    stroke-width: 1.5;
-    stroke-opacity: 0.5;
-    stroke-dasharray: 4 4;
-  }
-
-  /* Reveal clip rect: the width animates from the `from` boundary to the full
-   * area on reveal, wiping the real line in left-to-right. The vanilla adapter
-   * adds .oc-ydi-clip-animate right before setting the final width; reduced
-   * motion skips the class so the width snaps. */
-  .oc-ydi-clip-rect.oc-ydi-clip-animate {
-    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-
-  /* HTML controls overlay: prompt (top) + reveal button (bottom-right). */
-  .oc-ydi-controls {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-end;
-    pointer-events: none;
-    font-family: var(--oc-font-family);
-    padding: 8px;
-    box-sizing: border-box;
-    z-index: 10;
-  }
-
-  .oc-ydi-prompt {
-    align-self: center;
-    max-width: 100%;
-    padding: 6px 12px;
-    border-radius: 6px;
-    background: var(--oc-card);
-    border: 1px solid var(--oc-border);
-    color: var(--oc-text-secondary);
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 16px;
-    text-align: center;
-    box-shadow: var(--oc-tooltip-shadow);
-  }
-
-  .oc-ydi-controls.oc-ydi-revealed .oc-ydi-prompt {
-    display: none;
-  }
-
-  /* Skip-to-reveal button. pointer-events re-enabled (the overlay disables it)
-   * so it stays clickable and keyboard-reachable. Min height enforced inline by
-   * the adapter (>= 24px effective touch target). */
-  .oc-ydi-reveal-button {
-    pointer-events: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 6px 14px;
-    border: 1px solid var(--oc-border);
-    border-radius: 6px;
-    background: var(--oc-bg);
-    color: var(--oc-text);
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    box-shadow: var(--oc-tooltip-shadow);
-    transition:
-      background-color 0.15s,
-      border-color 0.15s;
-  }
-
-  .oc-ydi-reveal-button:hover {
-    background: var(--oc-hover-bg);
-  }
-
-  .oc-ydi-reveal-button:focus-visible {
-    outline: 2px solid var(--oc-focus);
-    outline-offset: 2px;
-  }
-
-  .oc-ydi-reveal-button:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-}

package/src/theme/__tests__/dark-mode.test.ts

@@ -1,232 +0,0 @@
-import { hsl } from 'd3-color';
-import { describe, expect, it } from 'vitest';
-import { contrastRatio } from '../../colors/contrast';
-import { adaptColorForDarkMode, adaptForLightLineStroke, adaptTheme } from '../dark-mode';
-import { resolveTheme } from '../resolve';
-
-describe('adaptColorForDarkMode', () => {
-  const lightBg = '#ffffff';
-  const darkBg = '#09090b';
-
-  it('adapted color has similar contrast on dark bg as original on light bg', () => {
-    const original = '#06b6d4'; // cyan, primary accent
-    const adapted = adaptColorForDarkMode(original, lightBg, darkBg);
-
-    const originalRatio = contrastRatio(original, lightBg);
-    const adaptedRatio = contrastRatio(adapted, darkBg);
-
-    // Should be within 30% of the original ratio
-    const tolerance = originalRatio * 0.3;
-    expect(Math.abs(adaptedRatio - originalRatio)).toBeLessThan(tolerance);
-  });
-
-  it('returns unchanged input for unparseable colors (e.g. raw oklch)', () => {
-    const result = adaptColorForDarkMode('oklch(70% 0.15 200)', lightBg, darkBg);
-    expect(result).toBe('oklch(70% 0.15 200)');
-  });
-
-  it('returns a valid hex color', () => {
-    const result = adaptColorForDarkMode('#e15759', lightBg, darkBg);
-    expect(result).toMatch(/^#[0-9a-f]{6}$/i);
-  });
-
-  it('handles pure black gracefully', () => {
-    const result = adaptColorForDarkMode('#000000', lightBg, darkBg);
-    expect(result).toMatch(/^#[0-9a-f]{6}$/i);
-  });
-});
-
-describe('adaptForLightLineStroke', () => {
-  it('darkens a saturated cyan by ~12% lightness', () => {
-    const original = '#06b6d4';
-    const darkened = adaptForLightLineStroke(original);
-    expect(darkened).not.toBe(original);
-    const c = hsl(darkened);
-    const o = hsl(original);
-    expect(c).not.toBeNull();
-    expect(c!.l).toBeCloseTo(o.l - 0.12, 2);
-  });
-
-  it('passes saturated red and blue through with reduced lightness', () => {
-    for (const color of ['#ef4444', '#3b82f6']) {
-      const out = adaptForLightLineStroke(color);
-      const before = hsl(color);
-      const after = hsl(out);
-      expect(after!.l).toBeLessThan(before.l);
-    }
-  });
-
-  it('passes pure gray through unchanged (saturation below threshold)', () => {
-    // zinc-400 has near-zero saturation; reducing lightness on a gray would
-    // shift it toward black, which isn't desired for achromatic palettes.
-    expect(adaptForLightLineStroke('#a1a1aa')).toBe('#a1a1aa');
-  });
-
-  it('passes already-dark colors through unchanged (l <= 0.4)', () => {
-    // Indigo-900 sits at l ≈ 0.30 — already meets contrast on white.
-    const dark = '#312e81';
-    expect(adaptForLightLineStroke(dark)).toBe(dark);
-  });
-
-  it('passes invalid input through unchanged', () => {
-    expect(adaptForLightLineStroke('not-a-color')).toBe('not-a-color');
-    expect(adaptForLightLineStroke('')).toBe('');
-  });
-});
-
-describe('adaptTheme', () => {
-  it('sets isDark to true', () => {
-    const light = resolveTheme();
-    const dark = adaptTheme(light);
-    expect(dark.isDark).toBe(true);
-  });
-
-  it('preserves transparent background in dark mode', () => {
-    const light = resolveTheme();
-    // Default background is transparent; adaptTheme preserves it so the
-    // host page's surface shows through in both light and dark contexts.
-    const dark = adaptTheme(light);
-    expect(dark.colors.background).toBe('transparent');
-  });
-
-  it('swaps to dark background when starting from an explicit light color', () => {
-    const light = resolveTheme({ colors: { background: '#ffffff' } });
-    const dark = adaptTheme(light);
-    expect(dark.colors.background).toBe('#09090b');
-  });
-
-  it('updates text color for dark mode', () => {
-    // Use an explicit light background so the contrast ratio check has a
-    // concrete background to measure against.
-    const light = resolveTheme({ colors: { background: '#ffffff' } });
-    const dark = adaptTheme(light);
-    expect(dark.colors.text).not.toBe(light.colors.text);
-    // Dark text should be light — measure against the dark canvas color.
-    const ratio = contrastRatio(dark.colors.text, '#09090b');
-    expect(ratio).toBeGreaterThan(4);
-  });
-
-  it('preserves categorical palette across modes', () => {
-    const light = resolveTheme();
-    const dark = adaptTheme(light);
-    // Design-system tokens are mode-agnostic: the same vibrant cyan-led
-    // palette renders in both modes. Contrast-equivalence adaptation
-    // dulls cyan into teal, which is not what the spec calls for.
-    expect(dark.colors.categorical).toEqual(light.colors.categorical);
-  });
-
-  it('updates chrome text colors', () => {
-    const light = resolveTheme();
-    const dark = adaptTheme(light);
-    expect(dark.chrome.title.color).not.toBe(light.chrome.title.color);
-  });
-
-  it('preserves an explicit axis color override in dark mode', () => {
-    const light = resolveTheme({ colors: { background: '#ffffff', axis: '#d0d6e0' } });
-    const dark = adaptTheme(light);
-    expect(dark.colors.axis).toBe('#d0d6e0');
-  });
-
-  it('applies the dark axis default when axis is left unset', () => {
-    const light = resolveTheme({ colors: { background: '#ffffff' } });
-    const dark = adaptTheme(light);
-    expect(dark.colors.axis).toBe('#a1a1aa');
-  });
-
-  it('preserves explicit chrome color overrides in dark mode', () => {
-    const light = resolveTheme({
-      colors: { background: '#ffffff' },
-      chrome: { subtitle: '#d0d6e0', source: '#d0d6e0' },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.chrome.subtitle.color).toBe('#d0d6e0');
-    expect(dark.chrome.source.color).toBe('#d0d6e0');
-  });
-
-  it('applies dark chrome defaults when chrome colors are left unset', () => {
-    const light = resolveTheme({ colors: { background: '#ffffff' } });
-    const dark = adaptTheme(light);
-    // Unset chrome colors fall to the muted dark default, not the light one.
-    expect(dark.chrome.subtitle.color).not.toBe('#71717a');
-  });
-
-  it('uses explicit dark pair value for background instead of algorithmic adaptation', () => {
-    const light = resolveTheme({
-      colors: { background: { light: '#fff1e5', dark: '#1a1311' } },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.colors.background).toBe('#1a1311');
-  });
-
-  it('uses explicit dark pair value for text instead of algorithmic adaptation', () => {
-    const light = resolveTheme({
-      colors: {
-        background: { light: '#ffffff', dark: '#111111' },
-        text: { light: '#1c1917', dark: '#e7e5e4' },
-      },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.colors.text).toBe('#e7e5e4');
-  });
-
-  it('uses explicit dark pair for gridline and axis', () => {
-    const light = resolveTheme({
-      colors: {
-        background: { light: '#fff', dark: '#111' },
-        gridline: { light: 'rgba(0,0,0,0.08)', dark: 'rgba(255,255,255,0.06)' },
-        axis: { light: '#78716c', dark: '#a8a29e' },
-      },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.colors.gridline).toBe('rgba(255,255,255,0.06)');
-    expect(dark.colors.axis).toBe('#a8a29e');
-  });
-
-  it('uses explicit dark pair for semantic colors', () => {
-    const light = resolveTheme({
-      colors: {
-        background: { light: '#fff', dark: '#111' },
-        positive: { light: '#10b981', dark: '#34d399' },
-        negative: { light: '#e11d48', dark: '#fb7185' },
-      },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.colors.positive).toBe('#34d399');
-    expect(dark.colors.negative).toBe('#fb7185');
-  });
-
-  it('uses explicit dark pair for chrome element color', () => {
-    const light = resolveTheme({
-      colors: { background: { light: '#fff', dark: '#111' } },
-      chrome: {
-        title: { color: { light: '#33302e', dark: '#f2dfce' } },
-      },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.chrome.title.color).toBe('#f2dfce');
-  });
-
-  it('uses explicit dark pair for eyebrow color (otherwise kept as-is)', () => {
-    const light = resolveTheme({
-      chrome: {
-        eyebrow: { color: { light: '#e3120b', dark: '#ff6b64' } },
-      },
-    });
-    const dark = adaptTheme(light);
-    expect(dark.chrome.eyebrow.color).toBe('#ff6b64');
-
-    // Without a pair, the eyebrow keeps its accent tint across modes.
-    const noPair = adaptTheme(resolveTheme({ chrome: { eyebrow: '#e3120b' } }));
-    expect(noPair.chrome.eyebrow.color).toBe('#e3120b');
-  });
-
-  it('falls back to algorithmic adaptation when no explicit dark pair is given', () => {
-    const light = resolveTheme({
-      colors: { background: '#ffffff' },
-    });
-    const dark = adaptTheme(light);
-    // Text should be adapted to a light color for dark bg readability
-    expect(dark.colors.text).not.toBe(light.colors.text);
-    expect(dark.colors.text).toBeDefined();
-  });
-});