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