igniteui-theming 21.0.2 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "21.0.2",
+  "version": "22.0.0",
   "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/button/_contained-button-theme.scss

@@ -154,24 +154,8 @@
         $icon-color: adaptive-contrast(var(--background));
     }
 
-    @if $variant == 'indigo' {
-        @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 1.08));
-        }
-    } @else {
-        @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 1.05));
-        }
-    }
-
-    @if $variant == 'indigo' {
-        @if not($focus-background) and $background {
-            $focus-background: var(--background);
-        }
-    } @else {
-        @if not($focus-background) and $background {
-            $focus-background: hsl(from var(--background) h s calc(l * 1.1));
-        }
+    @if not($hover-background) and $background {
+        $hover-background: dynamic-shade(var(--background));
     }
 
     @if not($hover-foreground) and $hover-background {
@@ -182,10 +166,6 @@
         $icon-color-hover: adaptive-contrast(var(--hover-background));
     }
 
-    @if not($focus-foreground) and $focus-background {
-        $focus-foreground: adaptive-contrast(var(--focus-background));
-    }
-
     @if not($focus-hover-background) and $hover-background {
         $focus-hover-background: var(--hover-background);
     }
@@ -194,8 +174,28 @@
         $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
     }
 
-    @if not($focus-visible-background) and $focus-background {
-        $focus-visible-background: var(--focus-background);
+    @if $variant != 'indigo' {
+        @if not($focus-background) and $background {
+            $focus-background: dynamic-shade(var(--background), $offset: 10);
+        }
+    } @else {
+        @if not($focus-background) and $focus-hover-background {
+            $focus-background: var(--focus-hover-background);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'indigo' {
+        @if not($focus-visible-background) and $background {
+            $focus-visible-background: var(--background);
+        }
+    } @else {
+        @if not($focus-visible-background) and $focus-background {
+            $focus-visible-background: var(--focus-background);
+        }
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
     }
 
     @if not($focus-visible-foreground) and $focus-visible-background {
@@ -210,7 +210,7 @@
 
     @if $variant == 'fluent' or $variant == 'bootstrap' {
         @if not($active-background) and $background {
-            $active-background: hsl(from var(--background) h s calc(l * 0.9));
+            $active-background: dynamic-shade(var(--background), $offset: 10);
         }
     } @else if $variant == 'material' {
         @if not($active-background) and $focus-background {

package/sass/themes/components/button/_fab-button-theme.scss

@@ -130,50 +130,50 @@
         $icon-color: adaptive-contrast(var(--background));
     }
 
-    @if $variant == 'indigo' {
-        @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 1.08));
-        }
-    } @else {
-        @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 1.05));
-        }
+    @if not($hover-background) and $background {
+        $hover-background: dynamic-shade(var(--background));
+    }
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--hover-background)));
+    }
+
+    @if not($icon-color-hover) and $hover-background {
+        $icon-color-hover: if($icon-color, var(--icon-color), adaptive-contrast(var(--hover-background)));
+    }
+
+    @if not($focus-hover-background) and $hover-background {
+        $focus-hover-background: var(--hover-background);
     }
 
     @if $variant == 'indigo' {
-        @if not($focus-background) and $background {
-            $focus-background: var(--background);
+        @if not($focus-background) and $focus-hover-background {
+            $focus-background: var(--focus-hover-background);
         }
     } @else {
         @if not($focus-background) and $background {
-            $focus-background: hsl(from var(--background) h s calc(l * 1.1));
+            $focus-background: dynamic-shade(var(--background), $offset: 10);
         }
     }
 
-    @if not($hover-foreground) and $hover-background {
-        $hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--hover-background)));
-    }
-
-    @if not($icon-color-hover) and $hover-background {
-        $icon-color-hover: if($icon-color, var(--icon-color), adaptive-contrast(var(--hover-background)));
+    @if $variant == 'fluent' {
+        @if not($focus-visible-background) and $background {
+            $focus-visible-background: var(--background);
+        }
+    } @else {
+        @if not($focus-visible-background) and $focus-background {
+            $focus-visible-background: var(--focus-background);
+        }
     }
 
     @if not($focus-foreground) and $focus-background {
         $focus-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--focus-background)));
     }
 
-    @if not($focus-hover-background) and $hover-background {
-        $focus-hover-background: var(--hover-background);
-    }
-
     @if not($focus-hover-foreground) and $focus-hover-background {
         $focus-hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--focus-hover-background)));
     }
 
-    @if not($focus-visible-background) and $focus-background {
-        $focus-visible-background: var(--focus-background);
-    }
-
     @if not($focus-visible-foreground) and $focus-visible-background {
         $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
     }
@@ -186,7 +186,7 @@
 
     @if $variant == 'fluent' or $variant == 'bootstrap' {
         @if not($active-background) and $background {
-            $active-background: hsl(from var(--background) h s calc(l * 0.9));
+            $active-background: dynamic-shade(var(--background), $offset: 10);
         }
     } @else if $variant == 'material' {
         @if not($active-background) and $focus-background {

package/sass/themes/components/button/_flat-button-theme.scss

@@ -231,7 +231,7 @@
 
     @if $variant == 'bootstrap' or $variant == 'indigo' {
         @if not($hover-foreground) and $foreground {
-            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $hover-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($icon-color-hover) and $hover-foreground {
@@ -240,16 +240,16 @@
 
         @if $variant == 'bootstrap' {
             @if not($focus-foreground) and $foreground {
-                $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
+                $focus-foreground: dynamic-shade(var(--foreground), $offset: 10);
             }
         } @else {
             @if not($focus-foreground) and $foreground {
-                $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+                $focus-foreground: dynamic-shade(var(--foreground));
             }
         }
 
         @if not($focus-hover-foreground) and $foreground {
-            $focus-hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $focus-hover-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($focus-visible-foreground) and $foreground {
@@ -257,7 +257,7 @@
         }
 
         @if not($disabled-foreground) and $foreground {
-            $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+            $disabled-foreground: hsla(from (var(--foreground) h s l / 0.5));
         }
 
         @if not($disabled-icon-color) and $disabled-foreground {
@@ -266,7 +266,7 @@
 
         @if $variant == 'bootstrap' {
             @if not($active-foreground) and $foreground {
-                $active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
+                $active-foreground: dynamic-shade(var(--foreground), $offset: 10);
             }
 
             @if not($shadow-color) and $focus-visible-foreground {
@@ -274,7 +274,7 @@
             }
         } @else {
             @if not($active-foreground) and $foreground {
-                $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+                $active-foreground: dynamic-shade(var(--foreground));
             }
 
             @if not($shadow-color) and $focus-visible-foreground {

package/sass/themes/components/button/_outlined-button-theme.scss

@@ -225,15 +225,15 @@
         }
 
         @if not($hover-foreground) and $foreground {
-            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $hover-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($focus-foreground) and $foreground {
-            $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $focus-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($focus-hover-foreground) and $foreground {
-            $focus-hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $focus-hover-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($focus-visible-foreground) and $foreground {
@@ -241,7 +241,7 @@
         }
 
         @if not($active-foreground) and $foreground {
-            $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+            $active-foreground: dynamic-shade(var(--foreground));
         }
 
         @if not($shadow-color) and $focus-visible-foreground {
@@ -259,7 +259,7 @@
         }
 
         @if not($focus-background) and $foreground {
-            $focus-background: hsl(from var(--foreground) h s calc(l * 0.8));
+            $focus-background: dynamic-shade(var(--foreground), $offset: 10);
         }
 
         @if not($focus-foreground) and $focus-background {
@@ -267,7 +267,7 @@
         }
 
         @if not($focus-hover-background) and $hover-background {
-            $focus-hover-background: hsl(from var(--hover-background) h s calc(l * 0.9));
+            $focus-hover-background: dynamic-shade(var(--hover-background));
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
@@ -283,7 +283,7 @@
         }
 
         @if not($active-background) and $foreground {
-            $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+            $active-background: dynamic-shade(var(--foreground), $offset: 10);
         }
 
         @if not($active-foreground) and $active-background {
@@ -291,7 +291,7 @@
         }
 
         @if not($disabled-foreground) and $foreground {
-            $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+            $disabled-foreground: hsla(from (var(--foreground) h s l / 0.5));
         }
 
         @if not($disabled-icon-color) and $disabled-foreground {

package/sass/themes/components/button-group/_button-group-theme.scss

@@ -127,15 +127,15 @@
 
     // background colors
     @if not($item-hover-background) and $item-background {
-        $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+        $item-hover-background: dynamic-shade(var(--item-background));
     }
 
     @if not($item-selected-background) and $item-background {
-        $item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7));
+        $item-selected-background: dynamic-shade(var(--item-background), $offset: 10);
     }
 
     @if not($item-selected-hover-background) and $item-selected-background {
-        $item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1));
+        $item-selected-hover-background: dynamic-shade(var(--item-selected-background));
     }
 
     @if not($item-selected-focus-background) and $item-selected-background {
@@ -150,8 +150,8 @@
         $item-focused-background: var(--item-hover-background);
     }
 
-    @if not($item-focused-hover-background) and $item-hover-background {
-        $item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9));
+    @if not($item-focused-hover-background) and $item-focused-background {
+        $item-focused-hover-background: dynamic-shade(var(--item-focused-background));
     }
 
     @if not($disabled-background-color) and $item-background {
@@ -164,7 +164,7 @@
 
     // border colors
     @if not($item-border-color) and $item-background {
-        $item-border-color: hsl(from var(--item-background) h s calc(l * 0.8));
+        $item-border-color: dynamic-shade(var(--item-background), $offset: 7);
     }
 
     @if not($item-hover-border-color) and $item-border-color {

package/sass/themes/components/calendar/_calendar-theme.scss

@@ -437,7 +437,7 @@
 
     // date start
     @if not($date-hover-background) and $content-background {
-        $date-hover-background: hsl(from var(--content-background) h s calc(l * 0.9));
+        $date-hover-background: dynamic-shade(var(--content-background));
     }
 
     @if not($date-hover-foreground) and $date-hover-background {
@@ -473,11 +473,11 @@
         }
 
         @if not($date-current-hover-background) and $date-current-background {
-            $date-current-hover-background: hsl(from var(--date-current-background) h s calc(l * 0.9));
+            $date-current-hover-background: dynamic-shade(var(--date-current-background));
         }
 
         @if not($date-current-hover-border-color) and $date-current-border-color {
-            $date-current-hover-border-color: hsl(from var(--date-current-border-color) h s calc(l * 0.9));
+            $date-current-hover-border-color: dynamic-shade(var(--date-current-border-color));
         }
 
         @if not($date-current-focus-background) and $date-current-hover-background {
@@ -581,7 +581,7 @@
     }
 
     @if not($date-selected-hover-background) and $date-selected-background {
-        $date-selected-hover-background: hsl(from var(--date-selected-background) h s calc(l * 0.9));
+        $date-selected-hover-background: dynamic-shade(var(--date-selected-background));
     }
 
     @if not($date-selected-current-hover-background) and $date-selected-hover-background {
@@ -687,7 +687,7 @@
         }
 
         @if not($date-special-hover-foreground) and $date-special-foreground {
-            $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+            $date-special-hover-foreground: dynamic-shade(var(--date-special-foreground), $offset: 7);
         }
 
         @if not($date-special-hover-border-color) and $date-special-hover-foreground {
@@ -700,7 +700,7 @@
     }
 
     @if not($date-special-hover-foreground) and $date-special-foreground {
-        $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+        $date-special-hover-foreground: dynamic-shade(var(--date-special-foreground), $offset: 7);
     }
 
     @if not($date-special-hover-background) and $date-hover-background {
@@ -750,7 +750,7 @@
         }
 
         @if not($ym-selected-hover-background) and $ym-selected-background {
-            $ym-selected-hover-background: hsl(from var(--ym-selected-background) h s calc(l * 0.9));
+            $ym-selected-hover-background: dynamic-shade(var(--ym-selected-background));
         }
 
         @if not($ym-current-background) and $date-current-background {
@@ -794,11 +794,11 @@
         }
 
         @if not($ym-current-hover-background) and $ym-current-background {
-            $ym-current-hover-background: hsl(from var(--ym-current-background) h s calc(l * 0.9));
+            $ym-current-hover-background: dynamic-shade(var(--ym-current-background));
         }
 
         @if not($ym-selected-hover-background) and $ym-selected-background {
-            $ym-selected-hover-background: hsla(from var(--ym-selected-background) h s calc(l * 0.9) / 0.5);
+            $ym-selected-hover-background: hsla(from dynamic-shade(var(--ym-selected-background)) h s l / 0.5);
         }
 
         @if not($ym-selected-current-outline-color) and $ym-selected-current-foreground {
@@ -940,7 +940,7 @@
     }
 
     @if not($date-special-range-foreground) and $date-special-foreground {
-        $date-special-range-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+        $date-special-range-foreground: dynamic-shade(var(--date-special-foreground), $offset: 7);
     }
 
     @if not($date-special-range-border-color) and $date-special-range-foreground {

package/sass/themes/components/card/_card-theme.scss

@@ -67,11 +67,11 @@
     }
 
     @if not($content-text-color) and $background {
-        $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
+        $content-text-color: dynamic-shade(adaptive-contrast(var(--background)), $offset: 7);
     }
 
     @if not($subtitle-text-color) and $background {
-        $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
+        $subtitle-text-color: dynamic-shade(adaptive-contrast(var(--background)), $offset: 7);
     }
 
     @if not($resting-shadow) {

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

@@ -93,15 +93,15 @@
 
     @if $variant == 'indigo' {
         @if not($button-hover-background) and $button-background {
-            $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+            $button-hover-background: dynamic-shade(var(--button-background));
         }
 
         @if not($button-border-color) and $button-background {
-            $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
+            $button-border-color: dynamic-shade(var(--button-background));
         }
 
         @if not($button-hover-border-color) and $button-border-color {
-            $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
+            $button-hover-border-color: dynamic-shade(var(--button-border-color));
         }
 
         @if not($indicator-active-dot-color) and not($indicator-background) and $button-background {
@@ -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,
@@ -84,11 +86,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($empty-color-hover) and $empty-color {
-        $empty-color-hover: hsl(from var(--empty-color) h s calc(l * 0.9));
+        $empty-color-hover: dynamic-shade(var(--empty-color));
     }
 
     @if not($fill-color-hover) and $fill-color {
-        $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+        $fill-color-hover: dynamic-shade(var(--fill-color));
     }
 
     @if not($tick-color) and $fill-color {
@@ -96,7 +98,7 @@
     }
 
     @if not($label-color-hover) and $label-color {
-        $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+        $label-color-hover: dynamic-shade(var(--label-color));
     }
 
     @if not($focus-border-color) and $fill-color {
@@ -108,7 +110,7 @@
     }
 
     @if not($error-color-hover) and $error-color {
-        $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+        $error-color-hover: dynamic-shade(var(--error-color));
     }
 
     @if not($focus-outline-color-error) and $error-color {
@@ -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,