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