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