fix(chart): refine ECharts series styling and legend color handling across bar, donut, and radar charts

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

@@ -3,8 +3,12 @@
  * 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,
+ * ECharts renders on <svg> and cannot read CSS custom properties,
  * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ *
+ * IMPORTANT: All colors passed to ECharts for data series must be hex or rgb/rgba.
+ * ECharts cannot interpolate HSL strings during hover/emphasis animations,
+ * causing them to flash black.
  */
 
 import { themeDefaults } from '../00theme.js';
@@ -12,22 +16,27 @@ import { themeDefaults } from '../00theme.js';
 const light = themeDefaults.colors.light;
 const dark = themeDefaults.colors.dark;
 
+/**
+ * Series color palette for ECharts charts.
+ * Aligned with the Tailwind/shadcn-inspired palette used throughout the codebase.
+ * All values are hex — ECharts requires this for animation interpolation.
+ */
 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
+    '#60a5fa',  // blue-400   — softer in dark mode
+    '#2dd4bf',  // teal-400
+    '#a78bfa',  // violet-400
+    '#fbbf24',  // amber-400
+    '#34d399',  // emerald-400
+    '#fb7185',  // rose-400
   ],
   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,
+    '#3b82f6',  // blue-500
+    '#14b8a6',  // teal-500
+    '#8b5cf6',  // violet-500
+    '#f59e0b',  // amber-500
+    '#10b981',  // emerald-500
+    '#f43f5e',  // rose-500
   ],
 };
 
@@ -35,6 +44,16 @@ export function getEchartsSeriesColors(goBright: boolean): string[] {
   return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
 }
 
+/**
+ * Convert a hex color to an rgba string with the given alpha.
+ */
+export function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
   const colors = goBright ? light : dark;
   return {
@@ -44,7 +63,8 @@ export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
       fontSize: 12,
     },
-    color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
+    // No global `color` array — each component sets per-item/per-series
+    // colors explicitly to avoid conflicts during emphasis animations.
     tooltip: {
       backgroundColor: colors.bgPrimary,
       borderColor: colors.borderDefault,
@@ -65,7 +85,6 @@ export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
 
 /**
  * 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;