igniteui-theming 22.0.0-beta.1 → 22.0.0

package/sass/themes/components/icon-button/_contained-icon-button-theme.scss

@@ -107,7 +107,7 @@
         }
 
         @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 1.1));
+            $hover-background: dynamic-shade(var(--background));
         }
 
         @if not($focus-background) and $background {
@@ -119,11 +119,11 @@
         }
 
         @if not($focus-hover-background) and $focus-background {
-            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1));
+            $focus-hover-background: dynamic-shade(var(--focus-background));
         }
 
         @if not($active-background) and $background {
-            $active-background: hsl(from var(--background) h s calc(l * 1.1));
+            $active-background: dynamic-shade(var(--background));
         }
     } @else {
         @if not($foreground) and $background {
@@ -131,14 +131,14 @@
         }
 
         @if not($hover-background) and $background {
-            $hover-background: hsl(from var(--background) h s calc(l * 0.9));
+            $hover-background: dynamic-shade(var(--background));
         }
 
         @if not($focus-background) and $background {
             @if $variant == 'fluent' or $variant == 'bootstrap' {
                 $focus-background: var(--background);
             } @else {
-                $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+                $focus-background: dynamic-shade(var(--background), $offset: 10);
             }
         }
 
@@ -147,11 +147,11 @@
         }
 
         @if not($focus-hover-background) and $focus-background {
-            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+            $focus-hover-background: dynamic-shade(var(--focus-background));
         }
 
         @if not($active-background) and $background {
-            $active-background: hsl(from var(--background) h s calc(l * 0.8));
+            $active-background: dynamic-shade(var(--background), $offset: 10);
         }
     }
 
@@ -177,7 +177,7 @@
         }
     } @else {
         @if not($focus-border-color) and $border-color {
-            $focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+            $focus-border-color: dynamic-shade(var(--border-color), $offset: 10);
         }
     }
 

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

@@ -161,7 +161,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($focus-foreground) and $foreground {
@@ -178,7 +178,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 $foreground {

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

@@ -159,7 +159,7 @@
         }
 
         @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($hover-background) and $foreground {
@@ -205,7 +205,7 @@
         }
 
         @if not($focus-hover-background) and $focus-background {
-            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+            $focus-hover-background: dynamic-shade(var(--focus-background));
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
@@ -213,7 +213,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 {

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

@@ -158,7 +158,7 @@
         }
 
         @if not($box-background-focus) and $box-background {
-            $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
+            $box-background-focus: dynamic-shade(var(--box-background));
         }
 
         @if not($placeholder-color) and $box-background {
@@ -253,7 +253,7 @@
     @if $variant == 'material' or $variant == 'indigo' {
         // bottom line color
         @if not($hover-bottom-line-color) and $idle-bottom-line-color {
-            $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
+            $hover-bottom-line-color: dynamic-shade(var(--idle-bottom-line-color), $offset: 10);
         }
 
         @if not($focused-bottom-line-color) and $hover-bottom-line-color {
@@ -274,7 +274,7 @@
     // border-color
     @if $variant == 'bootstrap' {
         @if not($focused-border-color) and $border-color {
-            $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+            $focused-border-color: dynamic-shade(var(--border-color), $offset: 10);
         }
 
         @if not($focused-secondary-color) and $focused-border-color {
@@ -282,7 +282,7 @@
         }
     } @else {
         @if not($hover-border-color) and $border-color {
-            $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+            $hover-border-color: dynamic-shade(var(--border-color), $offset: 10);
         }
 
         @if not($focused-border-color) and $hover-border-color {

package/sass/themes/components/list/_list-theme.scss

@@ -116,7 +116,7 @@
     }
 
     @if not($item-background-hover) and $item-background {
-        $item-background-hover: dynamic-shade($item-background);
+        $item-background-hover: dynamic-shade(var(--item-background));
     }
 
     @if not($item-background-active) and $item-background-hover {

package/sass/themes/components/navbar/_navbar-theme.scss

@@ -55,7 +55,7 @@
     }
 
     @if not($hover-icon-color) and $idle-icon-color {
-        $hover-icon-color: hsl(from (var(--idle-icon-color)) h s calc(l * 1.1));
+        $hover-icon-color: dynamic-shade(var(--idle-icon-color));
     }
 
     @if not($idle-icon-color) and $background {

package/sass/themes/components/navdrawer/_navdrawer-theme.scss

@@ -91,7 +91,7 @@
     }
 
     @if not($item-hover-background) and $background {
-        $item-hover-background: dynamic-shade($background);
+        $item-hover-background: dynamic-shade(var(--background));
     }
 
     @if not($item-hover-text-color) and $background {
@@ -103,7 +103,7 @@
     }
 
     @if not($item-active-background) and $background {
-        $item-active-background: dynamic-shade($background, $offset: 10);
+        $item-active-background: dynamic-shade(var(--background), $offset: 10);
     }
 
     @if not($item-active-text-color) and $item-active-background {

package/sass/themes/components/query-builder/_query-builder-theme.scss

@@ -75,15 +75,15 @@
     }
 
     @if not($subquery-header-background) and $header-background {
-        $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9));
+        $subquery-header-background: dynamic-shade(var(--header-background));
     }
 
     @if not($subquery-border-color) and $subquery-header-background {
-        $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9));
+        $subquery-border-color: dynamic-shade(var(--subquery-header-background));
     }
 
     @if not($separator-color) and $subquery-border-color {
-        $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9));
+        $separator-color: dynamic-shade(var(--subquery-border-color));
     }
 
     @if $variant == 'bootstrap' {

package/sass/themes/components/radio/_radio-theme.scss

@@ -76,11 +76,11 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($hover-color) and $empty-color {
-        $hover-color: hsl(from var(--empty-color) h s calc(l * 0.9));
+        $hover-color: 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 $variant != 'bootstrap' {
@@ -90,11 +90,11 @@
     }
 
     @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($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 {

package/sass/themes/components/select/_select-theme.scss

@@ -62,7 +62,7 @@
 
     @if $variant == 'material' {
         @if not($toggle-button-background-focus) and $toggle-button-background {
-            $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+            $toggle-button-background-focus: dynamic-shade(var(--toggle-button-background));
         }
     } @else {
         @if not($toggle-button-background-focus) and $toggle-button-background {

package/sass/themes/components/slider/_slider-theme.scss

@@ -87,12 +87,12 @@
         }
 
         @if not($thumb-border-hover-color) and $thumb-border-color {
-            $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1));
+            $thumb-border-hover-color: dynamic-shade(var(--thumb-border-color));
         }
 
         @if $variant == 'fluent' {
             @if not($thumb-focus-color) and $thumb-border-color {
-                $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2));
+                $thumb-focus-color: dynamic-shade(var(--thumb-border-color), $offset: 10);
             }
         } @else {
             @if not($thumb-focus-color) and $thumb-border-color {
@@ -126,7 +126,7 @@
     }
 
     @if not($track-hover-color) and $track-color {
-        $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1));
+        $track-hover-color: dynamic-shade(var(--track-color));
     }
 
     @if $variant != 'bootstrap' {
@@ -149,7 +149,7 @@
         }
     } @else {
         @if not($base-track-hover-color) and $base-track-color {
-            $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8));
+            $base-track-hover-color: dynamic-shade(var(--base-track-color), $offset: 10);
         }
     }
 
@@ -166,7 +166,7 @@
     }
 
     @if not($disabled-thumb-color) and $thumb-color {
-        $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2));
+        $disabled-thumb-color: hsl(from dynamic-shade(var(--thumb-color), $offset: 10) h calc(s * 0.5) l);
     }
 
     @if not($thumb-disabled-border-color) and $thumb-border-color {

package/sass/themes/components/splitter/_splitter-theme.scss

@@ -58,7 +58,7 @@
 
     @if $variant != 'indigo' {
         @if not($focus-color) and $bar-color {
-            $focus-color: hsl(from var(--bar-color) h s calc(l * 0.7));
+            $focus-color: dynamic-shade(var(--bar-color), $offset: 10);
         }
     } @else {
         @if not($focus-color) and $bar-color {

package/sass/themes/components/stepper/_stepper-theme.scss

@@ -193,11 +193,11 @@
 
     // default step
     @if not($step-hover-background) and $step-background {
-        $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
+        $step-hover-background: dynamic-shade(var(--step-background), $offset: 10);
     }
 
     @if not($step-focus-background) and $step-background {
-        $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
+        $step-focus-background: dynamic-shade(var(--step-background));
     }
 
     @if not($indicator-background) and $step-background {
@@ -242,15 +242,15 @@
     }
 
     @if not($current-step-hover-background) and $current-step-background {
-        $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
+        $current-step-hover-background: dynamic-shade(var(--current-step-background), $offset: 10);
     }
 
     @if not($current-step-focus-background) and $current-step-background {
-        $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
+        $current-step-focus-background: dynamic-shade(var(--current-step-background));
     }
 
     @if not($current-indicator-background) and $current-step-background {
-        $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
+        $current-indicator-background: dynamic-shade(var(--current-step-background), $offset: 20);
     }
 
     @if not($current-indicator-outline) and $current-indicator-background {
@@ -291,11 +291,11 @@
     }
 
     @if not($invalid-step-hover-background) and $invalid-step-background {
-        $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
+        $invalid-step-hover-background: dynamic-shade(var(--invalid-step-background), $offset: 8);
     }
 
     @if not($invalid-step-focus-background) and $invalid-step-background {
-        $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
+        $invalid-step-focus-background: dynamic-shade(var(--invalid-step-background));
     }
 
     @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
@@ -340,11 +340,11 @@
     }
 
     @if not($complete-step-hover-background) and $complete-step-background {
-        $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
+        $complete-step-hover-background: dynamic-shade(var(--complete-step-background), $offset: 8);
     }
 
     @if not($complete-step-focus-background) and $complete-step-background {
-        $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
+        $complete-step-focus-background: dynamic-shade(var(--complete-step-background));
     }
 
     @if not($complete-indicator-background) and $complete-step-background {

package/sass/themes/components/switch/_switch-theme.scss

@@ -101,11 +101,11 @@
 
     @if $variant == 'material' {
         @if not($track-off-color) and $thumb-off-color {
-            $track-off-color: hsl(from var(--thumb-off-color) h s calc(l * 0.5));
+            $track-off-color: dynamic-shade(var(--thumb-off-color), $offset: 20);
         }
 
         @if not($thumb-off-color) and $track-off-color {
-            $thumb-off-color: hsl(from var(--track-off-color) h s calc(l * 1.3));
+            $thumb-off-color: dynamic-shade(var(--track-off-color), $offset: 20);
         }
 
         @if not($thumb-disabled-color) and $thumb-off-color {
@@ -113,15 +113,15 @@
         }
 
         @if not($track-on-color) and $thumb-on-color {
-            $track-on-color: hsl(from var(--thumb-on-color) h s calc(l * 1.3));
+            $track-on-color: dynamic-shade(var(--thumb-on-color), $offset: 20);
         }
 
-        @if not($track-on-hover-color) and $track-on-color {
-            $track-on-hover-color: var(--track-on-color);
+        @if not($thumb-on-color) and $track-on-color {
+            $thumb-on-color: dynamic-shade(var(--track-on-color), $offset: 20);
         }
 
-        @if not($thumb-on-color) and $track-on-color {
-            $thumb-on-color: hsl(from var(--track-on-color) h s calc(l * 0.6));
+        @if not($track-on-hover-color) and $track-on-color {
+            $track-on-hover-color: var(--track-on-color);
         }
 
         @if not($thumb-on-disabled-color) and $thumb-on-color {
@@ -141,15 +141,15 @@
         }
 
         @if not($border-hover-color) and $track-off-color {
-            $border-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9);
+            $border-hover-color: dynamic-shade(var(--track-off-color));
         }
 
         @if not($border-hover-color) and $border-color {
-            $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8));
+            $border-hover-color: dynamic-shade(var(--border-color));
         }
 
         @if not($thumb-off-hover-color) and $thumb-off-color {
-            $thumb-off-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9);
+            $thumb-off-hover-color: dynamic-shade(var(--thumb-off-color));
         }
 
         @if not($thumb-on-color) and $track-on-color {
@@ -157,7 +157,7 @@
         }
 
         @if not($track-on-hover-color) and $track-on-color {
-            $track-on-hover-color: hsl(from var(--track-on-color) h s calc(l * 0.9));
+            $track-on-hover-color: dynamic-shade(var(--track-on-color));
         }
 
         @if not($border-on-color) and $track-on-color {
@@ -165,7 +165,7 @@
         }
 
         @if not($border-on-hover-color) and $border-on-color {
-            $border-on-hover-color: hsl(from var(--border-on-color) h s calc(l * 0.9));
+            $border-on-hover-color: dynamic-shade(var(--border-on-color));
         }
 
         @if not($thumb-disabled-color) and $thumb-off-color {
@@ -182,7 +182,7 @@
 
         @if $variant == 'bootstrap' {
             @if not($focus-fill-color) and $track-on-color {
-                $focus-fill-color: hsl(from var(--track-on-color) h s calc(l * 1.2));
+                $focus-fill-color: dynamic-shade(var(--track-on-color), $offset: 8);
             }
 
             @if not($focus-outline-color) and $focus-fill-color {
@@ -190,7 +190,7 @@
             }
 
             @if not($focus-fill-hover-color) and $focus-fill-color {
-                $focus-fill-hover-color: hsl(from var(--focus-fill-color) h s calc(l * 0.9));
+                $focus-fill-hover-color: dynamic-shade(var(--focus-fill-color));
             }
         }
 

package/sass/themes/components/tabs/_tabs-theme.scss

@@ -82,7 +82,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     @if not($item-active-background) and $item-background {
-        $item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
+        $item-active-background: dynamic-shade(var(--item-background));
     }
 
     @if not($item-background) {
@@ -150,7 +150,7 @@
     }
 
     @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 $variant == 'bootstrap' {
@@ -188,7 +188,7 @@
         }
 
         @if not($button-hover-background) and $item-background {
-            $button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+            $button-hover-background: dynamic-shade(var(--item-background));
         }
     } @else if not($button-background) {
         @if $variant != 'material' {
@@ -197,7 +197,7 @@
             }
 
             @if not($button-hover-color) and $button-color {
-                $button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9));
+                $button-hover-color: dynamic-shade(var(--button-color));
             }
 
             @if not($button-disabled-color) and $button-color {
@@ -208,7 +208,7 @@
 
     @if $button-background {
         @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));
         }
     }
 

package/sass/themes/components/tree/_tree-theme.scss

@@ -72,7 +72,7 @@
     }
 
     @if not($background-selected) and $background {
-        $background-selected: hsl(from var(--background) h s calc(l * 0.9));
+        $background-selected: dynamic-shade(var(--background));
     }
 
     @if not($hover-color) and $background {
@@ -80,7 +80,7 @@
     }
 
     @if not($hover-selected-color) and $background-selected {
-        $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
+        $hover-selected-color: dynamic-shade(var(--background-selected));
     }
 
     @if not($foreground-selected) and $background-selected {
@@ -88,7 +88,7 @@
     }
 
     @if not($background-active) and $background {
-        $background-active: hsl(from var(--background) h s calc(l * 0.9));
+        $background-active: dynamic-shade(var(--background));
     }
 
     @if not($foreground-active) and $background-active {
@@ -96,7 +96,7 @@
     }
 
     @if not($background-active-selected) and $background-active {
-        $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
+        $background-active-selected: dynamic-shade(var(--background-active));
     }
 
     @if not($foreground-active-selected) and $background-active-selected {