1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, text } from "./components"
 3
 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: {
13            ...text(layer, "sans", { size: "sm" }),
14            secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
15            secondaryTextSpacing: 10,
16            padding: { left: 8, right: 8, top: 2, bottom: 2 },
17            cornerRadius: 6,
18            background: background(layer, "on"),
19            border: border(layer, "on", { overlay: true }),
20            hover: {
21                background: background(layer, "hovered"),
22                ...text(layer, "sans", "hovered", { size: "sm" }),
23            }
24        },
25        sectionHeader: {
26            ...text(layer, "sans", { size: "sm" }),
27            padding: { left: 8, right: 8, top: 8, bottom: 8 },
28        },
29        item: {
30            ...text(layer, "sans", { size: "sm" }),
31            secondaryTextSpacing: 10,
32            secondaryText: text(layer, "sans", { size: "sm" }),
33            padding: { left: 18, right: 18, top: 2, bottom: 2 },
34            hover: {
35                background: background(layer, "hovered"),
36                ...text(layer, "sans", "hovered", { size: "sm" }),
37            },
38            active: {
39                background: background(layer, "active"),
40            },
41            activeHover: {
42                background: background(layer, "active"),
43            },
44        },
45    }
46}