1import { with_opacity } from "../theme/color"
2import { background, border, foreground, text } from "./components"
3import { interactive, toggleable } from "../element"
4import { useTheme } from "../theme"
5
6const search_results = () => {
7 const theme = useTheme()
8
9 return {
10 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
11 match_background: with_opacity(
12 foreground(theme.highest, "accent"),
13 0.4
14 ),
15 }
16}
17
18export default function search(): any {
19 const theme = useTheme()
20 const SEARCH_ROW_SPACING = 12
21
22 // Search input
23 const editor = {
24 background: background(theme.highest),
25 corner_radius: 8,
26 min_width: 200,
27 max_width: 500,
28 placeholder_text: text(theme.highest, "mono", "disabled"),
29 selection: theme.players[0],
30 text: text(theme.highest, "mono", "default"),
31 border: border(theme.highest),
32 margin: {
33 right: 9,
34 },
35 padding: {
36 top: 4,
37 bottom: 4,
38 left: 10,
39 right: 4,
40 },
41 }
42
43 const include_exclude_editor = {
44 ...editor,
45 min_width: 100,
46 max_width: 250,
47 }
48
49 return {
50 padding: { top: 4, bottom: 4 },
51
52 option_button: toggleable({
53 base: interactive({
54 base: {
55 icon_width: 14,
56 button_width: 32,
57 color: foreground(theme.highest, "variant"),
58 background: background(theme.highest, "on"),
59 corner_radius: 2,
60 margin: { right: 2 },
61 border: {
62 width: 1., color: background(theme.highest, "on")
63 },
64 padding: {
65 left: 4,
66 right: 4,
67 top: 4,
68 bottom: 4,
69 },
70 },
71 state: {
72 hovered: {
73 ...text(theme.highest, "mono", "variant", "hovered"),
74 background: background(theme.highest, "on", "hovered"),
75 border: {
76 width: 1., color: background(theme.highest, "on", "hovered")
77 },
78 },
79 clicked: {
80 ...text(theme.highest, "mono", "variant", "pressed"),
81 background: background(theme.highest, "on", "pressed"),
82 border: {
83 width: 1., color: background(theme.highest, "on", "pressed")
84 },
85 },
86 },
87 }),
88 state: {
89 active: {
90 default: {
91 icon_width: 14,
92 button_width: 32,
93 color: foreground(theme.highest, "variant"),
94 background: background(theme.highest, "accent"),
95 border: border(theme.highest, "accent"),
96 },
97 hovered: {
98 background: background(theme.highest, "accent", "hovered"),
99 border: border(theme.highest, "accent", "hovered"),
100 },
101 clicked: {
102 background: background(theme.highest, "accent", "pressed"),
103 border: border(theme.highest, "accent", "pressed"),
104 },
105 },
106 },
107 }),
108 option_button_component: toggleable({
109 base: interactive({
110 base: {
111 icon_size: 14,
112 color: foreground(theme.highest, "variant"),
113
114 button_width: 32,
115 background: background(theme.highest, "on"),
116 corner_radius: 2,
117 margin: { right: 2 },
118 border: {
119 width: 1., color: background(theme.highest, "on")
120 },
121 padding: {
122 left: 4,
123 right: 4,
124 top: 4,
125 bottom: 4,
126 },
127 },
128 state: {
129 hovered: {
130 ...text(theme.highest, "mono", "variant", "hovered"),
131 background: background(theme.highest, "on", "hovered"),
132 border: {
133 width: 1., color: background(theme.highest, "on", "hovered")
134 },
135 },
136 clicked: {
137 ...text(theme.highest, "mono", "variant", "pressed"),
138 background: background(theme.highest, "on", "pressed"),
139 border: {
140 width: 1., color: background(theme.highest, "on", "pressed")
141 },
142 },
143 },
144 }),
145 state: {
146 active: {
147 default: {
148 icon_size: 14,
149 button_width: 32,
150 color: foreground(theme.highest, "variant"),
151 background: background(theme.highest, "accent"),
152 border: border(theme.highest, "accent"),
153 },
154 hovered: {
155 background: background(theme.highest, "accent", "hovered"),
156 border: border(theme.highest, "accent", "hovered"),
157 },
158 clicked: {
159 background: background(theme.highest, "accent", "pressed"),
160 border: border(theme.highest, "accent", "pressed"),
161 },
162 },
163 },
164 }),
165 action_button: toggleable({
166 base: interactive({
167 base: {
168 ...text(theme.highest, "mono", "disabled"),
169 background: background(theme.highest, "disabled"),
170 corner_radius: 6,
171 border: border(theme.highest, "disabled"),
172 padding: {
173 // bottom: 2,
174 left: 10,
175 right: 10,
176 // top: 2,
177 },
178 margin: {
179 top: 1,
180 bottom: 1,
181 right: SEARCH_ROW_SPACING
182 }
183 },
184 state: {
185 hovered: {}
186 },
187 }),
188 state: {
189 active: interactive({
190 base: {
191 ...text(theme.highest, "mono", "on"),
192 background: background(theme.highest, "on"),
193 border: border(theme.highest, "on"),
194 },
195 state: {
196 hovered: {
197 ...text(theme.highest, "mono", "on", "hovered"),
198 background: background(theme.highest, "on", "hovered"),
199 border: border(theme.highest, "on", "hovered"),
200 },
201 clicked: {
202 ...text(theme.highest, "mono", "on", "pressed"),
203 background: background(theme.highest, "on", "pressed"),
204 border: border(theme.highest, "on", "pressed"),
205 },
206 },
207 })
208 }
209 }),
210 editor,
211 invalid_editor: {
212 ...editor,
213 border: border(theme.highest, "negative"),
214 },
215 include_exclude_editor,
216 invalid_include_exclude_editor: {
217 ...include_exclude_editor,
218 border: border(theme.highest, "negative"),
219 },
220 match_index: {
221 ...text(theme.highest, "mono", "variant"),
222 padding: {
223 left: 9,
224 right: SEARCH_ROW_SPACING,
225 },
226 },
227 option_button_group: {
228 padding: {
229 left: SEARCH_ROW_SPACING,
230 right: SEARCH_ROW_SPACING,
231 },
232 },
233 include_exclude_inputs: {
234 ...text(theme.highest, "mono", "variant"),
235 padding: {
236 right: 6,
237 },
238 },
239 major_results_status: {
240 ...text(theme.highest, "mono", "on"),
241 size: 15,
242 },
243 minor_results_status: {
244 ...text(theme.highest, "mono", "variant"),
245 size: 13,
246 },
247 // Input Icon
248 editor_icon: {
249 icon: {
250 color: foreground(theme.highest, "disabled"),
251 asset: "icons/magnifying_glass.svg",
252 dimensions: {
253 width: 14,
254 height: 14,
255 }
256 },
257 container: {
258 margin: { right: 4 },
259 padding: { left: 1, right: 1 },
260 }
261 },
262 // Toggle group buttons - Text | Regex | Semantic
263 mode_button: toggleable({
264 base: interactive({
265 base: {
266 ...text(theme.highest, "mono", "variant", { size: "sm" }),
267 background: background(theme.highest, "variant"),
268
269 border: {
270 ...border(theme.highest, "on"),
271 left: false,
272 right: false
273 },
274 margin: {
275 top: 1,
276 bottom: 1,
277 },
278 padding: {
279 left: 12,
280 right: 12,
281 },
282 corner_radius: 6,
283 },
284 state: {
285 hovered: {
286 ...text(theme.highest, "mono", "variant", "hovered", { size: "sm" }),
287 background: background(theme.highest, "variant", "hovered"),
288 border: border(theme.highest, "on", "hovered"),
289 },
290 clicked: {
291 ...text(theme.highest, "mono", "variant", "pressed", { size: "sm" }),
292 background: background(theme.highest, "variant", "pressed"),
293 border: border(theme.highest, "on", "pressed"),
294 },
295 },
296 }),
297 state: {
298 active: {
299 default: {
300 ...text(theme.highest, "mono", "on", { size: "sm" }),
301 background: background(theme.highest, "on")
302 },
303 hovered: {
304 ...text(theme.highest, "mono", "on", "hovered", { size: "sm" }),
305 background: background(theme.highest, "on", "hovered")
306 },
307 clicked: {
308 ...text(theme.highest, "mono", "on", "pressed", { size: "sm" }),
309 background: background(theme.highest, "on", "pressed")
310 },
311 },
312 },
313 }),
314 // Next/Previous Match buttons
315 nav_button: toggleable({
316 state: {
317 inactive: interactive({
318 base: {
319 background: background(theme.highest, "disabled"),
320 text: text(theme.highest, "mono", "disabled"),
321 corner_radius: 6,
322 border: {
323 ...border(theme.highest, "disabled"),
324 left: false,
325 right: false,
326 },
327 margin: {
328 top: 1,
329 bottom: 1,
330 },
331 padding: {
332 left: 10,
333 right: 10,
334 },
335 },
336 state: {
337 hovered: {}
338 }
339 }),
340 active: interactive({
341 base: {
342 text: text(theme.highest, "mono", "on"),
343 background: background(theme.highest, "on"),
344 corner_radius: 6,
345 border: {
346 ...border(theme.highest, "on"),
347 left: false,
348 right: false,
349 },
350 margin: {
351 top: 1,
352 bottom: 1,
353 },
354 padding: {
355 left: 10,
356 right: 10,
357 },
358 },
359 state: {
360 hovered: {
361 ...text(theme.highest, "mono", "on", "hovered"),
362 background: background(theme.highest, "on", "hovered"),
363 border: border(theme.highest, "on", "hovered"),
364 },
365 clicked: {
366 ...text(theme.highest, "mono", "on", "pressed"),
367 background: background(theme.highest, "on", "pressed"),
368 border: border(theme.highest, "on", "pressed"),
369 },
370 },
371 })
372 }
373 }),
374 search_bar_row_height: 34,
375 search_row_spacing: 8,
376 option_button_height: 22,
377 modes_container: {},
378 ...search_results()
379 }
380}