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