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 padding: {
45 bottom: 4,
46 left: 12,
47 right: 12,
48 top: 4,
49 },
50 margin: {
51 top: 1,
52 left: 4,
53 right: 4,
54 },
55 cornerRadius: 8,
56 text: text(layer, "sans", "variant"),
57 highlightText: text(layer, "sans", "accent", { weight: "bold" }),
58 }, {
59 hover: {
60 background: withOpacity(background(layer, "hovered"), 0.5),
61 }
62 }),
63 {
64 default: {
65 background: withOpacity(
66 background(layer, "base", "active"),
67 0.5
68 ),
69 //text: text(layer, "sans", "base", "active"),
70 }
71 }),
72
73
74 inputEditor,
75 emptyInputEditor,
76 noMatches: {
77 text: text(layer, "sans", "variant"),
78 padding: {
79 bottom: 8,
80 left: 16,
81 right: 16,
82 top: 8,
83 },
84 },
85 }
86}