1import { useTheme } from "../common"
 2import { toggleable_icon_button } from "../component/icon_button"
 3import { interactive } from "../element"
 4import { background, border, foreground, text } from "./components"
 5
 6export const toolbar = () => {
 7    const theme = useTheme()
 8
 9    return {
10        height: 32,
11        padding: { left: 4, right: 4, top: 4, bottom: 4 },
12        background: background(theme.highest),
13        border: border(theme.highest, { bottom: true }),
14        item_spacing: 4,
15        toggleable_tool: toggleable_icon_button({
16            margin: { left: 4 },
17            variant: "ghost",
18            active_color: "accent",
19        }),
20        breadcrumb_height: 24,
21        breadcrumbs: interactive({
22            base: {
23                ...text(theme.highest, "sans", "variant"),
24                corner_radius: 6,
25                padding: {
26                    left: 6,
27                    right: 6,
28                },
29            },
30            state: {
31                hovered: {
32                    color: foreground(theme.highest, "on", "hovered"),
33                    background: background(theme.highest, "on", "hovered"),
34                },
35            },
36        }),
37    }
38}