From 1a226a88afdfb477c046bc2a7adcec4c3469171a Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Wed, 19 Nov 2025 20:06:54 -0800
Subject: [PATCH] design: add active effects for many buttons to improve
 responsiveness

---
 package.json                           |  2 +-
 src/lib/ui/form/TabButton.svelte       | 20 ++++++++++++---
 src/lib/ui/navbar/NavButton.svelte     | 35 +++++++++++++++++++++-----
 src/lib/ui/shared/button/Button.svelte | 16 ++++++++++++
 4 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 30664735..cabbd7ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "license": "AGPL-3.0-only",
   "devDependencies": {
     "@dicebear/core": "^8.0.2",
diff --git a/src/lib/ui/form/TabButton.svelte b/src/lib/ui/form/TabButton.svelte
index 7f5ea976..6138a812 100644
--- a/src/lib/ui/form/TabButton.svelte
+++ b/src/lib/ui/form/TabButton.svelte
@@ -31,10 +31,8 @@
   this={element}
   class={[
     sizes[size],
-    'rounded-xl text-sm font-medium transition-colors duration-75 relative cursor-pointer border shadow-xs',
-    selected
-      ? 'border-transparent bg-primary-900 dark:bg-primary-100 text-slate-50 dark:text-zinc-900 hover:brightness-90 active:brightness-75'
-      : ' dark:bg-zinc-900/50 bg-white border-slate-200 dark:border-zinc-800 hover:bg-slate-100 hover:dark:bg-zinc-800 active:bg-slate-200 active:dark:bg-zinc-900',
+    'tab-button',
+    selected ? 'btn-primary' : 'btn-secondary',
   ]}
   onclick={href ? undefined : onselect}
   {disabled}
@@ -43,3 +41,17 @@
 >
   {@render children?.()}
 </svelte:element>
+
+<style>
+  @reference '../../../app.css';
+
+  .tab-button {
+    font-size: var(--text-sm);
+    border-radius: var(--radius-xl);
+    font-weight: var(--font-weight-medium);
+    transition: all 75ms var(--default-transition-timing-function);
+    position: relative;
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+  }
+</style>
diff --git a/src/lib/ui/navbar/NavButton.svelte b/src/lib/ui/navbar/NavButton.svelte
index 8c837916..03083d3b 100644
--- a/src/lib/ui/navbar/NavButton.svelte
+++ b/src/lib/ui/navbar/NavButton.svelte
@@ -87,7 +87,7 @@
       @variant md {
         height: calc(var(--spacing) * 8);
       }
-      transition: 75ms cubic-bezier(0.075, 0.82, 0.165, 1);
+      transition: 100ms cubic-bezier(0.075, 0.82, 0.165, 1);
 
       color: var(--color-slate-500);
 
@@ -105,17 +105,40 @@
       transition-property: color;
     }
 
+    .nav-btn .prefix {
+      @variant max-md {
+        @variant hover {
+          background-color: --alpha(var(--color-slate-200) / 50%);
+          @variant dark {
+            background-color: --alpha(var(--color-zinc-700) / 30%);
+          }
+        }
+
+        @variant active {
+          background-color: --alpha(var(--color-slate-300) / 50%);
+          @variant dark {
+            background-color: --alpha(var(--color-zinc-800) / 30%);
+          }
+        }
+      }
+    }
+
     .nav-btn-dynamic {
       @variant md {
         width: max-content;
         padding: calc(var(--spacing)) calc(var(--spacing) * 3);
-      }
 
-      @variant hover {
-        @variant md {
-          background-color: var(--color-slate-100);
+        @variant hover {
+          background-color: --alpha(var(--color-slate-200) / 50%);
           @variant dark {
-            background-color: var(--color-zinc-800);
+            background-color: --alpha(var(--color-zinc-700) / 30%);
+          }
+        }
+
+        @variant active {
+          background-color: --alpha(var(--color-slate-300) / 50%);
+          @variant dark {
+            background-color: --alpha(var(--color-zinc-800) / 30%);
           }
         }
       }
diff --git a/src/lib/ui/shared/button/Button.svelte b/src/lib/ui/shared/button/Button.svelte
index da153ccb..7a08e41b 100644
--- a/src/lib/ui/shared/button/Button.svelte
+++ b/src/lib/ui/shared/button/Button.svelte
@@ -236,16 +236,32 @@
           );
         }
       }
+
+      @variant active {
+        background-color: var(--color-slate-100);
+
+        @variant dark {
+          background-color: var(--color-zinc-925);
+        }
+      }
     }
 
     .btn-tertiary {
       background-color: transparent;
+
       @variant hover {
         background-color: --alpha(var(--color-slate-200) / 50%);
         @variant dark {
           background-color: --alpha(var(--color-zinc-700) / 30%);
         }
       }
+
+      @variant active {
+        background-color: --alpha(var(--color-slate-300) / 50%);
+        @variant dark {
+          background-color: --alpha(var(--color-zinc-800) / 30%);
+        }
+      }
     }
 
     .btn-danger {
-- 
2.51.2