feat(checkbox): set tick-width property (#16319)

* feat(checkbox): set tick-width property

* feat(checkbox): update fluent tick width

* chore(theming): bump to 22.0.0-beta.1

* refactor(checkbox): remove redundant mark-stroke declaratioin

The $mark-stroke has been defined as tick-width as token in the Ignite
UI Theming package, thus it's no longer needed.

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: adrianptrv

projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use 'sass:math';
 @use '../../base' as *;
@@ -49,13 +50,6 @@
         'indigo': rem(8px),
     ), $variant);
 
-    $mark-stroke: map.get((
-        'material': 3,
-        'fluent': 1,
-        'bootstrap': 3,
-        'indigo': 3,
-    ), $variant);
-
     $mark-offset: map.get((
         'material': 0,
         'fluent': -1px,
@@ -64,7 +58,7 @@
     ), $variant);
 
     $mark-length: 24;
-    $mark-x-factor: math.div($mark-stroke, $mark-length);
+    $mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
 
     $ripple-size: rem(40px);
     $ripple-radius: math.div($ripple-size, 2);
@@ -205,7 +199,7 @@
         inset: 0;
         stroke: var-get($theme, 'tick-color');
         stroke-linecap: square;
-        stroke-width: $mark-stroke;
+        stroke-width: var-get($theme, 'tick-width');
         stroke-dasharray: $mark-length;
         stroke-dashoffset: $mark-length;
         fill: none;
@@ -366,7 +360,7 @@
     %cbx-composite-mark--in {
         stroke-dashoffset: 41; /* length of path - adjacent line length */
         opacity: 1;
-        transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
+        transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
     }
 
     %cbx-composite-mark--fluent {