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