diff --git a/sass/themes/components/checkbox/_checkbox-theme.scss b/sass/themes/components/checkbox/_checkbox-theme.scss index 1e0edeb8..5227afbd 100644 --- a/sass/themes/components/checkbox/_checkbox-theme.scss +++ b/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, diff --git a/sass/themes/schemas/components/light/_checkbox.scss b/sass/themes/schemas/components/light/_checkbox.scss index 55d464ee..767f7e41 100644 --- a/sass/themes/schemas/components/light/_checkbox.scss +++ b/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',