1import { with_opacity } from "../theme/color"
2import { background, border, foreground, text } from "./components"
3import { interactive, toggleable } from "../element"
4import { useTheme } from "../theme"
5import { text_button } from "../component/text_button"
6
7const search_results = () => {
8 const theme = useTheme()
9
10 return {
11 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
12 match_background: with_opacity(
13 foreground(theme.highest, "accent"),
14 0.4
15 ),
16 }
17}
18
19export default function search(): any {
20 const theme = useTheme()
21 const SEARCH_ROW_SPACING = 12
22
23 // Search input
24 const editor = {
25 background: background(theme.highest),
26 corner_radius: 8,
27 min_width: 200,
28 max_width: 500,
29 placeholder_text: text(theme.highest, "mono", "disabled"),
30 selection: theme.players[0],
31 text: text(theme.highest, "mono", "default"),
32 border: border(theme.highest),
33 padding: {
34 top: 4,
35 bottom: 4,
36 left: 10,
37 right: 4,
38 },
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 left: SEARCH_ROW_SPACING,
205 right: SEARCH_ROW_SPACING,
206 },
207 },
208 include_exclude_inputs: {
209 ...text(theme.highest, "mono", "variant"),
210 padding: {
211 right: 6,
212 },
213 },
214 major_results_status: {
215 ...text(theme.highest, "mono", "on"),
216 size: 15,
217 },
218 minor_results_status: {
219 ...text(theme.highest, "mono", "variant"),
220 size: 13,
221 },
222 // Input Icon
223 editor_icon: {
224 icon: {
225 color: foreground(theme.highest, "disabled"),
226 asset: "icons/magnifying_glass.svg",
227 dimensions: {
228 width: 14,
229 height: 14,
230 },
231 },
232 container: {
233 margin: { right: 4 },
234 padding: { left: 1, right: 1 },
235 },
236 },
237 // Toggle group buttons - Text | Regex | Semantic
238 mode_button: toggleable({
239 base: interactive({
240 base: {
241 ...text(theme.highest, "mono", "variant", { size: "sm" }),
242 background: background(theme.highest, "variant"),
243
244 border: {
245 ...border(theme.highest, "on"),
246 left: false,
247 right: false,
248 },
249 margin: {
250 top: 1,
251 bottom: 1,
252 },
253 padding: {
254 left: 10,
255 right: 10,
256 },
257 corner_radius: 6,
258 },
259 state: {
260 hovered: {
261 ...text(theme.highest, "mono", "variant", "hovered", {
262 size: "sm",
263 }),
264 background: background(
265 theme.highest,
266 "variant",
267 "hovered"
268 ),
269 border: border(theme.highest, "on", "hovered"),
270 },
271 clicked: {
272 ...text(theme.highest, "mono", "variant", "pressed", {
273 size: "sm",
274 }),
275 background: background(
276 theme.highest,
277 "variant",
278 "pressed"
279 ),
280 border: border(theme.highest, "on", "pressed"),
281 },
282 },
283 }),
284 state: {
285 active: {
286 default: {
287 ...text(theme.highest, "mono", "on", { size: "sm" }),
288 background: background(theme.highest, "on"),
289 },
290 hovered: {
291 ...text(theme.highest, "mono", "on", "hovered", {
292 size: "sm",
293 }),
294 background: background(theme.highest, "on", "hovered"),
295 },
296 clicked: {
297 ...text(theme.highest, "mono", "on", "pressed", {
298 size: "sm",
299 }),
300 background: background(theme.highest, "on", "pressed"),
301 },
302 },
303 },
304 }),
305 // Next/Previous Match buttons
306 // HACK: This is not how disabled elements should be created
307 // Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
308 nav_button: toggleable({
309 state: {
310 inactive: interactive({
311 base: {
312 background: background(theme.highest, "disabled"),
313 text: text(theme.highest, "mono", "disabled"),
314 corner_radius: 6,
315 border: {
316 ...border(theme.highest, "disabled"),
317 left: false,
318 right: false,
319 },
320 margin: {
321 top: 1,
322 bottom: 1,
323 },
324 padding: {
325 left: 10,
326 right: 10,
327 },
328 },
329 state: {
330 hovered: {},
331 },
332 }),
333 active: interactive({
334 base: {
335 text: text(theme.highest, "mono", "on"),
336 background: background(theme.highest, "on"),
337 corner_radius: 6,
338 border: {
339 ...border(theme.highest, "on"),
340 left: false,
341 right: false,
342 },
343 margin: {
344 top: 1,
345 bottom: 1,
346 },
347 padding: {
348 left: 10,
349 right: 10,
350 },
351 },
352 state: {
353 hovered: {
354 ...text(theme.highest, "mono", "on", "hovered"),
355 background: background(
356 theme.highest,
357 "on",
358 "hovered"
359 ),
360 border: border(theme.highest, "on", "hovered"),
361 },
362 clicked: {
363 ...text(theme.highest, "mono", "on", "pressed"),
364 background: background(
365 theme.highest,
366 "on",
367 "pressed"
368 ),
369 border: border(theme.highest, "on", "pressed"),
370 },
371 },
372 }),
373 },
374 }),
375 search_bar_row_height: 34,
376 search_row_spacing: 8,
377 option_button_height: 22,
378 modes_container: {},
379 replace_icon: {
380 icon: {
381 color: foreground(theme.highest, "disabled"),
382 asset: "icons/replace.svg",
383 dimensions: {
384 width: 14,
385 height: 14,
386 },
387 },
388 container: {
389 margin: { right: 4 },
390 padding: { left: 1, right: 1 },
391 },
392 },
393 action_button: interactive({
394 base: {
395 icon_size: 14,
396 color: foreground(theme.highest, "variant"),
397
398 button_width: 32,
399 background: background(theme.highest, "on"),
400 corner_radius: 6,
401 margin: { right: 2 },
402 border: {
403 width: 1,
404 color: background(theme.highest, "on"),
405 },
406 padding: {
407 left: 4,
408 right: 4,
409 top: 4,
410 bottom: 4,
411 },
412 },
413 state: {
414 hovered: {
415 ...text(theme.highest, "mono", "variant", "hovered"),
416 background: background(theme.highest, "on", "hovered"),
417 border: {
418 width: 1,
419 color: background(theme.highest, "on", "hovered"),
420 },
421 },
422 clicked: {
423 ...text(theme.highest, "mono", "variant", "pressed"),
424 background: background(theme.highest, "on", "pressed"),
425 border: {
426 width: 1,
427 color: background(theme.highest, "on", "pressed"),
428 },
429 },
430 },
431 }),
432 ...search_results(),
433 }
434}