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                        label: text(theme.middle, "sans", "hovered", {
35                            size: "sm",
36                        }),
37                        keystroke: {
38                            ...text(theme.middle, "sans", "hovered", {
39                                size: "sm",
40                                weight: "bold",
41                            }),
42                            padding: { left: 3, right: 3 },
43                        },
44                    },
45                    clicked: {
46                        background: background(theme.middle, "pressed"),
47                    },
48                },
49            }),
50            state: {
51                active: {
52                    default: {
53                        background: background(theme.middle, "active"),
54                    },
55                    hovered: {
56                        background: background(theme.middle, "hovered"),
57                    },
58                    clicked: {
59                        background: background(theme.middle, "pressed"),
60                    },
61                },
62            },
63        }),
64
65        separator: {
66            background: border_color(theme.middle),
67            margin: { top: 2, bottom: 2 },
68        },
69    }
70}