Add styles for user menu

styles/src/styleTree/app.ts

@@ -23,6 +23,7 @@ import feedback from "./feedback"
 import welcome from "./welcome"
 import copilot from "./copilot"
 import assistant from "./assistant"
+import { titlebar } from "./titlebar"
 
 export default function app(colorScheme: ColorScheme): Object {
     return {
@@ -36,6 +37,7 @@ export default function app(colorScheme: ColorScheme): Object {
         incomingCallNotification: incomingCallNotification(colorScheme),
         picker: picker(colorScheme),
         workspace: workspace(colorScheme),
+        titlebar: titlebar(colorScheme),
         copilot: copilot(colorScheme),
         welcome: welcome(colorScheme),
         contextMenu: contextMenu(colorScheme),

styles/src/styleTree/titlebar.ts

@@ -0,0 +1,81 @@
+import { ColorScheme } from "../common";
+import { interactive, toggleable } from "../element"
+import { background, foreground, text } from "./components";
+
+const titlebarButton = (theme: ColorScheme) => toggleable({
+    base: interactive({
+        base: {
+            cornerRadius: 6,
+            height: 24,
+            width: 24,
+            padding: {
+                top: 4,
+                bottom: 4,
+                left: 4,
+                right: 4,
+            },
+            ...text(theme.lowest, "sans", { size: "xs" }),
+            background: background(theme.lowest),
+        },
+        state: {
+            hovered: {
+                ...text(theme.lowest, "sans", "hovered", {
+                    size: "xs",
+                }),
+                background: background(theme.lowest, "hovered"),
+            },
+            clicked: {
+                ...text(theme.lowest, "sans", "pressed", {
+                    size: "xs",
+                }),
+                background: background(theme.lowest, "pressed"),
+            },
+        },
+    }),
+    state: {
+        active: {
+            default: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle),
+            },
+            hovered: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle, "hovered"),
+            },
+            clicked: {
+                ...text(theme.lowest, "sans", "active", { size: "xs" }),
+                background: background(theme.middle, "pressed"),
+            },
+        },
+    }
+});
+
+/**
+* Opens the User Menu when toggled
+*
+* When logged in shows the user's avatar and a chevron,
+* When logged out only shows a chevron.
+*/
+function userMenuButton(theme: ColorScheme) {
+    return {
+        userMenu: titlebarButton(theme),
+        avatar: {
+            icon_width: 16,
+            icon_height: 16,
+            cornerRadius: 4,
+            outerWidth: 10,
+            outerCornerRadius: 10
+        },
+        icon: {
+            width: 11,
+            height: 11,
+            color: foreground(theme.lowest)
+        }
+    }
+}
+
+export function titlebar(theme: ColorScheme) {
+    return {
+        userMenuButton: userMenuButton(theme)
+    }
+}