1import { background, border, text } from "./components"
 2import { icon_button } from "../component/icon_button"
 3import { useTheme } from "../theme"
 4import { interactive } from "../element"
 5
 6export default function (): any {
 7    const theme = useTheme()
 8    const layer = theme.middle
 9
10    return {
11        background: background(layer),
12        avatar: {
13            icon_width: 24,
14            icon_height: 24,
15            corner_radius: 12,
16            outer_width: 24,
17            outer_corner_radius: 24,
18        },
19        title: {
20            ...text(layer, "sans", "default"),
21            padding: { left: 8, right: 8 },
22            border: border(layer, { bottom: true }),
23        },
24        title_height: 32,
25        title_icon: {
26            asset: "icons/feedback.svg",
27            color: text(theme.lowest, "sans", "default").color,
28            dimensions: {
29                width: 16,
30                height: 16,
31            },
32        },
33        read_text: {
34            padding: { top: 4, bottom: 4 },
35            ...text(layer, "sans", "disabled"),
36        },
37        unread_text: {
38            padding: { top: 4, bottom: 4 },
39            ...text(layer, "sans", "base"),
40        },
41        button: interactive({
42            base: {
43                ...text(theme.lowest, "sans", "on", { size: "xs" }),
44                background: background(theme.lowest, "on"),
45                padding: 4,
46                corner_radius: 6,
47                margin: { left: 6 },
48            },
49
50            state: {
51                hovered: {
52                    background: background(theme.lowest, "on", "hovered"),
53                },
54            },
55        }),
56        timestamp: text(layer, "sans", "base", "disabled"),
57        avatar_container: {
58            padding: {
59                right: 6,
60                left: 2,
61                top: 2,
62                bottom: 2,
63            },
64        },
65        list: {
66            padding: {
67                left: 8,
68                right: 8,
69            },
70        },
71        icon_button: icon_button({
72            variant: "ghost",
73            color: "variant",
74            size: "sm",
75        }),
76        sign_in_prompt: {
77            default: text(layer, "sans", "base"),
78        },
79    }
80}