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}