1import { ColorScheme } from "../common";
 2import { interactive, toggleable } from "../element";
 3import { TextProperties, background, foreground, text } from "../styleTree/components";
 4import { Margin } from "./icon_button";
 5
 6interface TextButtonOptions {
 7    layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
 8    color?: keyof ColorScheme['lowest'];
 9    margin?: Partial<Margin>;
10    text_properties?: TextProperties;
11}
12
13type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
14
15export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
16    if (!color)
17        color = "base";
18
19    const text_options: TextProperties = {
20        size: "xs",
21        weight: "normal",
22        ...text_properties
23    }
24
25    const m = {
26        top: margin?.top ?? 0,
27        bottom: margin?.bottom ?? 0,
28        left: margin?.left ?? 0,
29        right: margin?.right ?? 0,
30    }
31
32    return interactive({
33        base: {
34            corner_radius: 6,
35            padding: {
36                top: 1,
37                bottom: 1,
38                left: 6,
39                right: 6,
40            },
41            margin: m,
42            button_height: 22,
43            ...text(layer ?? theme.lowest, "sans", color, text_options)
44        },
45        state: {
46            default: {
47                background: background(layer ?? theme.lowest, color),
48                color: foreground(layer ?? theme.lowest, color),
49            },
50            hovered: {
51                background: background(layer ?? theme.lowest, color, "hovered"),
52                color: foreground(layer ?? theme.lowest, color, "hovered"),
53
54            },
55            clicked: {
56                background: background(layer ?? theme.lowest, color, "pressed"),
57                color: foreground(layer ?? theme.lowest, color, "pressed"),
58
59            },
60        },
61    });
62}
63
64export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
65    if (!color)
66        color = "base";
67
68    return toggleable({
69        state: {
70            inactive: text_button(theme, { color, margin }),
71            active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
72        }
73    })
74}