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        background: background(layer),
 9        border: border(layer),
10        shadow: colorScheme.popoverShadow,
11        header: {
12            ...text(layer, "sans", { size: "sm" }),
13            padding: { left: 8, right: 8, top: 2, bottom: 2 },
14            cornerRadius: 6,
15            background: background(layer, "on"),
16            border: border(layer, "on", { overlay: true }),
17            hover: {
18                background: background(layer, "hovered"),
19                ...text(layer, "sans", "hovered", { size: "sm" }),
20            }
21        },
22        server: {
23            ...text(layer, "sans", { size: "sm" }),
24            padding: { left: 8, right: 8, top: 8, bottom: 8 },
25        },
26        item: {
27            ...text(layer, "sans", { size: "sm" }),
28            padding: { left: 18, right: 18, top: 2, bottom: 2 },
29            hover: {
30                background: background(layer, "hovered"),
31                ...text(layer, "sans", "hovered", { size: "sm" }),
32            },
33            active: {
34                background: background(layer, "active"),
35            },
36            activeHover: {
37                background: background(layer, "active"),
38            },
39        },
40    }
41}