igniteui-theming 21.0.2 → 22.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "21.0.2",
+  "version": "22.0.0-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/components/_index.scss

@@ -1,3 +1,4 @@
+@forward 'action-strip/action-strip-theme';
 @forward 'avatar/avatar-theme';
 @forward 'badge/badge-theme';
 @forward 'banner/banner-theme';
@@ -22,6 +23,7 @@
 @forward 'icon/icon-theme';
 @forward 'icon-button/icon-button-theme';
 @forward 'input/input-theme';
+@forward 'input/file-input-theme';
 @forward 'label/label-theme';
 @forward 'list/list-theme';
 @forward 'navbar/navbar-theme';

package/sass/themes/components/action-strip/_action-strip-theme.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+///
+/// @param {Color} $icon-color [null] - The color used for the actions icons.
+/// @param {Color} $background [null] - The color used for the action strip component content background.
+/// @param {Color} $actions-background [null] - The color used for the actions background.
+/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
+/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
+///
+/// @example scss Change the background and icon colors in action strip
+///   $my-action-strip-theme: action-strip-theme($background: black);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-action-strip-theme);
+@function action-strip-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $actions-background: null,
+    $icon-color: null,
+    $delete-action: null,
+    $actions-border-radius: null
+) {
+    $name: 'igx-action-strip';
+    $action-strip-schema: ();
+
+    @if map.has-key($schema, 'action-strip') {
+        $action-strip-schema: map.get($schema, 'action-strip');
+    } @else {
+        $action-strip-schema: $schema;
+    }
+
+    $theme: digest-schema($action-strip-schema);
+
+    @if not($icon-color) and $actions-background {
+        $icon-color: adaptive-contrast(var(--actions-background));
+    }
+
+    @if not($actions-border-radius) {
+        $actions-border-radius: map.get($theme, 'actions-border-radius');
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            actions-background: $actions-background,
+            icon-color: $icon-color,
+            delete-action: $delete-action,
+            actions-border-radius: $actions-border-radius,
+        )
+    );
+}

package/sass/themes/components/badge/_badge-theme.scss

@@ -24,7 +24,8 @@
 /// @param {Color} $background-color [null] - The background color used.
 /// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
 /// @param {Number} $border-radius [null] - The border radius used for badge component.
-///
+/// @param {Number} $size [null] - The size of the badge component.
+/// @param {Number} $dot-size [null] - The size of the dot type badge.
 /// @requires $light-material-schema
 ///
 /// @example scss Change the text and icon colors in a badge
@@ -41,7 +42,9 @@
     $border-radius: null,
 
     $background-color: null,
-    $shadow: null
+    $shadow: null,
+    $size: null,
+    $dot-size: null
 ) {
     $name: #{config.variable-prefix() + '-' + 'badge'};
     $selector: #{config.element-prefix() + '-' + 'badge'};
@@ -79,6 +82,8 @@
             border-radius: $border-radius,
             background-color: $background-color,
             shadow: $shadow,
+            size: $size,
+            dot-size: $dot-size,
         )
     );
 }

package/sass/themes/components/carousel/_carousel-theme.scss

@@ -138,24 +138,35 @@
         $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / 0.4);
     }
 
-    @if not($indicator-dot-color) and $indicator-background {
-        $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
-    }
-
     @if not($indicator-hover-dot-color) and $indicator-dot-color {
-        $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+        $indicator-hover-dot-color: dynamic-shade(var(--indicator-dot-color));
     }
 
-    @if not($indicator-border-color) and $indicator-dot-color {
-        $indicator-border-color: var(--indicator-dot-color);
-    }
+    @if $variant == 'indigo' {
+        @if not($indicator-dot-color) and $indicator-background {
+            $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
+        }
 
-    @if not($indicator-active-dot-color) and $indicator-background {
-        $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
+        @if not($indicator-hover-dot-color) and $indicator-dot-color {
+            $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+        }
+
+        @if not($indicator-border-color) and $indicator-dot-color {
+            $indicator-border-color: var(--indicator-dot-color);
+        }
+    } @else {
+        @if not($indicator-border-color) and $indicator-background {
+            $indicator-border-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / 0.8);
+        }
     }
 
     @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
-        $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
+        $indicator-active-hover-dot-color: dynamic-shade(var(--indicator-active-dot-color));
+    }
+
+    @if not($indicator-active-dot-color) and $indicator-background {
+        $indicator-active-dot-color: adaptive-contrast(var(--indicator-background));
+        $indicator-active-hover-dot-color: var(--indicator-active-dot-color);
     }
 
     @if not($indicator-active-border-color) and $indicator-active-dot-color {

package/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,

package/sass/themes/components/grid/_index.scss

@@ -1,3 +1,4 @@
 @forward 'grid-theme';
 @forward 'grid-summary-theme';
 @forward 'grid-toolbar-theme';
+@forward 'pivot-data-selector-theme';

package/sass/themes/components/grid/_pivot-data-selector-theme.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+@function pivot-data-selector-theme($schema: $light-material-schema, $background: null) {
+    $name: 'igx-pivot-data-selector';
+    $selector: '.igx-pivot-data-selector';
+    $pivot-data-selector-schema: ();
+
+    @if map.has-key($schema, 'pivot-data-selector') {
+        $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
+    } @else {
+        $pivot-data-selector-schema: $schema;
+    }
+
+    $theme: digest-schema($pivot-data-selector-schema);
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+        )
+    );
+}

package/sass/themes/components/input/_file-input-theme.scss

@@ -0,0 +1,150 @@
+@use 'sass:map';
+@use '../../config';
+@use '../../functions' as *;
+@use '../../schemas/' as *;
+@use '../../../utils/map' as *;
+@use '../../../color/functions' as *;
+@use '../../../elevations/' as *;
+
+////
+/// @group themes
+/// @package theming
+/// @access public
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $file-names-background [null] - The file names container background color.
+/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
+/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
+/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
+/// @param {Color} $file-names-foreground [null] - The file names color.
+/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
+/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
+/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
+/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
+/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
+/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
+/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
+/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
+/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
+/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
+/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
+/// @example scss Change the focused border and label colors
+///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-file-input-theme);
+@function file-input-theme(
+    $schema: $light-material-schema,
+    $file-names-background: null,
+    $file-names-background--focused: null,
+    $file-names-background--filled: null,
+    $file-names-background--disabled: null,
+    $file-names-foreground: null,
+    $file-names-foreground--focused: null,
+    $file-names-foreground--filled: null,
+    $file-names-foreground--disabled: null,
+
+    $file-selector-button-background: null,
+    $file-selector-button-background--focused: null,
+    $file-selector-button-background--filled: null,
+    $file-selector-button-background--disabled: null,
+    $file-selector-button-foreground: null,
+    $file-selector-button-foreground--focused: null,
+    $file-selector-button-foreground--filled: null,
+    $file-selector-button-foreground--disabled: null
+) {
+    $name: 'igx-file-input';
+    $file-input-schema: ();
+
+    @if map.has-key($schema, 'file-input') {
+        $file-input-schema: map.get($schema, 'file-input');
+    } @else {
+        $file-input-schema: $schema;
+    }
+
+    $theme: digest-schema($file-input-schema);
+
+    @if $file-names-background != transparent {
+        @if not($file-names-background--focused) and $file-names-background {
+            $file-names-background--focused: dynamic-shade(var(--file-names-background));
+        }
+
+        @if not($file-names-background--filled) and $file-names-background {
+            $file-names-background--filled: $file-names-background;
+        }
+
+        @if not($file-names-background--disabled) and $file-names-background {
+            $file-names-background--disabled: hsla(from $file-names-background h s l / 0.4);
+        }
+
+        @if not($file-names-foreground) and $file-names-background {
+            $file-names-foreground: adaptive-contrast($file-names-background);
+        }
+
+        @if not($file-names-foreground--focused) and $file-names-background--focused {
+            $file-names-foreground--focused: adaptive-contrast($file-names-background--focused);
+        }
+
+        @if not($file-names-foreground--filled) and $file-names-background--filled {
+            $file-names-foreground--filled: adaptive-contrast($file-names-background--filled);
+        }
+
+        @if not($file-names-foreground--disabled) and $file-names-background--disabled {
+            $file-names-foreground--disabled: adaptive-contrast($file-names-background--disabled);
+        }
+    }
+
+    @if $file-selector-button-background != transparent {
+        @if not($file-selector-button-background--focused) and $file-selector-button-background {
+            $file-selector-button-background--focused: dynamic-shade(var(--file-selector-button-background));
+        }
+
+        @if not($file-selector-button-background--filled) and $file-selector-button-background {
+            $file-selector-button-background--filled: $file-selector-button-background;
+        }
+
+        @if not($file-selector-button-background--disabled) and $file-selector-button-background {
+            $file-selector-button-background--disabled: hsla(from $file-selector-button-background h s l / 0.4);
+        }
+
+        @if not($file-selector-button-foreground) and $file-selector-button-background {
+            $file-selector-button-foreground: adaptive-contrast($file-selector-button-background);
+        }
+
+        @if not($file-selector-button-foreground--focused) and $file-selector-button-background--focused {
+            $file-selector-button-foreground--focused: adaptive-contrast($file-selector-button-background--focused);
+        }
+
+        @if not($file-selector-button-foreground--filled) and $file-selector-button-background--filled {
+            $file-selector-button-foreground--filled: adaptive-contrast($file-selector-button-background--filled);
+        }
+
+        @if not($file-selector-button-foreground--disabled) and $file-selector-button-background--disabled {
+            $file-selector-button-foreground--disabled: adaptive-contrast($file-selector-button-background--disabled);
+        }
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            file-names-background: $file-names-background,
+            file-names-background--focused: $file-names-background--focused,
+            file-names-background--filled: $file-names-background--filled,
+            file-names-background--disabled: $file-names-background--disabled,
+            file-names-foreground: $file-names-foreground,
+            file-names-foreground--focused: $file-names-foreground--focused,
+            file-names-foreground--filled: $file-names-foreground--filled,
+            file-names-foreground--disabled: $file-names-foreground--disabled,
+
+            file-selector-button-background: $file-selector-button-background,
+            file-selector-button-background--focused: $file-selector-button-background--focused,
+            file-selector-button-background--filled: $file-selector-button-background--filled,
+            file-selector-button-background--disabled: $file-selector-button-background--disabled,
+            file-selector-button-foreground: $file-selector-button-foreground,
+            file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
+            file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
+            file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
+        )
+    );
+}

package/sass/themes/schemas/components/dark/_badge.scss

@@ -35,17 +35,10 @@ $dark-fluent-badge: extend(
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
-/// @prop {Map} border-color [contrast-color: ('gray', 50)] - The border color used.
 /// @requires $bootstrap-badge
 $dark-bootstrap-badge: extend(
     $bootstrap-badge,
     (
-        border-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
         _meta: (
             theme: 'bootstrap',
             variant: 'dark',
@@ -55,10 +48,26 @@ $dark-bootstrap-badge: extend(
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}
+/// @prop {Map} background-color [color: ('primary', 400)] - The background color used for the badge component.
+/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color used for the badge component.
 /// @requires $indigo-badge
 $dark-indigo-badge: extend(
     $indigo-badge,
     (
+        background-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+
+        border-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+
         _meta: (
             theme: 'indigo',
             variant: 'dark',

package/sass/themes/schemas/components/light/_badge.scss

@@ -10,12 +10,14 @@
 
 /// Generates a light badge schema.
 /// @type {Map}
-/// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The icon color used.
-/// @prop {Map} text-color [contrast-color: ('primary', 900)] - The text color used.
-/// @prop {Map} border-color [color: ('gray', 50)] - The border color used.
-/// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
+/// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The icon color used for the badge component.
+/// @prop {Map} text-color [contrast-color: ('primary', 900)] - The text color used for the badge component.
+/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color used for the badge component.
+/// @prop {Map} background-color [color: ('primary', 500)] - The background color used for the badge component.
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
-/// @prop {Number} border-radius [0] - The border radius used for badge.
+/// @prop {Number} border-radius [0] - The border-radius used for the badge component.
+/// @prop {List} size [(rem(16px), rem(22px), rem(26px))] - The size used for the badge.
+/// @prop {Number} default-size [2] - The default size used for the badge component (medium).
 /// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-badge
 $light-badge: extend(
@@ -36,9 +38,9 @@ $light-badge: extend(
         ),
 
         border-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                50,
+                900,
             ),
         ),
 
@@ -51,6 +53,16 @@ $light-badge: extend(
 
         border-radius: 0,
 
+        size: (
+            sizable: (
+                rem(16px),
+                rem(22px),
+                rem(26px),
+            ),
+        ),
+
+        default-size: 2,
+
         typography: (
             text: (
                 value: 'caption',
@@ -61,10 +73,27 @@ $light-badge: extend(
 
 /// Generates a material badge schema.
 /// @type {Map}
+/// @prop {Map} background-color [color: ('primary', 800)] - The background color used for the badge component.
+/// @prop {List} dot-size [(rem(8px), rem(10px), rem(12px))] - The size used for the dot type badge.
 /// @requires {Map} $light-badge
 $material-badge: extend(
     $light-badge,
     (
+        background-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+
+        dot-size: (
+            sizable: (
+                rem(8px),
+                rem(10px),
+                rem(12px),
+            ),
+        ),
+
         _meta: (
             theme: 'material',
             variant: 'light',
@@ -74,10 +103,19 @@ $material-badge: extend(
 
 /// Generates a fluent badge schema.
 /// @type {Map}
+/// @prop {List} dot-size [(rem(6px), rem(10px), rem(12px))] - The size used for the dot type badge.
 /// @requires {Map} $light-badge
 $fluent-badge: extend(
     $light-badge,
     (
+        dot-size: (
+            sizable: (
+                rem(6px),
+                rem(10px),
+                rem(12px),
+            ),
+        ),
+
         _meta: (
             theme: 'fluent',
             variant: 'light',
@@ -89,7 +127,8 @@ $fluent-badge: extend(
 /// @type {Map}
 /// @prop {Map} icon-color [contrast-color: ('primary', 100)] - The icon color used.
 /// @prop {Map} text-color [contrast-color: ('primary', 100)] - The text color used.
-/// @prop {Number} border-radius [rem(4px)] - The border radius used for badge.
+/// @prop {List} border-radius [(rem(2px), rem(4px), rem(4px))] - The border radius used for badge.
+/// @prop {List} dot-size [(rem(6px), rem(10px), rem(14px))] - The size used for the dot type badge.
 /// @requires {Map} $light-badge
 $bootstrap-badge: extend(
     $light-badge,
@@ -108,7 +147,22 @@ $bootstrap-badge: extend(
             ),
         ),
 
-        border-radius: rem(4px),
+        border-radius: (
+            sizable: (
+                rem(2px),
+                rem(4px),
+                rem(4px),
+            ),
+        ),
+
+        dot-size: (
+            sizable: (
+                rem(6px),
+                rem(10px),
+                rem(14px),
+            ),
+        ),
+
         _meta: (
             theme: 'bootstrap',
             variant: 'light',
@@ -118,21 +172,42 @@ $bootstrap-badge: extend(
 
 /// Generates an indigo badge schema.
 /// @type {Map}
-/// @prop {Map} background-color [color: ('primary', 400)] - The background color used.
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color used for the badge component.
+/// @prop {List} size [(rem(14px), rem(18px), rem(22px))] - The size used for the badge.
+/// @prop {List} dot-size [(rem(6px), rem(8px), rem(10px))] - The size used for the dot type badge.
 /// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
+/// @prop {Number} default-size [3] - The default size used for the badge component (large).
 /// @requires {Map} $light-badge
 /// @requires {Map} $indigo-elevation-badge
 $indigo-badge: extend(
     $light-badge,
     $indigo-elevation-badge,
     (
-        background-color: (
+        border-color: (
             color: (
-                'primary',
-                400,
+                'gray',
+                100,
+            ),
+        ),
+
+        size: (
+            sizable: (
+                rem(14px),
+                rem(18px),
+                rem(22px),
             ),
         ),
 
+        dot-size: (
+            sizable: (
+                rem(6px),
+                rem(8px),
+                rem(10px),
+            ),
+        ),
+
+        default-size: 3,
+
         typography: (
             text: (
                 value: 'button',

package/sass/themes/schemas/components/light/_carousel.scss

@@ -312,6 +312,7 @@ $bootstrap-carousel: extend(
 /// @prop {Map} button-disabled-arrow-color [color: ('gray' 900, .2)] - The previous/next buttons disabled color.
 /// @prop {Map} indicator-dot-color [color: ('gray', 500)] - The idle indicator dot color.
 /// @prop {Map} indicator-hover-dot-color [color: ('gray', 600)] - The hover indicator dot color.
+/// @prop {Map} indicator-active-border-color [color: ('primary', 500)] - The active indicator border color.
 /// @prop {Map} indicator-active-dot-color [color: ('primary', 500)] - The active indicator dot color.
 /// @prop {Map} indicator-active-hover-dot-color [color: ('primary', 400)] - The active indicator dot color on hover.
 /// @prop {Map} indicator-focus-color [color: ('primary', 400, .5)] - The indicators border and dot color on focus.
@@ -402,6 +403,13 @@ $indigo-carousel: extend(
             ),
         ),
 
+        indicator-active-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
         indicator-active-dot-color: (
             color: (
                 'primary',

package/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',