1import { ColorScheme } from "../theme/colorScheme"
2import { withOpacity } from "../theme/color"
3import { background, border, foreground, text } from "./components"
4import { interactive, toggleable } from "../element"
5
6export default function search(colorScheme: ColorScheme) {
7 let layer = colorScheme.highest
8
9 // Search input
10 const editor = {
11 background: background(layer),
12 cornerRadius: 8,
13 minWidth: 200,
14 maxWidth: 500,
15 placeholderText: text(layer, "mono", "disabled"),
16 selection: colorScheme.players[0],
17 text: text(layer, "mono", "default"),
18 border: border(layer),
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 includeExcludeEditor = {
31 ...editor,
32 minWidth: 100,
33 maxWidth: 250,
34 }
35
36 return {
37 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
38 matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
39 optionButton: toggleable({
40 base: interactive({
41 base: {
42 ...text(layer, "mono", "on"),
43 background: background(layer, "on"),
44 cornerRadius: 6,
45 border: border(layer, "on"),
46 margin: {
47 right: 4,
48 },
49 padding: {
50 bottom: 2,
51 left: 10,
52 right: 10,
53 top: 2,
54 },
55 },
56 state: {
57 hovered: {
58 ...text(layer, "mono", "on", "hovered"),
59 background: background(layer, "on", "hovered"),
60 border: border(layer, "on", "hovered"),
61 },
62 clicked: {
63 ...text(layer, "mono", "on", "pressed"),
64 background: background(layer, "on", "pressed"),
65 border: border(layer, "on", "pressed"),
66 },
67 },
68 }),
69 state: {
70 active: {
71 default: {
72 ...text(layer, "mono", "accent"),
73 },
74 hovered: {
75 ...text(layer, "mono", "accent", "hovered"),
76 },
77 clicked: {
78 ...text(layer, "mono", "accent", "pressed"),
79 },
80 },
81 },
82 }),
83 editor,
84 invalidEditor: {
85 ...editor,
86 border: border(layer, "negative"),
87 },
88 includeExcludeEditor,
89 invalidIncludeExcludeEditor: {
90 ...includeExcludeEditor,
91 border: border(layer, "negative"),
92 },
93 matchIndex: {
94 ...text(layer, "mono", "variant"),
95 padding: {
96 left: 6,
97 },
98 },
99 optionButtonGroup: {
100 padding: {
101 left: 12,
102 right: 12,
103 },
104 },
105 includeExcludeInputs: {
106 ...text(layer, "mono", "variant"),
107 padding: {
108 right: 6,
109 },
110 },
111 resultsStatus: {
112 ...text(layer, "mono", "on"),
113 size: 18,
114 },
115 dismissButton: interactive({
116 base: {
117 color: foreground(layer, "variant"),
118 iconWidth: 12,
119 buttonWidth: 14,
120 padding: {
121 left: 10,
122 right: 10,
123 },
124 },
125 state: {
126 hovered: {
127 color: foreground(layer, "hovered"),
128 },
129 clicked: {
130 color: foreground(layer, "pressed"),
131 },
132 },
133 }),
134 }
135}