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:
41 interactive({
42 base: {
43 ...text(layer, "mono", "on"),
44 background: background(layer, "on"),
45 cornerRadius: 6,
46 border: border(layer, "on"),
47 margin: {
48 right: 4,
49 },
50 padding: {
51 bottom: 2,
52 left: 10,
53 right: 10,
54 top: 2,
55 },
56 },
57 state: {
58 clicked: {
59 ...text(layer, "mono", "on", "pressed"),
60 background: background(layer, "on", "pressed"),
61 border: border(layer, "on", "pressed"),
62 },
63 hovered: {
64 ...text(layer, "mono", "on", "hovered"),
65 background: background(layer, "on", "hovered"),
66 border: border(layer, "on", "hovered"),
67 },
68 },
69 }),
70 state: {
71 active: {
72 default: {
73 ...text(layer, "mono", "on", "inverted"),
74 background: background(layer, "on", "inverted"),
75 border: border(layer, "on", "inverted"),
76 },
77 }
78 }
79 }
80 ),
81 editor,
82 invalidEditor: {
83 ...editor,
84 border: border(layer, "negative"),
85 },
86 includeExcludeEditor,
87 invalidIncludeExcludeEditor: {
88 ...includeExcludeEditor,
89 border: border(layer, "negative"),
90 },
91 matchIndex: {
92 ...text(layer, "mono", "variant"),
93 padding: {
94 left: 6,
95 },
96 },
97 optionButtonGroup: {
98 padding: {
99 left: 12,
100 right: 12,
101 },
102 },
103 includeExcludeInputs: {
104 ...text(layer, "mono", "variant"),
105 padding: {
106 right: 6,
107 },
108 },
109 resultsStatus: {
110 ...text(layer, "mono", "on"),
111 size: 18,
112 },
113 dismissButton: interactive({
114 base: {
115 color: foreground(layer, "variant"),
116 iconWidth: 12,
117 buttonWidth: 14,
118 padding: {
119 left: 10,
120 right: 10,
121 },
122 },
123 state: {
124 hovered: {
125 color: foreground(layer, "hovered"),
126 },
127 },
128 }),
129 }
130}