igniteui-theming 3.3.1 → 3.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "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/schemas/components/dark/_tree.scss

@@ -15,6 +15,7 @@
 /// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
 /// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
 /// @prop {Map} hover-color [color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('gray', 50, .1)] - The background color used for the selected tree node on hover.
 $base-dark-tree: (
     background-active: (
         color: (
@@ -35,13 +36,32 @@ $base-dark-tree: (
             0.1,
         ),
     ),
+    hover-selected-color: (
+        color: (
+            'gray',
+            50,
+            0.1,
+        ),
+    ),
 );
 
 /// Generates a dark tree schema.
 /// @type {Map}
 /// @requires $light-tree
 /// @requires $base-dark-tree
-$dark-tree: extend($light-tree, $base-dark-tree);
+$dark-tree: extend(
+    $light-tree,
+    $base-dark-tree,
+    (
+        hover-color: (
+            color: (
+                'gray',
+                200,
+                0.5,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent tree schema.
 /// @type {Map}

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

@@ -13,7 +13,7 @@
 /// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
 /// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
-/// @prop {Number} default-size [2] - The default size used for the avatar component.
+/// @prop {Number} default-size [1] - The default size used for the avatar component.
 $light-avatar: (
     background: (
         color: (
@@ -37,19 +37,14 @@ $light-avatar: (
             rem(88px),
         ),
     ),
-    default-size: 2,
+    default-size: 1,
 );
 
 /// Generates a fluent avatar schema.
 /// @type {Map}
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$fluent-avatar: extend(
-    $light-avatar,
-    (
-        default-size: 1,
-    )
-);
+$fluent-avatar: $light-avatar;
 
 /// Generates a bootstrap avatar schema.
 /// @type {Map}
@@ -74,7 +69,6 @@ $bootstrap-avatar: extend(
             ),
         ),
         border-radius: rem(4px),
-        default-size: 1,
     )
 );
 
@@ -82,9 +76,4 @@ $bootstrap-avatar: extend(
 /// @type {Map}
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
 /// @requires {Map} $light-avatar
-$indigo-avatar: extend(
-    $light-avatar,
-    (
-        default-size: 1,
-    )
-);
+$indigo-avatar: $light-avatar;

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

@@ -12,7 +12,7 @@
 /// @prop {Color} color ["'currentColor'"] - The icon color.
 /// @prop {Color} disabled-color ["'currentColor'"] - The disabled icon color.
 /// @prop {List} size [(rem(18px), rem(20px), rem(24px))] - The size used for the icon.
-/// @prop {Number} default-size [2] - The default size used for the icon component.
+/// @prop {Number} default-size [3] - The default size used for the icon component.
 $light-icon: (
     color: "'currentColor'",
     disabled-color: "'currentColor'",
@@ -23,7 +23,7 @@ $light-icon: (
             rem(24px),
         ),
     ),
-    default-size: 2,
+    default-size: 3,
 );
 
 /// Generates a fluent icon schema.

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

@@ -23,6 +23,7 @@
 /// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
 /// @prop {Map} drop-area-color [color: ('secondary')] - The background color used for the tree node drop aria.
 /// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
 /// @prop {Map} border-color [color: ('secondary')] - The outline shadow color used for tree node in focus state.
 /// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
 /// @prop {Number} default-size [2] - The default size used for the tree component.
@@ -103,6 +104,13 @@ $light-tree: (
             0.1,
         ),
     ),
+    hover-selected-color: (
+        color: (
+            'gray',
+            900,
+            0.1,
+        ),
+    ),
     size: (
         sizable: (
             rem(32px),
@@ -191,7 +199,6 @@ $fluent-tree: extend(
 /// @prop {Map} background-active-selected [color: ('primary', 600)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 600)] - The color used for the content of the active selected tree node.
 /// @prop {Map} border-color [color: ('primary', 200)] - The outline shadow color used for tree node in focus state.
-/// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
 /// @requires $light-tree
 $bootstrap-tree: extend(
     $light-tree,
@@ -229,13 +236,6 @@ $bootstrap-tree: extend(
                 'primary' 200,
             ),
         ),
-        hover-color: (
-            color: (
-                'gray',
-                900,
-                0.1,
-            ),
-        ),
     )
 );
 
@@ -249,6 +249,7 @@ $bootstrap-tree: extend(
 /// @prop {Map} foreground-active-selected [contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node.
 /// @prop {Map} border-color [color: ('primary', 300)] - The outline shadow color used for tree node in focus state.
 /// @prop {Map} hover-color [color: ('primary', 100)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('primary', 100)] - The background color used for the selected tree node on hover.
 /// @requires {Map} $light-tree
 $indigo-tree: extend(
     $light-tree,
@@ -297,5 +298,11 @@ $indigo-tree: extend(
                 100,
             ),
         ),
+        hover-selected-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
     )
 );