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