1import Theme from "../themes/theme";
2import { backgroundColor, border, iconColor, text } from "./components";
3
4export default function workspace(theme: Theme) {
5 const signInPrompt = {
6 ...text(theme, "sans", "secondary", { size: "xs" }),
7 border: border(theme, "primary"),
8 cornerRadius: 6,
9 margin: {
10 top: 1,
11 right: 6,
12 },
13 padding: {
14 left: 6,
15 right: 6,
16 },
17 };
18
19 const tab = {
20 height: 32,
21 background: backgroundColor(theme, 300),
22 iconClose: iconColor(theme, "muted"),
23 iconCloseActive: iconColor(theme, "active"),
24 iconConflict: iconColor(theme, "warning"),
25 iconDirty: iconColor(theme, "info"),
26 iconWidth: 8,
27 spacing: 8,
28 text: text(theme, "sans", "secondary", { size: "sm" }),
29 border: border(theme, "primary", {
30 left: true,
31 bottom: true,
32 overlay: true,
33 }),
34 padding: {
35 left: 8,
36 right: 8,
37 },
38 };
39
40 const activeTab = {
41 ...tab,
42 background: backgroundColor(theme, 500),
43 text: text(theme, "sans", "active", { size: "sm" }),
44 border: {
45 ...tab.border,
46 bottom: false,
47 },
48 };
49
50 const sidebarItem = {
51 height: 32,
52 iconColor: iconColor(theme, "secondary"),
53 iconSize: 18,
54 padding: { left: 5, right: 5 },
55 cornerRadius: 5,
56 };
57 const shareIcon = {
58 margin: { top: 3, bottom: 2 },
59 cornerRadius: 6,
60 };
61
62 return {
63 background: backgroundColor(theme, 300),
64 leaderBorderOpacity: 0.7,
65 leaderBorderWidth: 2.0,
66 tab,
67 activeTab,
68 modal: {
69 margin: {
70 bottom: 52,
71 top: 52,
72 },
73 cursor: "Arrow"
74 },
75 sidebarResizeHandle: {
76 background: border(theme, "primary").color,
77 padding: {
78 left: 1,
79 },
80 },
81 paneDivider: {
82 color: border(theme, "secondary").color,
83 width: 1,
84 },
85 statusBar: {
86 height: 24,
87 itemSpacing: 8,
88 padding: {
89 left: 6,
90 right: 6,
91 },
92 border: border(theme, "primary", { top: true, overlay: true }),
93 cursorPosition: text(theme, "sans", "muted"),
94 diagnosticMessage: text(theme, "sans", "muted"),
95 lspMessage: text(theme, "sans", "muted"),
96 autoUpdateProgressMessage: text(theme, "sans", "muted"),
97 autoUpdateDoneMessage: text(theme, "sans", "muted"),
98 sidebarItem: {
99 ...sidebarItem
100 },
101 sidebarItemHover: {
102 ...sidebarItem
103 },
104 sidebarItemActive: {
105 ...sidebarItem,
106 iconColor: iconColor(theme, "active"),
107 background: backgroundColor(theme, 300, "active"),
108 },
109 sidebarItemsLeft: {
110 margin: { right: 20 }
111 },
112 sidebarItemsRight: {
113 margin: { left: 20 }
114 }
115 },
116 titlebar: {
117 avatarWidth: 18,
118 height: 32,
119 background: backgroundColor(theme, 100),
120 padding: {
121 left: 80,
122 },
123 title: text(theme, "sans", "primary"),
124 avatar: {
125 cornerRadius: 10,
126 border: {
127 color: "#00000088",
128 width: 1,
129 },
130 },
131 avatarRibbon: {
132 height: 3,
133 width: 12,
134 // TODO: The background for this ideally should be
135 // set with a token, not hardcoded in rust
136 },
137 border: border(theme, "primary", { bottom: true }),
138 signInPrompt,
139 hoveredSignInPrompt: {
140 ...signInPrompt,
141 ...text(theme, "sans", "active", { size: "xs" }),
142 },
143 offlineIcon: {
144 color: iconColor(theme, "secondary"),
145 width: 16,
146 padding: {
147 right: 4,
148 },
149 },
150 shareIcon: {
151 ...shareIcon,
152 color: iconColor(theme, "secondary")
153 },
154 hoveredShareIcon: {
155 ...shareIcon,
156 background: backgroundColor(theme, 100, "hovered"),
157 color: iconColor(theme, "secondary"),
158 },
159 hoveredActiveShareIcon: {
160 ...shareIcon,
161 background: backgroundColor(theme, 100, "hovered"),
162 color: iconColor(theme, "active"),
163 },
164 activeShareIcon: {
165 ...shareIcon,
166 background: backgroundColor(theme, 100, "active"),
167 color: iconColor(theme, "active"),
168 },
169 outdatedWarning: {
170 ...text(theme, "sans", "warning"),
171 size: 13,
172 margin: { right: 6 }
173 },
174 },
175 toolbar: {
176 height: 34,
177 background: backgroundColor(theme, 500),
178 border: border(theme, "secondary", { bottom: true }),
179 itemSpacing: 8,
180 padding: { left: 16, right: 8, top: 4, bottom: 4 },
181 },
182 breadcrumbs: {
183 ...text(theme, "mono", "secondary"),
184 padding: { left: 6 },
185 },
186 disconnectedOverlay: {
187 ...text(theme, "sans", "active"),
188 background: "#000000aa",
189 },
190 };
191}