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