diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js index a9b4fb8b1..7493a4fe4 100644 --- a/components/lib/radiobutton/style/RadioButtonStyle.js +++ b/components/lib/radiobutton/style/RadioButtonStyle.js @@ -56,18 +56,18 @@ const theme = ({ dt }) => ` border-color: ${dt('radiobutton.hover.border.color')}; } -.p-radiobutton.p-radiobutton-checked .p-radiobutton-box { +.p-radiobutton-checked .p-radiobutton-box { border-color: ${dt('radiobutton.checked.border.color')}; background: ${dt('radiobutton.checked.background')}; } -.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { +.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { background: ${dt('radiobutton.icon.checked.color')}; transform: translateZ(0) scale(1, 1); visibility: visible; } -.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { +.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border-color: ${dt('radiobutton.checked.hover.border.color')}; background: ${dt('radiobutton.checked.hover.background')}; } @@ -77,8 +77,14 @@ const theme = ({ dt }) => ` } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; + border-color: ${dt('radiobutton.focus.border.color')}; + box-shadow: ${dt('radiobutton.focus.ring.shadow')}; + outline: ${dt('radiobutton.focus.ring.width')} ${dt('radiobutton.focus.ring.style')} ${dt('radiobutton.focus.ring.color')}; + outline-offset: ${dt('radiobutton.focus.ring.offset')}; +} + +.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + border-color: ${dt('radiobutton.checked.focus.border.color')}; } .p-radiobutton.p-invalid > .p-radiobutton-box { diff --git a/components/lib/themes/aura/radiobutton/index.js b/components/lib/themes/aura/radiobutton/index.js index 1d0d05d3f..ac57be7de 100644 --- a/components/lib/themes/aura/radiobutton/index.js +++ b/components/lib/themes/aura/radiobutton/index.js @@ -8,11 +8,20 @@ export default { disabledBackground: '{form.field.disabled.background}', filledBackground: '{form.field.filled.background}', borderColor: '{form.field.border.color}', - hoverBordercolor: '{form.field.hover.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.border.color}', checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', + checkedFocusBorderColor: '{primary.color}', invalidBorderColor: '{form.field.invalid.border.color}', - shadow: '{form.field.shadow}' + shadow: '{form.field.shadow}', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } }, icon: { size: '0.75rem', diff --git a/components/lib/themes/lara/radiobutton/index.js b/components/lib/themes/lara/radiobutton/index.js index 1d0d05d3f..33a72496d 100644 --- a/components/lib/themes/lara/radiobutton/index.js +++ b/components/lib/themes/lara/radiobutton/index.js @@ -1,21 +1,30 @@ export default { root: { - width: '1.25rem', - height: '1.25rem', + width: '1.5rem', + height: '1.5rem', background: '{form.field.background}', checkedBackground: '{primary.color}', checkedHoverBackground: '{primary.hover.color}', disabledBackground: '{form.field.disabled.background}', filledBackground: '{form.field.filled.background}', borderColor: '{form.field.border.color}', - hoverBordercolor: '{form.field.hover.border.color}', + hoverBorderColor: '{form.field.hover.border.color}', + focusBorderColor: '{form.field.focus.border.color}', checkedBorderColor: '{primary.color}', checkedHoverBorderColor: '{primary.hover.color}', + checkedFocusBorderColor: '{primary.color}', invalidBorderColor: '{form.field.invalid.border.color}', - shadow: '{form.field.shadow}' + shadow: '{form.field.shadow}', + 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}' + } }, icon: { - size: '0.75rem', + size: '1rem', checkedColor: '{primary.inverse.color}', checkedHoverColor: '{primary.inverse.color}', disabledColor: '{form.field.disabled.color}'