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: 12,
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 ...text(theme.highest, "mono", "variant"),
47 background: background(theme.highest, "on"),
48 corner_radius: 2,
49 margin: { right: 2 },
50 border: {
51 width: 1., color: background(theme.highest, "on")
52 },
53 padding: {
54 bottom: 4,
55 left: 4,
56 right: 4,
57 top: 4,
58 },
59 },
60 state: {
61 hovered: {
62 ...text(theme.highest, "mono", "variant", "hovered"),
63 background: background(theme.highest, "on", "hovered"),
64 border: {
65 width: 1., color: background(theme.highest, "on", "hovered")
66 },
67 },
68 clicked: {
69 ...text(theme.highest, "mono", "variant", "pressed"),
70 background: background(theme.highest, "on", "pressed"),
71 border: {
72 width: 1., color: background(theme.highest, "on", "pressed")
73 },
74 },
75 },
76 }),
77 state: {
78 active: {
79 default: {
80 background: background(theme.highest, "accent"),
81 border: border(theme.highest, "accent"),
82 },
83 hovered: {
84 background: background(theme.highest, "accent", "hovered"),
85 border: border(theme.highest, "accent", "hovered"),
86 },
87 clicked: {
88 background: background(theme.highest, "accent", "pressed"),
89 border: border(theme.highest, "accent", "pressed"),
90 },
91 },
92 },
93 }),
94 action_button: interactive({
95 base: {
96 ...text(theme.highest, "mono", "on"),
97 background: background(theme.highest, "on"),
98 corner_radius: 6,
99 border: border(theme.highest, "on"),
100 margin: {
101 right: 4,
102 },
103 padding: {
104 bottom: 2,
105 left: 10,
106 right: 10,
107 top: 2,
108 },
109 },
110 state: {
111 hovered: {
112 ...text(theme.highest, "mono", "on", "hovered"),
113 background: background(theme.highest, "on", "hovered"),
114 border: border(theme.highest, "on", "hovered"),
115 },
116 clicked: {
117 ...text(theme.highest, "mono", "on", "pressed"),
118 background: background(theme.highest, "on", "pressed"),
119 border: border(theme.highest, "on", "pressed"),
120 },
121 },
122 }),
123 editor,
124 invalid_editor: {
125 ...editor,
126 border: border(theme.highest, "negative"),
127 },
128 include_exclude_editor,
129 invalid_include_exclude_editor: {
130 ...include_exclude_editor,
131 border: border(theme.highest, "negative"),
132 },
133 match_index: {
134 ...text(theme.highest, "mono", "variant"),
135 padding: {
136 left: 6,
137 },
138 },
139 option_button_group: {
140 padding: {
141 left: 12,
142 right: 12,
143 top: 3,
144 bottom: 3,
145 },
146 },
147 include_exclude_inputs: {
148 ...text(theme.highest, "mono", "variant"),
149 padding: {
150 right: 6,
151 },
152 },
153 major_results_status: {
154 ...text(theme.highest, "mono", "on"),
155 size: 15,
156 },
157 minor_results_status: {
158 ...text(theme.highest, "mono", "variant"),
159 size: 13,
160 },
161 dismiss_button: interactive({
162 base: {
163 color: foreground(theme.highest, "variant"),
164 icon_width: 14,
165 button_width: 32,
166 corner_radius: 6,
167 padding: {
168 top: 8,
169 bottom: 8,
170 left: 8,
171 right: 8,
172 },
173
174 background: background(theme.highest, "variant"),
175
176 border: border(theme.highest, "on"),
177 },
178 state: {
179 hovered: {
180 color: foreground(theme.highest, "hovered"),
181 background: background(theme.highest, "variant", "hovered")
182 },
183 clicked: {
184 color: foreground(theme.highest, "pressed"),
185 background: background(theme.highest, "variant", "pressed")
186 },
187 },
188 }),
189 editor_icon: {
190 icon: {
191 color: foreground(theme.highest, "variant"),
192 asset: "icons/magnifying_glass_12.svg",
193 dimensions: {
194 width: 12,
195 height: 12,
196 }
197 },
198 container: {
199 margin: { right: 6 },
200 padding: { left: 4 }
201 }
202 },
203 mode_button: toggleable({
204 base: interactive({
205 base: {
206 ...text(theme.highest, "mono", "variant"),
207 background: background(theme.highest, "variant"),
208
209 border: {
210 ...border(theme.highest, "on"),
211 left: false,
212 right: false
213 },
214
215 padding: {
216 bottom: 4,
217 left: 10,
218 right: 10,
219 top: 5,
220 },
221 corner_radius: 6,
222 },
223 state: {
224 hovered: {
225 ...text(theme.highest, "mono", "variant", "hovered"),
226 background: background(theme.highest, "variant", "hovered"),
227 border: border(theme.highest, "on", "hovered"),
228 },
229 clicked: {
230 ...text(theme.highest, "mono", "variant", "pressed"),
231 background: background(theme.highest, "variant", "pressed"),
232 border: border(theme.highest, "on", "pressed"),
233 },
234 },
235 }),
236 state: {
237 active: {
238 default: {
239 ...text(theme.highest, "mono", "on"),
240 background: background(theme.highest, "on")
241 },
242 hovered: {
243 ...text(theme.highest, "mono", "on", "hovered"),
244 background: background(theme.highest, "on", "hovered")
245 },
246 clicked: {
247 ...text(theme.highest, "mono", "on", "pressed"),
248 background: background(theme.highest, "on", "pressed")
249 },
250 },
251 },
252 }),
253 nav_button: toggleable({
254 state: {
255 inactive: interactive({
256 base: {
257 background: background(theme.highest, "disabled"),
258 text: text(theme.highest, "mono", "disabled"),
259 corner_radius: 6,
260 border: {
261 ...border(theme.highest, "disabled"),
262 left: false,
263 right: false,
264 },
265
266 padding: {
267 bottom: 3,
268 left: 10,
269 right: 10,
270 top: 3,
271 },
272 },
273 state: {
274 hovered: {}
275 }
276 }),
277 active: interactive({
278 base: {
279 text: text(theme.highest, "mono", "on"),
280 background: background(theme.highest, "on"),
281 corner_radius: 6,
282 border: {
283 ...border(theme.highest, "on"),
284 left: false,
285 right: false,
286 },
287
288 padding: {
289 bottom: 3,
290 left: 10,
291 right: 10,
292 top: 3,
293 },
294 },
295 state: {
296 hovered: {
297 ...text(theme.highest, "mono", "on", "hovered"),
298 background: background(theme.highest, "on", "hovered"),
299 border: border(theme.highest, "on", "hovered"),
300 },
301 clicked: {
302 ...text(theme.highest, "mono", "on", "pressed"),
303 background: background(theme.highest, "on", "pressed"),
304 border: border(theme.highest, "on", "pressed"),
305 },
306 },
307 })
308 }
309 }),
310 search_bar_row_height: 32,
311 option_button_height: 22,
312
313 }
314}