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        text: text(layer, "mono", "variant", "default", { size: "xs" }),
14        cornerRadius: 2,
15        background: background(layer, "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      }, { hover: { cornerRadius: 4, padding: { top: 17 } } }), {
28        default: {
29          text: text(layer, "mono", "on", "default", { size: "xs" }),
30          background: withOpacity(background(layer, "on"), 0.2),
31        }
32
33      })
34    ,
35
36  }
37}