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