1import { ColorScheme } from "../themes/common/colorScheme"
2import { withOpacity } from "../utils/color"
3import { background, border, foreground, text } from "./components"
4
5export default function search(colorScheme: ColorScheme) {
6 let layer = colorScheme.highest
7
8 // Search input
9 const editor = {
10 background: background(layer),
11 cornerRadius: 8,
12 minWidth: 200,
13 maxWidth: 500,
14 placeholderText: text(layer, "mono", "disabled"),
15 selection: colorScheme.players[0],
16 text: text(layer, "mono", "default"),
17 border: border(layer),
18 margin: {
19 right: 12,
20 },
21 padding: {
22 top: 3,
23 bottom: 3,
24 left: 12,
25 right: 8,
26 },
27 }
28
29 return {
30 // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
31 matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
32 optionButton: {
33 ...text(layer, "mono", "on"),
34 background: background(layer, "on"),
35 cornerRadius: 6,
36 border: border(layer, "on"),
37 margin: {
38 right: 4,
39 },
40 padding: {
41 bottom: 2,
42 left: 10,
43 right: 10,
44 top: 2,
45 },
46 active: {
47 ...text(layer, "mono", "on", "inverted"),
48 background: background(layer, "on", "inverted"),
49 border: border(layer, "on", "inverted"),
50 },
51 clicked: {
52 ...text(layer, "mono", "on", "pressed"),
53 background: background(layer, "on", "pressed"),
54 border: border(layer, "on", "pressed"),
55 },
56 hover: {
57 ...text(layer, "mono", "on", "hovered"),
58 background: background(layer, "on", "hovered"),
59 border: border(layer, "on", "hovered"),
60 },
61 },
62 editor,
63 invalidEditor: {
64 ...editor,
65 border: border(layer, "negative"),
66 },
67 includeExcludeEditor: {
68 ...editor,
69 minWidth: 100,
70 maxWidth: 250,
71 },
72 matchIndex: {
73 ...text(layer, "mono", "variant"),
74 padding: {
75 left: 6,
76 },
77 },
78 optionButtonGroup: {
79 padding: {
80 left: 12,
81 right: 12,
82 },
83 },
84 includeExcludeInputs: {
85 ...text(layer, "mono", "variant"),
86 padding: {
87 right: 6,
88 },
89 },
90 resultsStatus: {
91 ...text(layer, "mono", "on"),
92 size: 18,
93 },
94 dismissButton: {
95 color: foreground(layer, "variant"),
96 iconWidth: 12,
97 buttonWidth: 14,
98 padding: {
99 left: 10,
100 right: 10,
101 },
102 hover: {
103 color: foreground(layer, "hovered"),
104 },
105 },
106 }
107}