feat(checkbox): add tick-width property to the theme (#485)

* feat(checkbox): add tick-width property

* feat(checkbox): update fluent tick width

* fix(checkbox): set the corrent width number in the documentation

---------

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

Author: adrianptrv

sass/themes/components/checkbox/_checkbox-theme.scss

@@ -25,6 +25,7 @@
 /// @param {Color} $fill-color-hover [null] - The checked border and fill colors on hover.
 /// @param {Color} $tick-color [null] - The checked mark color.
 /// @param {Color} $tick-color-hover [null] - The checked mark color on hover.
+/// @param {Number} $tick-width [null] - The checked mark width.
 /// @param {Color} $disabled-color [null] - The disabled border and fill colors.
 /// @param {Color} $disabled-tick-color [null] - The checked mark color in disabled state.
 /// @param {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.
@@ -58,6 +59,7 @@
     $fill-color-hover: null,
     $tick-color: null,
     $tick-color-hover: null,
+    $tick-width: null,
     $disabled-color: null,
     $disabled-tick-color: null,
     $disabled-indeterminate-color: null,
@@ -145,6 +147,7 @@
             fill-color-hover: $fill-color-hover,
             tick-color: $tick-color,
             tick-color-hover: $tick-color-hover,
+            tick-width: $tick-width,
             disabled-color: $disabled-color,
             disabled-tick-color: $disabled-tick-color,
             disabled-indeterminate-color: $disabled-indeterminate-color,

sass/themes/schemas/components/light/_checkbox.scss

@@ -12,6 +12,7 @@
 /// Generates a light checkbox schema.
 /// @type {Map}
 /// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
+/// @prop {Number} tick-width [3] - The checked mark width.
 /// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
 /// @prop {Map} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
 /// @prop {Color} empty-fill-color [transparent] - The unchecked fill color.
@@ -33,6 +34,7 @@ $light-checkbox: (
             50,
         ),
     ),
+    tick-width: 3,
     label-color: (
         color: (
             'gray',
@@ -188,6 +190,7 @@ $material-checkbox: extend(
 /// Generates a fluent checkbox schema.
 /// @type {Map}
 /// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
+/// @prop {Number} tick-width [1.5] - The checked mark width.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
 /// @prop {Map} empty-color-hover [color: ('gray', 900)] - The unchecked border color on hover.
 /// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and fill colors on hover.
@@ -205,6 +208,7 @@ $fluent-checkbox: extend(
                 700,
             ),
         ),
+        tick-width: 1.5,
         focus-outline-color: (
             color: (
                 'gray',