1import { ColorScheme } from "../themes/common/colorScheme"
 2import { withOpacity } from "../utils/color"
 3import { background, border, text } from "./components"
 4
 5export default function picker(colorScheme: ColorScheme) {
 6    let layer = colorScheme.lowest
 7    const container = {
 8        background: background(layer),
 9        border: border(layer),
10        shadow: colorScheme.modalShadow,
11        cornerRadius: 12,
12        padding: {
13            bottom: 4,
14        },
15    }
16    const inputEditor = {
17        placeholderText: text(layer, "sans", "on", "disabled"),
18        selection: colorScheme.players[0],
19        text: text(layer, "mono", "on"),
20        border: border(layer, { bottom: true }),
21        padding: {
22            bottom: 8,
23            left: 16,
24            right: 16,
25            top: 8,
26        },
27        margin: {
28            bottom: 4,
29        },
30    }
31    const emptyInputEditor = { ...inputEditor }
32    delete emptyInputEditor.border
33    delete emptyInputEditor.margin
34
35    return {
36        ...container,
37        emptyContainer: {
38            ...container,
39            padding: {},
40        },
41        item: {
42            padding: {
43                bottom: 4,
44                left: 12,
45                right: 12,
46                top: 4,
47            },
48            margin: {
49                top: 1,
50                left: 4,
51                right: 4,
52            },
53            cornerRadius: 8,
54            text: text(layer, "sans", "variant"),
55            highlightText: text(layer, "sans", "accent", { weight: "bold" }),
56            active: {
57                background: withOpacity(
58                    background(layer, "base", "active"),
59                    0.5
60                ),
61                text: text(layer, "sans", "base", "active"),
62                highlightText: text(layer, "sans", "accent", {
63                    weight: "bold",
64                }),
65            },
66            hover: {
67                background: withOpacity(background(layer, "hovered"), 0.5),
68            },
69        },
70        inputEditor,
71        emptyInputEditor,
72        noMatches: {
73            text: text(layer, "sans", "variant"),
74            padding: {
75                bottom: 8,
76                left: 16,
77                right: 16,
78                top: 8,
79            },
80        },
81    }
82}