search.ts

 1import { ColorScheme } from "../themes/common/colorScheme";
 2import { background, border, text } from "./components";
 3
 4export default function search(colorScheme: ColorScheme) {
 5  let layer = colorScheme.highest;
 6
 7  // Search input
 8  const editor = {
 9    background: background(layer),
10    cornerRadius: 8,
11    minWidth: 200,
12    maxWidth: 500,
13    placeholderText: text(layer, "mono", "disabled"),
14    selection: colorScheme.players[0],
15    text: text(layer, "mono", "default"),
16    border: border(layer),
17    margin: {
18      right: 12,
19    },
20    padding: {
21      top: 3,
22      bottom: 3,
23      left: 12,
24      right: 8,
25    },
26  };
27
28  return {
29    matchBackground: background(layer), // theme.editor.highlight.match,
30    tabIconSpacing: 8,
31    tabIconWidth: 14,
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  };
82}