igniteui-theming 8.0.0-beta.3 → 8.0.0-beta.5

package/package.json

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

@@ -90,7 +90,7 @@ $dark-bootstrap-list: extend(
 /// Generates a dark indigo list schema.
 /// @type {Map}
 /// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
-/// @prop {Map} item-background-hover [color: ('primary', 500, .5)] - The list item hover background.
+/// @prop {Map} item-background-hover [color: ('primary', 400, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
 /// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
@@ -119,8 +119,8 @@ $dark-indigo-list: extend(
         item-background-hover: (
             color: (
                 'primary',
-                500,
-                0.5,
+                400,
+                0.3,
             ),
         ),
 

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

@@ -7,10 +7,45 @@
 /// @access public
 ////
 
+/// Generates a base dark navdrawer schema.
+/// @type {Map}
+/// @prop {Map} item-disabled-text-color [color: ('gray', 200)] - The item's disabled text color.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 200)] - The item's disabled icon color.
+/// @requires $material-navdrawer
+$dark-base-navdrawer: extend(
+    $light-navdrawer,
+    (
+        item-disabled-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
+
 /// Generates a dark material navdrawer schema.
 /// @type {Map}
+/// @prop {Map} item-disabled-text-color [color: ('gray', 300)] - The item's disabled text color.
 /// @requires $material-navdrawer
-$dark-material-navdrawer: extend($material-navdrawer);
+$dark-material-navdrawer: extend(
+    $material-navdrawer,
+    $dark-base-navdrawer,
+    (
+        item-disabled-text-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent navdrawer schema.
 /// @type {Map}
@@ -23,6 +58,7 @@ $dark-material-navdrawer: extend($material-navdrawer);
 /// @requires $fluent-navdrawer
 $dark-fluent-navdrawer: extend(
     $fluent-navdrawer,
+    $dark-base-navdrawer,
     (
         item-hover-icon-color: (
             color: (
@@ -65,6 +101,7 @@ $dark-fluent-navdrawer: extend(
 /// @requires $bootstrap-navdrawer
 $dark-bootstrap-navdrawer: extend(
     $bootstrap-navdrawer,
+    $dark-base-navdrawer,
     (
         item-hover-background: (
             color: (
@@ -87,6 +124,8 @@ $dark-bootstrap-navdrawer: extend(
 /// @prop {Map} item-hover-background [contrast-color: ('gray', 50, 0.1)] - The item's hover background color.
 /// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The item's hover text color.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50, 0.8)] - The item's hover icon color.
+/// @prop {Map} item-disabled-text-color [contrast-color: ('gray', 50, 0.2)] - The item's disabled text color.
+/// @prop {Map} item-disabled-icon-color [contrast-color: ('gray', 50, 0.2)] - The item's disabled icon color.
 /// @prop {Map} border-color [color: ('gray', 100)] - The navigation drawer right border color.
 /// @requires $indigo-navdrawer
 $dark-indigo-navdrawer: extend(
@@ -167,5 +206,21 @@ $dark-indigo-navdrawer: extend(
                 0.8,
             ),
         ),
+
+        item-disabled-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+
+        item-disabled-icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
     )
 );

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

@@ -216,23 +216,23 @@ $bootstrap-list: extend(
 /// @type {Map}
 /// @prop {Color} background [transparent] - The list background color.
 /// @prop {Color} header-background [transparent] - The list header background color.
-/// @prop {Map} header-text-color [color: ('grays', 600)] - The list header text color.
+/// @prop {Map} header-text-color [color: ('gray', 600)] - The list header text color.
 /// @prop {Color} item-background [transparent] - The list item background color.
 /// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [ color: ('primary', 300, .3)] - The active list item background color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
-/// @prop {Map} item-text-color-hover [color: ('gray', 800)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
 /// @prop {Map} item-text-color-active [color: ('gray', 800)] - The active list item text color.
 /// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
-/// @prop {Map} item-subtitle-color-hover [color: ('gray', 600)] - The list item subtitle hover color.
-/// @prop {Map} item-subtitle-color-active [color: ('gray', 600)] - The list item subtitle active color.
+/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
+/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
 /// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
-/// @prop {Map} item-action-color-hover [color: ('gray', 600)] - The list item action hover color.
-/// @prop {Map} item-action-color-active [color: ('gray', 600)] - The list item action active color.
+/// @prop {Map} item-action-color-hover [color: ('gray', 700)] - The list item action hover color.
+/// @prop {Map} item-action-color-active [color: ('gray', 700)] - The list item action active color.
 /// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
-/// @prop {Map} item-thumbnail-color-hover [color: ('gray', 600)] - The list item thumbnail hover color.
-/// @prop {Map} item-thumbnail-color-active [color: ('gray', 600)] - The list item thumbnail active color.
-/// @prop {Number} item-border-radius [0] - The border radius used for list item.
+/// @prop {Map} item-thumbnail-color-hover [color: ('gray', 700)] - The list item thumbnail hover color.
+/// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
+/// @prop {Number} item-border-radius [rem(4px)] - The border radius used for list item.
 /// @requires {Map} $light-list
 $indigo-list: extend(
     $light-list,
@@ -243,7 +243,7 @@ $indigo-list: extend(
 
         header-text-color: (
             color: (
-                'grays',
+                'gray',
                 600,
             ),
         ),
@@ -276,14 +276,14 @@ $indigo-list: extend(
         item-text-color-hover: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
 
         item-text-color-active: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
 
@@ -297,14 +297,14 @@ $indigo-list: extend(
         item-action-color-hover: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
         item-action-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
@@ -318,14 +318,14 @@ $indigo-list: extend(
         item-subtitle-color-hover: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
         item-subtitle-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
@@ -339,17 +339,17 @@ $indigo-list: extend(
         item-thumbnail-color-hover: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
         item-thumbnail-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
-        item-border-radius: 0,
+        item-border-radius: rem(4px),
     )
 );

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

@@ -11,6 +11,8 @@
 /// Generates a base light navdrawer schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
+/// @prop {Map} item-disabled-text-color [color: ('gray', 400)] - The item's disabled text color.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The item's disabled icon color.
 /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
 /// @requires {Map} $default-elevation-navdrawer
@@ -20,6 +22,18 @@ $light-navdrawer: extend(
         background: (
             color: 'surface',
         ),
+        item-disabled-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         border-radius: (
             border-radius: (
                 rem(0),
@@ -43,6 +57,7 @@ $light-navdrawer: extend(
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
+/// @prop {Map} item-disabled-text-color [color: ('gray', 500)] - The item's disabled text color.
 /// @requires {Map} $light-navdrawer
 $material-navdrawer: extend(
     $light-navdrawer,
@@ -115,6 +130,12 @@ $material-navdrawer: extend(
                 700,
             ),
         ),
+        item-disabled-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
     )
 );
 
@@ -298,6 +319,8 @@ $bootstrap-navdrawer: extend(
 /// @prop {Map} item-hover-background [color: ('gray', 900, 0.05)] - The item's hover background color.
 /// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The item's hover icon color.
+/// @prop {Map} item-disabled-text-color [color: ('gray', 900, 0.2)] - The item's disabled text color.
+/// @prop {Map} item-disabled-icon-color [color: ('gray', 900, 0.2)] - The item's disabled icon color.
 /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
@@ -377,6 +400,21 @@ $indigo-navdrawer: extend(
             ),
         ),
 
+        item-disabled-text-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        item-disabled-icon-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+
         item-border-radius: (
             border-radius: (
                 rem(4px),