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.highest;
 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  return {
18    picker: {
19      item: {
20        ...picker(colorScheme).item,
21        margin: { left: sideMargin, right: sideMargin }
22      },
23      empty: picker(colorScheme).empty,
24      inputEditor: {
25        background: background(layer, "on"),
26        cornerRadius: 6,
27        text: text(layer, "mono",),
28        placeholderText: text(layer, "mono", "variant", { size: "sm" }),
29        selection: colorScheme.players[0],
30        border: border(layer),
31        padding: {
32          bottom: 4,
33          left: 8,
34          right: 8,
35          top: 4,
36        },
37        margin: {
38          left: sideMargin,
39          right: sideMargin,
40        }
41      }
42    },
43    rowHeight: 28,
44    contactAvatar: {
45      cornerRadius: 10,
46      width: 18,
47    },
48    contactUsername: {
49      padding: {
50        left: 8,
51      },
52    },
53    contactButton: {
54      ...contactButton,
55      hover: {
56        background: background(layer, "variant", "hovered"),
57      },
58    },
59    disabledContactButton: {
60      ...contactButton,
61      background: background(layer, "disabled"),
62      color: foreground(layer, "disabled"),
63    },
64  };
65}