notification_panel.ts

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