From 1a3206d2ffaeb8d946065475bfcf4553aba399c4 Mon Sep 17 00:00:00 2001
From: sukuwc <sukuwc@riseup.net>
Date: Tue, 10 Nov 2026 13:06:28 +0100
Subject: [PATCH] Add a style prop to IconButton so it can match
 MoltenPushButton looks

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/lib/IconButton.svelte | 49 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/lib/IconButton.svelte b/src/lib/IconButton.svelte
index b9e8b58..52bd7a4 100644
--- a/src/lib/IconButton.svelte
+++ b/src/lib/IconButton.svelte
@@ -9,6 +9,8 @@
   export let iconData: string | undefined = undefined;
   export let disabled: boolean = false;
   export let compact: boolean = false;
+  export let style: "transparent" | "normal" | "outlined" | "accept" =
+    "transparent";
   export let tooltipText: string | undefined = undefined;
   export let onClick: (() => void) | undefined = undefined;
   export let onMouseDown: ((e: MouseEvent) => void) | undefined = undefined;
@@ -99,7 +101,7 @@
           (tooltipButtons ? ["show-buttons", "hover"] : undefined),
       }
     : undefined}
-  class="icon-button"
+  class="icon-button style-{style}"
   class:compact
 >
   <div class="icon-button-inner" class:pressed class:clicking>
@@ -126,10 +128,38 @@
     padding: 0.375rem;
   }
 
-  .icon-button:hover {
+  .icon-button.style-transparent:hover {
     background-color: var(--background-muted);
   }
 
+  .icon-button.style-normal {
+    background-color: var(--background-muted);
+    border: 1px solid var(--foreground-soft);
+  }
+
+  .icon-button.style-normal:hover {
+    background-color: var(--background);
+  }
+
+  .icon-button.style-outlined {
+    background-color: var(--background-muted);
+    border: var(--border-thickness) solid var(--accent);
+  }
+
+  .icon-button.style-outlined:hover {
+    background-color: var(--accent-soft);
+    border-color: var(--accent-muted);
+  }
+
+  .icon-button.style-accept {
+    background-color: var(--accent-soft);
+    border: var(--border-thickness) solid var(--accent-muted);
+  }
+
+  .icon-button.style-accept:hover {
+    background-color: var(--accent);
+  }
+
   .icon-button:focus {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);
@@ -140,10 +170,23 @@
     cursor: default;
   }
 
-  .icon-button:disabled:hover {
+  .icon-button.style-transparent:disabled:hover {
     background-color: transparent;
   }
 
+  .icon-button.style-normal:disabled:hover {
+    background-color: var(--background-muted);
+  }
+
+  .icon-button.style-outlined:disabled:hover {
+    background-color: var(--background-muted);
+    border-color: var(--accent);
+  }
+
+  .icon-button.style-accept:disabled:hover {
+    background-color: var(--accent-soft);
+  }
+
   .icon-button-inner {
     display: flex;
     align-items: center;