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