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 editor,
87 invalid_editor: {
88 ...editor,
89 border: border(theme.highest, "negative"),
90 },
91 include_exclude_editor,
92 invalid_include_exclude_editor: {
93 ...include_exclude_editor,
94 border: border(theme.highest, "negative"),
95 },
96 match_index: {
97 ...text(theme.highest, "mono", "variant"),
98 padding: {
99 left: 6,
100 },
101 },
102 option_button_group: {
103 padding: {
104 left: 12,
105 right: 12,
106 },
107 },
108 include_exclude_inputs: {
109 ...text(theme.highest, "mono", "variant"),
110 padding: {
111 right: 6,
112 },
113 },
114 results_status: {
115 ...text(theme.highest, "mono", "on"),
116 size: 18,
117 },
118 dismiss_button: interactive({
119 base: {
120 color: foreground(theme.highest, "variant"),
121 icon_width: 12,
122 button_width: 14,
123 padding: {
124 left: 10,
125 right: 10,
126 },
127 },
128 state: {
129 hovered: {
130 color: foreground(theme.highest, "hovered"),
131 },
132 clicked: {
133 color: foreground(theme.highest, "pressed"),
134 },
135 },
136 }),
137 }
138}