1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, borderColor, text } from "./components"
 3import { interactive } from "../element"
 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(
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            {
46                default: {
47                    background: background(layer, "active"),
48                },
49                hovered: {
50                    background: background(layer, "active"),
51                },
52            }
53        ),
54
55        separator: {
56            background: borderColor(layer),
57            margin: { top: 2, bottom: 2 },
58        },
59    }
60}