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}