dees-catalog/ts_web/elements/00group-chart/dees-chart-echarts-theme.ts

/**
 * Shared theme utilities for ECharts-based chart components.
 * Uses the centralized themeDefaults tokens so chart colors stay in sync
 * with the rest of the dees-catalog design system.
 *
 * ECharts renders on <canvas> and cannot read CSS custom properties,
 * so we reference the TypeScript source-of-truth (themeDefaults) directly.
 */

import { themeDefaults } from '../00theme.js';

const light = themeDefaults.colors.light;
const dark = themeDefaults.colors.dark;

const SERIES_COLORS = {
  dark: [
    dark.accentPrimary,       // blue
    'hsl(173.4 80.4% 40%)',   // teal (no token yet)
    'hsl(280.3 87.4% 66.7%)', // purple (no token yet)
    dark.accentWarning,       // orange/amber
    dark.accentSuccess,       // green
    dark.accentError,         // rose/red
  ],
  light: [
    light.accentPrimary,
    'hsl(142.1 76.2% 36.3%)',  // teal (no token yet)
    'hsl(280.3 47.7% 50.2%)',  // purple (no token yet)
    light.accentWarning,
    light.accentSuccess,
    light.accentError,
  ],
};

export function getEchartsSeriesColors(goBright: boolean): string[] {
  return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
}

export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
  const colors = goBright ? light : dark;
  return {
    backgroundColor: 'transparent',
    textStyle: {
      color: colors.textSecondary,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      fontSize: 12,
    },
    color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
    tooltip: {
      backgroundColor: colors.bgPrimary,
      borderColor: colors.borderDefault,
      textStyle: {
        color: colors.textPrimary,
        fontSize: 12,
      },
      confine: true,
    },
    legend: {
      textStyle: {
        color: colors.textSecondary,
        fontSize: 12,
      },
    },
  };
}

/**
 * Helper to get the resolved theme colors object for use in buildOption().
 * Components can use this instead of hardcoding dark/light color values.
 */
export function getThemeColors(goBright: boolean) {
  return goBright ? light : dark;
}