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