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  return {
 7    background: background(layer),
 8    border: border(layer),
 9    shadow: colorScheme.modalShadow,
10    cornerRadius: 12,
11    padding: {
12      bottom: 4,
13    },
14    item: {
15      padding: {
16        bottom: 4,
17        left: 12,
18        right: 12,
19        top: 4,
20      },
21      margin: {
22        top: 1,
23        left: 4,
24        right: 4,
25      },
26      cornerRadius: 8,
27      text: text(layer, "sans", "variant"),
28      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
29      active: {
30        background: background(layer, "base", "active"),
31        text: text(layer, "sans", "base", "active"),
32        highlightText: text(layer, "sans", "accent", {
33          weight: "bold",
34        }),
35      },
36      hover: {
37        background: background(layer, "hovered"),
38      },
39    },
40    empty: {
41      text: text(layer, "sans", "variant"),
42      padding: {
43        bottom: 8,
44        left: 16,
45        right: 16,
46        top: 8,
47      },
48    },
49    inputEditor: {
50      placeholderText: text(layer, "sans", "on", "disabled"),
51      selection: colorScheme.players[0],
52      text: text(layer, "mono", "on"),
53      border: border(layer, { bottom: true }),
54      padding: {
55        bottom: 8,
56        left: 16,
57        right: 16,
58        top: 8,
59      },
60      margin: {
61        bottom: 4,
62      },
63    },
64  };
65}