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}