igniteui-theming 22.0.0-beta.1 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "22.0.0-beta.1",
+  "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/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 {

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

@@ -86,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 {
@@ -98,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 {
@@ -110,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 {

package/sass/themes/components/chip/_chip-theme.scss

@@ -119,7 +119,7 @@
     }
 
     @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($hover-text-color) and $hover-background {
@@ -127,7 +127,7 @@
     }
 
     @if not($focus-background) and $background {
-        $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+        $focus-background: dynamic-shade(var(--background), $offset: 7);
     }
 
     @if $variant == 'fluent' {
@@ -146,7 +146,7 @@
         }
     } @else {
         @if not($selected-background) and $background {
-            $selected-background: hsl(from var(--background) h s calc(l * 1.1));
+            $selected-background: dynamic-shade(var(--background));
         }
     }
 
@@ -155,7 +155,7 @@
     }
 
     @if not($hover-selected-background) and $selected-background {
-        $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9));
+        $hover-selected-background: dynamic-shade(var(--selected-background));
     }
 
     @if not($hover-selected-text-color) and $hover-selected-background {
@@ -164,7 +164,7 @@
 
     @if $variant != 'indigo' {
         @if not($focus-selected-background) and $selected-background {
-            $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8));
+            $focus-selected-background: dynamic-shade(var(--selected-background), $offset: 7);
         }
     } @else {
         @if not($focus-selected-background) and $selected-background {
@@ -176,12 +176,12 @@
         $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
     }
 
-    @if not($hover-border-color) and $border-color {
-        $hover-border-color: var(--border-color);
+    @if not($hover-border-color) and $hover-background {
+        $hover-border-color: var(--hover-background);
     }
 
-    @if not($focus-border-color) and $border-color {
-        $focus-border-color: var(--border-color);
+    @if not($focus-border-color) and $focus-background {
+        $focus-border-color: var(--focus-background);
     }
 
     @if not($selected-border-color) and $selected-background {

package/sass/themes/components/combo/_combo-theme.scss

@@ -76,7 +76,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/expansion-panel/_expansion-panel-theme.scss

@@ -71,7 +71,7 @@
     }
 
     @if not($header-focus-background) and $header-background {
-        $header-focus-background: hsl(from var(--header-background) h s calc(l * 1.1));
+        $header-focus-background: dynamic-shade(var(--header-background));
     }
 
     @if not($body-color) and $body-background {

package/sass/themes/components/grid/_grid-theme.scss

@@ -239,7 +239,7 @@
     }
 
     @if not($header-selected-background) and $header-background {
-        $header-selected-background: hsl(from var(--header-background) h s calc(l * 0.9));
+        $header-selected-background: dynamic-shade(var(--header-background));
     }
 
     @if not($header-selected-text-color) and $header-selected-background {
@@ -271,7 +271,7 @@
     }
 
     @if not($row-hover-background) and $content-background {
-        $row-hover-background: hsl(from var(--content-background) h s calc(l * 0.85));
+        $row-hover-background: dynamic-shade(var(--content-background), $offset: 7);
     }
 
     @if not($row-hover-text-color) and $row-hover-background {
@@ -279,7 +279,7 @@
     }
 
     @if not($cell-selected-background) and $content-background {
-        $cell-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
+        $cell-selected-background: dynamic-shade(var(--content-background));
     }
 
     @if not($cell-selected-text-color) and $cell-selected-background {
@@ -287,7 +287,7 @@
     }
 
     @if not($row-selected-background) and $content-background {
-        $row-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
+        $row-selected-background: dynamic-shade(var(--content-background));
     }
 
     @if not($row-selected-text-color) and $row-selected-background {
@@ -295,7 +295,7 @@
     }
 
     @if not($row-selected-hover-background) and $row-selected-background {
-        $row-selected-hover-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
+        $row-selected-hover-background: dynamic-shade(var(--row-selected-background), $offset: 7);
     }
 
     @if not($row-selected-hover-text-color) and $row-selected-hover-background {
@@ -307,7 +307,7 @@
     }
 
     @if not($cell-selected-within-background) and $row-selected-background {
-        $cell-selected-within-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
+        $cell-selected-within-background: dynamic-shade(var(--row-selected-background), $offset: 7);
     }
 
     @if not($cell-selected-within-text-color) and $cell-selected-within-background {
@@ -343,7 +343,7 @@
     }
 
     @if not($group-row-selected-background) and $group-row-background {
-        $group-row-selected-background: hsl(from var(--group-row-background) h s calc(l * 0.8));
+        $group-row-selected-background: dynamic-shade(var(--group-row-background), $offset: 10);
     }
 
     @if not($group-label-text) and $group-row-selected-background {