From d31c58478f673b72287908b03238477192d33291 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Apr 2024 10:44:31 +0300
Subject: [PATCH] Update focus ring offset

---
 assets/styles/layout/_doc.scss                                | 4 ++--
 assets/styles/layout/_mixins.scss                             | 2 +-
 assets/styles/layout/_sidebar.scss                            | 4 ++--
 components/lib/themes/primeone/base/selectbutton/index.js     | 1 -
 .../lib/themes/primeone/presets/aura/selectbutton/index.js    | 4 ++--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 79a997b13..af7fe9fe4 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -37,7 +37,7 @@
             border-top-right-radius: 6px;
             border-top-left-radius: 6px;
             white-space: nowrap;
-            --focus-ring-offset: -1px;
+            --p-focus-ring-offset: -1px;
 
             &:hover {
                 border-bottom-color: var(--hover-border-color);
@@ -196,7 +196,7 @@
                 cursor: pointer;
                 user-select: none;
                 @include focus-visible();
-                --focus-ring-offset: -1px;
+                --p-focus-ring-offset: -1px;
             }
 
             &:hover {
diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss
index ed8c79678..cafb39b8b 100644
--- a/assets/styles/layout/_mixins.scss
+++ b/assets/styles/layout/_mixins.scss
@@ -1,7 +1,7 @@
 @mixin focus-visible() {
     &:focus-visible {
         outline: 1px solid var(--primary-color);
-        outline-offset: var(--focus-ring-offset, 2px);
+        outline-offset: var(--p-focus-ring-offset);
     }
 }
 
diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index 30623040a..a573fd870 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -100,7 +100,7 @@
                 }
 
                 @include focus-visible();
-                --focus-ring-offset: -1px;
+                --p-focus-ring-offset: -1px;
             }
             
             > div {
@@ -123,7 +123,7 @@
                             position: relative;
 
                             @include focus-visible();
-                            --focus-ring-offset: -1px;
+                            --p-focus-ring-offset: -1px;
             
                             &:hover {
                                 border-left-color: var(--hover-border-color);
diff --git a/components/lib/themes/primeone/base/selectbutton/index.js b/components/lib/themes/primeone/base/selectbutton/index.js
index 2f083a5d7..4a424adf2 100644
--- a/components/lib/themes/primeone/base/selectbutton/index.js
+++ b/components/lib/themes/primeone/base/selectbutton/index.js
@@ -61,7 +61,6 @@ export default {
 .p-selectbutton .p-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
-    --p-focus-ring-offset: 0;
 }
 
 .p-selectbutton.p-invalid {
diff --git a/components/lib/themes/primeone/presets/aura/selectbutton/index.js b/components/lib/themes/primeone/presets/aura/selectbutton/index.js
index 407e479dd..2ae117af0 100644
--- a/components/lib/themes/primeone/presets/aura/selectbutton/index.js
+++ b/components/lib/themes/primeone/presets/aura/selectbutton/index.js
@@ -4,7 +4,7 @@ export default {
             root: {
                 background: '{surface.100}',
                 disabledBackground: '{form.field.background.disabled}',
-                invalidBorderColor: '{form.field.border.color.invalid}'
+                invalidBorderColor: '{form.field.invalid.border.color}'
             },
             item: {
                 checkedBackground: '{surface.0}',
@@ -18,7 +18,7 @@ export default {
             root: {
                 background: '{surface.950}',
                 disabledBackground: '{form.field.background.disabled}',
-                invalidBorderColor: '{form.field.border.color.invalid}'
+                invalidBorderColor: '{form.field.invalid.border.color}'
             },
             item: {
                 checkedBackground: '{surface.800}',