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