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        matchIndex: {
68            ...text(layer, "mono", "variant"),
69            padding: 6,
70        },
71        optionButtonGroup: {
72            padding: {
73                left: 12,
74                right: 12,
75            },
76        },
77        resultsStatus: {
78            ...text(layer, "mono", "on"),
79            size: 18,
80        },
81        dismissButton: {
82            color: foreground(layer, "variant"),
83            iconWidth: 12,
84            buttonWidth: 14,
85            padding: {
86                left: 10,
87                right: 10,
88            },
89            hover: {
90                color: foreground(layer, "hovered"),
91            },
92        },
93    }
94}