1import { ColorScheme } from "../theme/color_scheme"
 2import { background, foreground, text } from "./components"
 3import { interactive } from "../element"
 4
 5export default function contact_notification(theme: ColorScheme): any {
 6    const avatar_size = 12
 7    const header_padding = 8
 8
 9    return {
10        header_avatar: {
11            height: avatar_size,
12            width: avatar_size,
13            corner_radius: 6,
14        },
15        header_message: {
16            ...text(theme.lowest, "sans", { size: "xs" }),
17            margin: { left: header_padding, right: header_padding },
18        },
19        header_height: 18,
20        body_message: {
21            ...text(theme.lowest, "sans", { size: "xs" }),
22            margin: { left: avatar_size + header_padding, top: 6, bottom: 6 },
23        },
24        button: interactive({
25            base: {
26                ...text(theme.lowest, "sans", "on", { size: "xs" }),
27                background: background(theme.lowest, "on"),
28                padding: 4,
29                corner_radius: 6,
30                margin: { left: 6 },
31            },
32
33            state: {
34                hovered: {
35                    background: background(theme.lowest, "on", "hovered"),
36                },
37            },
38        }),
39
40        dismiss_button: {
41            default: {
42                color: foreground(theme.lowest, "variant"),
43                icon_width: 8,
44                icon_height: 8,
45                button_width: 8,
46                button_height: 8,
47                hover: {
48                    color: foreground(theme.lowest, "hovered"),
49                },
50            },
51        },
52    }
53}