1import { background, border, foreground, text } from "./components"
2import { interactive, toggleable } from "../element"
3import { useTheme } from "../common"
4import { text_button } from "../component/text_button"
5
6export default function status_bar(): any {
7 const theme = useTheme()
8
9 const layer = theme.lowest
10
11 const status_container = {
12 corner_radius: 6,
13 padding: { top: 3, bottom: 3, left: 6, right: 6 },
14 }
15
16 const diagnostic_status_container = {
17 corner_radius: 6,
18 padding: { top: 1, bottom: 1, left: 6, right: 6 },
19 }
20
21 return {
22 height: 30,
23 item_spacing: 8,
24 padding: {
25 top: 1,
26 bottom: 1,
27 left: 6,
28 right: 6,
29 },
30 border: border(layer, { top: true, overlay: true }),
31 cursor_position: text(layer, "sans", "base", { size: "xs" }),
32 vim_mode_indicator: {
33 margin: { left: 6 },
34 ...text(layer, "mono", "base", { size: "xs" }),
35 },
36 active_language: text_button({
37 color: "base"
38 }),
39 auto_update_progress_message: text(layer, "sans", "base", { size: "xs" }),
40 auto_update_done_message: text(layer, "sans", "base", { size: "xs" }),
41 lsp_status: interactive({
42 base: {
43 ...diagnostic_status_container,
44 icon_spacing: 4,
45 icon_width: 14,
46 height: 18,
47 message: text(layer, "sans", { size: "xs" }),
48 icon_color: foreground(layer),
49 },
50 state: {
51 hovered: {
52 message: text(layer, "sans", { size: "xs" }),
53 icon_color: foreground(layer),
54 background: background(layer, "hovered"),
55 },
56 },
57 }),
58 diagnostic_message: interactive({
59 base: {
60 ...text(layer, "sans", { size: "xs" }),
61 },
62 state: { hovered: text(layer, "sans", "hovered", { size: "xs" }) },
63 }),
64 diagnostic_summary: interactive({
65 base: {
66 height: 20,
67 icon_width: 14,
68 icon_spacing: 2,
69 summary_spacing: 6,
70 text: text(layer, "sans", { size: "sm" }),
71 icon_color_ok: foreground(layer, "base"),
72 icon_color_warning: foreground(layer, "warning"),
73 icon_color_error: foreground(layer, "negative"),
74 container_ok: {
75 corner_radius: 6,
76 padding: { top: 3, bottom: 3, left: 7, right: 7 },
77 },
78 container_warning: {
79 ...diagnostic_status_container,
80 background: background(layer, "warning"),
81 border: border(layer, "warning"),
82 },
83 container_error: {
84 ...diagnostic_status_container,
85 background: background(layer, "negative"),
86 border: border(layer, "negative"),
87 },
88 },
89 state: {
90 hovered: {
91 icon_color_ok: foreground(layer, "on"),
92 container_ok: {
93 background: background(layer, "on", "hovered"),
94 },
95 container_warning: {
96 background: background(layer, "warning", "hovered"),
97 border: border(layer, "warning", "hovered"),
98 },
99 container_error: {
100 background: background(layer, "negative", "hovered"),
101 border: border(layer, "negative", "hovered"),
102 },
103 },
104 },
105 }),
106 panel_buttons: {
107 group_left: {},
108 group_bottom: {},
109 group_right: {},
110 button: toggleable({
111 base: interactive({
112 base: {
113 ...status_container,
114 icon_size: 14,
115 icon_color: foreground(layer, "base"),
116 background: background(layer, "default"),
117 label: {
118 margin: { left: 6 },
119 ...text(layer, "sans", { size: "xs" }),
120 },
121 },
122 state: {
123 hovered: {
124 background: background(layer, "hovered"),
125 },
126 clicked: {
127 background: background(layer, "pressed"),
128 }
129 },
130 }),
131 state: {
132 active: {
133 default: {
134 icon_color: foreground(layer, "accent", "default"),
135 background: background(layer, "default"),
136 },
137 hovered: {
138 icon_color: foreground(layer, "accent", "hovered"),
139 background: background(layer, "hovered"),
140 },
141 clicked: {
142 icon_color: foreground(layer, "accent", "pressed"),
143 background: background(layer, "pressed"),
144 },
145 },
146 },
147 }),
148 badge: {
149 corner_radius: 3,
150 padding: 2,
151 margin: { bottom: -1, right: -1 },
152 border: border(layer),
153 background: background(layer, "accent"),
154 },
155 },
156 }
157}