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