1import picker from "./picker";
 2import { ColorScheme } from "../themes/common/colorScheme";
 3import { background, border, foreground, text } from "./components";
 4
 5export default function contactFinder(colorScheme: ColorScheme) {
 6  let layer = colorScheme.middle;
 7
 8  const sideMargin = 6;
 9  const contactButton = {
10    background: background(layer, "variant"),
11    color: foreground(layer, "variant"),
12    iconWidth: 8,
13    buttonWidth: 16,
14    cornerRadius: 8,
15  };
16
17  const pickerStyle = picker(colorScheme);
18  const pickerInput = {
19    background: background(layer, "on"),
20    cornerRadius: 6,
21    text: text(layer, "mono",),
22    placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
23    selection: colorScheme.players[0],
24    border: border(layer),
25    padding: {
26      bottom: 4,
27      left: 8,
28      right: 8,
29      top: 4,
30    },
31    margin: {
32      left: sideMargin,
33      right: sideMargin,
34    }
35  };
36
37  return {
38    picker: {
39      emptyContainer: {},
40      item: {
41        ...pickerStyle.item,
42        margin: { left: sideMargin, right: sideMargin },
43      },
44      noMatches: pickerStyle.noMatches,
45      inputEditor: pickerInput,
46      emptyInputEditor: pickerInput
47    },
48    rowHeight: 28,
49    contactAvatar: {
50      cornerRadius: 10,
51      width: 18,
52    },
53    contactUsername: {
54      padding: {
55        left: 8,
56      },
57    },
58    contactButton: {
59      ...contactButton,
60      hover: {
61        background: background(layer, "variant", "hovered"),
62      },
63    },
64    disabledContactButton: {
65      ...contactButton,
66      background: background(layer, "disabled"),
67      color: foreground(layer, "disabled"),
68    },
69  };
70}