refactor(radio): refactor radio button bootstrap styles (#11132)

Co-authored-by: Dilyana Dimova <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

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

@@ -20,6 +20,7 @@
 /// @param {Color} $empty-color [null] - The unchecked border color.
 /// @param {Color} $fill-color [null] - The checked border and dot colors.
 /// @param {Color} $disabled-color [null] - The disabled border and dot colors.
+/// @param {Color} $disabled-label-color [null] - The disabled label color.
 /// @param {Color} $hover-color [null] - The border and dot colors on hover.
 /// @param {Color} $fill-color-hover [null] - The checked border and dot colors on hover.
 /// @param {Color} $fill-hover-border-color [null] - The checked dot border color on hover.
@@ -45,6 +46,7 @@
     $fill-hover-border-color:null,
     $focus-outline-color: null,
     $disabled-color: null,
+    $disabled-label-color: null,
     $hover-color: null,
     $fill-color-hover: null,
 ) {
@@ -67,6 +69,7 @@
         fill-color: $fill-color,
         fill-hover-border-color: $fill-hover-border-color,
         disabled-color: $disabled-color,
+        disabled-label-color: $disabled-label-color,
         hover-color: $hover-color,
         fill-color-hover: $fill-color-hover,
         focus-outline-color: $focus-outline-color
@@ -95,14 +98,14 @@
     $size: map.get((
         material: em(20px),
         fluent: em(20px),
-        bootstrap: em(14px),
+        bootstrap: em(16px),
         indigo-design: em(20px),
     ), $variant);
 
     $scale: map.get((
         material: scale(.5),
         fluent: scale(.5),
-        bootstrap: scale(.3),
+        bootstrap: scale(.375),
         indigo-design: scale(.5),
     ), $variant);
 
@@ -154,7 +157,7 @@
 
     %radio-display--disabled {
         pointer-events: none;
-        color: var-get($theme, 'disabled-color');
+        color: var-get($theme, 'disabled-label-color');
         user-select: none;
     }
 
@@ -246,6 +249,7 @@
 
             @if $bootstrap-theme {
                 background: transparent;
+                border: $border-width $border-style var-get($theme, 'disabled-label-color');
             }
         }
     }
@@ -259,6 +263,17 @@
             background: var-get($theme, 'disabled-color');
             border: $border-width $border-style transparent;
         }
+
+        @if $bootstrap-theme {
+            &::after {
+                background: var-get($theme, 'disabled-color');
+                border-color: var-get($theme, 'disabled-color');
+            }
+
+            &::before {
+                background: white;
+            }
+        }
     }
 
     %radio-label {

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

@@ -16,6 +16,7 @@
 /// @property {Map} fill-color [color: ('secondary', 500)] - The checked border and dot colors.
 /// @property {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot colors on hover.
 /// @property {Map} disabled-color [color: ('grays', 400)] - The disabled border and dot colors.
+/// @property {Map} disabled-label-color [color: ('grays', 400)] - The disabled border and dot colors.
 /// @see $default-palette
 $light-radio: (
     variant: 'material',
@@ -45,6 +46,10 @@ $light-radio: (
 
     disabled-color: (
         color: ('grays', 400)
+    ),
+
+    disabled-label-color: (
+        color: ('grays', 400)
     )
 );
 
@@ -96,6 +101,7 @@ $fluent-radio: extend(
 /// @property {Map} fill-hover-border-color [color: ('grays', 50)] - The checked dot border color on hover.
 /// @property {Map} empty-color [color: ('grays', 500)] - The unchecked border color.
 /// @property {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
+/// @property {Map} disabled-color [color: ('primary', 200)] - The disabled border and dot colors.
 /// @property {Color} fill-color-hover [color: ('grays', 50)] - The checked border and dot colors on hover.
 /// @property {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
 /// @requires {function} extend
@@ -113,6 +119,10 @@ $bootstrap-radio: extend(
             color: ('grays', 50)
         ),
 
+        disabled-color : (
+            color: ('primary', 200)
+        ),
+
         empty-color: (
             color: ('grays', 500)
         ),
@@ -175,6 +185,10 @@ $indigo-radio: extend(
 
         disabled-color: (
             color: ('grays', 300)
+        ),
+
+        disabled-label-color: (
+            color: ('grays', 300)
         )
     )
 );