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

---
 .../lib/splitter/style/SplitterStyle.js       | 15 ++++++------
 components/lib/themes/aura/splitter/index.js  | 12 ++++++++++
 components/lib/themes/lara/splitter/index.js  | 23 +++++++++++++++++++
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js
index d6b55f1e3..90c041eab 100644
--- a/components/lib/splitter/style/SplitterStyle.js
+++ b/components/lib/splitter/style/SplitterStyle.js
@@ -25,15 +25,16 @@ const theme = ({ dt }) => `
 }
 
 .p-splitter-gutter-handle {
-    border-radius: ${dt('border.radius.md')};
-    background: transparent;
-    transition: outline-color ${dt('transition.duration')};
+    border-radius: ${dt('splitter.handle.border.radius')};
+    background: ${dt('splitter.handle.background')};
+    transition: outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-splitter-gutter-handle:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    box-shadow: ${dt('splitter.handle.focus.ring.shadow')};
+    outline: ${dt('splitter.handle.focus.ring.width')} ${dt('splitter.handle.focus.ring.style')} ${dt('splitter.handle.focus.ring.color')};
+    outline-offset: ${dt('splitter.handle.focus.ring.offset')};
 }
 
 .p-splitter-horizontal.p-splitter-resizing {
@@ -47,12 +48,12 @@ const theme = ({ dt }) => `
 }
 
 .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
-    height: 24px;
+    height: ${dt('splitter.handle.size')};
     width: 100%;
 }
 
 .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
-    width: 24px;
+    width: ${dt('splitter.handle.size')};
     height: 100%;
 }
 
diff --git a/components/lib/themes/aura/splitter/index.js b/components/lib/themes/aura/splitter/index.js
index 43e1a1229..1033ce3b7 100644
--- a/components/lib/themes/aura/splitter/index.js
+++ b/components/lib/themes/aura/splitter/index.js
@@ -6,5 +6,17 @@ export default {
     },
     gutter: {
         background: '{content.border.color}'
+    },
+    handle: {
+        size: '24px',
+        background: 'transparent',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     }
 };
diff --git a/components/lib/themes/lara/splitter/index.js b/components/lib/themes/lara/splitter/index.js
index 43e1a1229..4da18f10d 100644
--- a/components/lib/themes/lara/splitter/index.js
+++ b/components/lib/themes/lara/splitter/index.js
@@ -6,5 +6,28 @@ export default {
     },
     gutter: {
         background: '{content.border.color}'
+    },
+    handle: {
+        size: '24px',
+        borderRadius: '{content.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
+    colorScheme: {
+        light: {
+            handle: {
+                background: '{surface.400}'
+            }
+        },
+        dark: {
+            handle: {
+                background: '{surface.600}'
+            }
+        }
     }
 };