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