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