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