73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
/**
|
|
* 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;
|
|
}
|