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        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}