1import { ColorScheme } from "../theme/colorScheme"
2import { withOpacity } from "../theme/color"
3import { background, border, foreground, text } from "./components"
4import { interactive } from "../element"
5import { toggleable } from "./toggle"
6
7export default function search(colorScheme: ColorScheme) {
8 let layer = colorScheme.highest
9
10 // Search input
11 const editor = {
12 background: background(layer),
13 cornerRadius: 8,
14 minWidth: 200,
15 maxWidth: 500,
16 placeholderText: text(layer, "mono", "disabled"),
17 selection: colorScheme.players[0],
18 text: text(layer, "mono", "default"),
19 border: border(layer),
20 margin: {
21 right: 12,
22 },
23 padding: {
24 top: 3,
25 bottom: 3,
26 left: 12,
27 right: 8,
28 },
29 }
30
31 const includeExcludeEditor = {
32 ...editor,
33 minWidth: 100,
34 maxWidth: 250,
35 }
36
37 return {
38 // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
39 matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
40 optionButton: toggleable(interactive({
41 base: {
42 ...text(layer, "mono", "on"),
43 background: background(layer, "on"),
44 cornerRadius: 6,
45 border: border(layer, "on"),
46 margin: {
47 right: 4,
48 },
49 padding: {
50 bottom: 2,
51 left: 10,
52 right: 10,
53 top: 2,
54 },
55 }, state: {
56 clicked: {
57 ...text(layer, "mono", "on", "pressed"),
58 background: background(layer, "on", "pressed"),
59 border: border(layer, "on", "pressed"),
60 },
61 hovered: {
62 ...text(layer, "mono", "on", "hovered"),
63 background: background(layer, "on", "hovered"),
64 border: border(layer, "on", "hovered"),
65 },
66 }
67 }), {
68 default: {
69 ...text(layer, "mono", "on", "inverted"),
70 background: background(layer, "on", "inverted"),
71 border: border(layer, "on", "inverted"),
72 },
73
74 }),
75 editor,
76 invalidEditor: {
77 ...editor,
78 border: border(layer, "negative"),
79 },
80 includeExcludeEditor,
81 invalidIncludeExcludeEditor: {
82 ...includeExcludeEditor,
83 border: border(layer, "negative"),
84 },
85 matchIndex: {
86 ...text(layer, "mono", "variant"),
87 padding: {
88 left: 6,
89 },
90 },
91 optionButtonGroup: {
92 padding: {
93 left: 12,
94 right: 12,
95 },
96 },
97 includeExcludeInputs: {
98 ...text(layer, "mono", "variant"),
99 padding: {
100 right: 6,
101 },
102 },
103 resultsStatus: {
104 ...text(layer, "mono", "on"),
105 size: 18,
106 },
107 dismissButton: interactive({
108 base: {
109 color: foreground(layer, "variant"),
110 iconWidth: 12,
111 buttonWidth: 14,
112 padding: {
113 left: 10,
114 right: 10,
115 },
116 }, state: {
117 hovered: {
118 color: foreground(layer, "hovered"),
119 }
120 }
121 }),
122 }
123}