81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { background, border, text } from "./components"
|
|
import { icon_button } from "../component/icon_button"
|
|
import { useTheme } from "../theme"
|
|
import { interactive } from "../element"
|
|
|
|
export default function (): any {
|
|
const theme = useTheme()
|
|
const layer = theme.middle
|
|
|
|
return {
|
|
background: background(layer),
|
|
avatar: {
|
|
icon_width: 24,
|
|
icon_height: 24,
|
|
corner_radius: 12,
|
|
outer_width: 24,
|
|
outer_corner_radius: 24,
|
|
},
|
|
title: {
|
|
...text(layer, "sans", "default"),
|
|
padding: { left: 8, right: 8 },
|
|
border: border(layer, { bottom: true }),
|
|
},
|
|
title_height: 32,
|
|
title_icon: {
|
|
asset: "icons/feedback.svg",
|
|
color: text(theme.lowest, "sans", "default").color,
|
|
dimensions: {
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
},
|
|
read_text: {
|
|
padding: { top: 4, bottom: 4 },
|
|
...text(layer, "sans", "disabled"),
|
|
},
|
|
unread_text: {
|
|
padding: { top: 4, bottom: 4 },
|
|
...text(layer, "sans", "base"),
|
|
},
|
|
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"),
|
|
},
|
|
},
|
|
}),
|
|
timestamp: text(layer, "sans", "base", "disabled"),
|
|
avatar_container: {
|
|
padding: {
|
|
right: 6,
|
|
left: 2,
|
|
top: 2,
|
|
bottom: 2,
|
|
},
|
|
},
|
|
list: {
|
|
padding: {
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
},
|
|
icon_button: icon_button({
|
|
variant: "ghost",
|
|
color: "variant",
|
|
size: "sm",
|
|
}),
|
|
sign_in_prompt: {
|
|
default: text(layer, "sans", "base"),
|
|
},
|
|
}
|
|
}
|