1import { ColorScheme } from "../themes/common/colorScheme";
 2import { background, border, text } from "./components";
 3
 4export default function HoverPopover(colorScheme: ColorScheme) {
 5  let layer = colorScheme.middle;
 6  let 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    block_style: {
40      padding: { top: 4 },
41    },
42    prose: text(layer, "sans", { size: "sm" }),
43    highlight: colorScheme.ramps.neutral(0.5).alpha(0.2).hex(), // TODO: blend was used here. Replace with something better
44  };
45}