igniteui-theming 19.2.1 → 19.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "19.2.1",
+  "version": "19.2.2",
   "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/switch/_switch-theme.scss

@@ -17,6 +17,7 @@
 /// @param {Color} $track-on-color [null] - The color of the track when the switch is on.
 /// @param {Color} $track-on-hover-color [null] - The color of the track when the switch is on and hovered.
 /// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off.
+/// @param {Color} $thumb-off-hover-color [null] - The color of the thumb when the switch is off and hovered.
 /// @param {Color} $track-off-color [null] - The color of the track when the switch is off.
 /// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled.
 /// @param {Color} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled.
@@ -54,6 +55,7 @@
     $track-on-hover-color: null,
 
     $thumb-off-color: null,
+    $thumb-off-hover-color: null,
     $track-off-color: null,
 
     $track-disabled-color: null,
@@ -143,6 +145,10 @@
             $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8));
         }
 
+        @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);
+        }
+
         @if not($thumb-on-color) and $track-on-color {
             $thumb-on-color: adaptive-contrast(var(--track-on-color));
         }
@@ -241,6 +247,7 @@
             track-on-hover-color: $track-on-hover-color,
 
             thumb-off-color: $thumb-off-color,
+            thumb-off-hover-color: $thumb-off-hover-color,
             track-off-color: $track-off-color,
 
             track-disabled-color: $track-disabled-color,

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

@@ -12,6 +12,7 @@
 /// Generates a dark material switch schema.
 /// @type {Map}
 /// @prop {Map} thumb-off-color [color: ('gray', 100)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [color: ('gray', 100)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
 /// @requires $material-switch
 $dark-material-switch: extend(
@@ -23,6 +24,12 @@ $dark-material-switch: extend(
                 100,
             ),
         ),
+        thumb-off-hover-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',
@@ -199,6 +206,7 @@ $dark-bootstrap-switch: extend(
 /// @prop {Map} label-hover-color [contrast-color: ('gray', 50)] - The color of the switch label on hover.
 /// @prop {Map} label-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the switch label when the switch is disabled.
 /// @prop {Map} thumb-off-color [contrast-color: ('gray', 50, .6)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [contrast-color: ('gray', 50, .8)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} thumb-on-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is on and disabled.
@@ -237,6 +245,13 @@ $dark-indigo-switch: extend(
                 0.6,
             ),
         ),
+        thumb-off-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         thumb-on-color: (
             contrast-color: (
                 'gray',

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

@@ -111,6 +111,7 @@ $light-switch: extend(
 /// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
 /// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [color: ('gray', 50)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
 /// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
@@ -147,6 +148,12 @@ $material-switch: extend(
                 50,
             ),
         ),
+        thumb-off-hover-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',
@@ -205,6 +212,7 @@ $material-switch: extend(
 /// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.
 /// @prop {Map} border-on-hover-color [color: ('primary', 800)] - The border color of the on-switch.
 /// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [color: ('gray', 900)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} track-disabled-color [contrast-color: ('primary', 800)] - The color of the track when the switch is disabled.
 /// @prop {Map} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-on-disabled-color [color: ('gray', 400)] - The color of the track when the switch is on and disabled.
@@ -235,6 +243,12 @@ $fluent-switch: extend(
                 700,
             ),
         ),
+        thumb-off-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         border-hover-color: (
             color: (
                 'gray',
@@ -327,6 +341,7 @@ $fluent-switch: extend(
 /// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
 /// @prop {Map} thumb-on-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 400)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [color: ('gray', 500)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and disabled.
@@ -398,6 +413,12 @@ $bootstrap-switch: extend(
                 400,
             ),
         ),
+        thumb-off-hover-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',
@@ -449,6 +470,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} thumb-on-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on.
 /// @prop {Map} track-on-hover-color [color: ('primary', 400)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} thumb-off-color [color: ('gray', 500)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-off-hover-color [color: ('gray', 600)] - The color of the thumb when the switch is off and hovered.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 900, .15)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 900, .4)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} track-on-disabled-color [color: ('primary', 400, .5)] - The color of the track when the switch is on and disabled.
@@ -559,6 +581,12 @@ $indigo-switch: extend(
                 500,
             ),
         ),
+        thumb-off-hover-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',