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