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