1import { ColorScheme } from "../theme/colorScheme"
2import { background, border, foreground, text } from "./components"
3import { interactive, toggleable } from "../element"
4export default function statusBar(colorScheme: ColorScheme) {
5 let layer = colorScheme.lowest
6
7 const statusContainer = {
8 cornerRadius: 6,
9 padding: { top: 3, bottom: 3, left: 6, right: 6 },
10 }
11
12 const diagnosticStatusContainer = {
13 cornerRadius: 6,
14 padding: { top: 1, bottom: 1, left: 6, right: 6 },
15 }
16
17 return {
18 height: 30,
19 itemSpacing: 8,
20 padding: {
21 top: 1,
22 bottom: 1,
23 left: 6,
24 right: 6,
25 },
26 border: border(layer, { top: true, overlay: true }),
27 cursorPosition: text(layer, "sans", "variant"),
28 activeLanguage: interactive({
29 base: {
30 padding: { left: 6, right: 6 },
31 ...text(layer, "sans", "variant"),
32 },
33 state: {
34 hovered: {
35 ...text(layer, "sans", "on"),
36 },
37 },
38 }),
39 autoUpdateProgressMessage: text(layer, "sans", "variant"),
40 autoUpdateDoneMessage: text(layer, "sans", "variant"),
41 lspStatus: interactive({
42 base: {
43 ...diagnosticStatusContainer,
44 iconSpacing: 4,
45 iconWidth: 14,
46 height: 18,
47 message: text(layer, "sans"),
48 iconColor: foreground(layer),
49 },
50 state: {
51 hovered: {
52 message: text(layer, "sans"),
53 iconColor: foreground(layer),
54 background: background(layer, "hovered"),
55 },
56 },
57 }),
58 diagnosticMessage: interactive({
59 base: {
60 ...text(layer, "sans"),
61 },
62 state: { hovered: text(layer, "sans", "hovered") },
63 }),
64 diagnosticSummary: interactive({
65 base: {
66 height: 20,
67 iconWidth: 16,
68 iconSpacing: 2,
69 summarySpacing: 6,
70 text: text(layer, "sans", { size: "sm" }),
71 iconColorOk: foreground(layer, "variant"),
72 iconColorWarning: foreground(layer, "warning"),
73 iconColorError: foreground(layer, "negative"),
74 containerOk: {
75 cornerRadius: 6,
76 padding: { top: 3, bottom: 3, left: 7, right: 7 },
77 },
78 containerWarning: {
79 ...diagnosticStatusContainer,
80 background: background(layer, "warning"),
81 border: border(layer, "warning"),
82 },
83 containerError: {
84 ...diagnosticStatusContainer,
85 background: background(layer, "negative"),
86 border: border(layer, "negative"),
87 },
88 },
89 state: {
90 hovered: {
91 iconColorOk: foreground(layer, "on"),
92 containerOk: {
93 background: background(layer, "on", "hovered"),
94 },
95 containerWarning: {
96 background: background(layer, "warning", "hovered"),
97 border: border(layer, "warning", "hovered"),
98 },
99 containerError: {
100 background: background(layer, "negative", "hovered"),
101 border: border(layer, "negative", "hovered"),
102 },
103 },
104 },
105 }),
106 panelButtons: {
107 groupLeft: {},
108 groupBottom: {},
109 groupRight: {},
110 button: toggleable({
111 base:
112 interactive({
113 base: {
114 ...statusContainer,
115 iconSize: 16,
116 iconColor: foreground(layer, "variant"),
117 label: {
118 margin: { left: 6 },
119 ...text(layer, "sans", { size: "sm" }),
120 },
121 },
122 state: {
123 hovered: {
124 iconColor: foreground(layer, "hovered"),
125 background: background(layer, "variant"),
126 },
127 },
128 }), state:
129 {
130 active: {
131 default: {
132 iconColor: foreground(layer, "active"),
133 background: background(layer, "active"),
134 },
135 }
136 }
137 }
138 ),
139 badge: {
140 cornerRadius: 3,
141 padding: 2,
142 margin: { bottom: -1, right: -1 },
143 border: border(layer),
144 background: background(layer, "accent"),
145 },
146 },
147 }
148}