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