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}