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}