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