1import { background, border, border_color, text } from "./components"
 2import { interactive, toggleable } from "../element"
 3import { useTheme } from "../theme"
 4
 5export default function context_menu(): any {
 6    const theme = useTheme()
 7
 8    return {
 9        background: background(theme.middle),
10        corner_radius: 10,
11        padding: 4,
12        shadow: theme.popover_shadow,
13        border: border(theme.middle),
14        keystroke_margin: 30,
15        item: toggleable({
16            base: interactive({
17                base: {
18                    icon_spacing: 8,
19                    icon_width: 14,
20                    padding: { left: 6, right: 6, top: 2, bottom: 2 },
21                    corner_radius: 6,
22                    label: text(theme.middle, "sans", { size: "sm" }),
23                    keystroke: {
24                        ...text(theme.middle, "sans", "variant", {
25                            size: "sm",
26                            weight: "bold",
27                        }),
28                        padding: { left: 3, right: 3 },
29                    },
30                },
31                state: {
32                    hovered: {
33                        background: background(theme.middle, "hovered"),
34                    },
35                    clicked: {
36                        background: background(theme.middle, "pressed"),
37                    },
38                },
39            }),
40            state: {
41                active: {
42                    default: {
43                        background: background(theme.middle, "active"),
44                    },
45                    hovered: {
46                        background: background(theme.middle, "hovered"),
47                    },
48                    clicked: {
49                        background: background(theme.middle, "pressed"),
50                    },
51                },
52            },
53        }),
54
55        separator: {
56            background: border_color(theme.middle),
57            margin: { top: 2, bottom: 2 },
58        },
59    }
60}