fix(chart): align ECharts components with theme tokens and load the full ECharts ESM bundle

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

@@ -1,24 +1,33 @@
 /**
  * Shared theme utilities for ECharts-based chart components.
- * Provides color palettes and option fragments that match the dees-catalog design tokens.
+ * 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: [
-    'hsl(217.2 91.2% 59.8%)',  // blue
-    'hsl(173.4 80.4% 40%)',    // teal
-    'hsl(280.3 87.4% 66.7%)',  // purple
-    'hsl(24.6 95% 53.1%)',     // orange
-    'hsl(142 76% 36%)',        // green
-    'hsl(346 77% 49%)',        // rose
+    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: [
-    'hsl(222.2 47.4% 51.2%)',
-    'hsl(142.1 76.2% 36.3%)',
-    'hsl(280.3 47.7% 50.2%)',
-    'hsl(20.5 90.2% 48.2%)',
-    'hsl(160 60% 45%)',
-    'hsl(340 65% 47%)',
+    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,
   ],
 };
 
@@ -27,29 +36,37 @@ export function getEchartsSeriesColors(goBright: boolean): string[] {
 }
 
 export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
-  const isDark = !goBright;
+  const colors = goBright ? light : dark;
   return {
     backgroundColor: 'transparent',
     textStyle: {
-      color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
+      color: colors.textSecondary,
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
       fontSize: 12,
     },
     color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
     tooltip: {
-      backgroundColor: isDark ? 'hsl(0 0% 9%)' : 'hsl(0 0% 100%)',
-      borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)',
+      backgroundColor: colors.bgPrimary,
+      borderColor: colors.borderDefault,
       textStyle: {
-        color: isDark ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)',
+        color: colors.textPrimary,
         fontSize: 12,
       },
       confine: true,
     },
     legend: {
       textStyle: {
-        color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
+        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;
+}