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