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