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