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 { toolbar } from "./toolbar"
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: toolbar(),
132 disconnected_overlay: {
133 ...text(theme.lowest, "sans"),
134 background: with_opacity(background(theme.lowest), 0.8),
135 },
136 notification: {
137 margin: { top: 10 },
138 background: background(theme.middle),
139 corner_radius: 6,
140 padding: 12,
141 border: border(theme.middle),
142 shadow: theme.popover_shadow,
143 },
144 notifications: {
145 width: 400,
146 margin: { right: 10, bottom: 10 },
147 },
148 drop_target_overlay_color: with_opacity(
149 foreground(theme.lowest, "variant"),
150 0.5
151 ),
152 }
153}