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