1import { ColorScheme } from "../themes/common/colorScheme";
 2import { background, border, borderColor, text } from "./components";
 3
 4export default function contextMenu(colorScheme: ColorScheme) {
 5  let layer = colorScheme.middle;
 6  return {
 7    background: background(layer),
 8    cornerRadius: 10,
 9    padding: 4,
10    shadow: colorScheme.popoverShadow,
11    border: border(layer),
12    keystrokeMargin: 30,
13    item: {
14      iconSpacing: 8,
15      iconWidth: 14,
16      padding: { left: 6, right: 6, top: 2, bottom: 2 },
17      cornerRadius: 6,
18      label: text(layer, "sans", { size: "sm" }),
19      keystroke: {
20        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
21        padding: { left: 3, right: 3 },
22      },
23      hover: {
24        background: background(layer, "hovered"),
25        label: text(layer, "sans", "hovered", { size: "sm" }),
26      },
27      active: {
28        background: background(layer, "active"),
29        label: text(layer, "sans", "active", { size: "sm" }),
30      },
31      activeHover: {
32        background: background(layer, "active"),
33        label: text(layer, "sans", "active", { size: "sm" }),
34      },
35    },
36    separator: {
37      background: borderColor(layer),
38      margin: { top: 2, bottom: 2 },
39    },
40  };
41}