Fix up toggles

2023-06-20 16:05:23 -07:00
parent ae53c3e623
commit 60b4054b0a
16 changed files with 1670 additions and 1620 deletions
@@ -3,57 +3,61 @@ import { background, border, borderColor, text } from "./components"
 import { interactive, toggleable } from "../element"

 export default function contextMenu(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
-    return {
-        background: background(layer),
-        cornerRadius: 10,
-        padding: 4,
-        shadow: colorScheme.popoverShadow,
-        border: border(layer),
-        keystrokeMargin: 30,
-        item: toggleable(
-            interactive({
-                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", "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"),
-                },
-                hovered: {
-                    background: background(layer, "active"),
-                },
-            }
-        ),
-
-        separator: {
-            background: borderColor(layer),
-            margin: { top: 2, bottom: 2 },
-        },
+  let layer = colorScheme.middle
+  return {
+    background: background(layer),
+    cornerRadius: 10,
+    padding: 4,
+    shadow: colorScheme.popoverShadow,
+    border: border(layer),
+    keystrokeMargin: 30,
+    item: toggleable({
+      base:
+        interactive({
+          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", "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 },
+              },
+            },
+          },
+        }),
+      state: {
+        active: {
+          default: {
+            background: background(layer, "active"),
+          },
+          hovered: {
+            background: background(layer, "active"),
+          },
+        }
+      }
    }
+    ),
+
+    separator: {
+      background: borderColor(layer),
+      margin: { top: 2, bottom: 2 },
+    },
+  }
 }