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 avatarWidth: 18,
52 avatarMargin: 8,
53 height: 33,
54 background: background(layer),
55 padding: {
56 left: 80,
57 right: titlebarPadding,
58 },
59 title: text(layer, "sans"),
60 avatar: {
61 cornerRadius: 10,
62 border: {
63 color: "#00000088",
64 width: 1,
65 },
66 },
67 avatarRibbon: {
68 height: 3,
69 width: 12,
70 // TODO: The background for this ideally should be
71 // set with a token, not hardcoded in rust
72 },
73 border: border(layer, { bottom: true, overlay: true }),
74 signInPrompt: {
75 background: background(layer),
76 border: border(layer),
77 cornerRadius: 6,
78 margin: {
79 top: 1,
80 },
81 padding: {
82 top: 1,
83 bottom: 1,
84 left: 7,
85 right: 7,
86 },
87 ...text(layer, "sans", { size: "xs" }),
88 hover: {
89 ...text(layer, "sans", "on", "hovered", { size: "xs" }),
90 background: background(layer, "on", "hovered"),
91 border: border(layer, "on", "hovered"),
92 },
93 },
94 offlineIcon: {
95 color: foreground(layer, "on"),
96 width: 16,
97 margin: {
98 left: titlebarPadding,
99 },
100 padding: {
101 right: 4,
102 },
103 },
104 outdatedWarning: {
105 ...text(layer, "sans", "warning", { size: "xs" }),
106 background: background(layer, "warning"),
107 border: border(layer, "warning"),
108 margin: {
109 left: titlebarPadding,
110 },
111 padding: {
112 left: 6,
113 right: 6,
114 },
115 cornerRadius: 6,
116 },
117 },
118 toolbar: {
119 height: 34,
120 background: background(elevation.top),
121 border: border(elevation.top, "base", "variant", { bottom: true }),
122 itemSpacing: 8,
123 navButton: {
124 color: foreground(elevation.top, "on"),
125 iconWidth: 12,
126 buttonWidth: 24,
127 cornerRadius: 6,
128 hover: {
129 color: foreground(elevation.top, "on", "hovered"),
130 background: background(elevation.top, "on", "hovered"),
131 },
132 disabled: {
133 color: foreground(elevation.top, "on", "disabled"),
134 },
135 },
136 padding: { left: 8, right: 8, top: 4, bottom: 4 },
137 },
138 breadcrumbs: {
139 ...text(layer, "mono", "on", "variant"),
140 padding: { left: 6 },
141 },
142 disconnectedOverlay: {
143 ...text(layer, "sans"),
144 background: withOpacity(background(layer), 0.8),
145 },
146 notification: {
147 margin: { top: 10 },
148 background: background(elevation.above.middle),
149 cornerRadius: 6,
150 padding: 12,
151 border: border(elevation.above.middle),
152 shadow: elevation.above.shadow,
153 },
154 notifications: {
155 width: 400,
156 margin: { right: 10, bottom: 10 },
157 },
158 dock: {
159 initialSizeRight: 640,
160 initialSizeBottom: 480,
161 wash_color: withOpacity(background(elevation.top), 0.5),
162 panel: {
163 border: border(elevation.top),
164 },
165 maximized: {
166 margin: 32,
167 border: border(elevation.above.top, { "overlay": true }),
168 shadow: elevation.above.shadow,
169 }
170 }
171 };
172}