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 height: 33,
65 background: backgroundColor(theme, 100),
66 padding: {
67 left: 80,
68 right: 6,
69 },
70 title: text(theme, "sans", "primary"),
71 avatar: {
72 cornerRadius: 10,
73 border: {
74 color: "#00000088",
75 width: 1,
76 },
77 },
78 avatarRibbon: {
79 height: 3,
80 width: 12,
81 // TODO: The background for this ideally should be
82 // set with a token, not hardcoded in rust
83 },
84 border: border(theme, "primary", { bottom: true, overlay: true }),
85 signInPrompt: {
86 border: border(theme, "primary"),
87 cornerRadius: 6,
88 margin: {
89 top: 1,
90 },
91 padding: {
92 left: 6,
93 right: 6,
94 },
95 ...text(theme, "sans", "secondary", { size: "xs" }),
96 hover: text(theme, "sans", "active", { size: "xs" }),
97 },
98 offlineIcon: {
99 color: iconColor(theme, "secondary"),
100 width: 16,
101 padding: {
102 right: 4,
103 },
104 },
105 shareIcon: {
106 cornerRadius: 6,
107 margin: { top: 3, bottom: 2, left: 6 },
108 color: iconColor(theme, "secondary"),
109 hover: {
110 background: backgroundColor(theme, 100, "hovered"),
111 color: iconColor(theme, "secondary"),
112 },
113 active: {
114 background: backgroundColor(theme, 100, "active"),
115 color: iconColor(theme, "active"),
116 },
117 activeHover: {
118 background: backgroundColor(theme, 100, "hovered"),
119 color: iconColor(theme, "active"),
120 }
121 },
122 outdatedWarning: {
123 ...text(theme, "sans", "warning", { size: "xs" }),
124 background: backgroundColor(theme, "warning"),
125 border: border(theme, "warning"),
126 padding: {
127 left: 6,
128 right: 6,
129 },
130 cornerRadius: 6,
131 },
132 },
133 toolbar: {
134 height: 34,
135 background: backgroundColor(theme, 500),
136 border: border(theme, "secondary", { bottom: true }),
137 itemSpacing: 8,
138 padding: { left: 16, right: 8, top: 4, bottom: 4 },
139 },
140 breadcrumbs: {
141 ...text(theme, "mono", "secondary"),
142 padding: { left: 6 },
143 },
144 disconnectedOverlay: {
145 ...text(theme, "sans", "active"),
146 background: "#000000aa",
147 },
148 };
149}