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