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 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", {
59 weight: "bold",
60 }),
61 },
62 state: {
63 hovered: {
64 background: withOpacity(
65 background(layer, "hovered"),
66 0.5
67 ),
68 },
69 },
70 }),
71 {
72 default: {
73 background: withOpacity(
74 background(layer, "base", "active"),
75 0.5
76 ),
77 //text: text(layer, "sans", "base", "active"),
78 },
79 }
80 ),
81
82 inputEditor,
83 emptyInputEditor,
84 noMatches: {
85 text: text(layer, "sans", "variant"),
86 padding: {
87 bottom: 8,
88 left: 16,
89 right: 16,
90 top: 8,
91 },
92 },
93 }
94}