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