igniteui-theming 7.1.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "7.1.0",
+  "version": "7.2.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/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/_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),