fix(style): disabled button

Author: essenmitsosse

app/components/Button/Base.vue

@@ -21,14 +21,11 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed)"
     :class="[
       variant === 'primary'
-        ? 'text-bg bg-fg hover:bg-fg/90'
-        : 'bg-transparent text-fg hover:(bg-fg hover:text-bg border-fg)',
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      },
+        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
+        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
     ]"
     :type="props.type"
     :disabled="disabled ? true : undefined"

app/components/Tag/Button.vue

@@ -13,14 +13,11 @@ const props = defineProps<{
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 disabled:(opacity-50 cursor-not-allowed)"
     :class="[
       pressed
-        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
-        : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      },
+        ? 'bg-fg text-bg border-fg hover:enabled:(text-text-bg/50)'
+        : 'bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover)',
     ]"
     type="button"
     :disabled="disabled ? true : undefined"