1import { ColorScheme } from "../theme/colorScheme"
 2import { withOpacity } from "../theme/color"
 3import { text, background } from "./components"
 4import { toggleable } from "./toggle"
 5import { interactive } from "./interactive"
 6
 7export default function commandPalette(colorScheme: ColorScheme) {
 8  let layer = colorScheme.highest
 9  return {
10    keystrokeSpacing: 8,
11    key:
12      toggleable(interactive({
13        base: {
14          text: text(layer, "mono", "variant", "default", { size: "xs" }),
15          cornerRadius: 2,
16          background: background(layer, "on"),
17          padding: {
18            top: 1,
19            bottom: 1,
20            left: 6,
21            right: 6,
22          },
23          margin: {
24            top: 1,
25            bottom: 1,
26            left: 2,
27          },
28        }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
29      }), {
30        default: {
31          text: text(layer, "mono", "on", "default", { size: "xs" }),
32          background: withOpacity(background(layer, "on"), 0.2),
33        }
34
35      })
36    ,
37
38  }
39}