search.ts

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