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: 5,
53 padding: { left: 5, right: 5 },
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: 8,
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, "ok"),
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 margin: { right: 20 }
142 },
143 groupRight: {
144 margin: { left: 20 }
145 },
146 item: { ...sidebarButton },
147 itemHover: { ...sidebarButton },
148 itemActive: {
149 ...sidebarButton,
150 iconColor: iconColor(theme, "active"),
151 background: backgroundColor(theme, 300, "active"),
152 },
153 },
154 },
155 titlebar: {
156 avatarWidth: 18,
157 height: 32,
158 background: backgroundColor(theme, 100),
159 padding: {
160 left: 80,
161 },
162 title: text(theme, "sans", "primary"),
163 avatar: {
164 cornerRadius: 10,
165 border: {
166 color: "#00000088",
167 width: 1,
168 },
169 },
170 avatarRibbon: {
171 height: 3,
172 width: 12,
173 // TODO: The background for this ideally should be
174 // set with a token, not hardcoded in rust
175 },
176 border: border(theme, "primary", { bottom: true }),
177 signInPrompt,
178 hoveredSignInPrompt: {
179 ...signInPrompt,
180 ...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 ...shareIcon,
191 color: iconColor(theme, "secondary")
192 },
193 hoveredShareIcon: {
194 ...shareIcon,
195 background: backgroundColor(theme, 100, "hovered"),
196 color: iconColor(theme, "secondary"),
197 },
198 hoveredActiveShareIcon: {
199 ...shareIcon,
200 background: backgroundColor(theme, 100, "hovered"),
201 color: iconColor(theme, "active"),
202 },
203 activeShareIcon: {
204 ...shareIcon,
205 background: backgroundColor(theme, 100, "active"),
206 color: iconColor(theme, "active"),
207 },
208 outdatedWarning: {
209 ...text(theme, "sans", "warning"),
210 size: 13,
211 margin: { right: 6 }
212 },
213 },
214 toolbar: {
215 height: 34,
216 background: backgroundColor(theme, 500),
217 border: border(theme, "secondary", { bottom: true }),
218 itemSpacing: 8,
219 padding: { left: 16, right: 8, top: 4, bottom: 4 },
220 },
221 breadcrumbs: {
222 ...text(theme, "mono", "secondary"),
223 padding: { left: 6 },
224 },
225 disconnectedOverlay: {
226 ...text(theme, "sans", "active"),
227 background: "#000000aa",
228 },
229 };
230}