1import Theme from "../themes/theme";
2import { backgroundColor, border, iconColor, text } from "./components";
3
4export default function workspace(theme: Theme) {
5 const tab = {
6 height: 32,
7 background: backgroundColor(theme, 300),
8 iconClose: iconColor(theme, "muted"),
9 iconCloseActive: iconColor(theme, "active"),
10 iconConflict: iconColor(theme, "warning"),
11 iconDirty: iconColor(theme, "info"),
12 iconWidth: 8,
13 spacing: 8,
14 text: text(theme, "sans", "secondary", { size: "sm" }),
15 border: border(theme, "primary", {
16 left: true,
17 bottom: true,
18 overlay: true,
19 }),
20 padding: {
21 left: 8,
22 right: 8,
23 },
24 };
25
26 const activeTab = {
27 ...tab,
28 background: backgroundColor(theme, 500),
29 text: text(theme, "sans", "active", { size: "sm" }),
30 border: {
31 ...tab.border,
32 bottom: false,
33 },
34 };
35
36 const diagnosticSummary = {
37 cornerRadius: 6,
38 padding: { left: 6, right: 6 },
39 ...text(theme, "sans", "primary", { size: "sm" }),
40 };
41
42 return {
43 background: backgroundColor(theme, 300),
44 leaderBorderOpacity: 0.7,
45 leaderBorderWidth: 2.0,
46 tab,
47 activeTab,
48 modal: {
49 margin: {
50 bottom: 52,
51 top: 52,
52 },
53 cursor: "Arrow"
54 },
55 sidebarResizeHandle: {
56 background: border(theme, "primary").color,
57 padding: {
58 left: 1,
59 },
60 },
61 paneDivider: {
62 color: border(theme, "secondary").color,
63 width: 1,
64 },
65 statusBar: {
66 height: 30,
67 itemSpacing: 8,
68 padding: {
69 top: 1,
70 bottom: 1,
71 left: 6,
72 right: 6,
73 },
74 border: border(theme, "primary", { top: true, overlay: true }),
75 cursorPosition: text(theme, "sans", "muted"),
76 autoUpdateProgressMessage: text(theme, "sans", "muted"),
77 autoUpdateDoneMessage: text(theme, "sans", "muted"),
78 lspStatus: {
79 iconSpacing: 4,
80 iconWidth: 14,
81 height: 18,
82 cornerRadius: 6,
83 padding: { left: 6, right: 6 },
84 message: text(theme, "sans", "muted"),
85 iconColor: iconColor(theme, "muted"),
86 hover: {
87 message: text(theme, "sans", "primary"),
88 iconColor: iconColor(theme, "primary"),
89 background: backgroundColor(theme, 300, "hovered"),
90 }
91 },
92 diagnostics: {
93 height: 16,
94 summaryOk: {
95 ...diagnosticSummary,
96 hover: {
97 background: backgroundColor(theme, 300, "hovered"),
98 }
99 },
100 summaryWarning: {
101 ...diagnosticSummary,
102 background: backgroundColor(theme, "warning"),
103 border: border(theme, "warning"),
104 hover: {
105 background: backgroundColor(theme, "warning", "hovered"),
106 }
107 },
108 summaryError: {
109 ...diagnosticSummary,
110 background: backgroundColor(theme, "error"),
111 border: border(theme, "error"),
112 hover: {
113 background: backgroundColor(theme, "error", "hovered"),
114 }
115 },
116 message: {
117 ...text(theme, "sans", "muted"),
118 hover: text(theme, "sans", "secondary"),
119 },
120 iconColorOk: iconColor(theme, "secondary"),
121 iconColorWarning: iconColor(theme, "warning"),
122 iconColorError: iconColor(theme, "error"),
123 iconWidth: 14,
124 iconSpacing: 2,
125 summarySpacing: 6,
126 },
127 sidebarButtons: {
128 groupLeft: {},
129 groupRight: {},
130 item: {
131 iconSize: 14,
132 padding: { top: 3, bottom: 3, left: 6, right: 6 },
133 cornerRadius: 6,
134 iconColor: iconColor(theme, "secondary"),
135 hover: {
136 iconColor: iconColor(theme, "primary"),
137 background: backgroundColor(theme, 300, "hovered"),
138 },
139 active: {
140 iconColor: iconColor(theme, "active"),
141 background: backgroundColor(theme, 300, "active"),
142 }
143 },
144 },
145 },
146 titlebar: {
147 avatarWidth: 18,
148 height: 32,
149 background: backgroundColor(theme, 100),
150 padding: {
151 left: 80,
152 },
153 title: text(theme, "sans", "primary"),
154 avatar: {
155 cornerRadius: 10,
156 border: {
157 color: "#00000088",
158 width: 1,
159 },
160 },
161 avatarRibbon: {
162 height: 3,
163 width: 12,
164 // TODO: The background for this ideally should be
165 // set with a token, not hardcoded in rust
166 },
167 border: border(theme, "primary", { bottom: true }),
168 signInPrompt: {
169 border: border(theme, "primary"),
170 cornerRadius: 6,
171 margin: {
172 top: 1,
173 right: 6,
174 },
175 padding: {
176 left: 6,
177 right: 6,
178 },
179 ...text(theme, "sans", "secondary", { size: "xs" }),
180 hover: text(theme, "sans", "active", { size: "xs" }),
181 },
182 offlineIcon: {
183 color: iconColor(theme, "secondary"),
184 width: 16,
185 padding: {
186 right: 4,
187 },
188 },
189 shareIcon: {
190 cornerRadius: 6,
191 margin: { top: 3, bottom: 2 },
192 color: iconColor(theme, "secondary"),
193 hover: {
194 background: backgroundColor(theme, 100, "hovered"),
195 color: iconColor(theme, "secondary"),
196 },
197 active: {
198 background: backgroundColor(theme, 100, "active"),
199 color: iconColor(theme, "active"),
200 },
201 activeHover: {
202 background: backgroundColor(theme, 100, "hovered"),
203 color: iconColor(theme, "active"),
204 }
205 },
206 outdatedWarning: {
207 ...text(theme, "sans", "warning"),
208 size: 13,
209 margin: { right: 6 }
210 },
211 },
212 toolbar: {
213 height: 34,
214 background: backgroundColor(theme, 500),
215 border: border(theme, "secondary", { bottom: true }),
216 itemSpacing: 8,
217 padding: { left: 16, right: 8, top: 4, bottom: 4 },
218 },
219 breadcrumbs: {
220 ...text(theme, "mono", "secondary"),
221 padding: { left: 6 },
222 },
223 disconnectedOverlay: {
224 ...text(theme, "sans", "active"),
225 background: "#000000aa",
226 },
227 };
228}