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: 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                    clicked: {
43                        background: background(layer, "pressed"),
44                    },
45                },
46            }),
47            state: {
48                active: {
49                    default: {
50                        background: background(layer, "active"),
51                    },
52                    hovered: {
53                        background: background(layer, "hovered"),
54                    },
55                    clicked: {
56                        background: background(layer, "pressed"),
57                    },
58                },
59            },
60        }),
61
62        separator: {
63            background: borderColor(layer),
64            margin: { top: 2, bottom: 2 },
65        },
66    }
67}