From 04c457f3bfa84299aafe2a8a8383776ef888b5f4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 May 2024 11:44:03 +0300
Subject: [PATCH] New tokens for RadioButton

---
 .../lib/radiobutton/style/RadioButtonStyle.js | 16 +++++++++++-----
 .../lib/themes/aura/radiobutton/index.js      | 13 +++++++++++--
 .../lib/themes/lara/radiobutton/index.js      | 19 ++++++++++++++-----
 3 files changed, 36 insertions(+), 12 deletions(-)

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