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:
25            interactive({
26                base: {
27                    ...text(layer, "sans", "on", { size: "xs" }),
28                    background: background(layer, "on"),
29                    padding: 4,
30                    cornerRadius: 6,
31                    margin: { left: 6 }
32                },
33
34                state: {
35                    hovered: {
36                        background: background(layer, "on", "hovered"),
37                    }
38                }
39            }),
40
41        dismissButton: {
42            default: {
43                color: foreground(layer, "variant"),
44                iconWidth: 8,
45                iconHeight: 8,
46                buttonWidth: 8,
47                buttonHeight: 8,
48                hover: {
49                    color: foreground(layer, "hovered"),
50                },
51            }
52        },
53    }
54}