1import { useTheme } from "../theme"
 2import { background, border, foreground, text } from "./components"
 3
 4export default function hover_popover(): any {
 5    const theme = useTheme()
 6
 7    const base_container = {
 8        background: background(theme.middle),
 9        corner_radius: 8,
10        padding: {
11            left: 8,
12            right: 8,
13            top: 4,
14            bottom: 4,
15        },
16        shadow: theme.popover_shadow,
17        border: border(theme.middle),
18        margin: {
19            left: -8,
20        },
21    }
22
23    return {
24        container: base_container,
25        info_container: {
26            ...base_container,
27            background: background(theme.middle, "accent"),
28            border: border(theme.middle, "accent"),
29        },
30        warning_container: {
31            ...base_container,
32            background: background(theme.middle, "warning"),
33            border: border(theme.middle, "warning"),
34        },
35        error_container: {
36            ...base_container,
37            background: background(theme.middle, "negative"),
38            border: border(theme.middle, "negative"),
39        },
40        block_style: {
41            padding: { top: 4 },
42        },
43        prose: text(theme.middle, "sans", { size: "sm" }),
44        diagnostic_source_highlight: {
45            color: foreground(theme.middle, "accent"),
46        },
47        highlight: theme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
48    }
49}