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: 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 clicked: {
70 background: withOpacity(
71 background(layer, "pressed"),
72 0.5
73 ),
74 },
75 },
76 }),
77 state: {
78 active: {
79 default: {
80 background: withOpacity(
81 background(layer, "base", "active"),
82 0.5
83 ),
84 },
85 hovered: {
86 background: withOpacity(
87 background(layer, "hovered"),
88 0.5
89 ),
90 },
91 clicked: {
92 background: withOpacity(
93 background(layer, "pressed"),
94 0.5
95 ),
96 },
97 },
98 },
99 }),
100
101 inputEditor,
102 emptyInputEditor,
103 noMatches: {
104 text: text(layer, "sans", "variant"),
105 padding: {
106 bottom: 8,
107 left: 16,
108 right: 16,
109 top: 8,
110 },
111 },
112 }
113}