1import { ColorScheme } from "../theme/colorScheme"
 2import { background, border, text } from "./components"
 3
 4export default function contactsPanel(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: {
13            ...text(layer, "sans", { size: "sm" }),
14            padding: { left: 8, right: 8, top: 2, bottom: 2 },
15            cornerRadius: 6,
16            background: background(layer, "on"),
17            border: border(layer, "on", { overlay: true }),
18            hover: {
19                background: background(layer, "hovered"),
20                ...text(layer, "sans", "hovered", { size: "sm" }),
21            }
22        },
23        server: {
24            ...text(layer, "sans", { size: "sm" }),
25            padding: { left: 8, right: 8, top: 8, bottom: 8 },
26        },
27        item: {
28            ...text(layer, "sans", { size: "sm" }),
29            padding: { left: 18, right: 18, top: 2, bottom: 2 },
30            hover: {
31                background: background(layer, "hovered"),
32                ...text(layer, "sans", "hovered", { size: "sm" }),
33            },
34            active: {
35                background: background(layer, "active"),
36            },
37            activeHover: {
38                background: background(layer, "active"),
39            },
40        },
41    }
42}