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:
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}