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: 12,
26 right: 8,
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: 6,
48 border: border(theme.highest, "on"),
49 margin: {
50 right: 4,
51 },
52 padding: {
53 bottom: 2,
54 left: 10,
55 right: 10,
56 top: 2,
57 },
58 },
59 state: {
60 hovered: {
61 ...text(theme.highest, "mono", "on", "hovered"),
62 background: background(theme.highest, "on", "hovered"),
63 border: border(theme.highest, "on", "hovered"),
64 },
65 clicked: {
66 ...text(theme.highest, "mono", "on", "pressed"),
67 background: background(theme.highest, "on", "pressed"),
68 border: border(theme.highest, "on", "pressed"),
69 },
70 },
71 }),
72 state: {
73 active: {
74 default: {
75 ...text(theme.highest, "mono", "accent"),
76 },
77 hovered: {
78 ...text(theme.highest, "mono", "accent", "hovered"),
79 },
80 clicked: {
81 ...text(theme.highest, "mono", "accent", "pressed"),
82 },
83 },
84 },
85 }),
86 action_button: interactive({
87 base: {
88 ...text(theme.highest, "mono", "on"),
89 background: background(theme.highest, "on"),
90 corner_radius: 6,
91 border: border(theme.highest, "on"),
92 margin: {
93 right: 4,
94 },
95 padding: {
96 bottom: 2,
97 left: 10,
98 right: 10,
99 top: 2,
100 },
101 },
102 state: {
103 hovered: {
104 ...text(theme.highest, "mono", "on", "hovered"),
105 background: background(theme.highest, "on", "hovered"),
106 border: border(theme.highest, "on", "hovered"),
107 },
108 clicked: {
109 ...text(theme.highest, "mono", "on", "pressed"),
110 background: background(theme.highest, "on", "pressed"),
111 border: border(theme.highest, "on", "pressed"),
112 },
113 },
114 }),
115 editor,
116 invalid_editor: {
117 ...editor,
118 border: border(theme.highest, "negative"),
119 },
120 include_exclude_editor,
121 invalid_include_exclude_editor: {
122 ...include_exclude_editor,
123 border: border(theme.highest, "negative"),
124 },
125 match_index: {
126 ...text(theme.highest, "mono", "variant"),
127 padding: {
128 left: 6,
129 },
130 },
131 option_button_group: {
132 padding: {
133 left: 12,
134 right: 12,
135 },
136 },
137 include_exclude_inputs: {
138 ...text(theme.highest, "mono", "variant"),
139 padding: {
140 right: 6,
141 },
142 },
143 results_status: {
144 ...text(theme.highest, "mono", "on"),
145 size: 18,
146 },
147 dismiss_button: interactive({
148 base: {
149 color: foreground(theme.highest, "variant"),
150 icon_width: 12,
151 button_width: 14,
152 padding: {
153 left: 10,
154 right: 10,
155 },
156 },
157 state: {
158 hovered: {
159 color: foreground(theme.highest, "hovered"),
160 },
161 clicked: {
162 color: foreground(theme.highest, "pressed"),
163 },
164 },
165 }),
166 }
167}