refactor(radio): style component using sass theme (#16476)

Author: SisIvanova

projects/igniteui-angular/src/lib/radio/themes/_base.scss

@@ -68,6 +68,10 @@ $_theme: $material;
         cursor: pointer;
 
         &:hover {
+            @include e(label) {
+                color: var-get($_theme, 'label-color-hover');
+            }
+
             @include e(composite) {
                 &::before {
                     background: var-get($_theme, 'hover-color');
@@ -306,6 +310,10 @@ $_theme: $material;
             }
 
             &:hover {
+                @include e(label) {
+                    color: var-get($_theme, 'error-color');
+                }
+
                 @include e(ripple) {
                     @extend %radio-ripple--hover;
                     @extend %radio-ripple--hover-invalid;
@@ -317,7 +325,7 @@ $_theme: $material;
                     }
 
                     &::after {
-                        border-color: var-get($_theme, 'error-color-hover');
+                        border-color: var-get($_theme, 'error-color');
                     }
                 }
             }

projects/igniteui-angular/src/lib/radio/themes/shared/_bootstrap.scss

@@ -72,14 +72,14 @@ $_theme: $bootstrap;
             box-shadow: 0 0 0 rem(4px) var-get($_theme, 'focus-outline-color');
 
             &::after {
-                border-color: color($color: 'primary', $variant: 200);
+                border-color: var-get($_theme, 'focus-border-color');
             }
         }
 
         &:hover {
             @include e(composite) {
                 &::after {
-                    border-color: color($color: 'primary', $variant: 300);
+                    border-color: hsl(from var-get($_theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
                 }
             }
         }
@@ -112,14 +112,6 @@ $_theme: $bootstrap;
     }
 
     @include m(invalid) {
-        @include e(composite) {
-            &::after {
-                background: transparent;
-                border: var(--border-width) solid
-                    var-get($_theme, 'error-color');
-            }
-        }
-
         &:hover {
             @include e(composite) {
                 &::after {
@@ -154,11 +146,10 @@ $_theme: $bootstrap;
         @include e(composite) {
             &::after {
                 background: var-get($_theme, 'error-color');
-                border-color: var-get($_theme, 'error-color');
             }
 
             &::before {
-                background: white;
+                background: var-get($_theme, 'fill-hover-border-color');
             }
         }
 
@@ -181,15 +172,6 @@ $_theme: $bootstrap;
         }
     }
 
-    @include mx(checked, invalid, focused) {
-        @include e(composite) {
-            &::before {
-                background: white;
-                border-color: transparent;
-            }
-        }
-    }
-
     @include mx(invalid, disabled) {
         @include e(composite) {
             &::after {

projects/igniteui-angular/src/lib/radio/themes/shared/_fluent.scss

@@ -36,6 +36,31 @@ $_theme: $fluent;
             box-shadow: 0 0 0 rem(1px) var-get($_theme, 'focus-outline-color');
         }
     }
+
+    @include m(invalid) {
+        &:hover {
+            @include e(composite) {
+                &::after {
+                    border-color: var-get($_theme, 'error-color-hover');
+                }
+            }
+        }
+    }
+
+    @include mx(checked, invalid, focused) {
+        &:hover {
+            @include e(composite) {
+                &::before {
+                    background: var-get($_theme, 'error-color-hover');
+                    border-color: var-get($_theme, 'error-color-hover');
+                }
+
+                &::after {
+                    border-color: var-get($_theme, 'error-color-hover');
+                }
+            }
+        }
+    }
 }
 
 @include themed-block(igx-radio-group, fluent) {

projects/igniteui-angular/src/lib/radio/themes/shared/_indigo.scss

@@ -19,10 +19,6 @@ $_theme: $indigo;
     }
 
     &:hover {
-        @include e(label) {
-            color: var-get($_theme, 'label-color-hover');
-        }
-
         @include e(composite) {
             &::after {
                 border-color: var-get($_theme, 'hover-color');
@@ -92,6 +88,17 @@ $_theme: $indigo;
         }
     }
 
+    @include mx(checked, invalid, focused) {
+        &:hover {
+            @include e(composite) {
+                &::before {
+                    background: var-get($_theme, 'error-color-hover');
+                    border-color: var-get($_theme, 'error-color-hover');
+                }
+            }
+        }
+    }
+
     @include m(disabled) {
         @include e(label) {
             color: var-get($_theme, 'disabled-label-color');