46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
export interface TrainlogChartTheme {
|
|
base: string
|
|
mantle: string
|
|
surface0: string
|
|
surface1: string
|
|
surface2: string
|
|
overlay1: string
|
|
text: string
|
|
subtext: string
|
|
lavender: string
|
|
mauve: string
|
|
blue: string
|
|
sapphire: string
|
|
green: string
|
|
yellow: string
|
|
peach: string
|
|
red: string
|
|
fontSans: string
|
|
fontSize: number
|
|
}
|
|
|
|
const fallback: TrainlogChartTheme = {
|
|
base: '#1e1e2e', mantle: '#181825', surface0: '#313244', surface1: '#45475a',
|
|
surface2: '#585b70', overlay1: '#7f849c', text: '#cdd6f4', subtext: '#a6adc8',
|
|
lavender: '#b4befe', mauve: '#cba6f7', blue: '#89b4fa', sapphire: '#74c7ec',
|
|
green: '#a6e3a1', yellow: '#f9e2af', peach: '#fab387', red: '#f38ba8',
|
|
fontSans: 'Inter, ui-sans-serif, system-ui, sans-serif', fontSize: 12,
|
|
}
|
|
|
|
/** CONTRACT: charts consume the Web design system at runtime, so a theme
|
|
* change cannot silently leave ECharts with its default palette. */
|
|
export function trainlogChartTheme(element: Element): TrainlogChartTheme {
|
|
const style = getComputedStyle(element)
|
|
const value = (token: string, defaultValue: string) => style.getPropertyValue(token).trim() || defaultValue
|
|
return {
|
|
base: value('--base', fallback.base), mantle: value('--mantle', fallback.mantle),
|
|
surface0: value('--surface-0', fallback.surface0), surface1: value('--surface-1', fallback.surface1),
|
|
surface2: value('--surface-2', fallback.surface2), overlay1: value('--overlay-1', fallback.overlay1),
|
|
text: value('--text', fallback.text), subtext: value('--subtext-0', fallback.subtext),
|
|
lavender: value('--lavender', fallback.lavender), mauve: value('--mauve', fallback.mauve),
|
|
blue: value('--blue', fallback.blue), sapphire: value('--sapphire', fallback.sapphire),
|
|
green: value('--green', fallback.green), yellow: value('--yellow', fallback.yellow),
|
|
peach: value('--peach', fallback.peach), red: value('--red', fallback.red),
|
|
fontSans: value('--font-sans', fallback.fontSans), fontSize: 12,
|
|
}
|
|
}
|