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: interactive({
112 base: {
113 ...statusContainer,
114 iconSize: 16,
115 iconColor: foreground(layer, "variant"),
116 label: {
117 margin: { left: 6 },
118 ...text(layer, "sans", { size: "sm" }),
119 },
120 },
121 state: {
122 hovered: {
123 iconColor: foreground(layer, "hovered"),
124 background: background(layer, "variant"),
125 },
126 },
127 }),
128 state: {
129 active: {
130 default: {
131 iconColor: foreground(layer, "active"),
132 background: background(layer, "active"),
133 },
134 hovered: {
135 iconColor: foreground(layer, "hovered"),
136 background: background(layer, "hovered"),
137 },
138 clicked: {
139 iconColor: foreground(layer, "pressed"),
140 background: background(layer, "pressed"),
141 },
142 },
143 },
144 }),
145 badge: {
146 cornerRadius: 3,
147 padding: 2,
148 margin: { bottom: -1, right: -1 },
149 border: border(layer),
150 background: background(layer, "accent"),
151 },
152 },
153 }
154}