contact_finder.ts

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