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