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: 32, bottom: 32, left: 32, right: 32 },
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", "on"),
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", "on", "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", "on", "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: 12,
165 button_width: 14,
166 padding: {
167 left: 10,
168 right: 10,
169 },
170 },
171 state: {
172 hovered: {
173 color: foreground(theme.highest, "hovered"),
174 },
175 clicked: {
176 color: foreground(theme.highest, "pressed"),
177 },
178 },
179 }),
180 editor_icon: {
181 icon: {
182 color: foreground(theme.highest, "variant"),
183 asset: "icons/magnifying_glass_12.svg",
184 dimensions: {
185 width: 12,
186 height: 12,
187 }
188 },
189 container: {
190 margin: { right: 6 },
191 padding: { left: 4 }
192 }
193 },
194 mode_button: toggleable({
195 base: interactive({
196 base: {
197 ...text(theme.highest, "mono", "variant"),
198 background: background(theme.highest, "variant"),
199
200 border: {
201 ...border(theme.highest, "on"),
202 left: false,
203 right: false
204 },
205
206 padding: {
207 bottom: 4,
208 left: 10,
209 right: 10,
210 top: 5,
211 },
212 corner_radius: 6,
213 },
214 state: {
215 hovered: {
216 ...text(theme.highest, "mono", "variant", "hovered"),
217 background: background(theme.highest, "variant", "hovered"),
218 border: border(theme.highest, "on", "hovered"),
219 },
220 clicked: {
221 ...text(theme.highest, "mono", "variant", "pressed"),
222 background: background(theme.highest, "variant", "pressed"),
223 border: border(theme.highest, "on", "pressed"),
224 },
225 },
226 }),
227 state: {
228 active: {
229 default: {
230 ...text(theme.highest, "mono", "on"),
231 background: background(theme.highest, "on")
232 },
233 hovered: {
234 ...text(theme.highest, "mono", "on", "hovered"),
235 background: background(theme.highest, "on", "hovered")
236 },
237 clicked: {
238 ...text(theme.highest, "mono", "on", "pressed"),
239 background: background(theme.highest, "on", "pressed")
240 },
241 },
242 },
243 }),
244 nav_button: interactive({
245 base: {
246 text: text(theme.highest, "mono", "on"),
247 background: background(theme.highest, "on"),
248 corner_radius: 6,
249 border: {
250 ...border(theme.highest, "on"),
251 left: false,
252 right: false,
253 },
254
255 padding: {
256 bottom: 6,
257 left: 6,
258 right: 6,
259 top: 6,
260 },
261 },
262 state: {
263 hovered: {
264 ...text(theme.highest, "mono", "on", "hovered"),
265 background: background(theme.highest, "on", "hovered"),
266 border: border(theme.highest, "on", "hovered"),
267 },
268 clicked: {
269 ...text(theme.highest, "mono", "on", "pressed"),
270 background: background(theme.highest, "on", "pressed"),
271 border: border(theme.highest, "on", "pressed"),
272 },
273 },
274 }),
275
276 }
277}