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                border: border(layer, "on", { overlay: true }),
24            },
25            state: {
26                hovered: {
27                    background: background(layer, "hovered"),
28                    ...text(layer, "sans", "hovered", { size: "sm" }),
29                },
30            },
31        }),
32        sectionHeader: {
33            ...text(layer, "sans", { size: "sm" }),
34            padding: { left: 8, right: 8, top: 8, bottom: 8 },
35        },
36        item: toggleable(
37            interactive({
38                base: {
39                    ...text(layer, "sans", { size: "sm" }),
40                    secondaryTextSpacing: 10,
41                    secondaryText: text(layer, "sans", { size: "sm" }),
42                    padding: { left: 18, right: 18, top: 2, bottom: 2 },
43                },
44                state: {
45                    hovered: {
46                        background: background(layer, "hovered"),
47                        ...text(layer, "sans", "hovered", { size: "sm" }),
48                    },
49                },
50            }),
51            {
52                default: {
53                    background: background(layer, "active"),
54                },
55                hovered: {
56                    background: background(layer, "active"),
57                },
58            }
59        ),
60    }
61}