From 4d401167853582ea9294e124a83283645f27f561 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 17 Nov 2025 10:46:11 +0200
Subject: [PATCH 1/2] fix(radio): style component using sass theme

---
 .../radio/themes/shared/radio.bootstrap.scss  | 19 +++---
 .../radio/themes/shared/radio.common.scss     | 49 ++++++++++++++-
 .../radio/themes/shared/radio.fluent.scss     | 22 +------
 .../radio/themes/shared/radio.indigo.scss     | 60 +++++--------------
 .../radio/themes/shared/radio.material.scss   | 25 ++++----
 5 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/src/components/radio/themes/shared/radio.bootstrap.scss b/src/components/radio/themes/shared/radio.bootstrap.scss
index fa1412257..b18b145d9 100644
--- a/src/components/radio/themes/shared/radio.bootstrap.scss
+++ b/src/components/radio/themes/shared/radio.bootstrap.scss
@@ -31,7 +31,6 @@ $theme: $bootstrap;
     width: var(--size);
     height: var(--size);
     min-width: var(--size);
-    background: var-get($theme, 'empty-fill-color');
     transition: transparent;
 
     &::before,
@@ -86,6 +85,10 @@ $theme: $bootstrap;
             background: var-get($theme, 'fill-color-hover');
             border-color: var-get($theme, 'fill-color-hover');
         }
+
+        &::before {
+            background: var-get($theme, 'fill-hover-border-color');
+        }
     }
 
     [part~='focused'] [part='control'] {
@@ -114,10 +117,6 @@ $theme: $bootstrap;
 
 :host(:not([disabled]):state(ig-invalid):hover),
 :host(:not(:disabled):state(ig-invalid):hover) {
-    [part~='control']::after {
-        border-color: var-get($theme, 'error-color-hover');
-    }
-
     [part='control checked'] {
         &::after {
             background: var-get($theme, 'error-color-hover');
@@ -127,16 +126,14 @@ $theme: $bootstrap;
 
 :host([disabled]),
 :host(:disabled) {
-    [part='control'] {
-        &::after {
-            border-color: var-get($theme, 'disabled-color');
+    [part='control checked'] {
+        &::before {
+            background: var-get($theme, 'fill-hover-border-color');
+            border-color: var-get($theme, 'fill-hover-border-color');
         }
-    }
 
-    [part='control checked'] {
         &::after {
             background: var-get($theme, 'disabled-fill-color');
-            border-color: var-get($theme, 'disabled-fill-color');
         }
     }
 }
diff --git a/src/components/radio/themes/shared/radio.common.scss b/src/components/radio/themes/shared/radio.common.scss
index 38604fb20..d86a300d1 100644
--- a/src/components/radio/themes/shared/radio.common.scss
+++ b/src/components/radio/themes/shared/radio.common.scss
@@ -1,17 +1,64 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 
-$theme: $base;
+$theme: $material;
 
 [part~='label'] {
     color: var-get($theme, 'label-color');
 }
 
+[part~='base']:hover {
+    [part~='label'] {
+        color: var-get($theme, 'label-color-hover');
+    }
+}
+
+[part~='control'] {
+    background: var-get($theme, 'empty-fill-color');
+}
+
+:host(:hover) {
+    [part='control checked'] {
+        &::before {
+            background: var-get($theme, 'fill-color-hover');
+            border: rem(2px) solid var-get($theme, 'fill-hover-border-color');
+        }
+
+        &::after {
+            border-color: var-get($theme, 'fill-hover-border-color');
+        }
+    }
+}
+
+:host(:not([disabled]):state(ig-invalid):hover),
+:host(:not(:disabled):state(ig-invalid):hover) {
+    [part~='control']::after {
+        border-color: var-get($theme, 'error-color-hover');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     [part~='label'] {
         color: var-get($theme, 'disabled-label-color');
     }
+
+    [part~='control'] {
+        &::after {
+            border-color: var-get($theme, 'disabled-color');
+        }
+    }
+
+    [part='control checked'] {
+        &::before {
+            background: var-get($theme, 'disabled-fill-color');
+            border-color: var-get($theme, 'disabled-fill-color');
+        }
+
+        &::after {
+            border-color: var-get($theme, 'disabled-fill-color');
+        }
+    }
 }
 
 :host(:not([disabled]):state(ig-invalid)),
diff --git a/src/components/radio/themes/shared/radio.fluent.scss b/src/components/radio/themes/shared/radio.fluent.scss
index 3063b9712..a54ae16cc 100644
--- a/src/components/radio/themes/shared/radio.fluent.scss
+++ b/src/components/radio/themes/shared/radio.fluent.scss
@@ -104,7 +104,7 @@ $theme: $fluent;
 
         &::before {
             background: var-get($theme, 'fill-color-hover');
-            border-color: var-get($theme, 'fill-hover-border-color');
+            border: rem(1px) solid var-get($theme, 'fill-hover-border-color');
         }
     }
 }
@@ -112,10 +112,6 @@ $theme: $fluent;
 :host(:not([disabled]):state(ig-invalid):hover),
 :host(:not(:disabled):state(ig-invalid):hover) {
     [part='control'] {
-        &::after {
-            border-color: var-get($theme, 'error-color-hover');
-        }
-
         &::before {
             background: var-get($theme, 'error-color');
         }
@@ -156,19 +152,3 @@ $theme: $fluent;
         }
     }
 }
-
-:host([disabled]),
-:host(:disabled) {
-    [part~='control'] {
-        &::after {
-            border-color: var-get($theme, 'disabled-color');
-        }
-    }
-
-    [part='control checked'] {
-        &::before {
-            background: var-get($theme, 'disabled-color');
-            border-color: var-get($theme, 'disabled-color');
-        }
-    }
-}
diff --git a/src/components/radio/themes/shared/radio.indigo.scss b/src/components/radio/themes/shared/radio.indigo.scss
index 84eefdedf..7be15cf68 100644
--- a/src/components/radio/themes/shared/radio.indigo.scss
+++ b/src/components/radio/themes/shared/radio.indigo.scss
@@ -12,20 +12,22 @@ $theme: $indigo;
     }
 }
 
-[part~='base'] {
-    gap: rem(8px);
+:host(:hover) {
+    [part~='control']::after {
+        border: rem(2px) solid var-get($theme, 'hover-color');
+    }
 
-    &:hover {
-        [part~='label'] {
-            color: var-get($theme, 'label-color-hover');
-        }
+    [part='control checked']::after {
+        border-color: var-get($theme, 'fill-hover-border-color');
     }
 }
 
+[part~='base'] {
+    gap: rem(8px);
+}
+
 [part~='label'] {
     @include type-style('body-2');
-
-    color: var-get($theme, 'label-color');
 }
 
 [part~='control'] {
@@ -36,7 +38,6 @@ $theme: $indigo;
     height: var(--size, rem(20px));
     min-width: var(--size, rem(20px));
     transition: none;
-    background: none;
 
     &::before,
     &::after {
@@ -46,12 +47,6 @@ $theme: $indigo;
     &::after {
         border: rem(2px) solid var-get($theme, 'empty-color');
     }
-
-    &:hover {
-        &::after {
-            border: rem(2px) solid var-get($theme, 'hover-color');
-        }
-    }
 }
 
 [part='control checked'] {
@@ -96,7 +91,7 @@ $theme: $indigo;
         }
     }
 
-    [part='label'] {
+    [part~='label'] {
         color: var-get($theme, 'label-color');
     }
 
@@ -104,12 +99,6 @@ $theme: $indigo;
         &::after {
             border-color: var-get($theme, 'error-color');
         }
-
-        &:hover {
-            &::after {
-                border-color: var-get($theme, 'error-color-hover');
-            }
-        }
     }
 
     [part='control checked'] {
@@ -120,16 +109,6 @@ $theme: $indigo;
         &::before {
             background: var-get($theme, 'error-color');
         }
-
-        &:hover {
-            &::after {
-                border-color: var-get($theme, 'error-color-hover');
-            }
-
-            &::before {
-                background: var-get($theme, 'error-color-hover');
-            }
-        }
     }
 
     [part~='focused'] {
@@ -140,21 +119,12 @@ $theme: $indigo;
     }
 }
 
-:host([disabled]),
-:host(:disabled) {
-    [part='control'] {
-        &::after {
-            border-color: var-get($theme, 'disabled-color');
-        }
-    }
-
+:host(:not([disabled]):state(ig-invalid):hover),
+:host(:not(:disabled):state(ig-invalid):hover) {
     [part='control checked'] {
-        &::after {
-            border-color: var-get($theme, 'disabled-fill-color');
-        }
-
         &::before {
-            background: var-get($theme, 'disabled-fill-color');
+            background: var-get($theme, 'error-color-hover');
+            border-color: var-get($theme, 'error-color-hover');
         }
     }
 }
diff --git a/src/components/radio/themes/shared/radio.material.scss b/src/components/radio/themes/shared/radio.material.scss
index b4b64a7f9..796f4b488 100644
--- a/src/components/radio/themes/shared/radio.material.scss
+++ b/src/components/radio/themes/shared/radio.material.scss
@@ -57,6 +57,7 @@ $theme: $material;
 [part~='control'] {
     border-radius: var(--size);
     position: relative;
+    background: unset;
 
     &::before,
     &::after {
@@ -65,6 +66,7 @@ $theme: $material;
 
     &::after {
         border: calc(var(--size) / 10) solid var-get($theme, 'empty-color');
+        background: var-get($theme, 'empty-fill-color');
     }
 }
 
@@ -81,10 +83,8 @@ $theme: $material;
 
 :host(:not([disabled]):state(ig-invalid)),
 :host(:not(:disabled):state(ig-invalid)) {
-    [part~='control'] {
-        &::after {
-            border-color: var-get($theme, 'error-color');
-        }
+    [part~='control']::after {
+        border-color: var-get($theme, 'error-color');
     }
 
     [part='control checked'] {
@@ -109,18 +109,19 @@ $theme: $material;
     }
 }
 
-:host([disabled]),
-:host(:disabled) {
-    [part~='control'] {
-        &::after {
-            border-color: var-get($theme, 'disabled-color');
-        }
+:host(:not([disabled]):state(ig-invalid):hover),
+:host(:not(:disabled):state(ig-invalid):hover) {
+    [part~='control']::after {
+        border-color: var-get($theme, 'error-color');
     }
 
     [part='control checked'] {
         &::before {
-            background: var-get($theme, 'disabled-color');
-            border-color: var-get($theme, 'disabled-color');
+            background: var-get($theme, 'error-color-hover');
+        }
+
+        &::after {
+            border-color: var-get($theme, 'error-color-hover');
         }
     }
 }

From e6f059f444f595f98101b40855faa9bae333f902 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 17 Nov 2025 17:58:03 +0200
Subject: [PATCH 2/2] fix(radio): invalid hover state

---
 src/components/radio/themes/shared/radio.fluent.scss   | 1 +
 src/components/radio/themes/shared/radio.material.scss | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/radio/themes/shared/radio.fluent.scss b/src/components/radio/themes/shared/radio.fluent.scss
index a54ae16cc..218fe4b45 100644
--- a/src/components/radio/themes/shared/radio.fluent.scss
+++ b/src/components/radio/themes/shared/radio.fluent.scss
@@ -124,6 +124,7 @@ $theme: $fluent;
 
         &::before {
             background: var-get($theme, 'error-color-hover');
+            border-color: var-get($theme, 'error-color-hover');
         }
     }
 }
diff --git a/src/components/radio/themes/shared/radio.material.scss b/src/components/radio/themes/shared/radio.material.scss
index 796f4b488..2d61e5fea 100644
--- a/src/components/radio/themes/shared/radio.material.scss
+++ b/src/components/radio/themes/shared/radio.material.scss
@@ -118,6 +118,7 @@ $theme: $material;
     [part='control checked'] {
         &::before {
             background: var-get($theme, 'error-color-hover');
+            border-color: var-get($theme, 'error-color-hover');
         }
 
         &::after {