fix(styling): increase checkbox tick width + other minor fixes

Author: adrianptrv

src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss

@@ -6,6 +6,7 @@
 igx-checkbox {
     --tick-color: #0064d9;
     --tick-color-hover: #e3f0ff;
+    --tick-width: 2;
     --fill-color: transparent;
     --fill-color-hover: #e3f0ff;
     --label-color: #131e29;
@@ -21,6 +22,7 @@ igx-checkbox:hover {
 
 // $custom-checkbox-theme: checkbox-theme(
 //     $tick-color: #0064d9,
+// 		 $tick-width: 2,
 //     $tick-color-hover: #e3f0ff,
 //     $fill-color: transparent,
 //     $fill-color-hover: #e3f0ff,

src/app/data-entries/checkbox/checkbox-styling/layout.scss

@@ -39,6 +39,7 @@ igx-checkbox {
 }
 
 #checkbox-1.igx-checkbox--focused:after {
-    inset: rem(8px) rem(-4px) rem(8px) rem(8px);
+    inset: rem(7px) rem(-6px) rem(7px) rem(6px);
     border-radius: rem(8px);
+    box-shadow: 0 0 0 rem(2px) var(--focus-outline-color);
 }

src/app/data-entries/radio/radio-styling-sample/layout.scss

@@ -10,7 +10,7 @@
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the UI5 sample.
-				
+        
         .igx-radio--checked .igx-radio__composite::after {
             --fill-color: #556b81;
         }
@@ -50,4 +50,5 @@ igx-radio {
 .igx-radio--focused::after {
     inset: rem(1px) rem(-4px) rem(1px) rem(-2px);
     border-radius: rem(8px);
+    box-shadow: 0 0 0 rem(2px) var(--focus-outline-color);
 }

src/app/data-entries/switch/switch-styling/layout.scss

@@ -10,7 +10,7 @@
 
         // Note: This is not the standard approach for styling the component.
         // We're using it here solely to mirror the UI5 sample.
-				
+        
         igx-switch:hover .igx-switch__thumb {
             --border-hover-color: #fff;
         }
@@ -40,6 +40,7 @@
 
         .igx-switch--focused .igx-switch__composite::after {
             border-radius: 1rem;
+            box-shadow: 0 0 0 rem(2px) var(--focus-outline-color);
         }
     }
 }
@@ -49,6 +50,10 @@ igx-switch {
     width: max-content;
 }
 
+igx-switch:hover {
+    --track-off-color: #637d97;
+}
+
 .switch-wrapper {
     display: flex;
     flex-flow: column nowrap;

src/app/data-entries/switch/switch-styling/switch-styling.component.scss

@@ -6,6 +6,7 @@
 igx-switch {
     --thumb-on-color: #e3f0ff;
     --thumb-off-color: #fff;
+    --thumb-off-hover-color: #ededed;
     --track-on-color: #0064d9;
     --track-off-color: #788fa6;
     --track-on-hover-color: #0058bf;
@@ -17,17 +18,14 @@ igx-switch {
     --border-hover-color: transparent;
 }
 
-igx-switch:hover {
-    --track-off-color: #637d97;
-}
-
 // Sass theme approach
 
 // $custom-switch-theme: switch-theme(
 //     $thumb-on-color: #e3f0ff,
 //     $track-on-color: #0064d9,
 //     $track-on-hover-color: #0058bf,
 //     $thumb-off-color: #fff,
+//     $thumb-off-hover-color: #ededed,
 //     $track-off-color: #788fa6,
 //     $border-radius-track: 1rem,
 //     $focus-outline-color: #0032a5,
@@ -38,4 +36,3 @@ igx-switch:hover {
 // );
 
 // @include css-vars($custom-switch-theme)
-