app.ts

 1import Theme from "../themes/theme";
 2import chatPanel from "./chatPanel";
 3import { backgroundColor, borderColor, text } from "./components";
 4import editor from "./editor";
 5import projectPanel from "./projectPanel";
 6import search from "./search";
 7import selectorModal from "./selectorModal";
 8import workspace from "./workspace";
 9
10export const panel = {
11  padding: { top: 12, left: 12, bottom: 12, right: 12 },
12};
13
14export default function app(theme: Theme): Object {
15  return {
16    selector: selectorModal(theme),
17    workspace: workspace(theme),
18    editor: editor(theme),
19    projectDiagnostics: {
20      background: backgroundColor(theme, 300),
21      tabIconSpacing: 4,
22      tabIconWidth: 13,
23      tabSummarySpacing: 10,
24      emptyMessage: {
25        ...text(theme, "sans", "primary", { size: "lg" }),
26      },
27      statusBarItem: {
28        ...text(theme, "sans", "muted"),
29        margin: {
30          right: 10,
31        },
32      },
33    },
34    projectPanel: projectPanel(theme),
35    chatPanel: chatPanel(theme),
36    contactsPanel: {
37      ...panel,
38      hostRowHeight: 28,
39      treeBranchColor: borderColor(theme, "muted"),
40      treeBranchWidth: 1,
41      hostAvatar: {
42        cornerRadius: 10,
43        width: 18,
44      },
45      hostUsername: {
46        ...text(theme, "mono", "muted"),
47        padding: {
48          left: 8,
49        },
50      },
51      hoveredSharedProject: {
52        extends: "$contacts_panel.sharedProject",
53        background: theme.editor.line.active.value,
54        cornerRadius: 6,
55      },
56      hoveredUnsharedProject: {
57        extends: "$contacts_panel.unsharedProject",
58        background: theme.editor.line.active.value,
59        cornerRadius: 6,
60      },
61      project: {
62        guestAvatarSpacing: 4,
63        height: 24,
64        guestAvatar: {
65          cornerRadius: 8,
66          width: 14,
67        },
68        name: {
69          extends: text(theme, "mono", "secondary"),
70          margin: {
71            right: 6,
72          },
73        },
74        padding: {
75          left: 8,
76        },
77      },
78      sharedProject: {
79        extends: "$contactsPanel.project",
80        name: {
81          color: text(theme, "mono", "primary"),
82        },
83      },
84      unsharedProject: {
85        extends: "$contactsPanel.project",
86      },
87    },
88    search: search(theme),
89  };
90}