further style adjustments; cargo-run works

styles/src/styleTree/feedback.ts

@@ -1,44 +1,48 @@
 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
+  let layer = colorScheme.highest
 
-    return {
-        submit_button: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
-            },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
-            },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
+  return {
+    submit_button: interactive({
+      base: {
+        ...text(layer, "mono", "on"),
+        background: background(layer, "on"),
+        cornerRadius: 6,
+        border: border(layer, "on"),
+        margin: {
+          right: 4,
         },
-        button_margin: 8,
-        info_text_default: text(layer, "sans", "default", { size: "xs" }),
-        link_text_default: text(layer, "sans", "default", {
-            size: "xs",
-            underline: true,
-        }),
-        link_text_hover: text(layer, "sans", "hovered", {
-            size: "xs",
-            underline: true,
-        }),
-    }
+        padding: {
+          bottom: 2,
+          left: 10,
+          right: 10,
+          top: 2,
+        }
+      }, state: {
+        clicked: {
+          ...text(layer, "mono", "on", "pressed"),
+          background: background(layer, "on", "pressed"),
+          border: border(layer, "on", "pressed"),
+        },
+        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", {
+      size: "xs",
+      underline: true,
+    }),
+    link_text_hover: text(layer, "sans", "hovered", {
+      size: "xs",
+      underline: true,
+    }),
+  }
 }