Tokens for Splitter

components/lib/splitter/style/SplitterStyle.js

@@ -25,15 +25,16 @@ const theme = ({ dt }) => `
 }
 
 .p-splitter-gutter-handle {
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('splitter.handle.border.radius')};
-    background: transparent;
+    background: ${dt('splitter.handle.background')};
-    transition: outline-color ${dt('transition.duration')};
+    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')};
+    box-shadow: ${dt('splitter.handle.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    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%;
 }
 

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}'
+        }
     }
 };

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}'
+            }
+        }
     }
 };