1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, text } from "./components"
 3import { interactive } from "./interactive"
 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}