fix(components): add outline-offset to radio button focus styles (#10048)

* fix(react): add border between focus and radio button

* chore(react): remove unnecessary comments

Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>

Author: abbeyhrt

packages/components/src/components/radio-button/_radio-button.scss

@@ -134,8 +134,8 @@
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State

packages/styles/scss/components/radio-button/_radio-button.scss

@@ -144,8 +144,8 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State