From b536638bcf5f9b893f59391f5102a40a309ffb5e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 1 Oct 2025 18:45:49 +0200
Subject: [PATCH] ui(styles): enhance focus styles for buttons and links

- Added focus-visible styles for buttons and links to improve accessibility and user experience.
- Updated button utility styles to include focus-visible states for better visual feedback.
- Enhanced dropdown item styles to support focus-visible states, ensuring consistent interaction design.
---
 resources/css/app.css       | 5 +++++
 resources/css/utilities.css | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index aad02d71b..c1dc7e56d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -121,6 +121,11 @@ a {
     @apply hover:text-black dark:hover:text-white;
 }
 
+button:focus-visible,
+a:focus-visible {
+    @apply outline-none ring-2 ring-coollabs dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100;
+}
+
 label {
     @apply dark:text-neutral-400;
 }
diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index c82b26b0c..bedfb51bc 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -63,7 +63,7 @@ @utility select {
 }
 
 @utility button {
-    @apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
+    @apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-coolgray-100;
 }
 
 @utility alert-success {
@@ -83,11 +83,11 @@ @utility add-tag {
 }
 
 @utility dropdown-item {
-    @apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50;
+    @apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }
 
 @utility dropdown-item-no-padding {
-    @apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50;
+    @apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }
 
 @utility badge {