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