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