1import picker from "./picker"
 2import { background, border, foreground, text } from "./components"
 3import { useTheme } from "../theme"
 4
 5export default function contact_finder(): any {
 6    const theme = useTheme()
 7
 8    const side_margin = 6
 9    const contact_button = {
10        background: background(theme.middle, "variant"),
11        color: foreground(theme.middle, "variant"),
12        icon_width: 8,
13        button_width: 16,
14        corner_radius: 8,
15    }
16
17    const picker_style = picker()
18    const picker_input = {
19        background: background(theme.middle, "on"),
20        corner_radius: 6,
21        text: text(theme.middle, "mono"),
22        placeholder_text: text(theme.middle, "mono", "on", "disabled", {
23            size: "xs",
24        }),
25        selection: theme.players[0],
26        border: border(theme.middle),
27        padding: {
28            bottom: 4,
29            left: 8,
30            right: 8,
31            top: 4,
32        },
33        margin: {
34            left: side_margin,
35            right: side_margin,
36        },
37    }
38
39    return {
40        picker: {
41            empty_container: {},
42            item: {
43                ...picker_style.item,
44                margin: { left: side_margin, right: side_margin },
45            },
46            no_matches: picker_style.no_matches,
47            input_editor: picker_input,
48            empty_input_editor: picker_input,
49            header: picker_style.header,
50            footer: picker_style.footer,
51        },
52        row_height: 28,
53        contact_avatar: {
54            corner_radius: 10,
55            width: 18,
56        },
57        contact_username: {
58            padding: {
59                left: 8,
60            },
61        },
62        contact_button: {
63            ...contact_button,
64            hover: {
65                background: background(theme.middle, "variant", "hovered"),
66            },
67        },
68        disabled_contact_button: {
69            ...contact_button,
70            background: background(theme.middle, "disabled"),
71            color: foreground(theme.middle, "disabled"),
72        },
73    }
74}