igniteui-theming 3.1.1-beta.1 → 3.2.0-beta.1

package/package.json

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

@@ -91,7 +91,7 @@ $dark-bootstrap-list: extend(
 /// Generates a dark indigo list schema
 /// @type {Map}
 /// @prop {Map} header-text-color [contrast-color: 'surface'] - The list header text color.
-/// @prop {Map} item-background-hover [color: ('primary')] - The list item hover background.
+/// @prop {Map} item-background-hover [color: ('primary', 500, .5)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
 /// @requires $indigo-list
 $dark-indigo-list: extend(
@@ -104,6 +104,8 @@ $dark-indigo-list: extend(
         item-background-hover: (
             color: (
                 'primary',
+                500,
+                0.5,
             ),
         ),
 

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

@@ -14,6 +14,7 @@
 /// @type {Map}
 /// @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.
 $base-dark-tree: (
     background-active: (
         color: (
@@ -49,6 +50,7 @@ $dark-tree: extend($light-tree, $base-dark-tree);
 /// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
 /// @prop {Map} background-active-selected [color: ('gray', 200)] - The background color used for the active selected tree node.
 /// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
+/// @prop {Map} hover-color [color: ('gray', 200, .5)] - The background color used for the tree node on hover.
 /// @requires $fluent-tree
 /// @requires $base-dark-tree
 $dark-fluent-tree: extend(
@@ -97,6 +99,7 @@ $dark-fluent-tree: extend(
 
 /// Generates a dark bootstrap tree schema.
 /// @type {Map}
+/// @prop {Map} hover-color [color: ('gray', 500, .3)] - The background color used for the tree node on hover.
 /// @requires $bootstrap-tree
 /// @requires $base-dark-tree
 $dark-bootstrap-tree: extend(
@@ -115,6 +118,7 @@ $dark-bootstrap-tree: extend(
 
 /// Generates a dark indigo tree schema.
 /// @type {Map}
+/// @prop {Map} hover-color [color: ('primary', 200, .5)] - The background color used for the tree node on hover.
 /// @requires $indigo-tree
 /// @requires $base-dark-tree
 $dark-indigo-tree: extend(

package/sass/themes/schemas/components/elevation/_card.scss

@@ -4,34 +4,10 @@
 /// @access public
 ////
 
-/// @type Map
-/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
-$default-elevation-card: (
-    resting-elevation: 2,
-    hover-elevation: 8,
-);
-
-/// @type Map
-/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
-$flat-card: (
-    resting-elevation: 0,
-    hover-elevation: 0,
-);
-
-/// @type Map
-/// @requires {Map} $flat-card
-$fluent-elevation-card: $flat-card;
-
-/// @type Map
-/// @requires {Map} $flat-card
-$bootstrap-elevation-card: $flat-card;
-
 /// @type Map
 /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
-$indigo-elevation-card: (
+$default-elevation-card: (
     resting-elevation: 4,
     hover-elevation: 6,
 );

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

@@ -16,8 +16,8 @@
 /// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 700)] - The text color of the card buttons.
 /// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
-/// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $default-elevation-card
 $light-card: extend(
@@ -76,14 +76,10 @@ $light-card: extend(
 /// Generates a fluent card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
-/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
-/// @requires {Map} $fluent-elevation-card
 $fluent-card: extend(
     $light-card,
-    $fluent-elevation-card,
     (
         outline-color: (
             color: (
@@ -110,13 +106,9 @@ $fluent-card: extend(
 /// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
 /// @prop {Map} content-text-color [color: ('gray', 800)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
-/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @requires {Map} $light-card
-/// @requires {Map} $bootstrap-elevation-card
 $bootstrap-card: extend(
     $light-card,
-    $bootstrap-elevation-card,
     (
         background: (
             contrast-color: (
@@ -169,14 +161,10 @@ $bootstrap-card: extend(
 /// @prop {Map} subtitle-text-color [color: ('gray', 500)] - The text color of the card subtitle.
 /// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
-/// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
-/// @requires {Map} $indigo-elevation-card
 $indigo-card: extend(
     $light-card,
-    $indigo-elevation-card,
     (
         outline-color: (
             color: (

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

@@ -14,6 +14,7 @@
 /// @prop {Map} title-color [color: ('gray', 900)] - The dialog title text color.
 /// @prop {Map} message-color [color: ('gray', 600)] - The dialog message text color.
 /// @prop {Color} border-color [transparent] - The border color for dialog component.
+/// @prop {Map} backdrop [color: ('gray', 50, .54)] - The dialog backdrop color.
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @requires {Map} $default-elevation-dialog
@@ -40,6 +41,14 @@ $light-dialog: extend(
 
         border-color: transparent,
 
+        backdrop: (
+            color: (
+                'gray',
+                500,
+                0.54,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
                 rem(4px),
@@ -52,12 +61,21 @@ $light-dialog: extend(
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
+/// @prop {Map} backdrop [color: ('gray', 900, .4)] - The dialog backdrop color.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
 /// @requires {Map} $light-dialog
 $fluent-dialog: extend(
     $light-dialog,
     (
+        backdrop: (
+            color: (
+                'gray',
+                900,
+                0.4,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
                 rem(2px),

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

@@ -21,7 +21,8 @@
 /// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
 /// @prop {Map} foreground-active-selected [contrast-color: ('secondary', 300)] - The color used for the content of the active selected tree node.
 /// @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} 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} 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.
 $light-tree: (
@@ -188,6 +189,7 @@ $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,
@@ -244,6 +246,7 @@ $bootstrap-tree: extend(
 /// @prop {Map} background-active-selected [color: ('primary', 400)] - The background color used for the active selected tree node.
 /// @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.
 /// @requires {Map} $light-tree
 $indigo-tree: extend(
     $light-tree,