131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
import { ColorScheme } from "../theme/colorScheme"
|
|
import { withOpacity } from "../theme/color"
|
|
import { background, border, foreground, text } from "./components"
|
|
import { interactive, toggleable } from "../element"
|
|
|
|
export default function search(colorScheme: ColorScheme) {
|
|
let layer = colorScheme.highest
|
|
|
|
// Search input
|
|
const editor = {
|
|
background: background(layer),
|
|
cornerRadius: 8,
|
|
minWidth: 200,
|
|
maxWidth: 500,
|
|
placeholderText: text(layer, "mono", "disabled"),
|
|
selection: colorScheme.players[0],
|
|
text: text(layer, "mono", "default"),
|
|
border: border(layer),
|
|
margin: {
|
|
right: 12,
|
|
},
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 12,
|
|
right: 8,
|
|
},
|
|
}
|
|
|
|
const includeExcludeEditor = {
|
|
...editor,
|
|
minWidth: 100,
|
|
maxWidth: 250,
|
|
}
|
|
|
|
return {
|
|
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
|
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
|
|
optionButton: toggleable({
|
|
base:
|
|
interactive({
|
|
base: {
|
|
...text(layer, "mono", "on"),
|
|
background: background(layer, "on"),
|
|
cornerRadius: 6,
|
|
border: border(layer, "on"),
|
|
margin: {
|
|
right: 4,
|
|
},
|
|
padding: {
|
|
bottom: 2,
|
|
left: 10,
|
|
right: 10,
|
|
top: 2,
|
|
},
|
|
},
|
|
state: {
|
|
clicked: {
|
|
...text(layer, "mono", "on", "pressed"),
|
|
background: background(layer, "on", "pressed"),
|
|
border: border(layer, "on", "pressed"),
|
|
},
|
|
hovered: {
|
|
...text(layer, "mono", "on", "hovered"),
|
|
background: background(layer, "on", "hovered"),
|
|
border: border(layer, "on", "hovered"),
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
...text(layer, "mono", "on", "inverted"),
|
|
background: background(layer, "on", "inverted"),
|
|
border: border(layer, "on", "inverted"),
|
|
},
|
|
}
|
|
}
|
|
}
|
|
),
|
|
editor,
|
|
invalidEditor: {
|
|
...editor,
|
|
border: border(layer, "negative"),
|
|
},
|
|
includeExcludeEditor,
|
|
invalidIncludeExcludeEditor: {
|
|
...includeExcludeEditor,
|
|
border: border(layer, "negative"),
|
|
},
|
|
matchIndex: {
|
|
...text(layer, "mono", "variant"),
|
|
padding: {
|
|
left: 6,
|
|
},
|
|
},
|
|
optionButtonGroup: {
|
|
padding: {
|
|
left: 12,
|
|
right: 12,
|
|
},
|
|
},
|
|
includeExcludeInputs: {
|
|
...text(layer, "mono", "variant"),
|
|
padding: {
|
|
right: 6,
|
|
},
|
|
},
|
|
resultsStatus: {
|
|
...text(layer, "mono", "on"),
|
|
size: 18,
|
|
},
|
|
dismissButton: interactive({
|
|
base: {
|
|
color: foreground(layer, "variant"),
|
|
iconWidth: 12,
|
|
buttonWidth: 14,
|
|
padding: {
|
|
left: 10,
|
|
right: 10,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
color: foreground(layer, "hovered"),
|
|
},
|
|
},
|
|
}),
|
|
}
|
|
}
|