search.ts

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