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