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