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