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: 3,
24 bottom: 3,
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 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
38 match_background: with_opacity(
39 foreground(theme.highest, "accent"),
40 0.4
41 ),
42 option_button: toggleable({
43 base: interactive({
44 base: {
45 ...text(theme.highest, "mono", "on"),
46 background: background(theme.highest, "on"),
47 corner_radius: 2,
48 border: border(theme.highest, "on"),
49
50 padding: {
51 bottom: 6,
52 left: 6,
53 right: 6,
54 top: 6,
55 },
56 },
57 state: {
58 hovered: {
59 ...text(theme.highest, "mono", "on", "hovered"),
60 background: background(theme.highest, "on", "hovered"),
61 border: border(theme.highest, "on", "hovered"),
62 },
63 clicked: {
64 ...text(theme.highest, "mono", "on", "pressed"),
65 background: background(theme.highest, "on", "pressed"),
66 border: border(theme.highest, "on", "pressed"),
67 },
68 },
69 }),
70 state: {
71 active: {
72 default: {
73 ...text(theme.highest, "mono", "accent"),
74 },
75 hovered: {
76 ...text(theme.highest, "mono", "accent", "hovered"),
77 },
78 clicked: {
79 ...text(theme.highest, "mono", "accent", "pressed"),
80 },
81 },
82 },
83 }),
84 action_button: interactive({
85 base: {
86 ...text(theme.highest, "mono", "on"),
87 background: background(theme.highest, "on"),
88 corner_radius: 6,
89 border: border(theme.highest, "on"),
90 margin: {
91 right: 4,
92 },
93 padding: {
94 bottom: 2,
95 left: 10,
96 right: 10,
97 top: 2,
98 },
99 },
100 state: {
101 hovered: {
102 ...text(theme.highest, "mono", "on", "hovered"),
103 background: background(theme.highest, "on", "hovered"),
104 border: border(theme.highest, "on", "hovered"),
105 },
106 clicked: {
107 ...text(theme.highest, "mono", "on", "pressed"),
108 background: background(theme.highest, "on", "pressed"),
109 border: border(theme.highest, "on", "pressed"),
110 },
111 },
112 }),
113 editor,
114 invalid_editor: {
115 ...editor,
116 border: border(theme.highest, "negative"),
117 },
118 include_exclude_editor,
119 invalid_include_exclude_editor: {
120 ...include_exclude_editor,
121 border: border(theme.highest, "negative"),
122 },
123 match_index: {
124 ...text(theme.highest, "mono", "variant"),
125 padding: {
126 left: 6,
127 },
128 },
129 option_button_group: {
130 padding: {
131 left: 12,
132 right: 12,
133 top: 3,
134 bottom: 3,
135 },
136 },
137 include_exclude_inputs: {
138 ...text(theme.highest, "mono", "variant"),
139 padding: {
140 right: 6,
141 },
142 },
143 major_results_status: {
144 ...text(theme.highest, "mono", "on"),
145 size: 15,
146 },
147 minor_results_status: {
148 ...text(theme.highest, "mono", "variant"),
149 size: 13,
150 },
151 dismiss_button: interactive({
152 base: {
153 color: foreground(theme.highest, "variant"),
154 icon_width: 12,
155 button_width: 14,
156 padding: {
157 left: 10,
158 right: 10,
159 },
160 },
161 state: {
162 hovered: {
163 color: foreground(theme.highest, "hovered"),
164 },
165 clicked: {
166 color: foreground(theme.highest, "pressed"),
167 },
168 },
169 }),
170 editor_icon: {
171 icon: {
172 color: foreground(theme.highest, "variant"),
173 asset: "icons/magnifying_glass_12.svg",
174 dimensions: {
175 width: 12,
176 height: 12,
177 }
178 },
179 container: {
180 margin: { right: 6 },
181 padding: { left: 4 }
182 }
183 },
184 mode_button: toggleable({
185 base: interactive({
186 base: {
187 ...text(theme.highest, "mono", "on"),
188 background: background(theme.highest, "on"),
189
190 border: border(theme.highest, "on"),
191
192 padding: {
193 bottom: 6,
194 left: 10,
195 right: 10,
196 top: 6,
197 },
198 corner_radius: 2,
199 },
200 state: {
201 hovered: {
202 ...text(theme.highest, "mono", "on", "hovered"),
203 background: background(theme.highest, "on", "hovered"),
204 border: border(theme.highest, "on", "hovered"),
205 },
206 clicked: {
207 ...text(theme.highest, "mono", "on", "pressed"),
208 background: background(theme.highest, "on", "pressed"),
209 border: border(theme.highest, "on", "pressed"),
210 },
211 },
212 }),
213 state: {
214 active: {
215 default: {
216 ...text(theme.highest, "mono", "accent"),
217 },
218 hovered: {
219 ...text(theme.highest, "mono", "accent", "hovered"),
220 },
221 clicked: {
222 ...text(theme.highest, "mono", "accent", "pressed"),
223 },
224 },
225 },
226 }),
227 mode_filling_width: 4.0,
228 nav_button: interactive({
229 base: {
230 text: text(theme.highest, "mono", "on"),
231 background: background(theme.highest, "on"),
232 corner_radius: 2,
233 border: border(theme.highest, "on"),
234
235 padding: {
236 bottom: 6,
237 left: 6,
238 right: 6,
239 top: 6,
240 },
241 },
242 state: {
243 hovered: {
244 ...text(theme.highest, "mono", "on", "hovered"),
245 background: background(theme.highest, "on", "hovered"),
246 border: border(theme.highest, "on", "hovered"),
247 },
248 clicked: {
249 ...text(theme.highest, "mono", "on", "pressed"),
250 background: background(theme.highest, "on", "pressed"),
251 border: border(theme.highest, "on", "pressed"),
252 },
253 },
254 }),
255
256 }
257}