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      iconSpacing: 8,
20      iconWidth: 14,
21      padding: { left: 4, right: 4, top: 2, bottom: 2 },
22      cornerRadius: 6,
23      label: text(theme, "sans", "primary", { size: "sm" }),
24      keystroke: {
25        ...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
26        padding: { left: 3, right: 3 },
27      },
28      hover: {
29        background: backgroundColor(theme, 300, "hovered"),
30        text: text(theme, "sans", "primary", { size: "sm" }),
31      },
32      active: {
33        background: backgroundColor(theme, 300, "active"),
34        text: text(theme, "sans", "active", { size: "sm" }),
35      },
36      activeHover: {
37        background: backgroundColor(theme, 300, "hovered"),
38        text: text(theme, "sans", "active", { size: "sm" }),
39      },
40    },
41    separator: {
42      background: borderColor(theme, "primary"),
43      margin: { top: 2, bottom: 2 },
44    },
45  };
46}