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      inactive: { ...key.inactive },
39      active: key.active,
40    }
41  }
42}