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