src/lib/components/Inputs/Button.svelte

@@ -11,7 +11,7 @@
 	{disabled}
 >
 	<div
-		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2"
+		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2 hover:border-overlay0 group-disabled/button:border-overlay0 group-disabled/button:hover:border-overlay0"
 	>
 		<slot />
 	</div>

src/lib/components/Inputs/ButtonIcon.svelte

@@ -1,6 +1,3 @@
-<div
-	class="group-disabled/button:text-neutral-500/50
-"
->
+<div class="group-disabled/button:text-overlay1">
 	<slot />
 </div>

src/lib/components/Inputs/ButtonText.svelte

@@ -1,6 +1,3 @@
-<p
-	class="group-disabled/button:text-neutral-500/50
-    "
->
+<p class="group-disabled/button:text-overlay1">
 	<slot />
 </p>

src/routes/(app)/dashboard/+page.svelte

@@ -1,6 +1,8 @@
 <script>
 	import { user } from '$lib/stores';
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
+	import Button from '../../../lib/components/Inputs/Button.svelte';
+	import ButtonText from '../../../lib/components/Inputs/ButtonText.svelte';
 
 	export let data;
 
@@ -12,3 +14,7 @@
 		{JSON.stringify($user)}
 	</tt>
 </p>
+
+<Button disabled={true}>
+	<ButtonText>help</ButtonText>
+</Button>