1import { backgroundColor, text } from "./components";
2import selectorModal from "./selector-modal";
3import workspace from "./workspace";
4import editor from "./editor";
5import Theme from "./theme";
6import projectPanel from "./project-panel";
7import chatPanel from "./chat-panel";
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: "$surface.100",
39 treeBranchWidth: 1,
40 hostAvatar: {
41 cornerRadius: 10,
42 width: 18,
43 },
44 hostUsername: {
45 extends: "$text.primary",
46 padding: {
47 left: 8,
48 },
49 },
50 hoveredSharedProject: {
51 background: "$state.hover",
52 cornerRadius: 6,
53 extends: "$contacts_panel.sharedProject",
54 },
55 hoveredUnsharedProject: {
56 background: "$state.hover",
57 cornerRadius: 6,
58 extends: "$contacts_panel.unsharedProject",
59 },
60 project: {
61 guestAvatarSpacing: 4,
62 height: 24,
63 guestAvatar: {
64 cornerRadius: 8,
65 width: 14,
66 },
67 name: {
68 extends: "$text.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.primary.color",
81 },
82 },
83 unsharedProject: {
84 extends: "$contactsPanel.project",
85 },
86 },
87 search: {
88 background: backgroundColor(theme, 300),
89 matchBackground: "$state.highlightedLine",
90 tabIconSpacing: 4,
91 tabIconWidth: 14,
92 activeHoveredOptionButton: {
93 background: "$surface.100",
94 extends: "$search.option_button",
95 },
96 activeOptionButton: {
97 background: "$surface.100",
98 extends: "$search.option_button",
99 },
100 editor: {
101 background: "$surface.500",
102 cornerRadius: 6,
103 maxWidth: 400,
104 placeholderText: "$text.muted",
105 selection: "$selection.host",
106 text: "$text.primary",
107 border: {
108 color: "$border.primary",
109 width: 1,
110 },
111 margin: {
112 bottom: 5,
113 left: 5,
114 right: 5,
115 top: 5,
116 },
117 padding: {
118 bottom: 3,
119 left: 13,
120 right: 13,
121 top: 3,
122 },
123 },
124 hoveredOptionButton: {
125 background: "$surface.100",
126 extends: "$search.optionButton",
127 },
128 invalidEditor: {
129 extends: "$search.editor",
130 border: {
131 color: "$status.bad",
132 width: 1,
133 },
134 },
135 matchIndex: {
136 extends: "$text.secondary",
137 padding: 6,
138 },
139 optionButton: {
140 background: backgroundColor(theme, 300),
141 cornerRadius: 6,
142 extends: "$text.secondary",
143 border: {
144 color: "$border.primary",
145 width: 1,
146 },
147 margin: {
148 left: 1,
149 right: 1,
150 },
151 padding: {
152 bottom: 1,
153 left: 6,
154 right: 6,
155 top: 1,
156 },
157 },
158 optionButtonGroup: {
159 padding: {
160 left: 2,
161 right: 2,
162 },
163 },
164 resultsStatus: {
165 extends: "$text.primary",
166 size: 18,
167 },
168 },
169 };
170}