From 9e8b1f13d0ed855c32beaf9961229648adc0d36b Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 4 Jan 2024 16:08:38 +0000
Subject: [PATCH] Added focusRing

---
 components/lib/theme/lara/index.js       | 8 +++++++-
 components/lib/theme/lara/panel/index.js | 6 +++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js
index 3aafa703f..33da9eeae 100644
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@@ -114,7 +114,13 @@ export default {
         borderRadius: '6px',
         inlineGap: '{gap.2}', // inline-spacing
         transitionDuration: '.2s',
-        transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}'
+        transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
+        focusRing: {
+            width: '2px',
+            style: 'solid',
+            color: '{primary.500}',
+            offset: '2px'
+        }
     },
     components: {
         global,
diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js
index 8199ad59c..296c1cc5b 100644
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@@ -123,6 +123,7 @@ export default {
     background: var(--p-panel-header-icon-background);
     border-radius: var(--p-panel-header-icon-border-radius);
     transition: var(--p-transition);
+    outline-color: transparent;
 }
 .p-panel-header-icon:enabled:hover {
     color: var(--p-panel-header-icon-hover-color);
@@ -130,9 +131,8 @@ export default {
     background: var(--p-panel-header-icon-hover-background);
 }
 .p-panel-header-icon:focus-visible {
-    outline: var(--p-focus-outline); /* @todo */
-    outline-offset: var(--p-focus-outline-offset);
-    box-shadow: var(--p-focus-shadow);
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
 }
 .p-panel-toggleable > .p-panel-header {
     padding: var(--p-panel-toggleable-header-padding-y) var(--p-panel-toggleable-header-padding-x);