contextMenu.ts

 1import Theme from "../themes/common/theme";
 2import { backgroundColor, borderColor, shadow, text } from "./components";
 3
 4export default function contextMenu(theme: Theme) {
 5  return {
 6    background: backgroundColor(theme, 300, "base"),
 7    cornerRadius: 6,
 8    padding: 6,
 9    shadow: shadow(theme),
10    item: {
11      padding: { left: 4, right: 4, top: 2, bottom: 2 },
12      cornerRadius: 6,
13      label: text(theme, "sans", "secondary", { size: "sm" }),
14      keystroke: {
15        margin: { left: 60 },
16        ...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
17      },
18      hover: {
19        background: backgroundColor(theme, 300, "hovered"),
20        text: text(theme, "sans", "primary", { size: "sm" }),
21      },
22      active: {
23        background: backgroundColor(theme, 300, "active"),
24        text: text(theme, "sans", "primary", { size: "sm" }),
25      },
26      activeHover: {
27        background: backgroundColor(theme, 300, "hovered"),
28        text: text(theme, "sans", "active", { size: "sm" }),
29      }
30    },
31    separator: {
32      background: borderColor(theme, "primary"),
33      margin: { top: 2, bottom: 2 }
34    },
35  }
36}