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(
44            interactive({
45                base: {
46                    padding: {
47                        bottom: 4,
48                        left: 12,
49                        right: 12,
50                        top: 4,
51                    },
52                    margin: {
53                        top: 1,
54                        left: 4,
55                        right: 4,
56                    },
57                    cornerRadius: 8,
58                    text: text(layer, "sans", "variant"),
59                    highlightText: text(layer, "sans", "accent", {
60                        weight: "bold",
61                    }),
62                },
63                state: {
64                    hovered: {
65                        background: withOpacity(
66                            background(layer, "hovered"),
67                            0.5
68                        ),
69                    },
70                },
71            }),
72            {
73                default: {
74                    background: withOpacity(
75                        background(layer, "base", "active"),
76                        0.5
77                    ),
78                    //text: text(layer, "sans", "base", "active"),
79                },
80            }
81        ),
82
83        inputEditor,
84        emptyInputEditor,
85        noMatches: {
86            text: text(layer, "sans", "variant"),
87            padding: {
88                bottom: 8,
89                left: 16,
90                right: 16,
91                top: 8,
92            },
93        },
94    }
95}