1import { with_opacity } from "../theme/color"
 2import { text, background } from "./components"
 3import { toggleable } from "../element"
 4import { useTheme } from "../theme"
 5
 6export default function command_palette(): any {
 7    const theme = useTheme()
 8
 9    const key = toggleable({
10        base: {
11            text: text(theme.highest, "mono", "variant", "default", {
12                size: "xs",
13            }),
14            corner_radius: 2,
15            background: background(theme.highest, "on"),
16            padding: {
17                top: 1,
18                bottom: 1,
19                left: 6,
20                right: 6,
21            },
22            margin: {
23                top: 1,
24                bottom: 1,
25                left: 2,
26            },
27        },
28        state: {
29            active: {
30                text: text(theme.highest, "mono", "on", "default", {
31                    size: "xs",
32                }),
33                background: with_opacity(background(theme.highest, "on"), 0.2),
34            },
35        },
36    })
37
38    return {
39        keystroke_spacing: 8,
40        // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
41        key: {
42            inactive: { ...key.inactive },
43            active: key.active,
44        },
45    }
46}