1import { ColorScheme } from "../theme/color_scheme"
2import { with_opacity } from "../theme/color"
3import {
4 background,
5 border,
6 border_color,
7 foreground,
8 svg,
9 text,
10} from "./components"
11import statusBar from "./status_bar"
12import tabBar from "./tab_bar"
13import { interactive } from "../element"
14
15import { titlebar } from "./titlebar"
16export default function workspace(theme: ColorScheme): any {
17 const { is_light } = theme
18
19 return {
20 background: background(theme.lowest),
21 blank_pane: {
22 logo_container: {
23 width: 256,
24 height: 256,
25 },
26 logo: svg(
27 with_opacity("#000000", theme.is_light ? 0.6 : 0.8),
28 "icons/logo_96.svg",
29 256,
30 256
31 ),
32
33 logo_shadow: svg(
34 with_opacity(
35 theme.is_light
36 ? "#FFFFFF"
37 : theme.lowest.base.default.background,
38 theme.is_light ? 1 : 0.6
39 ),
40 "icons/logo_96.svg",
41 256,
42 256
43 ),
44 keyboard_hints: {
45 margin: {
46 top: 96,
47 },
48 corner_radius: 4,
49 },
50 keyboard_hint: interactive({
51 base: {
52 ...text(theme.lowest, "sans", "variant", { size: "sm" }),
53 padding: {
54 top: 3,
55 left: 8,
56 right: 8,
57 bottom: 3,
58 },
59 corner_radius: 8,
60 },
61 state: {
62 hovered: {
63 ...text(theme.lowest, "sans", "active", { size: "sm" }),
64 },
65 },
66 }),
67
68 keyboard_hint_width: 320,
69 },
70 joining_project_avatar: {
71 corner_radius: 40,
72 width: 80,
73 },
74 joining_project_message: {
75 padding: 12,
76 ...text(theme.lowest, "sans", { size: "lg" }),
77 },
78 external_location_message: {
79 background: background(theme.middle, "accent"),
80 border: border(theme.middle, "accent"),
81 corner_radius: 6,
82 padding: 12,
83 margin: { bottom: 8, right: 8 },
84 ...text(theme.middle, "sans", "accent", { size: "xs" }),
85 },
86 leader_border_opacity: 0.7,
87 leader_border_width: 2.0,
88 tab_bar: tabBar(theme),
89 modal: {
90 margin: {
91 bottom: 52,
92 top: 52,
93 },
94 cursor: "Arrow",
95 },
96 zoomed_background: {
97 cursor: "Arrow",
98 background: is_light
99 ? with_opacity(background(theme.lowest), 0.8)
100 : with_opacity(background(theme.highest), 0.6),
101 },
102 zoomed_pane_foreground: {
103 margin: 16,
104 shadow: theme.modal_shadow,
105 border: border(theme.lowest, { overlay: true }),
106 },
107 zoomed_panel_foreground: {
108 margin: 16,
109 border: border(theme.lowest, { overlay: true }),
110 },
111 dock: {
112 left: {
113 border: border(theme.lowest, { right: true }),
114 },
115 bottom: {
116 border: border(theme.lowest, { top: true }),
117 },
118 right: {
119 border: border(theme.lowest, { left: true }),
120 },
121 },
122 pane_divider: {
123 color: border_color(theme.lowest),
124 width: 1,
125 },
126 status_bar: statusBar(theme),
127 titlebar: titlebar(theme),
128 toolbar: {
129 height: 34,
130 background: background(theme.highest),
131 border: border(theme.highest, { bottom: true }),
132 item_spacing: 8,
133 nav_button: interactive({
134 base: {
135 color: foreground(theme.highest, "on"),
136 icon_width: 12,
137 button_width: 24,
138 corner_radius: 6,
139 },
140 state: {
141 hovered: {
142 color: foreground(theme.highest, "on", "hovered"),
143 background: background(theme.highest, "on", "hovered"),
144 },
145 disabled: {
146 color: foreground(theme.highest, "on", "disabled"),
147 },
148 },
149 }),
150 padding: { left: 8, right: 8, top: 4, bottom: 4 },
151 },
152 breadcrumb_height: 24,
153 breadcrumbs: interactive({
154 base: {
155 ...text(theme.highest, "sans", "variant"),
156 corner_radius: 6,
157 padding: {
158 left: 6,
159 right: 6,
160 },
161 },
162 state: {
163 hovered: {
164 color: foreground(theme.highest, "on", "hovered"),
165 background: background(theme.highest, "on", "hovered"),
166 },
167 },
168 }),
169 disconnected_overlay: {
170 ...text(theme.lowest, "sans"),
171 background: with_opacity(background(theme.lowest), 0.8),
172 },
173 notification: {
174 margin: { top: 10 },
175 background: background(theme.middle),
176 corner_radius: 6,
177 padding: 12,
178 border: border(theme.middle),
179 shadow: theme.popover_shadow,
180 },
181 notifications: {
182 width: 400,
183 margin: { right: 10, bottom: 10 },
184 },
185 drop_target_overlay_color: with_opacity(
186 foreground(theme.lowest, "variant"),
187 0.5
188 ),
189 }
190}