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 action_button: toggleable({
100 base: interactive({
101 base: {
102 ...text(theme.highest, "mono", "disabled"),
103 background: background(theme.highest, "disabled"),
104 corner_radius: 6,
105 border: border(theme.highest, "disabled"),
106 padding: {
107 // bottom: 2,
108 left: 10,
109 right: 10,
110 // top: 2,
111 },
112 margin: {
113 right: 9,
114 }
115 },
116 state: {
117 hovered: {}
118 },
119 }),
120 state: {
121 active: interactive({
122 base: {
123 ...text(theme.highest, "mono", "on"),
124 background: background(theme.highest, "on"),
125 border: border(theme.highest, "on"),
126 },
127 state: {
128 hovered: {
129 ...text(theme.highest, "mono", "on", "hovered"),
130 background: background(theme.highest, "on", "hovered"),
131 border: border(theme.highest, "on", "hovered"),
132 },
133 clicked: {
134 ...text(theme.highest, "mono", "on", "pressed"),
135 background: background(theme.highest, "on", "pressed"),
136 border: border(theme.highest, "on", "pressed"),
137 },
138 },
139 })
140 }
141 }),
142 editor,
143 invalid_editor: {
144 ...editor,
145 border: border(theme.highest, "negative"),
146 },
147 include_exclude_editor,
148 invalid_include_exclude_editor: {
149 ...include_exclude_editor,
150 border: border(theme.highest, "negative"),
151 },
152 match_index: {
153 ...text(theme.highest, "mono", "variant"),
154 padding: {
155 left: 9,
156 },
157 },
158 option_button_group: {
159 padding: {
160 left: 12,
161 right: 12,
162 },
163 },
164 include_exclude_inputs: {
165 ...text(theme.highest, "mono", "variant"),
166 padding: {
167 right: 6,
168 },
169 },
170 major_results_status: {
171 ...text(theme.highest, "mono", "on"),
172 size: 15,
173 },
174 minor_results_status: {
175 ...text(theme.highest, "mono", "variant"),
176 size: 13,
177 },
178 dismiss_button: interactive({
179 base: {
180 color: foreground(theme.highest, "variant"),
181 icon_width: 14,
182 button_width: 32,
183 corner_radius: 6,
184 padding: {
185 // // top: 10,
186 // bottom: 10,
187 left: 10,
188 right: 10,
189 },
190
191 background: background(theme.highest, "variant"),
192
193 border: border(theme.highest, "on"),
194 },
195 state: {
196 hovered: {
197 color: foreground(theme.highest, "hovered"),
198 background: background(theme.highest, "variant", "hovered")
199 },
200 clicked: {
201 color: foreground(theme.highest, "pressed"),
202 background: background(theme.highest, "variant", "pressed")
203 },
204 },
205 }),
206 editor_icon: {
207 icon: {
208 color: foreground(theme.highest, "variant"),
209 asset: "icons/magnifying_glass_12.svg",
210 dimensions: {
211 width: 12,
212 height: 12,
213 }
214 },
215 container: {
216 margin: { right: 6 },
217 padding: { left: 2, right: 2 },
218 }
219 },
220 mode_button: toggleable({
221 base: interactive({
222 base: {
223 ...text(theme.highest, "mono", "variant"),
224 background: background(theme.highest, "variant"),
225
226 border: {
227 ...border(theme.highest, "on"),
228 left: false,
229 right: false
230 },
231
232 padding: {
233 left: 10,
234 right: 10,
235 },
236 corner_radius: 6,
237 },
238 state: {
239 hovered: {
240 ...text(theme.highest, "mono", "variant", "hovered"),
241 background: background(theme.highest, "variant", "hovered"),
242 border: border(theme.highest, "on", "hovered"),
243 },
244 clicked: {
245 ...text(theme.highest, "mono", "variant", "pressed"),
246 background: background(theme.highest, "variant", "pressed"),
247 border: border(theme.highest, "on", "pressed"),
248 },
249 },
250 }),
251 state: {
252 active: {
253 default: {
254 ...text(theme.highest, "mono", "on"),
255 background: background(theme.highest, "on")
256 },
257 hovered: {
258 ...text(theme.highest, "mono", "on", "hovered"),
259 background: background(theme.highest, "on", "hovered")
260 },
261 clicked: {
262 ...text(theme.highest, "mono", "on", "pressed"),
263 background: background(theme.highest, "on", "pressed")
264 },
265 },
266 },
267 }),
268 nav_button: toggleable({
269 state: {
270 inactive: interactive({
271 base: {
272 background: background(theme.highest, "disabled"),
273 text: text(theme.highest, "mono", "disabled"),
274 corner_radius: 6,
275 border: {
276 ...border(theme.highest, "disabled"),
277 left: false,
278 right: false,
279 },
280
281 padding: {
282 left: 10,
283 right: 10,
284 },
285 },
286 state: {
287 hovered: {}
288 }
289 }),
290 active: interactive({
291 base: {
292 text: text(theme.highest, "mono", "on"),
293 background: background(theme.highest, "on"),
294 corner_radius: 6,
295 border: {
296 ...border(theme.highest, "on"),
297 left: false,
298 right: false,
299 },
300
301 padding: {
302 left: 10,
303 right: 10,
304 },
305 },
306 state: {
307 hovered: {
308 ...text(theme.highest, "mono", "on", "hovered"),
309 background: background(theme.highest, "on", "hovered"),
310 border: border(theme.highest, "on", "hovered"),
311 },
312 clicked: {
313 ...text(theme.highest, "mono", "on", "pressed"),
314 background: background(theme.highest, "on", "pressed"),
315 border: border(theme.highest, "on", "pressed"),
316 },
317 },
318 })
319 }
320 }),
321 search_bar_row_height: 32,
322 option_button_height: 22,
323 modes_container: {
324 margin: {
325 right: 9
326 }
327 }
328
329 }
330}