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: 4, bottom: 4 },
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 right: 9,
214 },
215 },
216 option_button_group: {
217 padding: {
218 left: 12,
219 right: 12,
220 },
221 },
222 include_exclude_inputs: {
223 ...text(theme.highest, "mono", "variant"),
224 padding: {
225 right: 6,
226 },
227 },
228 major_results_status: {
229 ...text(theme.highest, "mono", "on"),
230 size: 15,
231 },
232 minor_results_status: {
233 ...text(theme.highest, "mono", "variant"),
234 size: 13,
235 },
236 editor_icon: {
237 icon: {
238 color: foreground(theme.highest, "variant"),
239 asset: "icons/magnifying_glass_12.svg",
240 dimensions: {
241 width: 12,
242 height: 12,
243 }
244 },
245 container: {
246 margin: { right: 6 },
247 padding: { left: 2, right: 2 },
248 }
249 },
250 mode_button: toggleable({
251 base: interactive({
252 base: {
253 ...text(theme.highest, "mono", "variant"),
254 background: background(theme.highest, "variant"),
255
256 border: {
257 ...border(theme.highest, "on"),
258 left: false,
259 right: false
260 },
261
262 padding: {
263 left: 10,
264 right: 10,
265 },
266 corner_radius: 6,
267 },
268 state: {
269 hovered: {
270 ...text(theme.highest, "mono", "variant", "hovered"),
271 background: background(theme.highest, "variant", "hovered"),
272 border: border(theme.highest, "on", "hovered"),
273 },
274 clicked: {
275 ...text(theme.highest, "mono", "variant", "pressed"),
276 background: background(theme.highest, "variant", "pressed"),
277 border: border(theme.highest, "on", "pressed"),
278 },
279 },
280 }),
281 state: {
282 active: {
283 default: {
284 ...text(theme.highest, "mono", "on"),
285 background: background(theme.highest, "on")
286 },
287 hovered: {
288 ...text(theme.highest, "mono", "on", "hovered"),
289 background: background(theme.highest, "on", "hovered")
290 },
291 clicked: {
292 ...text(theme.highest, "mono", "on", "pressed"),
293 background: background(theme.highest, "on", "pressed")
294 },
295 },
296 },
297 }),
298 nav_button: toggleable({
299 state: {
300 inactive: interactive({
301 base: {
302 background: background(theme.highest, "disabled"),
303 text: text(theme.highest, "mono", "disabled"),
304 corner_radius: 6,
305 border: {
306 ...border(theme.highest, "disabled"),
307 left: false,
308 right: false,
309 },
310
311 padding: {
312 left: 10,
313 right: 10,
314 },
315 },
316 state: {
317 hovered: {}
318 }
319 }),
320 active: interactive({
321 base: {
322 text: text(theme.highest, "mono", "on"),
323 background: background(theme.highest, "on"),
324 corner_radius: 6,
325 border: {
326 ...border(theme.highest, "on"),
327 left: false,
328 right: false,
329 },
330
331 padding: {
332 left: 10,
333 right: 10,
334 },
335 },
336 state: {
337 hovered: {
338 ...text(theme.highest, "mono", "on", "hovered"),
339 background: background(theme.highest, "on", "hovered"),
340 border: border(theme.highest, "on", "hovered"),
341 },
342 clicked: {
343 ...text(theme.highest, "mono", "on", "pressed"),
344 background: background(theme.highest, "on", "pressed"),
345 border: border(theme.highest, "on", "pressed"),
346 },
347 },
348 })
349 }
350 }),
351 search_bar_row_height: 34,
352 search_row_spacing: 8,
353 option_button_height: 22,
354 modes_container: {}
355 }
356}