search.ts

 1import Theme from "../themes/theme";
 2import { backgroundColor, border, player, text } from "./components";
 3
 4export default function search(theme: Theme) {
 5  const editor = {
 6    background: backgroundColor(theme, 500),
 7    cornerRadius: 8,
 8    minWidth: 200,
 9    maxWidth: 500,
10    placeholderText: text(theme, "mono", "placeholder"),
11    selection: player(theme, 1).selection,
12    text: text(theme, "mono", "active"),
13    border: border(theme, "secondary"),
14    margin: {
15      right: 6,
16    },
17    padding: {
18      top: 3,
19      bottom: 3,
20      left: 12,
21      right: 8,
22    },
23  };
24
25  return {
26    matchBackground: theme.editor.highlight.match.value,
27    tabIconSpacing: 8,
28    tabIconWidth: 14,
29    optionButton: {
30      ...text(theme, "mono", "secondary"),
31      background: backgroundColor(theme, "on500"),
32      cornerRadius: 4,
33      border: border(theme, "secondary"),
34      margin: {
35        left: 2,
36        right: 2,
37      },
38      padding: {
39        bottom: 3,
40        left: 8,
41        right: 8,
42        top: 3,
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: 4,
67        right: 4,
68      },
69    },
70    resultsStatus: {
71      ...text(theme, "mono", "primary"),
72      size: 18,
73    },
74  };
75}