update

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

@@ -0,0 +1,55 @@
+/**
+ * Shared theme utilities for ECharts-based chart components.
+ * Provides color palettes and option fragments that match the dees-catalog design tokens.
+ */
+
+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
+  ],
+  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%)',
+  ],
+};
+
+export function getEchartsSeriesColors(goBright: boolean): string[] {
+  return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
+}
+
+export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
+  const isDark = !goBright;
+  return {
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
+      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%)',
+      textStyle: {
+        color: isDark ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)',
+        fontSize: 12,
+      },
+      confine: true,
+    },
+    legend: {
+      textStyle: {
+        color: isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)',
+        fontSize: 12,
+      },
+    },
+  };
+}