further style adjustments; cargo-run works

styles/src/styleTree/assistant.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
+import { interactive } from "./interactive"
 
 export default function assistant(colorScheme: ColorScheme) {
   const layer = colorScheme.highest
@@ -15,13 +16,18 @@ export default function assistant(colorScheme: ColorScheme) {
       background: editor(colorScheme).background,
     },
     userSender: {
-            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
+      default:
+        { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
     },
     assistantSender: {
-            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
+      default: {
+        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
+      },
     },
     systemSender: {
-            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
+      default: {
+        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
+      },
     },
     sentAt: {
       margin: { top: 2, left: 8 },
@@ -30,16 +36,19 @@ export default function assistant(colorScheme: ColorScheme) {
     modelInfoContainer: {
       margin: { right: 16, top: 4 },
     },
-        model: {
+    model: interactive({
+      base: {
         background: background(layer, "on"),
         border: border(layer, "on", { overlay: true }),
         padding: 4,
         cornerRadius: 4,
         ...text(layer, "sans", "default", { size: "xs" }),
-            hover: {
+      }, state: {
+        hovered: {
           background: background(layer, "on", "hovered"),
-            },
+        }
-        },
+      }
+    }),
     remainingTokens: {
       background: background(layer, "on"),
       border: border(layer, "on", { overlay: true }),

styles/src/styleTree/contactList.ts

@@ -192,7 +192,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
       }
     ),
-    projectRow: {
+    projectRow: toggleable(interactive({
+      base: {
         ...projectRow,
         background: background(layer),
         icon: {
@@ -204,12 +205,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
           ...projectRow.name,
           ...text(layer, "mono", { size: "sm" }),
         },
-      hover: {
+      }, state: {
+        hovered: {
           background: background(layer, "hovered"),
         },
-      active: {
+      }
-        background: background(layer, "active"),
+    }),
-      },
+      {
-    },
+        default: { background: background(layer, "active") }
+      })
   }
 }

styles/src/styleTree/feedback.ts

@@ -1,11 +1,13 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
+import { interactive } from "./interactive"
 
 export default function feedback(colorScheme: ColorScheme) {
   let layer = colorScheme.highest
 
   return {
-        submit_button: {
+    submit_button: interactive({
+      base: {
         ...text(layer, "mono", "on"),
         background: background(layer, "on"),
         cornerRadius: 6,
@@ -18,18 +20,20 @@ export default function feedback(colorScheme: ColorScheme) {
           left: 10,
           right: 10,
           top: 2,
-            },
+        }
+      }, state: {
         clicked: {
           ...text(layer, "mono", "on", "pressed"),
           background: background(layer, "on", "pressed"),
           border: border(layer, "on", "pressed"),
         },
-            hover: {
+        hovered: {
           ...text(layer, "mono", "on", "hovered"),
           background: background(layer, "on", "hovered"),
           border: border(layer, "on", "hovered"),
         },
-        },
+      }
+    }),
     button_margin: 8,
     info_text_default: text(layer, "sans", "default", { size: "xs" }),
     link_text_default: text(layer, "sans", "default", {

styles/src/styleTree/search.ts

@@ -1,6 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 
 export default function search(colorScheme: ColorScheme) {
   let layer = colorScheme.highest
@@ -35,7 +37,8 @@ export default function search(colorScheme: ColorScheme) {
   return {
     // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
     matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: {
+    optionButton: toggleable(interactive({
+      base: {
         ...text(layer, "mono", "on"),
         background: background(layer, "on"),
         cornerRadius: 6,
@@ -49,22 +52,26 @@ export default function search(colorScheme: ColorScheme) {
           right: 10,
           top: 2,
         },
-            active: {
+      }, state: {
-                ...text(layer, "mono", "on", "inverted"),
-                background: background(layer, "on", "inverted"),
-                border: border(layer, "on", "inverted"),
-            },
         clicked: {
           ...text(layer, "mono", "on", "pressed"),
           background: background(layer, "on", "pressed"),
           border: border(layer, "on", "pressed"),
         },
-            hover: {
+        hovered: {
           ...text(layer, "mono", "on", "hovered"),
           background: background(layer, "on", "hovered"),
           border: border(layer, "on", "hovered"),
         },
+      }
+    }), {
+      default: {
+        ...text(layer, "mono", "on", "inverted"),
+        background: background(layer, "on", "inverted"),
+        border: border(layer, "on", "inverted"),
       },
+
+    }),
     editor,
     invalidEditor: {
       ...editor,
@@ -97,7 +104,8 @@ export default function search(colorScheme: ColorScheme) {
       ...text(layer, "mono", "on"),
       size: 18,
     },
-        dismissButton: {
+    dismissButton: interactive({
+      base: {
         color: foreground(layer, "variant"),
         iconWidth: 12,
         buttonWidth: 14,
@@ -105,9 +113,11 @@ export default function search(colorScheme: ColorScheme) {
           left: 10,
           right: 10,
         },
-            hover: {
+      }, state: {
+        hovered: {
           color: foreground(layer, "hovered"),
-            },
+        }
-        },
+      }
+    }),
   }
 }

styles/src/styleTree/simpleMessageNotification.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "./interactive"
 
 const headerPadding = 8
 
@@ -12,7 +13,8 @@ export default function simpleMessageNotification(
       ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, right: headerPadding },
     },
-        actionMessage: {
+    actionMessage: interactive({
+      base: {
         ...text(layer, "sans", { size: "xs" }),
         border: border(layer, "active"),
         cornerRadius: 4,
@@ -24,21 +26,26 @@ export default function simpleMessageNotification(
         },
 
         margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
+      }, state: {
+        hovered: {
           ...text(layer, "sans", "default", { size: "xs" }),
           background: background(layer, "hovered"),
           border: border(layer, "active"),
         },
-        },
+      }
-        dismissButton: {
+    }),
+    dismissButton: interactive({
+      base: {
         color: foreground(layer),
         iconWidth: 8,
         iconHeight: 8,
         buttonWidth: 8,
         buttonHeight: 8,
-            hover: {
+      }, state: {
+        hovered: {
           color: foreground(layer, "hovered"),
         },
-        },
+      }
+    })
   }
 }

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -1,6 +1,7 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 export default function dropdownMenu(colorScheme: ColorScheme) {
   let layer = colorScheme.middle
 
@@ -9,38 +10,47 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
     background: background(layer),
     border: border(layer),
     shadow: colorScheme.popoverShadow,
-        header: {
+    header: interactive({
+      base: {
         ...text(layer, "sans", { size: "sm" }),
         secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
         secondaryTextSpacing: 10,
         padding: { left: 8, right: 8, top: 2, bottom: 2 },
         cornerRadius: 6,
         background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
+        border: border(layer, "on", { overlay: true })
-            hover: {
+      },
+      state: {
+        hovered: {
           background: background(layer, "hovered"),
           ...text(layer, "sans", "hovered", { size: "sm" }),
         }
-        },
+      }
+    })
+    ,
     sectionHeader: {
       ...text(layer, "sans", { size: "sm" }),
       padding: { left: 8, right: 8, top: 8, bottom: 8 },
     },
-        item: {
+    item: toggleable(interactive({
+      base: {
         ...text(layer, "sans", { size: "sm" }),
         secondaryTextSpacing: 10,
         secondaryText: text(layer, "sans", { size: "sm" }),
-            padding: { left: 18, right: 18, top: 2, bottom: 2 },
+        padding: { left: 18, right: 18, top: 2, bottom: 2 }
-            hover: {
+      }, state: {
+        hovered: {
           background: background(layer, "hovered"),
           ...text(layer, "sans", "hovered", { size: "sm" }),
-            },
+        }
-            active: {
+      }
+    }), {
+      default: {
         background: background(layer, "active"),
       },
-            activeHover: {
+      hovered: {
         background: background(layer, "active"),
       },
-        },
+    })
   }
 }

styles/src/styleTree/updateNotification.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
+import { interactive } from "./interactive"
 
 const headerPadding = 8
 
@@ -10,22 +11,29 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
       ...text(layer, "sans", { size: "xs" }),
       margin: { left: headerPadding, right: headerPadding },
     },
-        actionMessage: {
+    actionMessage: interactive({
+      base: {
         ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, top: 6, bottom: 6 },
+        margin: { left: headerPadding, top: 6, bottom: 6 }
-            hover: {
+      }, state: {
+        hovered: {
           color: foreground(layer, "hovered"),
-            },
+        }
-        },
+      }
-        dismissButton: {
+    }),
+    dismissButton: interactive({
+      base: {
         color: foreground(layer),
         iconWidth: 8,
         iconHeight: 8,
         buttonWidth: 8,
-            buttonHeight: 8,
+        buttonHeight: 8
-            hover: {
+      }, state: {
+        hovered: {
           color: foreground(layer, "hovered"),
         },
       },
+    })
+
   }
 }