1import { with_opacity } from "../theme/color"
2import { background, border, text } from "./components"
3import { interactive, toggleable } from "../element"
4import { useTheme } from "../theme"
5
6export default function picker(): any {
7 const theme = useTheme()
8
9 const container = {
10 background: background(theme.lowest),
11 border: border(theme.lowest),
12 shadow: theme.modal_shadow,
13 corner_radius: 12,
14 padding: {
15 bottom: 4,
16 },
17 }
18 const input_editor = {
19 placeholder_text: text(theme.lowest, "sans", "on", "disabled"),
20 selection: theme.players[0],
21 text: text(theme.lowest, "mono", "on"),
22 border: border(theme.lowest, { bottom: true }),
23 padding: {
24 bottom: 8,
25 left: 16,
26 right: 16,
27 top: 8,
28 },
29 margin: {
30 bottom: 4,
31 },
32 }
33 const empty_input_editor: any = { ...input_editor }
34 delete empty_input_editor.border
35 delete empty_input_editor.margin
36
37 return {
38 ...container,
39 empty_container: {
40 ...container,
41 padding: {},
42 },
43 item: toggleable({
44 base: 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 corner_radius: 8,
58 text: text(theme.lowest, "sans", "variant"),
59 highlight_text: text(theme.lowest, "sans", "accent", {
60 weight: "bold",
61 }),
62 },
63 state: {
64 hovered: {
65 background: with_opacity(
66 background(theme.lowest, "hovered"),
67 0.5
68 ),
69 },
70 clicked: {
71 background: with_opacity(
72 background(theme.lowest, "pressed"),
73 0.5
74 ),
75 },
76 },
77 }),
78 state: {
79 active: {
80 default: {
81 background: with_opacity(
82 background(theme.lowest, "base", "active"),
83 0.5
84 ),
85 },
86 hovered: {
87 background: with_opacity(
88 background(theme.lowest, "hovered"),
89 0.5
90 ),
91 },
92 clicked: {
93 background: with_opacity(
94 background(theme.lowest, "pressed"),
95 0.5
96 ),
97 },
98 },
99 },
100 }),
101
102 input_editor,
103 empty_input_editor,
104 no_matches: {
105 text: text(theme.lowest, "sans", "variant"),
106 padding: {
107 bottom: 8,
108 left: 16,
109 right: 16,
110 top: 8,
111 },
112 },
113 header: {
114 text: text(theme.lowest, "sans", "variant", { size: "xs" }),
115
116 margin: {
117 top: 1,
118 left: 8,
119 right: 8,
120 },
121 },
122 footer: interactive({
123 base: {
124 text: text(theme.lowest, "sans", "base", { size: "xs" }),
125 padding: {
126 bottom: 4,
127 left: 12,
128 right: 12,
129 top: 4,
130 },
131 margin: {
132 top: 1,
133 left: 4,
134 right: 4,
135 },
136 corner_radius: 8,
137 background: with_opacity(
138 background(theme.lowest, "active"),
139 0.5
140 ),
141 },
142 state: {
143 hovered: {
144 background: with_opacity(
145 background(theme.lowest, "hovered"),
146 0.5
147 ),
148 },
149 clicked: {
150 background: with_opacity(
151 background(theme.lowest, "pressed"),
152 0.5
153 ),
154 },
155 },
156 }),
157 }
158}