1import { ColorScheme } from "../theme/colorScheme"
2import { withOpacity } from "../theme/color"
3import { background, border, foreground, text } from "./components"
4import { interactive } from "../element"
5import { toggleable } from "./toggle"
6
7export default function search(colorScheme: ColorScheme) {
8 let layer = colorScheme.highest
9
10 // Search input
11 const editor = {
12 background: background(layer),
13 cornerRadius: 8,
14 minWidth: 200,
15 maxWidth: 500,
16 placeholderText: text(layer, "mono", "disabled"),
17 selection: colorScheme.players[0],
18 text: text(layer, "mono", "default"),
19 border: border(layer),
20 margin: {
21 right: 12,
22 },
23 padding: {
24 top: 3,
25 bottom: 3,
26 left: 12,
27 right: 8,
28 },
29 }
30
31 const includeExcludeEditor = {
32 ...editor,
33 minWidth: 100,
34 maxWidth: 250,
35 }
36
37 return {
38 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
39 matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
40 optionButton: toggleable(
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 {
71 default: {
72 ...text(layer, "mono", "on", "inverted"),
73 background: background(layer, "on", "inverted"),
74 border: border(layer, "on", "inverted"),
75 },
76 }
77 ),
78 editor,
79 invalidEditor: {
80 ...editor,
81 border: border(layer, "negative"),
82 },
83 includeExcludeEditor,
84 invalidIncludeExcludeEditor: {
85 ...includeExcludeEditor,
86 border: border(layer, "negative"),
87 },
88 matchIndex: {
89 ...text(layer, "mono", "variant"),
90 padding: {
91 left: 6,
92 },
93 },
94 optionButtonGroup: {
95 padding: {
96 left: 12,
97 right: 12,
98 },
99 },
100 includeExcludeInputs: {
101 ...text(layer, "mono", "variant"),
102 padding: {
103 right: 6,
104 },
105 },
106 resultsStatus: {
107 ...text(layer, "mono", "on"),
108 size: 18,
109 },
110 dismissButton: interactive({
111 base: {
112 color: foreground(layer, "variant"),
113 iconWidth: 12,
114 buttonWidth: 14,
115 padding: {
116 left: 10,
117 right: 10,
118 },
119 },
120 state: {
121 hovered: {
122 color: foreground(layer, "hovered"),
123 },
124 },
125 }),
126 }
127}