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      base:
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      state: {
53        active: {
54          default: {
55            background: background(layer, "active"),
56          },
57          hovered: {
58            background: background(layer, "active"),
59          },
60        }
61      }
62    }
63    ),
64  }
65}