import { interactive, toggleable } from "../element"import { Border, TextProperties, background, foreground, text,} from "../style_tree/components"import { useTheme, Theme } from "../theme"import { Button } from "./button"import { Margin } from "./icon_button" interface TextButtonOptions { layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"] variant?: Button.Variant color?: keyof Theme["lowest"] margin?: Partial<Margin> disabled?: boolean text_properties?: TextProperties border?: Border} type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof Theme["lowest"]} export function text_button({ variant = Button.variant.Default, color, layer, margin, disabled, text_properties, border,}: TextButtonOptions = {}) { const theme = useTheme() if (!color) color = "base" const background_color = variant === Button.variant.Ghost ? null : background(layer ?? theme.lowest, color) const text_options: TextProperties = { size: "xs", weight: "normal", ...text_properties, } const m = { top: margin?.top ?? 0, bottom: margin?.bottom ?? 0, left: margin?.left ?? 0, right: margin?.right ?? 0, } return interactive({ base: { corner_radius: 6, padding: { top: 1, bottom: 1, left: 6, right: 6, }, margin: m, button_height: 22, ...text(layer ?? theme.lowest, "sans", color, text_options), }, state: { default: { border, background: background_color, color: disabled ? foreground(layer ?? theme.lowest, "disabled") : foreground(layer ?? theme.lowest, color), }, hovered: disabled ? {} : { border, background: background( layer ?? theme.lowest, color, "hovered" ), color: foreground( layer ?? theme.lowest, color, "hovered" ), }, clicked: disabled ? {} : { border, background: background( layer ?? theme.lowest, color, "pressed" ), color: foreground( layer ?? theme.lowest, color, "pressed" ), }, }, })} export function toggleable_text_button( theme: Theme, { variant, color, active_color, margin }: ToggleableTextButtonOptions = {}) { if (!color) color = "base" return toggleable({ state: { inactive: text_button({ variant, color, margin }), active: text_button({ variant, color: active_color ? active_color : color, margin, layer: theme.middle, }), }, })}
import { interactive, toggleable } from "../element"
import {
Border,
TextProperties,
background,
foreground,
text,
} from "../style_tree/components"
import { useTheme, Theme } from "../theme"
import { Button } from "./button"
import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
variant?: Button.Variant
color?: keyof Theme["lowest"]
margin?: Partial<Margin>
disabled?: boolean
text_properties?: TextProperties
border?: Border
}
type ToggleableTextButtonOptions = TextButtonOptions & {
active_color?: keyof Theme["lowest"]
}
export function text_button({
variant = Button.variant.Default,
color,
layer,
margin,
disabled,
text_properties,
border,
}: TextButtonOptions = {}) {
const theme = useTheme()
if (!color) color = "base"
const background_color =
variant === Button.variant.Ghost
? null
: background(layer ?? theme.lowest, color)
const text_options: TextProperties = {
size: "xs",
weight: "normal",
...text_properties,
}
const m = {
top: margin?.top ?? 0,
bottom: margin?.bottom ?? 0,
left: margin?.left ?? 0,
right: margin?.right ?? 0,
}
return interactive({
base: {
corner_radius: 6,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
margin: m,
button_height: 22,
...text(layer ?? theme.lowest, "sans", color, text_options),
},
state: {
default: {
border,
background: background_color,
color: disabled
? foreground(layer ?? theme.lowest, "disabled")
: foreground(layer ?? theme.lowest, color),
},
hovered: disabled
? {}
: {
border,
background: background(
layer ?? theme.lowest,
color,
"hovered"
),
color: foreground(
layer ?? theme.lowest,
color,
"hovered"
),
},
clicked: disabled
? {}
: {
border,
background: background(
layer ?? theme.lowest,
color,
"pressed"
),
color: foreground(
layer ?? theme.lowest,
color,
"pressed"
),
},
},
})
}
export function toggleable_text_button(
theme: Theme,
{ variant, color, active_color, margin }: ToggleableTextButtonOptions = {}
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: text_button({ variant, color, margin }),
active: text_button({
variant,
color: active_color ? active_color : color,
margin,
layer: theme.middle,
}),
},
})
}