1import { ColorScheme } from "../common";
 2import { interactive, toggleable } from "../element"
 3import { background, foreground, text } from "./components";
 4
 5const titlebarButton = (theme: ColorScheme) => toggleable({
 6    base: interactive({
 7        base: {
 8            cornerRadius: 6,
 9            height: 24,
10            width: 24,
11            padding: {
12                top: 4,
13                bottom: 4,
14                left: 4,
15                right: 4,
16            },
17            ...text(theme.lowest, "sans", { size: "xs" }),
18            background: background(theme.lowest),
19        },
20        state: {
21            hovered: {
22                ...text(theme.lowest, "sans", "hovered", {
23                    size: "xs",
24                }),
25                background: background(theme.lowest, "hovered"),
26            },
27            clicked: {
28                ...text(theme.lowest, "sans", "pressed", {
29                    size: "xs",
30                }),
31                background: background(theme.lowest, "pressed"),
32            },
33        },
34    }),
35    state: {
36        active: {
37            default: {
38                ...text(theme.lowest, "sans", "active", { size: "xs" }),
39                background: background(theme.middle),
40            },
41            hovered: {
42                ...text(theme.lowest, "sans", "active", { size: "xs" }),
43                background: background(theme.middle, "hovered"),
44            },
45            clicked: {
46                ...text(theme.lowest, "sans", "active", { size: "xs" }),
47                background: background(theme.middle, "pressed"),
48            },
49        },
50    }
51});
52
53/**
54* Opens the User Menu when toggled
55*
56* When logged in shows the user's avatar and a chevron,
57* When logged out only shows a chevron.
58*/
59function userMenuButton(theme: ColorScheme) {
60    return {
61        userMenu: titlebarButton(theme),
62        avatar: {
63            icon_width: 16,
64            icon_height: 16,
65            cornerRadius: 4,
66            outerWidth: 10,
67            outerCornerRadius: 10
68        },
69        icon: {
70            width: 11,
71            height: 11,
72            color: foreground(theme.lowest)
73        }
74    }
75}
76
77export function titlebar(theme: ColorScheme) {
78    return {
79        userMenuButton: userMenuButton(theme)
80    }
81}