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