1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, borderColor, text } from "./components"
 3import { interactive } from "../element/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}