contextMenu.ts

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