56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { background, foreground, text } from "./components"
|
|
import { interactive } from "../element"
|
|
import { useTheme } from "../theme"
|
|
|
|
export default function contact_notification(): any {
|
|
const theme = useTheme()
|
|
|
|
const avatar_size = 12
|
|
const header_padding = 8
|
|
|
|
return {
|
|
header_avatar: {
|
|
height: avatar_size,
|
|
width: avatar_size,
|
|
corner_radius: 6,
|
|
},
|
|
header_message: {
|
|
...text(theme.lowest, "sans", { size: "xs" }),
|
|
margin: { left: header_padding, right: header_padding },
|
|
},
|
|
header_height: 18,
|
|
body_message: {
|
|
...text(theme.lowest, "sans", { size: "xs" }),
|
|
margin: { left: avatar_size + header_padding, top: 6, bottom: 6 },
|
|
},
|
|
button: interactive({
|
|
base: {
|
|
...text(theme.lowest, "sans", "on", { size: "xs" }),
|
|
background: background(theme.lowest, "on"),
|
|
padding: 4,
|
|
corner_radius: 6,
|
|
margin: { left: 6 },
|
|
},
|
|
|
|
state: {
|
|
hovered: {
|
|
background: background(theme.lowest, "on", "hovered"),
|
|
},
|
|
},
|
|
}),
|
|
|
|
dismiss_button: {
|
|
default: {
|
|
color: foreground(theme.lowest, "variant"),
|
|
icon_width: 14,
|
|
icon_height: 14,
|
|
button_width: 14,
|
|
button_height: 14,
|
|
hover: {
|
|
color: foreground(theme.lowest, "hovered"),
|
|
},
|
|
},
|
|
},
|
|
}
|
|
}
|