workspace.ts

  1import Theme from "../themes/theme";
  2import { backgroundColor, border, iconColor, text } from "./components";
  3
  4export default function workspace(theme: Theme) {
  5    const signInPrompt = {
  6        ...text(theme, "sans", "secondary", { size: "xs" }),
  7        underline: true,
  8        padding: {
  9            right: 8,
 10        },
 11    };
 12
 13    const tab = {
 14        height: 32,
 15        background: backgroundColor(theme, 300),
 16        iconClose: iconColor(theme, "muted"),
 17        iconCloseActive: iconColor(theme, "active"),
 18        iconConflict: iconColor(theme, "warning"),
 19        iconDirty: iconColor(theme, "info"),
 20        iconWidth: 8,
 21        spacing: 10,
 22        text: text(theme, "mono", "secondary", { size: "sm" }),
 23        border: border(theme, "primary", {
 24            left: true,
 25            bottom: true,
 26            overlay: true,
 27        }),
 28        padding: {
 29            left: 12,
 30            right: 12,
 31        },
 32    };
 33
 34    const activeTab = {
 35        ...tab,
 36        background: backgroundColor(theme, 500),
 37        text: text(theme, "mono", "active", { size: "sm" }),
 38        border: {
 39            ...tab.border,
 40            bottom: false,
 41        },
 42    };
 43
 44    const sidebarItem = {
 45        height: 32,
 46        iconColor: iconColor(theme, "secondary"),
 47        iconSize: 18,
 48    };
 49    const sidebar = {
 50        width: 30,
 51        background: backgroundColor(theme, 300),
 52        border: border(theme, "primary", { right: true }),
 53        item: sidebarItem,
 54        activeItem: {
 55            ...sidebarItem,
 56            iconColor: iconColor(theme, "active"),
 57        },
 58        resizeHandle: {
 59            background: border(theme, "primary").color,
 60            padding: {
 61                left: 1,
 62            },
 63        },
 64    };
 65
 66    return {
 67        background: backgroundColor(theme, 300),
 68        leaderBorderOpacity: 0.7,
 69        leaderBorderWidth: 2.0,
 70        tab,
 71        activeTab,
 72        leftSidebar: {
 73            ...sidebar,
 74            border: border(theme, "primary", { right: true }),
 75        },
 76        rightSidebar: {
 77            ...sidebar,
 78            border: border(theme, "primary", { left: true }),
 79        },
 80        paneDivider: {
 81            color: border(theme, "secondary").color,
 82            width: 1,
 83        },
 84        status_bar: {
 85            height: 24,
 86            itemSpacing: 8,
 87            padding: {
 88                left: 6,
 89                right: 6,
 90            },
 91            cursorPosition: text(theme, "sans", "muted"),
 92            diagnosticMessage: text(theme, "sans", "muted"),
 93            lspMessage: text(theme, "sans", "muted"),
 94        },
 95        titlebar: {
 96            avatarWidth: 18,
 97            height: 32,
 98            background: backgroundColor(theme, 100),
 99            shareIconColor: iconColor(theme, "secondary"),
100            shareIconActiveColor: iconColor(theme, "feature"),
101            title: text(theme, "sans", "primary"),
102            avatar: {
103                cornerRadius: 10,
104                border: {
105                    color: "#00000088",
106                    width: 1,
107                },
108            },
109            avatarRibbon: {
110                height: 3,
111                width: 12,
112                // TODO: The background for this ideally should be 
113                // set with a token, not hardcoded in rust
114            },
115            border: border(theme, "primary", { bottom: true }),
116            signInPrompt,
117            hoveredSignInPrompt: {
118                ...signInPrompt,
119                ...text(theme, "sans", "active", { size: "xs" }),
120            },
121            offlineIcon: {
122                color: iconColor(theme, "secondary"),
123                width: 16,
124                padding: {
125                    right: 4,
126                },
127            },
128            outdatedWarning: {
129                ...text(theme, "sans", "warning"),
130                size: 13,
131            },
132        },
133        toolbar: {
134            height: 34,
135            background: backgroundColor(theme, 500),
136            border: border(theme, "secondary", { bottom: true }),
137            itemSpacing: 8,
138            padding: { left: 16, right: 8, top: 4, bottom: 4 },
139        },
140        breadcrumbs: {
141            ...text(theme, "mono", "secondary"),
142            padding: { left: 6 },
143        },
144        disconnectedOverlay: {
145            ...text(theme, "sans", "active"),
146            background: "#000000aa",
147        },
148    };
149}