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      base: {
17        iconSpacing: 8,
18        iconWidth: 14,
19        padding: { left: 6, right: 6, top: 2, bottom: 2 },
20        cornerRadius: 6,
21        label: text(layer, "sans", { size: "sm" }),
22        keystroke: {
23          ...text(layer, "sans", "variant", {
24            size: "sm",
25            weight: "bold",
26          }),
27          padding: { left: 3, right: 3 },
28        }
29      }, state: {
30        hovered: {
31          background: background(layer, "hovered"),
32          label: text(layer, "sans", "hovered", { size: "sm" }),
33          keystroke: {
34            ...text(layer, "sans", "hovered", {
35              size: "sm",
36              weight: "bold",
37            }),
38            padding: { left: 3, right: 3 },
39          },
40        }
41      }
42    }), {
43      default: {
44        background: background(layer, "active"),
45      },
46      hovered: {
47        background: background(layer, "active"),
48      },
49    }),
50
51    separator: {
52      background: borderColor(layer),
53      margin: { top: 2, bottom: 2 },
54    },
55  }
56}