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