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