Fix up uses of interactive

styles/src/styleTree/contextMenu.ts

@@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) {
     border: border(layer),
     keystrokeMargin: 30,
     item: toggleable(interactive({
-      iconSpacing: 8,
-      iconWidth: 14,
-      padding: { left: 6, right: 6, top: 2, bottom: 2 },
-      cornerRadius: 6,
-      label: text(layer, "sans", { size: "sm" }),
-      keystroke: {
-        ...text(layer, "sans", "variant", {
-          size: "sm",
-          weight: "bold",
-        }),
-        padding: { left: 3, right: 3 },
-      }
-    }, {
-      hover: {
-        background: background(layer, "hovered"),
-        label: text(layer, "sans", "hovered", { size: "sm" }),
+      base: {
+        iconSpacing: 8,
+        iconWidth: 14,
+        padding: { left: 6, right: 6, top: 2, bottom: 2 },
+        cornerRadius: 6,
+        label: text(layer, "sans", { size: "sm" }),
         keystroke: {
-          ...text(layer, "sans", "hovered", {
+          ...text(layer, "sans", "variant", {
             size: "sm",
             weight: "bold",
           }),
           padding: { left: 3, right: 3 },
-        },
+        }
+      }, state: {
+        hovered: {
+          background: background(layer, "hovered"),
+          label: text(layer, "sans", "hovered", { size: "sm" }),
+          keystroke: {
+            ...text(layer, "sans", "hovered", {
+              size: "sm",
+              weight: "bold",
+            }),
+            padding: { left: 3, right: 3 },
+          },
+        }
       }
     }), {
       default: {
         background: background(layer, "active"),
       },
-      hover: {
+      hovered: {
         background: background(layer, "active"),
       },
     }),