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    tabIconSpacing: 8,
33    tabIconWidth: 14,
34    optionButton: {
35      ...text(layer, "mono", "on"),
36      background: background(layer, "on"),
37      cornerRadius: 6,
38      border: border(layer, "on"),
39      margin: {
40        right: 4,
41      },
42      padding: {
43        bottom: 2,
44        left: 10,
45        right: 10,
46        top: 2,
47      },
48      active: {
49        ...text(layer, "mono", "on", "inverted"),
50        background: background(layer, "on", "inverted"),
51        border: border(layer, "on", "inverted"),
52      },
53      clicked: {
54        ...text(layer, "mono", "on", "pressed"),
55        background: background(layer, "on", "pressed"),
56        border: border(layer, "on", "pressed"),
57      },
58      hover: {
59        ...text(layer, "mono", "on", "hovered"),
60        background: background(layer, "on", "hovered"),
61        border: border(layer, "on", "hovered"),
62      },
63    },
64    editor,
65    invalidEditor: {
66      ...editor,
67      border: border(layer, "negative"),
68    },
69    matchIndex: {
70      ...text(layer, "mono", "variant"),
71      padding: 6,
72    },
73    optionButtonGroup: {
74      padding: {
75        left: 12,
76        right: 12,
77      },
78    },
79    resultsStatus: {
80      ...text(layer, "mono", "on"),
81      size: 18,
82    },
83  };
84}