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