1import { ColorScheme } from "../theme/colorScheme"
 2import { background, foreground, text } from "./components"
 3import { interactive } from "../element"
 4const avatarSize = 12
 5const headerPadding = 8
 6
 7export default function contactNotification(colorScheme: ColorScheme): Object {
 8    let layer = colorScheme.lowest
 9    return {
10        headerAvatar: {
11            height: avatarSize,
12            width: avatarSize,
13            cornerRadius: 6,
14        },
15        headerMessage: {
16            ...text(layer, "sans", { size: "xs" }),
17            margin: { left: headerPadding, right: headerPadding },
18        },
19        headerHeight: 18,
20        bodyMessage: {
21            ...text(layer, "sans", { size: "xs" }),
22            margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
23        },
24        button: interactive({
25            base: {
26                ...text(layer, "sans", "on", { size: "xs" }),
27                background: background(layer, "on"),
28                padding: 4,
29                cornerRadius: 6,
30                margin: { left: 6 },
31            },
32
33            state: {
34                hovered: {
35                    background: background(layer, "on", "hovered"),
36                },
37            },
38        }),
39
40        dismissButton: {
41            default: {
42                color: foreground(layer, "variant"),
43                iconWidth: 8,
44                iconHeight: 8,
45                buttonWidth: 8,
46                buttonHeight: 8,
47                hover: {
48                    color: foreground(layer, "hovered"),
49                },
50            },
51        },
52    }
53}