From 10fbdb06049812061d8dd5769a8058a4a5e34e4c Mon Sep 17 00:00:00 2001
From: katarzynatobis <tobiskatarzyna@gmail.com>
Date: Tue, 9 May 2023 14:07:08 +0200
Subject: [PATCH 1/2] add white circle in checked Radio

---
 src/components/form-elements/radio/Radio.tsx   | 1 +
 src/components/form-elements/radio/_radio.scss | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index d4135081bf..80d647bcff 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -14,6 +14,7 @@ type RadioLabelSizeType = 'medium' | 'small';
 type StyleType = Partial<
   React.CSSProperties & {
     '--radioColor'?: string;
+    '--radioInsideColor'?: string;
     '--radioHoverColor'?: string;
     '--radioInvalidColor'?: string;
     '--radioInvalidHoverColor'?: string;
diff --git a/src/components/form-elements/radio/_radio.scss b/src/components/form-elements/radio/_radio.scss
index ec1023f000..6603734cba 100644
--- a/src/components/form-elements/radio/_radio.scss
+++ b/src/components/form-elements/radio/_radio.scss
@@ -6,6 +6,7 @@ $radioCheckedBorderWidth: 5px;
 
 .sg-radio {
   --radioColor: #{$black};
+  --radioInsideColor: #{$white};
   --radioHoverColor: #{$gray-60};
   --radioInvalidColor: #{$red-60};
   --radioInvalidHoverColor: #{$red-50};
@@ -20,6 +21,7 @@ $radioCheckedBorderWidth: 5px;
 
   &--light {
     --radioColor: #{$white};
+    --radioInsideColor: #{$black};
     --radioHoverColor: #{$gray-40};
     --radioInvalidColor: #{$red-40};
     --radioInvalidHoverColor: #{$red-50};
@@ -102,6 +104,7 @@ $radioCheckedBorderWidth: 5px;
     &:checked + .sg-radio__circle {
       --radioBorderWidth: #{$radioCheckedBorderWidth};
       --radioRingColor: var(--radioColor);
+      background: var(--radioInsideColor);
 
       &--with-animation {
         animation-name: radioCheckedFadeOut, radioCheckedFadeIn;
@@ -204,11 +207,13 @@ $radioCheckedBorderWidth: 5px;
     0% {
       width: $radioSize;
       height: $radioSize;
+      background: transparent;
       --radioBorderWidth: #{$radioUncheckedBorderWidth};
     }
 
     99% {
       --radioBorderWidth: #{$radioUncheckedBorderWidth};
+      background: transparent;
     }
 
     100% {
@@ -221,6 +226,7 @@ $radioCheckedBorderWidth: 5px;
     0% {
       width: calc($radioSize / 2);
       height: calc($radioSize / 2);
+      background: var(--radioInsideColor);
     }
 
     100% {

From 126197337a1c6f405b7faf7df06787010cd99d9b Mon Sep 17 00:00:00 2001
From: katarzynatobis <tobiskatarzyna@gmail.com>
Date: Tue, 9 May 2023 16:21:13 +0200
Subject: [PATCH 2/2] rename css variable

---
 src/components/form-elements/radio/Radio.tsx   | 2 +-
 src/components/form-elements/radio/_radio.scss | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 80d647bcff..7a6d054653 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -14,7 +14,7 @@ type RadioLabelSizeType = 'medium' | 'small';
 type StyleType = Partial<
   React.CSSProperties & {
     '--radioColor'?: string;
-    '--radioInsideColor'?: string;
+    '--radioRingInsideColor'?: string;
     '--radioHoverColor'?: string;
     '--radioInvalidColor'?: string;
     '--radioInvalidHoverColor'?: string;
diff --git a/src/components/form-elements/radio/_radio.scss b/src/components/form-elements/radio/_radio.scss
index 6603734cba..a32731bbbb 100644
--- a/src/components/form-elements/radio/_radio.scss
+++ b/src/components/form-elements/radio/_radio.scss
@@ -6,7 +6,7 @@ $radioCheckedBorderWidth: 5px;
 
 .sg-radio {
   --radioColor: #{$black};
-  --radioInsideColor: #{$white};
+  --radioRingInsideColor: #{$white};
   --radioHoverColor: #{$gray-60};
   --radioInvalidColor: #{$red-60};
   --radioInvalidHoverColor: #{$red-50};
@@ -21,7 +21,7 @@ $radioCheckedBorderWidth: 5px;
 
   &--light {
     --radioColor: #{$white};
-    --radioInsideColor: #{$black};
+    --radioRingInsideColor: #{$black};
     --radioHoverColor: #{$gray-40};
     --radioInvalidColor: #{$red-40};
     --radioInvalidHoverColor: #{$red-50};
@@ -104,7 +104,7 @@ $radioCheckedBorderWidth: 5px;
     &:checked + .sg-radio__circle {
       --radioBorderWidth: #{$radioCheckedBorderWidth};
       --radioRingColor: var(--radioColor);
-      background: var(--radioInsideColor);
+      background: var(--radioRingInsideColor);
 
       &--with-animation {
         animation-name: radioCheckedFadeOut, radioCheckedFadeIn;
@@ -226,7 +226,7 @@ $radioCheckedBorderWidth: 5px;
     0% {
       width: calc($radioSize / 2);
       height: calc($radioSize / 2);
-      background: var(--radioInsideColor);
+      background: var(--radioRingInsideColor);
     }
 
     100% {