diff --git a/components/lib/inplace/style/InplaceStyle.js b/components/lib/inplace/style/InplaceStyle.js index be6cc508f..aba47a539 100644 --- a/components/lib/inplace/style/InplaceStyle.js +++ b/components/lib/inplace/style/InplaceStyle.js @@ -4,9 +4,9 @@ const theme = ({ dt }) => ` .p-inplace-display { display: inline; cursor: pointer; - padding: 0.5rem 0.75rem; - border-radius: ${dt('border.radius.md')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + padding: ${dt('inplace.padding')}; + border-radius: ${dt('inplace.border.radius')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; outline-color: transparent; } @@ -16,8 +16,9 @@ const theme = ({ dt }) => ` } .p-inplace-display:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; + box-shadow: ${dt('inplace.focus.ring.shadow')}; + outline: ${dt('inplace.focus.ring.width')} ${dt('inplace.focus.ring.style')} ${dt('inplace.focus.ring.color')}; + outline-offset: ${dt('inplace.focus.ring.offset')}; } .p-inplace-content { diff --git a/components/lib/themes/aura/inplace/index.js b/components/lib/themes/aura/inplace/index.js index 9bdd8e58a..53a41ef21 100644 --- a/components/lib/themes/aura/inplace/index.js +++ b/components/lib/themes/aura/inplace/index.js @@ -1,4 +1,12 @@ export default { + padding: '{form.field.padding.y} {form.field.padding.x}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + }, colorScheme: { light: { display: { diff --git a/components/lib/themes/lara/inplace/index.js b/components/lib/themes/lara/inplace/index.js index 9bdd8e58a..081b06793 100644 --- a/components/lib/themes/lara/inplace/index.js +++ b/components/lib/themes/lara/inplace/index.js @@ -1,16 +1,17 @@ export default { - colorScheme: { - light: { - display: { - hoverBackground: '{surface.100}', - hoverColor: '{surface.800}' - } - }, - dark: { - display: { - hoverBackground: '{surface.800}', - hoverColor: '{surface.0}' - } + root: { + padding: '{form.field.padding.y} {form.field.padding.x}', + borderRadius: '{content.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' } + }, + display: { + hoverBackground: '{content.hover.background}', + hoverColor: '{content.hover.color}' } };