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