Style context menu

styles/src/styleTree/contextMenu.ts

@@ -1,26 +1,36 @@
 import Theme from "../themes/common/theme";
-import { backgroundColor, shadow, text } from "./components";
+import { backgroundColor, borderColor, shadow, text } from "./components";
 
 export default function contextMenu(theme: Theme) {
   return {
     background: backgroundColor(theme, 300, "base"),
     cornerRadius: 6,
-    padding: {
-      bottom: 2,
-      left: 6,
-      right: 6,
-      top: 2,
-    },
+    padding: 6,
     shadow: shadow(theme),
     item: {
+      padding: { left: 4, right: 4, top: 2, bottom: 2 },
+      cornerRadius: 6,
       label: text(theme, "sans", "secondary", { size: "sm" }),
       keystroke: {
         margin: { left: 60 },
         ...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
       },
+      hover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      active: {
+        background: backgroundColor(theme, 300, "active"),
+        text: text(theme, "sans", "primary", { size: "sm" }),
+      },
+      activeHover: {
+        background: backgroundColor(theme, 300, "hovered"),
+        text: text(theme, "sans", "active", { size: "sm" }),
+      }
     },
     separator: {
-      background: "#00ff00"
+      background: borderColor(theme, "primary"),
+      margin: { top: 2, bottom: 2 }
     },
   }
 }