1import { ColorScheme } from "../theme/color_scheme"
2import { with_opacity } from "../theme/color"
3import { background, border, text } from "./components"
4import { interactive, toggleable } from "../element"
5
6export default function picker(theme: ColorScheme): any {
7 const container = {
8 background: background(theme.lowest),
9 border: border(theme.lowest),
10 shadow: theme.modal_shadow,
11 corner_radius: 12,
12 padding: {
13 bottom: 4,
14 },
15 }
16 const input_editor = {
17 placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
18 selection: theme.players[0],
19 text: text(theme.lowest, "mono", "on"),
20 border: border(theme.lowest, { bottom: true }),
21 padding: {
22 bottom: 8,
23 left: 16,
24 right: 16,
25 top: 8,
26 },
27 margin: {
28 bottom: 4,
29 },
30 }
31 const empty_input_editor: any = { ...input_editor }
32 delete empty_input_editor.border
33 delete empty_input_editor.margin
34
35 return {
36 ...container,
37 empty_container: {
38 ...container,
39 padding: {},
40 },
41 item: toggleable({
42 base: interactive({
43 base: {
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 corner_radius: 8,
56 text: text(theme.lowest, "sans", "variant"),
57 highlight_text: text(theme.lowest, "sans", "accent", {
58 weight: "bold",
59 }),
60 },
61 state: {
62 hovered: {
63 background: with_opacity(
64 background(theme.lowest, "hovered"),
65 0.5
66 ),
67 },
68 clicked: {
69 background: with_opacity(
70 background(theme.lowest, "pressed"),
71 0.5
72 ),
73 },
74 },
75 }),
76 state: {
77 active: {
78 default: {
79 background: with_opacity(
80 background(theme.lowest, "base", "active"),
81 0.5
82 ),
83 },
84 hovered: {
85 background: with_opacity(
86 background(theme.lowest, "hovered"),
87 0.5
88 ),
89 },
90 clicked: {
91 background: with_opacity(
92 background(theme.lowest, "pressed"),
93 0.5
94 ),
95 },
96 },
97 },
98 }),
99
100 input_editor,
101 empty_input_editor,
102 no_matches: {
103 text: text(theme.lowest, "sans", "variant"),
104 padding: {
105 bottom: 8,
106 left: 16,
107 right: 16,
108 top: 8,
109 },
110 },
111 }
112}