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            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                },
30                state: {
31                    hovered: {
32                        background: background(layer, "hovered"),
33                        label: text(layer, "sans", "hovered", { size: "sm" }),
34                        keystroke: {
35                            ...text(layer, "sans", "hovered", {
36                                size: "sm",
37                                weight: "bold",
38                            }),
39                            padding: { left: 3, right: 3 },
40                        },
41                    },
42                },
43            }),
44            {
45                default: {
46                    background: background(layer, "active"),
47                },
48                hovered: {
49                    background: background(layer, "active"),
50                },
51            }
52        ),
53
54        separator: {
55            background: borderColor(layer),
56            margin: { top: 2, bottom: 2 },
57        },
58    }
59}