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