WIP: Start updating style trees to new toggle() format.

styles/src/styleTree/commandPalette.ts

@@ -1,40 +1,42 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
-import { interactive, toggleable } from "../element"
+import { toggleable } from "../element"
 
 export default function commandPalette(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
+
+    const key = toggleable({
+        base: {
+            text: text(layer, "mono", "variant", "default", { size: "xs" }),
+            cornerRadius: 2,
+            background: background(layer, "on"),
+            padding: {
+                top: 1,
+                bottom: 1,
+                left: 6,
+                right: 6,
+            },
+            margin: {
+                top: 1,
+                bottom: 1,
+                left: 2,
+            },
+        },
+        state: {
+            active: {
+                text: text(layer, "mono", "on", "default", { size: "xs" }),
+                background: withOpacity(background(layer, "on"), 0.2),
+            }
+        }
+    })
+
     return {
         keystrokeSpacing: 8,
-        key: toggleable(
+        // TODO: This should be a Toggle<ContainedText> on the rust side so we don't have to do this
-            interactive({
+        key: {
-                base: {
+            ...key.inactive,
-                    text: text(layer, "mono", "variant", "default", {
+            active: key.active,
-                        size: "xs",
+        }
-                    }),
-                    cornerRadius: 2,
-                    background: background(layer, "on"),
-                    padding: {
-                        top: 1,
-                        bottom: 1,
-                        left: 6,
-                        right: 6,
-                    },
-                    margin: {
-                        top: 1,
-                        bottom: 1,
-                        left: 2,
-                    },
-                },
-                state: { hovered: { cornerRadius: 4, padding: { top: 17 } } },
-            }),
-            {
-                default: {
-                    text: text(layer, "mono", "on", "default", { size: "xs" }),
-                    background: withOpacity(background(layer, "on"), 0.2),
-                },
-            }
-        ),
     }
 }

styles/src/styleTree/contactList.ts

@@ -71,8 +71,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
         rowHeight: 28,
         sectionIconSize: 8,
-        headerRow: toggleable(
+        headerRow: toggleable({
-            interactive({
+            base: interactive({
                 base: {
                     ...text(layer, "mono", { size: "sm" }),
                     margin: { top: 14 },
@@ -86,13 +86,15 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                     hovered: { background: background(layer, "default") },
                 }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
             }),
-            {
+            state: {
-                default: {
+                active: {
-                    ...text(layer, "mono", "active", { size: "sm" }),
+                    default: {
-                    background: background(layer, "active"),
+                        ...text(layer, "mono", "active", { size: "sm" }),
-                },
+                        background: background(layer, "active"),
+                    },
+                }
             }
-        ),
+        }),
         leaveCall: interactive({
             base: {
                 background: background(layer),