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

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

@@ -1,73 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { contrastRatio } from '../../colors/contrast';
-import { ACHROMATIC_RAMP } from '../../colors/palettes';
-import { adaptColorForDarkMode } from '../dark-mode';
-import { DEFAULT_THEME } from '../defaults';
-
-describe('DEFAULT_THEME', () => {
-  it('has all required top-level fields', () => {
-    expect(DEFAULT_THEME.colors).toBeDefined();
-    expect(DEFAULT_THEME.fonts).toBeDefined();
-    expect(DEFAULT_THEME.spacing).toBeDefined();
-    expect(DEFAULT_THEME.borderRadius).toBeDefined();
-    expect(DEFAULT_THEME.chrome).toBeDefined();
-  });
-
-  it('uses Inter Variable as primary font', () => {
-    expect(DEFAULT_THEME.fonts.family).toContain('Inter Variable');
-  });
-
-  it('title is 26px demi (590 weight)', () => {
-    expect(DEFAULT_THEME.chrome.title.fontSize).toBe(26);
-    expect(DEFAULT_THEME.chrome.title.fontWeight).toBe(590);
-  });
-
-  it('subtitle is 14px normal weight', () => {
-    expect(DEFAULT_THEME.chrome.subtitle.fontSize).toBe(14);
-    expect(DEFAULT_THEME.chrome.subtitle.fontWeight).toBe(400);
-  });
-
-  it('source is 11px normal weight', () => {
-    expect(DEFAULT_THEME.chrome.source.fontSize).toBe(11);
-    expect(DEFAULT_THEME.chrome.source.fontWeight).toBe(400);
-  });
-
-  it('borderRadius is 2px (square aesthetic)', () => {
-    expect(DEFAULT_THEME.borderRadius).toBe(2);
-  });
-
-  it('font weights include 550 (medium) and 590 (demi)', () => {
-    expect(DEFAULT_THEME.fonts.weights.medium).toBe(550);
-    expect(DEFAULT_THEME.fonts.weights.semibold).toBe(590);
-  });
-
-  it('categorical palette is non-empty and primary accent is cyan', () => {
-    // Palette is a designed OKLCH multi-hue ramp tuned for dark surfaces
-    // (L~=0.70). It does not guarantee WCAG-AA-large-text contrast on
-    // pure white; light-mode line strokes route through the strong
-    // accent token (`adaptForLightLineStroke`) instead. Per-token
-    // accessibility is enforced via dedicated contrast helpers, not
-    // here.
-    expect(DEFAULT_THEME.colors.categorical.length).toBeGreaterThanOrEqual(5);
-    expect(DEFAULT_THEME.colors.categorical[0]).toBe('#06b6d4');
-  });
-
-  it('dark canvas surface tokens are part of the achromatic ramp', () => {
-    expect(ACHROMATIC_RAMP.bg).toBe('#09090b');
-    expect(ACHROMATIC_RAMP.fg).toBe('#f7f8f8');
-  });
-
-  it('dark-mode adapter preserves contrast monotonicity for cyan accent', () => {
-    // The cyan accent on white has a low ratio (~2.4); the adapter's
-    // job is to produce a similar ratio against the dark canvas, not
-    // to raise it. Just confirm the adapter returns something.
-    const adapted = adaptColorForDarkMode('#06b6d4', '#ffffff', ACHROMATIC_RAMP.bg);
-    expect(adapted).toMatch(/^#[0-9a-f]{6}$/i);
-    expect(contrastRatio(adapted, ACHROMATIC_RAMP.bg)).toBeGreaterThan(1.5);
-  });
-
-  it('has sequential and diverging palette entries', () => {
-    expect(Object.keys(DEFAULT_THEME.colors.sequential).length).toBeGreaterThan(0);
-    expect(Object.keys(DEFAULT_THEME.colors.diverging).length).toBeGreaterThan(0);
-  });
-});

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

@@ -1,277 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { DEFAULT_THEME } from '../defaults';
-import { resolveTheme } from '../resolve';
-
-describe('resolveTheme', () => {
-  it('returns default theme when no overrides given', () => {
-    const resolved = resolveTheme();
-    expect(resolved.colors.background).toBe(DEFAULT_THEME.colors.background);
-    expect(resolved.fonts.family).toBe(DEFAULT_THEME.fonts.family);
-    expect(resolved.isDark).toBe(false);
-  });
-
-  it('deep merges color overrides without losing other color fields', () => {
-    const resolved = resolveTheme({
-      colors: { background: '#111111' },
-    });
-    expect(resolved.colors.background).toBe('#111111');
-    // Other color fields preserved from defaults
-    expect(resolved.colors.text).toBe(DEFAULT_THEME.colors.text);
-    expect(resolved.colors.categorical).toEqual(DEFAULT_THEME.colors.categorical);
-  });
-
-  it('overrides font family', () => {
-    const resolved = resolveTheme({
-      fonts: { family: 'Helvetica' },
-    });
-    expect(resolved.fonts.family).toBe('Helvetica');
-    // Mono should still be default
-    expect(resolved.fonts.mono).toBe(DEFAULT_THEME.fonts.mono);
-  });
-
-  it('overrides spacing partially', () => {
-    const resolved = resolveTheme({
-      spacing: { padding: 24 },
-    });
-    expect(resolved.spacing.padding).toBe(24);
-    expect(resolved.spacing.chromeGap).toBe(DEFAULT_THEME.spacing.chromeGap);
-  });
-
-  it('overrides border radius', () => {
-    const resolved = resolveTheme({ borderRadius: 8 });
-    expect(resolved.borderRadius).toBe(8);
-  });
-
-  it('overrides a chrome element color, preserving its size and weight', () => {
-    const resolved = resolveTheme({ chrome: { subtitle: '#d0d6e0' } });
-    expect(resolved.chrome.subtitle.color).toBe('#d0d6e0');
-    // Non-color chrome fields come from the typography scale, untouched.
-    expect(resolved.chrome.subtitle.fontSize).toBe(14);
-    expect(resolved.chrome.subtitle.fontWeight).toBe(400);
-    // Other chrome elements keep their defaults.
-    expect(resolved.chrome.title.color).toBe('#09090b');
-  });
-
-  it('overrides categorical palette completely', () => {
-    const custom = ['#ff0000', '#00ff00', '#0000ff'];
-    const resolved = resolveTheme({
-      colors: { categorical: custom },
-    });
-    expect(resolved.colors.categorical).toEqual(custom);
-  });
-
-  it('accepts a custom base theme', () => {
-    const customBase = {
-      ...DEFAULT_THEME,
-      borderRadius: 12,
-    };
-    const resolved = resolveTheme(undefined, customBase);
-    expect(resolved.borderRadius).toBe(12);
-  });
-
-  it('accepts flat string[] as shorthand for categorical colors', () => {
-    const colors = ['#ff0000', '#94a3b8', '#94a3b8'];
-    const resolved = resolveTheme({ colors });
-    expect(resolved.colors.categorical).toEqual(colors);
-    // Other color fields preserved from defaults
-    expect(resolved.colors.background).toBe(DEFAULT_THEME.colors.background);
-    expect(resolved.colors.text).toBe(DEFAULT_THEME.colors.text);
-  });
-
-  it('flat color array does not clobber non-color theme fields', () => {
-    const resolved = resolveTheme({ colors: ['#ff0000'] });
-    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);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Deep merge behavior hardening
-// ---------------------------------------------------------------------------
-
-describe('resolveTheme deep merge edge cases', () => {
-  it('replaces categorical array entirely, does not concatenate', () => {
-    const custom = ['#aaa', '#bbb'];
-    const resolved = resolveTheme({ colors: { categorical: custom } });
-    expect(resolved.colors.categorical).toEqual(custom);
-    expect(resolved.colors.categorical).toHaveLength(2);
-  });
-
-  it('skips undefined values, preserving defaults', () => {
-    const resolved = resolveTheme({ borderRadius: undefined });
-    expect(resolved.borderRadius).toBe(DEFAULT_THEME.borderRadius);
-  });
-
-  it('applies multiple overrides at different depths in one call', () => {
-    const resolved = resolveTheme({
-      colors: { background: '#222222', text: '#eeeeee' },
-      fonts: { family: 'Georgia' },
-      spacing: { padding: 32 },
-      borderRadius: 4,
-    });
-    expect(resolved.colors.background).toBe('#222222');
-    expect(resolved.colors.text).toBe('#eeeeee');
-    expect(resolved.fonts.family).toBe('Georgia');
-    expect(resolved.spacing.padding).toBe(32);
-    expect(resolved.borderRadius).toBe(4);
-    // Non-overridden values preserved
-    expect(resolved.fonts.mono).toBe(DEFAULT_THEME.fonts.mono);
-    expect(resolved.spacing.chromeGap).toBe(DEFAULT_THEME.spacing.chromeGap);
-    expect(resolved.colors.categorical).toEqual(DEFAULT_THEME.colors.categorical);
-  });
-
-  it('empty object override returns defaults unchanged', () => {
-    const resolved = resolveTheme({});
-    expect(resolved.colors).toEqual(expect.objectContaining(DEFAULT_THEME.colors));
-    expect(resolved.fonts).toEqual(DEFAULT_THEME.fonts);
-    expect(resolved.spacing).toEqual(DEFAULT_THEME.spacing);
-    expect(resolved.borderRadius).toBe(DEFAULT_THEME.borderRadius);
-  });
-
-  it('dark background adapts chrome colors without losing chrome structure', () => {
-    const resolved = resolveTheme({ colors: { background: '#111111', text: '#ffffff' } });
-    expect(resolved.isDark).toBe(true);
-    // Chrome structure should still be fully populated
-    expect(resolved.chrome.title).toBeDefined();
-    expect(resolved.chrome.subtitle).toBeDefined();
-    expect(resolved.chrome.source).toBeDefined();
-    expect(resolved.chrome.byline).toBeDefined();
-    expect(resolved.chrome.footer).toBeDefined();
-    // Title color should be adapted (not the light-mode default)
-    expect(resolved.chrome.title.color).not.toBe(DEFAULT_THEME.chrome.title.color);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// TokenValue resolution
-// ---------------------------------------------------------------------------
-
-describe('resolveTheme TokenValue handling', () => {
-  it('resolves plain string TokenValue to same string', () => {
-    const resolved = resolveTheme({ colors: { background: '#faf8f5' } });
-    expect(resolved.colors.background).toBe('#faf8f5');
-  });
-
-  it('resolves light/dark TokenValue pair to the light value', () => {
-    const resolved = resolveTheme({
-      colors: { background: { light: '#faf8f5', dark: '#1a1816' } },
-    });
-    expect(resolved.colors.background).toBe('#faf8f5');
-  });
-
-  it('stores token pairs on _tokenPairs for adaptTheme consumption', () => {
-    const resolved = resolveTheme({
-      colors: {
-        background: { light: '#fff', dark: '#111' },
-        text: { light: '#000', dark: '#eee' },
-      },
-    });
-    expect(resolved._tokenPairs).toBeDefined();
-    expect(resolved._tokenPairs?.['colors.background']).toEqual({ light: '#fff', dark: '#111' });
-    expect(resolved._tokenPairs?.['colors.text']).toEqual({ light: '#000', dark: '#eee' });
-  });
-
-  it('does not create _tokenPairs when all colors are plain strings', () => {
-    const resolved = resolveTheme({
-      colors: { background: '#fff', text: '#000' },
-    });
-    expect(resolved._tokenPairs).toBeUndefined();
-  });
-
-  it('resolves TokenValue on semantic color fields', () => {
-    const resolved = resolveTheme({
-      colors: {
-        positive: { light: '#10b981', dark: '#34d399' },
-        negative: { light: '#e11d48', dark: '#fb7185' },
-      },
-    });
-    expect(resolved.colors.positive).toBe('#10b981');
-    expect(resolved.colors.negative).toBe('#e11d48');
-    expect(resolved._tokenPairs?.['colors.positive']).toEqual({
-      light: '#10b981',
-      dark: '#34d399',
-    });
-    expect(resolved._tokenPairs?.['colors.negative']).toEqual({
-      light: '#e11d48',
-      dark: '#fb7185',
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// New ThemeConfig fields
-// ---------------------------------------------------------------------------
-
-describe('resolveTheme widened ThemeConfig', () => {
-  it('overrides fonts.weights partially', () => {
-    const resolved = resolveTheme({
-      fonts: { weights: { normal: 400, bold: 700 } },
-    });
-    expect(resolved.fonts.weights.normal).toBe(400);
-    expect(resolved.fonts.weights.bold).toBe(700);
-    expect(resolved.fonts.weights.medium).toBe(DEFAULT_THEME.fonts.weights.medium);
-  });
-
-  it('overrides new spacing fields', () => {
-    const resolved = resolveTheme({
-      spacing: { chromeToChart: 16, chartToFooter: 20, axisMargin: 8 },
-    });
-    expect(resolved.spacing.chromeToChart).toBe(16);
-    expect(resolved.spacing.chartToFooter).toBe(20);
-    expect(resolved.spacing.axisMargin).toBe(8);
-    expect(resolved.spacing.padding).toBe(DEFAULT_THEME.spacing.padding);
-  });
-
-  it('overrides chrome typography with ChromeThemeOverride object', () => {
-    const resolved = resolveTheme({
-      chrome: {
-        title: { fontWeight: 700, fontSize: 32, lineHeight: 1.1 },
-      },
-    });
-    expect(resolved.chrome.title.fontWeight).toBe(700);
-    expect(resolved.chrome.title.fontSize).toBe(32);
-    expect(resolved.chrome.title.lineHeight).toBe(1.1);
-    expect(resolved.chrome.subtitle.fontWeight).toBe(DEFAULT_THEME.chrome.subtitle.fontWeight);
-  });
-
-  it('ChromeThemeOverride color accepts TokenValue', () => {
-    const resolved = resolveTheme({
-      chrome: {
-        title: { color: { light: '#111', dark: '#eee' }, fontWeight: 600 },
-      },
-    });
-    expect(resolved.chrome.title.color).toBe('#111');
-    expect(resolved.chrome.title.fontWeight).toBe(600);
-    expect(resolved._tokenPairs?.['chrome.title.color']).toEqual({ light: '#111', dark: '#eee' });
-  });
-
-  it('passes seriesStrategy through to resolved theme', () => {
-    const resolved = resolveTheme({ seriesStrategy: 'accent-neutral' });
-    expect(resolved.seriesStrategy).toBe('accent-neutral');
-  });
-
-  it('defaults seriesStrategy to palette', () => {
-    const resolved = resolveTheme();
-    expect(resolved.seriesStrategy).toBe('palette');
-  });
-});

package/src/theme/dark-mode.ts

@@ -1,258 +0,0 @@
-/**
- * Dark mode theme adaptation.
- *
- * Preserves hue of colors while adjusting lightness and saturation
- * to maintain the same relative contrast ratios on a dark background.
- */
-
-import { hsl, rgb } from 'd3-color';
-import { contrastRatio } from '../colors/contrast';
-import { ACHROMATIC_RAMP } from '../colors/palettes';
-import type { ResolvedTheme } from '../types/theme';
-import { DEFAULT_THEME } from './defaults';
-
-// ---------------------------------------------------------------------------
-// Dark mode background
-// ---------------------------------------------------------------------------
-
-/** Default dark mode background color (zinc-based canvas). */
-const DARK_BG = ACHROMATIC_RAMP.bg;
-/** Default dark mode text color. */
-const DARK_TEXT = ACHROMATIC_RAMP.fg;
-
-// ---------------------------------------------------------------------------
-// Color adaptation
-// ---------------------------------------------------------------------------
-
-/**
- * Adapt a single color for dark mode.
- *
- * Preserves the hue and adjusts lightness/saturation so the adapted
- * color has the same contrast ratio against darkBg as the original
- * had against lightBg.
- */
-export function adaptColorForDarkMode(color: string, lightBg: string, darkBg: string): string {
-  // Adapter only handles hex/rgb-style inputs. Raw oklch() and other
-  // CSS Color 4 strings parse unreliably through d3-color in happy-dom,
-  // so guard early instead of silently falling back to a default.
-  if (rgb(color) == null) {
-    if (typeof console !== 'undefined' && console.warn) {
-      console.warn(
-        `[openchart] adaptColorForDarkMode: unparseable color "${color}", returning unchanged. Use precomputed sRGB hex.`,
-      );
-    }
-    return color;
-  }
-  const originalRatio = contrastRatio(color, lightBg);
-  const c = hsl(color);
-  if (c == null || Number.isNaN(c.h)) {
-    // Achromatic or invalid color: just adjust lightness
-    const r = rgb(color);
-    if (r == null) return color;
-    const darkBgLum = _luminanceFromHex(darkBg);
-    const isLight = darkBgLum < 0.5;
-    if (isLight) return color;
-    // Invert the lightness
-    const inverted = hsl(color);
-    if (inverted == null) return color;
-    inverted.l = 1 - inverted.l;
-    return inverted.formatHex();
-  }
-
-  // Binary search for lightness that gives equivalent contrast on dark bg
-  let lo = 0.0;
-  let hi = 1.0;
-  let bestColor = color;
-  let bestDiff = Infinity;
-
-  for (let i = 0; i < 20; i++) {
-    const mid = (lo + hi) / 2;
-    const candidate = hsl(c.h, c.s, mid);
-    const hex = candidate.formatHex();
-    const ratio = contrastRatio(hex, darkBg);
-    const diff = Math.abs(ratio - originalRatio);
-
-    if (diff < bestDiff) {
-      bestDiff = diff;
-      bestColor = hex;
-    }
-
-    if (ratio < originalRatio) {
-      // Need more contrast = more lightness on dark bg
-      lo = mid;
-    } else {
-      hi = mid;
-    }
-  }
-
-  return bestColor;
-}
-
-/** Quick luminance estimation from a hex color. */
-function _luminanceFromHex(color: string): number {
-  const c = rgb(color);
-  if (c == null) return 0;
-  return (0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) / 255;
-}
-
-// ---------------------------------------------------------------------------
-// Full theme adaptation
-// ---------------------------------------------------------------------------
-
-/**
- * Adapt an entire resolved theme for dark mode.
- *
- * Swaps background/text, adapts categorical and annotation colors,
- * adjusts gridline and axis colors for the dark background.
- */
-export function adaptTheme(theme: ResolvedTheme): ResolvedTheme {
-  const pairs = theme._tokenPairs;
-  const inputBg = theme.colors.background;
-  // "transparent" preserves the background token but must still adopt dark
-  // text/gridline/axis colors — the container is dark, not the chart canvas.
-  const isTransparent = inputBg === 'transparent';
-  const alreadyDark = isTransparent || _luminanceFromHex(inputBg) < 0.2;
-
-  // Preserve user-supplied background (including transparent) but always
-  // apply dark-mode text/axis/gridline colors so labels are readable on the
-  // dark host surface.
-  const darkBg = pairs?.['colors.background']
-    ? pairs['colors.background'].dark
-    : alreadyDark
-      ? inputBg
-      : DARK_BG;
-  const darkMuted = ACHROMATIC_RAMP.fgMuted;
-
-  // Per the "sensible defaults, full override" convention (see spec-grammar),
-  // dark-mode adaptation only swaps in dark defaults for colors the spec
-  // left at their light-mode default. An explicit override is preserved.
-  // When a TokenValue pair has an explicit dark value, use it directly.
-  const light = DEFAULT_THEME.colors;
-  const lightChrome = DEFAULT_THEME.chrome;
-  const overridden = <T>(current: T, lightDefault: T, darkDefault: T): T =>
-    current === lightDefault ? darkDefault : current;
-
-  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)');
-  // axis is also tick-label fill — needs WCAG AA contrast on dark bg.
-  // Zinc-400 (`#a1a1aa`) hits ~6:1 against #09090b.
-  const darkAxis = pairs?.['colors.axis']
-    ? pairs['colors.axis'].dark
-    : overridden(theme.colors.axis, light.axis, '#a1a1aa');
-
-  // Categorical palette is pinned to design-system tokens. The same vibrant
-  // hex values render in both light and dark modes — adapting them via
-  // contrast-equivalence dulls them on dark backgrounds (cyan -> teal),
-  // which is the opposite of what the design system calls for.
-  const categorical = theme.colors.categorical;
-
-  return {
-    ...theme,
-    isDark: true,
-    colors: {
-      ...theme.colors,
-      background: darkBg,
-      text: darkText,
-      gridline: darkGridline,
-      axis: darkAxis,
-      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,
-      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) 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: pairs?.['chrome.title.color']
-          ? pairs['chrome.title.color'].dark
-          : overridden(theme.chrome.title.color, lightChrome.title.color, darkText),
-      },
-      subtitle: {
-        ...theme.chrome.subtitle,
-        color: pairs?.['chrome.subtitle.color']
-          ? pairs['chrome.subtitle.color'].dark
-          : overridden(theme.chrome.subtitle.color, lightChrome.subtitle.color, darkMuted),
-      },
-      source: {
-        ...theme.chrome.source,
-        color: pairs?.['chrome.source.color']
-          ? pairs['chrome.source.color'].dark
-          : overridden(theme.chrome.source.color, lightChrome.source.color, darkMuted),
-      },
-      byline: {
-        ...theme.chrome.byline,
-        color: pairs?.['chrome.byline.color']
-          ? pairs['chrome.byline.color'].dark
-          : overridden(theme.chrome.byline.color, lightChrome.byline.color, darkMuted),
-      },
-      footer: {
-        ...theme.chrome.footer,
-        color: pairs?.['chrome.footer.color']
-          ? pairs['chrome.footer.color'].dark
-          : overridden(theme.chrome.footer.color, lightChrome.footer.color, darkMuted),
-      },
-    },
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Light mode line stroke darkening
-// ---------------------------------------------------------------------------
-
-/**
- * Returns a darker variant of a color for use as a foreground stroke on
- * light backgrounds, where mid-lightness palette colors (e.g. cyan-500
- * `#06b6d4`) lack contrast against white. Drops HSL lightness by ~12%
- * absolute (clamped to >= 0) while preserving hue and saturation, which
- * reproduces the cyan-500 → cyan-600 step the cyan accent originally
- * needed and works for any other palette accent the user picks.
- *
- * Returns the input unchanged when:
- *   - the color is already dark enough (L <= ~0.40) — further darkening
- *     just muddies the stroke without adding contrast
- *   - the color isn't parseable
- *   - the color is achromatic (NaN hue) — HSL lightness on grays drifts
- *     toward black instead of staying neutral
- *
- * Exposed via the `--oc-accent-strong` CSS token.
- */
-export function adaptForLightLineStroke(color: string): string {
-  if (rgb(color) == null) return color;
-  const c = hsl(color);
-  if (c == null) return color;
-  // Achromatic check: NaN hue OR low saturation. d3-color reports a valid
-  // hue for grays whose RGB channels aren't perfectly equal (e.g. zinc
-  // `#a1a1aa` has s≈0.05), so saturation is the more reliable signal.
-  // Threshold 0.10 catches near-grays without tripping on real palette
-  // colors (palette saturation is ≥ ~0.5).
-  if (Number.isNaN(c.h) || c.s < 0.1) return color;
-  if (c.l <= 0.4) return color;
-  c.l = Math.max(0, c.l - 0.12);
-  return c.formatHex();
-}