fix(radio): fluent theme inconsistencies (#12720)

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss

@@ -158,6 +158,18 @@
         @include mx(focused, checked) {
             @extend %igx-radio--focused-checked !optional;
 
+            &:hover {
+                @include e(composite) {
+                    @extend %igx-radio--checked-active__composite !optional;
+                }
+            }
+
+            &:active {
+                @include e(composite) {
+                    @extend %igx-radio--checked-active__composite !optional;
+                }
+            }
+
             @include e(ripple) {
                 @extend %radio-ripple--focused !optional;
                 @extend %radio-ripple--focused-checked !optional;

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -409,6 +409,20 @@
 
     %igx-radio--focused {
         @if $variant == 'fluent' {
+            position: relative;
+            $focus-outline-offset-top: rem(2px);
+            $focus-outline-offset-left: rem(2px);
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: -$focus-outline-offset-top;
+                inset-inline-start: -$focus-outline-offset-left;
+                box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color');
+                width: calc(100% + (#{$focus-outline-offset-left} * 2));
+                height: calc(100% + (#{$focus-outline-offset-top} * 2));
+            }
+
             %radio-composite {
                 &::before {
                     background: var-get($theme, 'hover-color');
@@ -436,11 +450,11 @@
         @if $variant == 'fluent' {
             %radio-composite--x {
                 &::before {
-                    background: var-get($theme, 'fill-color-hover');
+                    background: var-get($theme, 'fill-color');
                 }
 
                 &::after {
-                    border: $border-width $border-style var-get($theme, 'fill-color-hover');
+                    border: $border-width $border-style var-get($theme, 'fill-color');
                 }
             }
         }

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_radio.scss

@@ -16,22 +16,42 @@ $dark-radio: extend($light-radio, (
 
 /// Generates a dark fluent radio schema.
 /// @type {Map}
-/// @prop {Map} fill-hover-border-color [color: ('primary', 200)] - The text color used for the label text.
-/// @prop {Map} fill-color-hover [color: ('primary', 200)] - The checked border and dot colors on hover.
+/// @prop {Map} hover-color [color: ('gray', 400)] - The border and dot colors on hover.
+/// @prop {Map} fill-color [color: ('primary', 300)] - The checked border and dot colors.
+/// @prop {Map} fill-hover-border-color [color: ('primary', 100)] - The text color used for the label text.
+/// @prop {Map} fill-color-hover [color: ('primary', 100)] - The checked border and dot colors on hover.
 /// @prop {Map} error-color-hover [color: ('error', 200)] - The border and dot color in invalid state on hover.
+/// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border and dot colors.
+/// @prop {Map} disabled-label-color [color: ('gray', 300)] - The disabled label color.
 /// @requires $fluent-radio
 $dark-fluent-radio: extend($fluent-radio, (
+    hover-color: (
+        color: ('gray', 400)
+    ),
+
+    fill-color: (
+        color: ('primary', 300)
+    ),
+
     fill-hover-border-color: (
-        color: ('primary', 200)
+        color: ('primary', 100)
     ),
 
     fill-color-hover: (
-        color: ('primary', 200)
+        color: ('primary', 100)
     ),
 
     error-color-hover: (
         color: ('error', 200)
-    )
+    ),
+
+    disabled-color: (
+        color: ('gray', 100)
+    ),
+
+    disabled-label-color: (
+        color: ('gray', 300)
+    ),
 ));
 
 /// Generates a dark bootstrap radio schema.

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss

@@ -15,7 +15,7 @@
 /// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot colors on hover.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and dot colors.
-/// @prop {Map} disabled-label-color [color: ('gray', 400)] - The disabled border and dot colors.
+/// @prop {Map} disabled-label-color [color: ('gray', 400)] - The disabled label color.
 /// @prop {Map} error-color [color: ('error', 500)] - The label, border and dot color in invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and dot color in invalid state on hover.
 $light-radio: (
@@ -65,12 +65,13 @@ $light-radio: (
 /// Generates a fluent radio schema.
 /// @type {Map}
 /// @prop {Map} hover-color [color: ('gray', 700)] - The border and dot colors on hover.
-/// @prop {Map} fill-hover-border-color [color: ('primary', 900)] - The checked dot border color on hover.
+/// @prop {Map} fill-hover-border-color [color: ('primary', 800)] - The checked dot border color on hover.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
-/// @prop {Map} fill-color-hover [color: ('primary',900)] - The checked border and dot colors on hover.
+/// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and dot colors on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and dot color in invalid state on hover.
+/// @prop {Map} disabled-label-color [color: ('gray', 500)] - The disabled label color.
 /// @requires {Map} $light-radio
 $fluent-radio: extend(
     $light-radio,
@@ -86,7 +87,7 @@ $fluent-radio: extend(
         ),
 
         fill-hover-border-color: (
-            color: ('primary', 900)
+            color: ('primary', 800)
         ),
 
         empty-color: (
@@ -98,12 +99,16 @@ $fluent-radio: extend(
         ),
 
         fill-color-hover: (
-            color: ('primary', 900)
+            color: ('primary', 800)
         ),
 
         error-color-hover: (
             color: ('error', 700)
-        )
+        ),
+
+        disabled-label-color: (
+            color: ('gray', 500)
+        ),
     )
 );