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