search.ts

 1import Theme from "../themes/common/theme";
 2import { backgroundColor, border, player, text } from "./components";
 3
 4export default function search(theme: Theme) {
 5  // Search input
 6  const editor = {
 7    background: backgroundColor(theme, 500),
 8    cornerRadius: 8,
 9    minWidth: 200,
10    maxWidth: 500,
11    placeholderText: text(theme, "mono", "placeholder"),
12    selection: player(theme, 1).selection,
13    text: text(theme, "mono", "active"),
14    border: border(theme, "secondary"),
15    margin: {
16      right: 12,
17    },
18    padding: {
19      top: 3,
20      bottom: 3,
21      left: 12,
22      right: 8,
23    },
24  };
25
26  return {
27    matchBackground: theme.editor.highlight.match,
28    tabIconSpacing: 8,
29    tabIconWidth: 14,
30    optionButton: {
31      ...text(theme, "mono", "secondary"),
32      background: backgroundColor(theme, "on500"),
33      cornerRadius: 6,
34      border: border(theme, "secondary"),
35      margin: {
36        right: 4,
37      },
38      padding: {
39        bottom: 2,
40        left: 10,
41        right: 10,
42        top: 2,
43      },
44      active: {
45        ...text(theme, "mono", "active"),
46        background: backgroundColor(theme, "on500", "active"),
47        border: border(theme, "muted"),
48      },
49      hover: {
50        ...text(theme, "mono", "active"),
51        background: backgroundColor(theme, "on500", "hovered"),
52        border: border(theme, "muted"),
53      },
54    },
55    editor,
56    invalidEditor: {
57      ...editor,
58      border: border(theme, "error"),
59    },
60    matchIndex: {
61      ...text(theme, "mono", "muted"),
62      padding: 6,
63    },
64    optionButtonGroup: {
65      padding: {
66        left: 12,
67        right: 12,
68      },
69    },
70    resultsStatus: {
71      ...text(theme, "mono", "primary"),
72      size: 18,
73    },
74  };
75}