diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
index 10a15a67aba..48550710bd2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -203,13 +203,13 @@
     %radio-composite--x {
         &::before {
             border: $border-width $border-style var-get($theme, 'fill-color');
+            background: var-get($theme, 'fill-color');
+            transform: $scale;
 
             @if $bootstrap-theme {
                 border-color: var-get($theme, 'fill-hover-border-color');
+                background: var-get($theme, 'fill-hover-border-color');
             }
-
-            background: var-get($theme, 'fill-color-hover');
-            transform: $scale;
         }
 
         &::after {
@@ -223,7 +223,7 @@
 
     %igx-radio-hover__composite {
         &::before {
-            background: var-get($theme, 'fill-color-hover');
+            background: var-get($theme, 'hover-color');
             transform: $radio-hover-scale;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss
index 2ae236f4695..b2cc9c19b8f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss
@@ -15,8 +15,19 @@ $dark-radio: $light-radio;
 
 /// Generates a dark fluent radio schema.
 /// @type {Map}
+/// @property {Map} fill-hover-border-color [color: ('primary', 200)] - The text color used for the label text.
+/// @property {Map} fill-color-hover [color: ('primary', 200)] - The checked border and dot colors on hover.
+/// @requires {function} extend
 /// @requires $fluent-radio
-$dark-fluent-radio: $fluent-radio;
+$dark-fluent-radio: extend($fluent-radio, (
+    fill-hover-border-color: (
+        color: ('primary', 200)
+    ),
+
+    fill-color-hover: (
+        color: ('primary', 200)
+    ),
+));
 
 /// Generates a dark bootstrap radio schema.
 /// @type {Map}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss
index f63cb1b4f6e..96886e893f9 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss
@@ -56,12 +56,12 @@ $light-radio: (
 /// Generates a fluent radio schema.
 /// @type {Map}
 ///
-/// @property {Map} hover-color [color: ('grays', 800)] - The text color used for the label text.
-/// @property {Map} fill-hover-border-color [color: ('secondary', 600)] - The checked dot border color on hover.
-/// @property {Map} empty-color [color: ('grays', 800)] - The unchecked border color.
-/// @property {Map} fill-color [color: ('secondary', 300)] - The checked border and dot colors.
-/// @property {Map} fill-color-hover [color: ('secondary',3500)] - The checked border and dot colors on hover.
-/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color.
+/// @property {Color} hover-color [color: ('grays', 700)] - The border and dot colors on hover.
+/// @property {Color} fill-hover-border-color [color: ('primary', 900)] - The checked dot border color on hover.
+/// @property {Color} empty-color [color: ('grays', 900)] - The unchecked border color.
+/// @property {Color} fill-color [color: ('primary', 500)] - The checked border and dot colors.
+/// @property {Color} fill-color-hover [color: ('primary',900)] - The checked border and dot colors on hover.
+/// @property {Color} focus-outline-color [color: ('grays', 700)] - The focus outlined color.
 ///
 /// @requires {function} extend
 /// @requires {Map} $light-radio
@@ -71,27 +71,27 @@ $fluent-radio: extend(
         variant: 'fluent',
 
         focus-outline-color: (
-            color: ('grays', 800)
+            color: ('grays', 700)
         ),
 
         hover-color: (
-            color: ('grays', 800)
+            color: ('grays', 700)
         ),
 
         fill-hover-border-color: (
-            color: ('secondary', 600)
+            color: ('primary', 900)
         ),
 
         empty-color: (
-            color: ('grays', 800)
+            color: ('grays', 900)
         ),
 
         fill-color: (
-            color: ('secondary', 300)
+            color: ('primary', 500)
         ),
 
         fill-color-hover: (
-            color: ('secondary', 300)
+            color: ('primary', 900)
         ),
     )
 );
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss
index 9f7c159db6a..228ab6f99a0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss
@@ -100,18 +100,18 @@ $light-switch: extend(
 /// @property {Color} border-hover-color [color('grays', 800)] - The border color of the switch on hover.
 /// @property {Color} border-disabled-color [color('grays', 400)] - The border color of the disabled switch.
 /// @property {Color} border-on-color [color('primary', 500)] - The border color of the on-switch.
-/// @property {Color} border-on-hover-color [color('primary', 800)] - The border color of the on-switch.
+/// @property {Color} border-on-hover-color [color('primary', 900)] - The border color of the on-switch.
 ///
 /// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on.
 /// @property {Color} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off.
 /// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
 /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off.
-/// @property {Color} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
+/// @property {Color} track-on-hover-color [color: ('primary', 900)] - The color of the track when the switch is on and hovered.
 /// @property {Color} track-on-disabled-color [color: ('grays', 400)] - The color of the track when the switch is on and disabled.
 /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
 /// @property {Color} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled.
 /// @property {Color} thumb-on-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled.
-/// @property {Color} focus-outline-color [color: ('grays', 800)] - The focus outlined color.
+/// @property {Color} focus-outline-color [color: ('grays', 700)] - The focus outlined color.
 ///
 /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent.
 ///
@@ -125,7 +125,7 @@ $fluent-switch: extend(
         variant: 'fluent',
 
         focus-outline-color: (
-            color: ('grays', 800)
+            color: ('grays', 700)
         ),
 
         border-color: (
@@ -151,11 +151,11 @@ $fluent-switch: extend(
         ),
 
         track-on-hover-color:(
-            color: ('primary', 800)
+            color: ('primary', 900)
         ),
 
         border-on-hover-color:(
-            color: ('primary', 800)
+            color: ('primary', 900)
         ),
 
         thumb-on-color: (