update: generalize button components

2025-12-19 23:23:46 +01:00
parent 466704a23a
commit cb4539a982
4 changed files with 87 additions and 17 deletions
--- a/src/lib/components/ui/Dropdown.svelte
+++ b/src/lib/components/ui/Dropdown.svelte
@@ -79,7 +79,14 @@
 </script>

 <div class="relative dropdown-menu">
-	<Button variant="outline" size="icon" onclick={toggleMenu} aria-label={ariaLabel}>
+	<Button
+		variant="outline"
+		size="icon"
+		onclick={toggleMenu}
+		aria-label={ariaLabel}
+		class={color ? 'hover-themed' : ''}
+		style={color ? `--hover-bg: ${color}20;` : ''}
+	>
 		{@render icon()}
 	</Button>

@@ -117,3 +124,9 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	:global(.hover-themed:hover) {
+		background-color: var(--hover-bg) !important;
+	}
+</style>