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: 14,
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 border: border(theme, "primary"),
114 cornerRadius: 6,
115 margin: {
116 top: 1,
117 },
118 padding: {
119 left: 6,
120 right: 6,
121 },
122 ...text(theme, "sans", "secondary", { size: "xs" }),
123 hover: text(theme, "sans", "active", { size: "xs" }),
124 },
125 offlineIcon: {
126 color: iconColor(theme, "secondary"),
127 width: 16,
128 margin: {
129 left: titlebarPadding,
130 },
131 padding: {
132 right: 4,
133 },
134 },
135 outdatedWarning: {
136 ...text(theme, "sans", "warning", { size: "xs" }),
137 background: backgroundColor(theme, "warning"),
138 border: border(theme, "warning"),
139 margin: {
140 left: titlebarPadding,
141 },
142 padding: {
143 left: 6,
144 right: 6,
145 },
146 cornerRadius: 6,
147 },
148 },
149 toolbar: {
150 height: 34,
151 background: backgroundColor(theme, 500),
152 border: border(theme, "secondary", { bottom: true }),
153 itemSpacing: 8,
154 navButton: {
155 color: iconColor(theme, "secondary"),
156 iconWidth: 8,
157 buttonWidth: 18,
158 cornerRadius: 6,
159 hover: {
160 color: iconColor(theme, "active"),
161 background: backgroundColor(theme, 300),
162 },
163 disabled: {
164 color: withOpacity(iconColor(theme, "muted"), 0.6),
165 },
166 },
167 padding: { left: 16, right: 8, top: 4, bottom: 4 },
168 },
169 breadcrumbs: {
170 ...text(theme, "mono", "secondary"),
171 padding: { left: 6 },
172 },
173 disconnectedOverlay: {
174 ...text(theme, "sans", "active"),
175 background: withOpacity(theme.backgroundColor[500].base, 0.8),
176 },
177 notification: {
178 margin: { top: 10 },
179 background: backgroundColor(theme, 300),
180 cornerRadius: 6,
181 padding: 12,
182 border: border(theme, "primary"),
183 shadow: modalShadow(theme),
184 },
185 notifications: {
186 width: 380,
187 margin: { right: 10, bottom: 10 },
188 }
189 };
190}