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