1import chatPanel from "./chat-panel";
2import { backgroundColor, border, borderColor, player, text } from "./components";
3import editor from "./editor";
4import projectPanel from "./project-panel";
5import selectorModal from "./selector-modal";
6import Theme from "./theme";
7import workspace from "./workspace";
8
9export const panel = {
10 padding: { top: 12, left: 12, bottom: 12, right: 12 },
11};
12
13export default function app(theme: Theme): Object {
14 return {
15 selector: selectorModal(theme),
16 workspace: workspace(theme),
17 editor: editor(theme),
18 projectDiagnostics: {
19 background: backgroundColor(theme, 300),
20 tabIconSpacing: 4,
21 tabIconWidth: 13,
22 tabSummarySpacing: 10,
23 emptyMessage: {
24 ...text(theme, "sans", "primary", { size: "lg" }),
25 },
26 statusBarItem: {
27 ...text(theme, "sans", "muted"),
28 margin: {
29 right: 10,
30 },
31 },
32 },
33 projectPanel: projectPanel(theme),
34 chatPanel: chatPanel(theme),
35 contactsPanel: {
36 extends: "$panel",
37 hostRowHeight: 28,
38 treeBranchColor: borderColor(theme, "muted"),
39 treeBranchWidth: 1,
40 hostAvatar: {
41 cornerRadius: 10,
42 width: 18,
43 },
44 hostUsername: {
45 ...text(theme, "mono", "muted"),
46 padding: {
47 left: 8,
48 },
49 },
50 hoveredSharedProject: {
51 extends: "$contacts_panel.sharedProject",
52 background: theme.editor.line.active.value,
53 cornerRadius: 6,
54 },
55 hoveredUnsharedProject: {
56 extends: "$contacts_panel.unsharedProject",
57 background: theme.editor.line.active.value,
58 cornerRadius: 6,
59 },
60 project: {
61 guestAvatarSpacing: 4,
62 height: 24,
63 guestAvatar: {
64 cornerRadius: 8,
65 width: 14,
66 },
67 name: {
68 extends: text(theme, "mono", "secondary"),
69 margin: {
70 right: 6,
71 },
72 },
73 padding: {
74 left: 8,
75 },
76 },
77 sharedProject: {
78 extends: "$contactsPanel.project",
79 name: {
80 color: text(theme, "mono", "primary"),
81 },
82 },
83 unsharedProject: {
84 extends: "$contactsPanel.project",
85 },
86 },
87 search: {
88 background: backgroundColor(theme, 300),
89 matchBackground: theme.editor.highlight.match,
90 tabIconSpacing: 4,
91 tabIconWidth: 14,
92 activeHoveredOptionButton: {
93 extends: "$search.option_button",
94 background: backgroundColor(theme, 100),
95 },
96 activeOptionButton: {
97 extends: "$search.option_button",
98 background: backgroundColor(theme, 100),
99 },
100 editor: {
101 background: backgroundColor(theme, 500),
102 cornerRadius: 6,
103 maxWidth: 400,
104 placeholderText: text(theme, "mono", "placeholder"),
105 selection: player(theme, 1).selection,
106 text: text(theme, "mono", "primary"),
107 border: border(theme, "primary"),
108 margin: {
109 bottom: 5,
110 left: 5,
111 right: 5,
112 top: 5,
113 },
114 padding: {
115 bottom: 3,
116 left: 13,
117 right: 13,
118 top: 3,
119 },
120 },
121 hoveredOptionButton: {
122 extends: "$search.optionButton",
123 background: backgroundColor(theme, 100),
124 },
125 invalidEditor: {
126 extends: "$search.editor",
127 border: border(theme, "error"),
128 },
129 matchIndex: {
130 ...text(theme, "mono", "secondary"),
131 padding: 6,
132 },
133 optionButton: {
134 ...text(theme, "mono", "secondary"),
135 background: backgroundColor(theme, 300),
136 cornerRadius: 6,
137 border: border(theme, "primary"),
138 margin: {
139 left: 1,
140 right: 1,
141 },
142 padding: {
143 bottom: 1,
144 left: 6,
145 right: 6,
146 top: 1,
147 },
148 },
149 optionButtonGroup: {
150 padding: {
151 left: 2,
152 right: 2,
153 },
154 },
155 resultsStatus: {
156 ...text(theme, "mono", "primary"),
157 size: 18,
158 },
159 },
160 };
161}