1import { ColorScheme } from "../themes/common/colorScheme";
2import { withOpacity } from "../utils/color";
3import {
4 background,
5 border,
6 borderColor,
7 foreground,
8 text,
9} from "./components";
10import statusBar from "./statusBar";
11import tabBar from "./tabBar";
12
13export default function workspace(colorScheme: ColorScheme) {
14 const layer = colorScheme.lowest;
15 const titlebarPadding = 6;
16 const titlebarButton = {
17 cornerRadius: 6,
18 padding: {
19 top: 1,
20 bottom: 1,
21 left: 8,
22 right: 8,
23 },
24 ...text(layer, "sans", "variant", { size: "xs" }),
25 background: background(layer, "variant"),
26 border: border(layer),
27 hover: {
28 ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
29 background: background(layer, "variant", "hovered"),
30 border: border(layer, "variant", "hovered"),
31 },
32 };
33 const avatarWidth = 18;
34
35 return {
36 background: background(layer),
37 joiningProjectAvatar: {
38 cornerRadius: 40,
39 width: 80,
40 },
41 joiningProjectMessage: {
42 padding: 12,
43 ...text(layer, "sans", { size: "lg" }),
44 },
45 externalLocationMessage: {
46 background: background(colorScheme.middle, "accent"),
47 border: border(colorScheme.middle, "accent"),
48 cornerRadius: 6,
49 padding: 12,
50 margin: { bottom: 8, right: 8 },
51 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
52 },
53 leaderBorderOpacity: 0.7,
54 leaderBorderWidth: 2.0,
55 tabBar: tabBar(colorScheme),
56 modal: {
57 margin: {
58 bottom: 52,
59 top: 52,
60 },
61 cursor: "Arrow",
62 },
63 sidebar: {
64 initialSize: 240,
65 border: border(layer, { left: true, right: true }),
66 },
67 paneDivider: {
68 color: borderColor(layer),
69 width: 1,
70 },
71 statusBar: statusBar(colorScheme),
72 titlebar: {
73 avatarWidth,
74 avatarMargin: 8,
75 height: 33, // 32px + 1px for overlaid border
76 background: background(layer),
77 border: border(layer, { bottom: true, overlay: true }),
78 padding: {
79 left: 80,
80 right: titlebarPadding,
81 },
82
83 // Project
84 title: text(layer, "sans", "variant"),
85
86 // Collaborators
87 avatar: {
88 cornerRadius: avatarWidth / 2,
89 border: {
90 color: "#00000088",
91 width: 1,
92 },
93 },
94 inactiveAvatar: {
95 cornerRadius: avatarWidth / 2,
96 border: {
97 color: "#00000088",
98 width: 1,
99 },
100 grayscale: true,
101 },
102 avatarRibbon: {
103 height: 3,
104 width: 12,
105 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
106 },
107
108 // Sign in buttom
109 // FlatButton, Variant
110 signInPrompt: {
111 ...titlebarButton
112 },
113
114 // Offline Indicator
115 offlineIcon: {
116 color: foreground(layer, "variant"),
117 width: 16,
118 margin: {
119 left: titlebarPadding,
120 },
121 padding: {
122 right: 4,
123 },
124 },
125
126 // Notice that the collaboration server is out of date
127 outdatedWarning: {
128 ...text(layer, "sans", "warning", { size: "xs" }),
129 background: withOpacity(background(layer, "warning"), 0.3),
130 border: border(layer, "warning"),
131 margin: {
132 left: titlebarPadding,
133 },
134 padding: {
135 left: 8,
136 right: 8,
137 },
138 cornerRadius: 6,
139 },
140 toggleContactsButton: {
141 cornerRadius: 6,
142 color: foreground(layer, "variant"),
143 iconWidth: 8,
144 buttonWidth: 20,
145 active: {
146 background: background(layer, "variant", "active"),
147 color: foreground(layer, "variant", "active"),
148 },
149 hover: {
150 background: background(layer, "variant", "hovered"),
151 color: foreground(layer, "variant", "hovered"),
152 },
153 },
154 toggleContactsBadge: {
155 cornerRadius: 3,
156 padding: 2,
157 margin: { top: 3, left: 3 },
158 border: border(layer),
159 background: foreground(layer, "accent"),
160 },
161 shareButton: {
162 ...titlebarButton
163 }
164 },
165
166 toolbar: {
167 height: 34,
168 background: background(colorScheme.highest),
169 border: border(colorScheme.highest, { bottom: true }),
170 itemSpacing: 8,
171 navButton: {
172 color: foreground(colorScheme.highest, "on"),
173 iconWidth: 12,
174 buttonWidth: 24,
175 cornerRadius: 6,
176 hover: {
177 color: foreground(colorScheme.highest, "on", "hovered"),
178 background: background(colorScheme.highest, "on", "hovered"),
179 },
180 disabled: {
181 color: foreground(colorScheme.highest, "on", "disabled"),
182 },
183 },
184 padding: { left: 8, right: 8, top: 4, bottom: 4 },
185 },
186 breadcrumbs: {
187 ...text(layer, "mono", "variant"),
188 padding: { left: 6 },
189 },
190 disconnectedOverlay: {
191 ...text(layer, "sans"),
192 background: withOpacity(background(layer), 0.8),
193 },
194 notification: {
195 margin: { top: 10 },
196 background: background(colorScheme.middle),
197 cornerRadius: 6,
198 padding: 12,
199 border: border(colorScheme.middle),
200 shadow: colorScheme.popoverShadow,
201 },
202 notifications: {
203 width: 400,
204 margin: { right: 10, bottom: 10 },
205 },
206 dock: {
207 initialSizeRight: 640,
208 initialSizeBottom: 480,
209 wash_color: withOpacity(background(colorScheme.highest), 0.5),
210 panel: {
211 border: border(colorScheme.highest),
212 },
213 maximized: {
214 margin: 32,
215 border: border(colorScheme.highest, { overlay: true }),
216 shadow: colorScheme.modalShadow,
217 },
218 },
219 };
220}