From 5b91c4864e15a6975487683e3d23f927dc3d7824 Mon Sep 17 00:00:00 2001
From: Abdul Ahad <abdul.ahad@camunda.com>
Date: Tue, 26 Nov 2024 19:39:02 +0500
Subject: [PATCH] fix: focus offset added for checkbox and buttons

Related to: camunda-modeler #4632
---
 src/assets/properties-panel.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
index a407feba..10f7b15d 100644
--- a/src/assets/properties-panel.css
+++ b/src/assets/properties-panel.css
@@ -17,6 +17,7 @@
   --color-blue-205-100-35: hsl(205, 100%, 35%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-40: hsl(205, 100%, 40%);
   --color-blue-205-100-85: hsl(205, 100%, 85%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
   --color-blue-219-99-53: hsl(219, 99%, 53%);
@@ -78,6 +79,7 @@
 
   --input-focus-background-color: var(--color-blue-205-100-95);
   --input-focus-border-color: var(--color-blue-205-100-50);
+  --focus-outline-color: var(--color-blue-205-100-40);
 
   --input-error-background-color: var(--color-red-360-100-97);
   --input-error-border-color: var(--color-red-360-100-45);
@@ -299,6 +301,11 @@
   background: none;
 }
 
+.bio-properties-panel-group-header-button:focus {
+  outline-offset: 2px;
+  outline-color: var(--focus-outline-color);
+}
+
 .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
   margin-right: 0;
 }
@@ -537,8 +544,9 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type="checkbox"]:focus {
-  outline: 2px solid var(--input-focus-border-color);
-  outline-offset: 0;
+  outline: auto;
+  outline-color: var(--focus-outline-color);
+  outline-offset: 2px;
 }
 
 .bio-properties-panel-checkbox > .bio-properties-panel-label {