1import { useTheme } from "../common"
 2import { toggleable_icon_button } from "../component/icon_button"
 3import { interactive, toggleable } from "../element"
 4import { background, border, foreground, text } from "./components"
 5import { text_button } from "../component"
 6
 7export const toolbar = () => {
 8    const theme = useTheme()
 9
10    return {
11        height: 42,
12        padding: { left: 8, right: 8 },
13        background: background(theme.highest),
14        border: border(theme.highest, { bottom: true }),
15        item_spacing: 4,
16        toggleable_tool: toggleable_icon_button({
17            margin: { left: 4 },
18            variant: "ghost",
19            active_color: "accent",
20        }),
21        breadcrumb_height: 24,
22        breadcrumbs: interactive({
23            base: {
24                ...text(theme.highest, "sans", "variant"),
25                corner_radius: 6,
26                padding: {
27                    left: 4,
28                    right: 4,
29                }
30            },
31            state: {
32                hovered: {
33                    color: foreground(theme.highest, "on", "hovered"),
34                    background: background(theme.highest, "on", "hovered"),
35                },
36            },
37        }),
38        toggleable_text_tool: toggleable({
39            state: {
40                inactive: text_button({
41                    disabled: true,
42                    variant: "ghost",
43                    layer: theme.highest,
44                    margin: { left: 4 },
45                    text_properties: { size: "sm" },
46                    border: border(theme.middle),
47                }),
48                active: text_button({
49                    variant: "ghost",
50                    layer: theme.highest,
51                    margin: { left: 4 },
52                    text_properties: { size: "sm" },
53                    border: border(theme.middle),
54                }),
55            }
56        }),
57    }
58}