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