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 elevation = colorScheme.lowest;
15 const layer = elevation.bottom;
16 const titlebarPadding = 6;
17
18 return {
19 background: background(layer),
20 joiningProjectAvatar: {
21 cornerRadius: 40,
22 width: 80,
23 },
24 joiningProjectMessage: {
25 padding: 12,
26 ...text(layer, "sans", { size: "lg" }),
27 },
28 leaderBorderOpacity: 0.7,
29 leaderBorderWidth: 2.0,
30 tabBar: tabBar(colorScheme),
31 modal: {
32 margin: {
33 bottom: 52,
34 top: 52,
35 },
36 cursor: "Arrow",
37 },
38 sidebar: {
39 initialSize: 240,
40 border: border(
41 layer,
42 { left: true, right: true }
43 ),
44 },
45 paneDivider: {
46 color: borderColor(layer),
47 width: 1,
48 },
49 statusBar: statusBar(colorScheme),
50 titlebar: {
51 height: 33, // 32px + 1px for overlaid border
52 background: background(layer),
53 border: border(layer, { bottom: true, overlay: true }),
54 padding: {
55 left: 80,
56 right: titlebarPadding,
57 },
58
59 // Project
60 title: text(layer, "sans", "variant"),
61
62 // Collaborators
63 avatarWidth: 18,
64 avatarMargin: 8,
65 avatar: {
66 cornerRadius: 10,
67 border: {
68 color: "#00000088",
69 width: 1,
70 },
71 },
72 avatarRibbon: {
73 height: 3,
74 width: 12,
75 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
76 },
77
78 // Sign in buttom
79 // FlatButton, Variant
80 signInPrompt: {
81 ...text(layer, "sans", { size: "xs" }),
82 background: background(layer),
83 border: border(layer),
84 cornerRadius: 6,
85 padding: {
86 top: 1,
87 bottom: 1,
88 left: 8,
89 right: 8,
90 },
91 hover: {
92 ...text(layer, "sans", "hovered", { size: "xs" }),
93 background: background(layer, "hovered"),
94 },
95 },
96
97 // Offline Indicator
98 offlineIcon: {
99 color: foreground(layer, "variant"),
100 width: 16,
101 margin: {
102 left: titlebarPadding,
103 },
104 padding: {
105 right: 4,
106 },
107 },
108
109 // Notice that the collaboration server is out of date
110 outdatedWarning: {
111 ...text(layer, "sans", "warning", { size: "xs" }),
112 background: withOpacity(background(layer, "warning"), 0.3),
113 border: border(layer, "warning"),
114 margin: {
115 left: titlebarPadding,
116 },
117 padding: {
118 left: 8,
119 right: 8,
120 },
121 cornerRadius: 6,
122 },
123 },
124
125 toolbar: {
126 height: 34,
127 background: background(elevation.top),
128 border: border(elevation.top, { bottom: true }),
129 itemSpacing: 8,
130 navButton: {
131 color: foreground(elevation.top, "on"),
132 iconWidth: 12,
133 buttonWidth: 24,
134 cornerRadius: 6,
135 hover: {
136 color: foreground(elevation.top, "on", "hovered"),
137 background: background(elevation.top, "on", "hovered"),
138 },
139 disabled: {
140 color: foreground(elevation.top, "on", "disabled"),
141 },
142 },
143 padding: { left: 8, right: 8, top: 4, bottom: 4 },
144 },
145 breadcrumbs: {
146 ...text(layer, "mono", "variant"),
147 padding: { left: 6 },
148 },
149 disconnectedOverlay: {
150 ...text(layer, "sans"),
151 background: withOpacity(background(layer), 0.8),
152 },
153 notification: {
154 margin: { top: 10 },
155 background: background(elevation.above.middle),
156 cornerRadius: 6,
157 padding: 12,
158 border: border(elevation.above.middle),
159 shadow: elevation.above.shadow,
160 },
161 notifications: {
162 width: 400,
163 margin: { right: 10, bottom: 10 },
164 },
165 dock: {
166 initialSizeRight: 640,
167 initialSizeBottom: 480,
168 wash_color: withOpacity(background(elevation.top), 0.5),
169 panel: {
170 border: border(elevation.top),
171 },
172 maximized: {
173 margin: 32,
174 border: border(elevation.above.top, { "overlay": true }),
175 shadow: elevation.above.shadow,
176 }
177 }
178 };
179}