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