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 padding: {
33 top: 4,
34 bottom: 4,
35 left: 10,
36 right: 4,
37 },
38 margin: { right: SEARCH_ROW_SPACING },
39 }
40
41 const include_exclude_editor = {
42 ...editor,
43 min_width: 100,
44 max_width: 250,
45 }
46
47 return {
48 padding: { top: 4, bottom: 4 },
49
50 option_button: toggleable({
51 base: interactive({
52 base: {
53 icon_width: 14,
54 button_width: 32,
55 color: foreground(theme.highest, "variant"),
56 background: background(theme.highest, "on"),
57 corner_radius: 2,
58 margin: { right: 2 },
59 border: {
60 width: 1,
61 color: background(theme.highest, "on"),
62 },
63 padding: {
64 left: 4,
65 right: 4,
66 top: 4,
67 bottom: 4,
68 },
69 },
70 state: {
71 hovered: {
72 ...text(theme.highest, "mono", "variant", "hovered"),
73 background: background(theme.highest, "on", "hovered"),
74 border: {
75 width: 1,
76 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,
84 color: background(theme.highest, "on", "pressed"),
85 },
86 },
87 },
88 }),
89 state: {
90 active: {
91 default: {
92 icon_width: 14,
93 button_width: 32,
94 color: foreground(theme.highest, "variant"),
95 background: background(theme.highest, "accent"),
96 border: border(theme.highest, "accent"),
97 },
98 hovered: {
99 background: background(
100 theme.highest,
101 "accent",
102 "hovered"
103 ),
104 border: border(theme.highest, "accent", "hovered"),
105 },
106 clicked: {
107 background: background(
108 theme.highest,
109 "accent",
110 "pressed"
111 ),
112 border: border(theme.highest, "accent", "pressed"),
113 },
114 },
115 },
116 }),
117 option_button_component: toggleable({
118 base: interactive({
119 base: {
120 icon_size: 14,
121 color: foreground(theme.highest, "variant"),
122
123 button_width: 32,
124 background: background(theme.highest, "on"),
125 corner_radius: 6,
126 margin: { right: 2 },
127 border: {
128 width: 1,
129 color: background(theme.highest, "on"),
130 },
131 padding: {
132 left: 4,
133 right: 4,
134 top: 4,
135 bottom: 4,
136 },
137 },
138 state: {
139 hovered: {
140 ...text(theme.highest, "mono", "variant", "hovered"),
141 background: background(theme.highest, "on", "hovered"),
142 border: {
143 width: 1,
144 color: background(theme.highest, "on", "hovered"),
145 },
146 },
147 clicked: {
148 ...text(theme.highest, "mono", "variant", "pressed"),
149 background: background(theme.highest, "on", "pressed"),
150 border: {
151 width: 1,
152 color: background(theme.highest, "on", "pressed"),
153 },
154 },
155 },
156 }),
157 state: {
158 active: {
159 default: {
160 icon_size: 14,
161 button_width: 32,
162 color: foreground(theme.highest, "variant"),
163 background: background(theme.highest, "accent"),
164 border: border(theme.highest, "accent"),
165 },
166 hovered: {
167 background: background(
168 theme.highest,
169 "accent",
170 "hovered"
171 ),
172 border: border(theme.highest, "accent", "hovered"),
173 },
174 clicked: {
175 background: background(
176 theme.highest,
177 "accent",
178 "pressed"
179 ),
180 border: border(theme.highest, "accent", "pressed"),
181 },
182 },
183 },
184 }),
185 editor,
186 invalid_editor: {
187 ...editor,
188 border: border(theme.highest, "negative"),
189 },
190 include_exclude_editor,
191 invalid_include_exclude_editor: {
192 ...include_exclude_editor,
193 border: border(theme.highest, "negative"),
194 },
195 match_index: {
196 ...text(theme.highest, "mono", { size: "sm" }),
197 padding: {
198 left: SEARCH_ROW_SPACING,
199 right: SEARCH_ROW_SPACING,
200 },
201 },
202 option_button_group: {
203 padding: {
204 right: SEARCH_ROW_SPACING,
205 },
206 },
207 include_exclude_inputs: {
208 ...text(theme.highest, "mono", "variant"),
209 padding: {
210 right: 6,
211 },
212 },
213 major_results_status: {
214 ...text(theme.highest, "mono", "on"),
215 size: 15,
216 },
217 minor_results_status: {
218 ...text(theme.highest, "mono", "variant"),
219 size: 13,
220 },
221 // Input Icon
222 editor_icon: {
223 icon: {
224 color: foreground(theme.highest, "disabled"),
225 asset: "icons/magnifying_glass.svg",
226 dimensions: {
227 width: 14,
228 height: 14,
229 },
230 },
231 container: {
232 margin: { right: 4 },
233 padding: { left: 1, right: 1 },
234 },
235 },
236 // Toggle group buttons - Text | Regex | Semantic
237 mode_button: toggleable({
238 base: interactive({
239 base: {
240 ...text(theme.highest, "mono", "variant", { size: "sm" }),
241 background: background(theme.highest, "variant"),
242
243 border: {
244 ...border(theme.highest, "on"),
245 left: false,
246 right: false,
247 },
248 margin: {
249 top: 1,
250 bottom: 1,
251 },
252 padding: {
253 left: 10,
254 right: 10,
255 },
256 corner_radius: 6,
257 },
258 state: {
259 hovered: {
260 ...text(theme.highest, "mono", "variant", "hovered", {
261 size: "sm",
262 }),
263 background: background(
264 theme.highest,
265 "variant",
266 "hovered"
267 ),
268 border: border(theme.highest, "on", "hovered"),
269 },
270 clicked: {
271 ...text(theme.highest, "mono", "variant", "pressed", {
272 size: "sm",
273 }),
274 background: background(
275 theme.highest,
276 "variant",
277 "pressed"
278 ),
279 border: border(theme.highest, "on", "pressed"),
280 },
281 },
282 }),
283 state: {
284 active: {
285 default: {
286 ...text(theme.highest, "mono", "on", { size: "sm" }),
287 background: background(theme.highest, "on"),
288 },
289 hovered: {
290 ...text(theme.highest, "mono", "on", "hovered", {
291 size: "sm",
292 }),
293 background: background(theme.highest, "on", "hovered"),
294 },
295 clicked: {
296 ...text(theme.highest, "mono", "on", "pressed", {
297 size: "sm",
298 }),
299 background: background(theme.highest, "on", "pressed"),
300 },
301 },
302 },
303 }),
304 // Next/Previous Match buttons
305 // HACK: This is not how disabled elements should be created
306 // Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
307 nav_button: toggleable({
308 state: {
309 inactive: interactive({
310 base: {
311 background: background(theme.highest, "disabled"),
312 text: text(theme.highest, "mono", "disabled"),
313 corner_radius: 6,
314 border: {
315 ...border(theme.highest, "disabled"),
316 left: false,
317 right: false,
318 },
319 margin: {
320 top: 1,
321 bottom: 1,
322 },
323 padding: {
324 left: 10,
325 right: 10,
326 },
327 },
328 state: {
329 hovered: {},
330 },
331 }),
332 active: interactive({
333 base: {
334 text: text(theme.highest, "mono", "on"),
335 background: background(theme.highest, "on"),
336 corner_radius: 6,
337 border: {
338 ...border(theme.highest, "on"),
339 left: false,
340 right: false,
341 },
342 margin: {
343 top: 1,
344 bottom: 1,
345 },
346 padding: {
347 left: 10,
348 right: 10,
349 },
350 },
351 state: {
352 hovered: {
353 ...text(theme.highest, "mono", "on", "hovered"),
354 background: background(
355 theme.highest,
356 "on",
357 "hovered"
358 ),
359 border: border(theme.highest, "on", "hovered"),
360 },
361 clicked: {
362 ...text(theme.highest, "mono", "on", "pressed"),
363 background: background(
364 theme.highest,
365 "on",
366 "pressed"
367 ),
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 padding: {
379 right: SEARCH_ROW_SPACING,
380 },
381 },
382 replace_icon: {
383 icon: {
384 color: foreground(theme.highest, "disabled"),
385 asset: "icons/replace.svg",
386 dimensions: {
387 width: 14,
388 height: 14,
389 },
390 },
391 container: {
392 margin: { right: 4 },
393 padding: { left: 1, right: 1 },
394 },
395 },
396 action_button: interactive({
397 base: {
398 icon_size: 14,
399 color: foreground(theme.highest, "variant"),
400
401 button_width: 32,
402 background: background(theme.highest, "on"),
403 corner_radius: 6,
404 margin: { right: 2 },
405 border: {
406 width: 1,
407 color: background(theme.highest, "on"),
408 },
409 padding: {
410 left: 4,
411 right: 4,
412 top: 4,
413 bottom: 4,
414 },
415 },
416 state: {
417 hovered: {
418 ...text(theme.highest, "mono", "variant", "hovered"),
419 background: background(theme.highest, "on", "hovered"),
420 border: {
421 width: 1,
422 color: background(theme.highest, "on", "hovered"),
423 },
424 },
425 clicked: {
426 ...text(theme.highest, "mono", "variant", "pressed"),
427 background: background(theme.highest, "on", "pressed"),
428 border: {
429 width: 1,
430 color: background(theme.highest, "on", "pressed"),
431 },
432 },
433 },
434 }),
435 ...search_results(),
436 }
437}