Max Brunsfeld
56d9a578bd
* increase horizontal padding of toolbar itself, remove padding that was added to individual toolbar items like feedback button. * make feedback info text and breadcrumbs have the same additional padding as quick action buttons.
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { useTheme } from "../common"
|
|
import { toggleable_icon_button } from "../component/icon_button"
|
|
import { interactive, toggleable } from "../element"
|
|
import { background, border, foreground, text } from "./components"
|
|
import { text_button } from "../component"
|
|
|
|
export const toolbar = () => {
|
|
const theme = useTheme()
|
|
|
|
return {
|
|
height: 42,
|
|
padding: { left: 8, right: 8 },
|
|
background: background(theme.highest),
|
|
border: border(theme.highest, { bottom: true }),
|
|
item_spacing: 4,
|
|
toggleable_tool: toggleable_icon_button({
|
|
margin: { left: 4 },
|
|
variant: "ghost",
|
|
active_color: "accent",
|
|
}),
|
|
breadcrumb_height: 24,
|
|
breadcrumbs: interactive({
|
|
base: {
|
|
...text(theme.highest, "sans", "variant"),
|
|
corner_radius: 6,
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
}
|
|
},
|
|
state: {
|
|
hovered: {
|
|
color: foreground(theme.highest, "on", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
},
|
|
},
|
|
}),
|
|
toggleable_text_tool: toggleable({
|
|
state: {
|
|
inactive: text_button({
|
|
disabled: true,
|
|
variant: "ghost",
|
|
layer: theme.highest,
|
|
margin: { left: 4 },
|
|
text_properties: { size: "sm" },
|
|
border: border(theme.middle),
|
|
}),
|
|
active: text_button({
|
|
variant: "ghost",
|
|
layer: theme.highest,
|
|
margin: { left: 4 },
|
|
text_properties: { size: "sm" },
|
|
border: border(theme.middle),
|
|
}),
|
|
}
|
|
}),
|
|
}
|
|
}
|