From cda6f133ccc874c495567220324abd916becd50e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 11 May 2024 16:25:48 +0300
Subject: [PATCH] Tokens for ScrollPanel

---
 .../lib/scrollpanel/style/ScrollPanelStyle.js   | 17 +++++++++--------
 components/lib/themes/aura/scrollpanel/index.js | 13 +++++++++++++
 components/lib/themes/lara/scrollpanel/index.js | 17 +++++++++++++++--
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/components/lib/scrollpanel/style/ScrollPanelStyle.js b/components/lib/scrollpanel/style/ScrollPanelStyle.js
index a0b73591a..dd1da2744 100644
--- a/components/lib/scrollpanel/style/ScrollPanelStyle.js
+++ b/components/lib/scrollpanel/style/ScrollPanelStyle.js
@@ -11,9 +11,9 @@ const theme = ({ dt }) => `
 }
 
 .p-scrollpanel-content {
-    height: calc(100% + 18px);
-    width: calc(100% + 18px);
-    padding: 0 18px 18px 0;
+    height: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
+    width: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
+    padding: 0 calc(2 * ${dt('scrollpanel.bar.size')}) calc(2 * ${dt('scrollpanel.bar.size')}) 0;
     position: relative;
     overflow: auto;
     box-sizing: border-box;
@@ -26,7 +26,7 @@ const theme = ({ dt }) => `
 
 .p-scrollpanel-bar {
     position: relative;
-    border-radius: 3px;
+    border-radius: ${dt('scrollpanel.bar.border.radius')};
     z-index: 2;
     cursor: pointer;
     opacity: 0;
@@ -38,17 +38,18 @@ const theme = ({ dt }) => `
 }
 
 .p-scrollpanel-bar:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('scrollpanel.bar.focus.ring.shadow')};
+    outline: ${dt('scrollpanel.barfocus.ring.width')} ${dt('scrollpanel.bar.focus.ring.style')} ${dt('scrollpanel.bar.focus.ring.color')};
+    outline-offset: ${dt('scrollpanel.barfocus.ring.offset')};
 }
 
 .p-scrollpanel-bar-y {
-    width: 9px;
+    width: ${dt('scrollpanel.bar.size')});
     top: 0;
 }
 
 .p-scrollpanel-bar-x {
-    height: 9px;
+    height: ${dt('scrollpanel.bar.size')});
     bottom: 0;
 }
 
diff --git a/components/lib/themes/aura/scrollpanel/index.js b/components/lib/themes/aura/scrollpanel/index.js
index 93b3bada9..1ae3e6553 100644
--- a/components/lib/themes/aura/scrollpanel/index.js
+++ b/components/lib/themes/aura/scrollpanel/index.js
@@ -1,4 +1,17 @@
 export default {
+    root: {
+        bar: {
+            size: '9px',
+            borderRadius: '{border.radius.sm}',
+            focusRing: {
+                width: '{focus.ring.width}',
+                style: '{focus.ring.style}',
+                color: '{focus.ring.color}',
+                offset: '{focus.ring.offset}',
+                shadow: '{focus.ring.shadow}'
+            }
+        }
+    },
     colorScheme: {
         light: {
             bar: {
diff --git a/components/lib/themes/lara/scrollpanel/index.js b/components/lib/themes/lara/scrollpanel/index.js
index 93b3bada9..b11cff848 100644
--- a/components/lib/themes/lara/scrollpanel/index.js
+++ b/components/lib/themes/lara/scrollpanel/index.js
@@ -1,13 +1,26 @@
 export default {
+    root: {
+        bar: {
+            size: '9px',
+            borderRadius: '{border.radius.xs}',
+            focusRing: {
+                width: '{focus.ring.width}',
+                style: '{focus.ring.style}',
+                color: '{focus.ring.color}',
+                offset: '{focus.ring.offset}',
+                shadow: '{focus.ring.shadow}'
+            }
+        }
+    },
     colorScheme: {
         light: {
             bar: {
-                background: '{surface.100}'
+                background: '{surface.200}'
             }
         },
         dark: {
             bar: {
-                background: '{surface.800}'
+                background: '{surface.700}'
             }
         }
     }