1import Theme from "../themes/common/theme";
 2import { backgroundColor, border, popoverShadow, text } from "./components";
 3
 4export default function HoverPopover(theme: Theme) {
 5  let baseContainer = {
 6    background: backgroundColor(theme, "on500"),
 7    cornerRadius: 8,
 8    padding: {
 9      left: 8,
10      right: 8,
11      top: 4,
12      bottom: 4
13    },
14    shadow: popoverShadow(theme),
15    border: border(theme, "secondary"),
16    margin: {
17      left: -8,
18    },
19  };
20
21  return {
22    container: baseContainer,
23    infoContainer: {
24      ...baseContainer,
25      background: backgroundColor(theme, "on500Info"),
26      border: {
27        color: theme.ramps.blue(0).hex(),
28        width: 1,
29      },
30    },
31    warningContainer: {
32      ...baseContainer,
33      background: backgroundColor(theme, "on500Warning"),
34      border: {
35        color: theme.ramps.yellow(0).hex(),
36        width: 1,
37      },
38    },
39    errorContainer: {
40      ...baseContainer,
41      background: backgroundColor(theme, "on500Error"),
42      border: {
43        color: theme.ramps.red(0).hex(),
44        width: 1,
45      }
46    },
47    block_style: {
48      padding: { top: 4 },
49    },
50    prose: text(theme, "sans", "primary", { size: "sm" }),
51    highlight: theme.editor.highlight.occurrence,
52  };
53}