picker.ts

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