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}