contactNotification.ts

 1import { ColorScheme } from "../themes/common/colorScheme"
 2import { background, foreground, text } from "./components"
 3
 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: {
25            ...text(layer, "sans", "on", { size: "xs" }),
26            background: background(layer, "on"),
27            padding: 4,
28            cornerRadius: 6,
29            margin: { left: 6 },
30            hover: {
31                background: background(layer, "on", "hovered"),
32            },
33        },
34        dismissButton: {
35            color: foreground(layer, "variant"),
36            iconWidth: 8,
37            iconHeight: 8,
38            buttonWidth: 8,
39            buttonHeight: 8,
40            hover: {
41                color: foreground(layer, "hovered"),
42            },
43        },
44    }
45}