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
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 },
134 },
135 include_exclude_inputs: {
136 ...text(theme.highest, "mono", "variant"),
137 padding: {
138 right: 6,
139 },
140 },
141 major_results_status: {
142 ...text(theme.highest, "mono", "on"),
143 size: 15,
144 },
145 minor_results_status: {
146 ...text(theme.highest, "mono", "variant"),
147 size: 13,
148 },
149 dismiss_button: interactive({
150 base: {
151 color: foreground(theme.highest, "variant"),
152 icon_width: 12,
153 button_width: 14,
154 padding: {
155 left: 10,
156 right: 10,
157 },
158 },
159 state: {
160 hovered: {
161 color: foreground(theme.highest, "hovered"),
162 },
163 clicked: {
164 color: foreground(theme.highest, "pressed"),
165 },
166 },
167 }),
168 editor_icon: {
169 icon: {
170 color: foreground(theme.highest, "variant"),
171 asset: "icons/magnifying_glass_12.svg",
172 dimensions: {
173 width: 12,
174 height: 12,
175 }
176 },
177 container: {
178 margin: { right: 6 },
179 padding: { left: 4 }
180 }
181 },
182 mode_button: toggleable({
183 base: interactive({
184 base: {
185 ...text(theme.highest, "mono", "on"),
186 background: background(theme.highest, "on"),
187
188 border: border(theme.highest, "on"),
189
190 padding: {
191 bottom: 6,
192 left: 10,
193 right: 10,
194 top: 6,
195 },
196 corner_radius: 2,
197 },
198 state: {
199 hovered: {
200 ...text(theme.highest, "mono", "on", "hovered"),
201 background: background(theme.highest, "on", "hovered"),
202 border: border(theme.highest, "on", "hovered"),
203 },
204 clicked: {
205 ...text(theme.highest, "mono", "on", "pressed"),
206 background: background(theme.highest, "on", "pressed"),
207 border: border(theme.highest, "on", "pressed"),
208 },
209 },
210 }),
211 state: {
212 active: {
213 default: {
214 ...text(theme.highest, "mono", "accent"),
215 },
216 hovered: {
217 ...text(theme.highest, "mono", "accent", "hovered"),
218 },
219 clicked: {
220 ...text(theme.highest, "mono", "accent", "pressed"),
221 },
222 },
223 },
224 }),
225 mode_filling_width: 4.0,
226 }
227}